Tutorial Angular.js – Criando um sistema de notícias (Introdução)

Há muito tempo não escrevo artigos técnicos para nosso blog.

Longe de ser por falta de vontade, a dinâmica do empreendedorismo muitas vezes nos força a fazer muito mais o que é preciso ser feito do que apenas o que te da prazer.
Continue lendo

Como criar um formulário com o Contact form 7 (plugin wordpress)

O Contact form 7 é um plugin gratuito para WordPress que possibilita criar formulários de contato de uma maneira muito simples e funcional, ele conta com diversas opções que lhe permite criar campos dos mais variáveis tipos como “text”, “email”, “tel”, “menu suspenso” entre muitos outros.

O plugin  permite criar um e-mail automático (auto responder) para cada formulário, além de aceitar html, css e o framework bootstrap para customizar os seus formulários além de muitas outras funcionalidades.

Nesse tutorial iremos aprender a:

  1. criar um formulário estilizado;
  2. configurar e-mails automático (auto responder) para o remetente;
  3. Configurar mensagens e redirect após cadastro;
  4. configurar SMTP do e-mail;
  5. e fazer com que após clicar em enviar o usuário seja redirecionado para uma página de “Obrigado pelo contato”.

Instalando o plugin

A primeira coisa a ser feita é instalar o plugin no seu wordpress, acesse o link de download (Baixar plugin Contact Form 7) ou se preferir acesse o menu “Plugin” em seu wordpress, clique em “adicionar novo” e pesquise por Contact form 7, agora é só instalar e ativar o plugin.

Baixar e instalar o plugin Contact Form 7

Adicionando um novo formulário

Com o plugin instalado basta parar o mouse em cima da opção “Form contato” localizada no menu principal do WP e clicar na opção “Adicionar novo”.

Adicionar novo formulário

Tela principal CF7

Bem vindo a tela principal do Contact form 7, a imagem a seguir explica um pouco sobre as opções principais do plugin.

Tela inicial CF7

Está gostando deste turorial? Que tal se cadastrar em nossa newsletter para receber mais tutoriais relevantes sobre wordpress em seu e-mail.

Agora que você já conhece um pouco das configurações gerais do Contact form 7, vamos definir os nomes e tipos de cada campo que irão compor o nosso formulário.

O form conterá seis campos que serão:

  • “Nome” (tipo texto);
  • “E-mail” (tipo email);
  • “Telefone” (tipo tel);
  • “Estado” (tipo menu suspenso);
  • “Assunto” (tipo texto);
  • e “Mensagem” (tipo textarea).

Apague todo o conteúdo do formulário padrão deixando apenas o botão de enviar [submit “enviar”].

Vamos começar criando os títulos de cada campo.

1 – Criando seu formulário do zero

Para criar os títulos, basta um inserir “label”  para cada campo da seguinte forma.

<label>Nome</label>

<label>E-mail</label>

<label>Telefone</label>

<label>Estado</label>

<label>Assunto</label>

<label>Mensagem</label>

Depois de definir os títulos é hora de definir o tipo de cada campo. Para isso basta você escolher o tipo de cada campo na lista de tipo de campos. Para deixar o tutorial mais simples, vamos configurar apenas o nome do campo e se ele será obrigatório ou não.

É muito importante definir os tipos corretos para campo pois assim o próprio plugin insere algumas validações como por exemplo se o email não conter @ ou . (ponto) quando o usuário enviar o formulário irá aparecer uma mensagem informando que o campo não foi preenchido corretamente.

Os campos nome, email, telefone, assunto e mensagem seguirão a mesma formatação. Fica a seu critério definir quais campos serão obrigatórios ou não.

O campo Estado que será do tipo “lista suspensa” terá a seguinte formatação:

Depois dos campos inseridos, a sua tela de configuração de formulário estará parecida com a da imagem abaixo.

*Lembrando que os campos com um asterisco * informam para o Contact form 7 que esse campo é obrigatório. Caso ele fique me branco, uma mensagem é exibida para o usuário. Para melhor identificação do usuário insira um * na frente do título de cada campo obrigatório.

Primeira parte concluída!  Clique em salvar e depois na aba “Mail”.

2 – Configurando os e-mails de resposta automática

A segunda parte do tutorial consiste em configurar o e-mail, a forma como o formulário será mostrado para o destinatário e criar um e-mail automático para ser enviado ao remetente confirmando que o e-mail foi enviado com sucesso.

Para deixar o tutorial mais real eu irei utilizar o meu e-mail para mostrar como funciona o recebimento do e-mail. Sinta-se a vontade para me enviar um e-mail caso tenha alguma dúvida, terei o maior prazer em ajudar.

A imagem abaixo mostra a função dos quatro primeiros campos de configurações do e-mail que será entregue para o destinatário.

Agora vamos configurar o corpo do e-mail que será entregue ao destinatário. A imagem a seguir mostra um exemplo de layout:

Muito bem, o e-mail que será enviado para o destinatário já está configurado.

Chegou a hora de configurar a resposta automática que será enviada para o e-mail do usuário.

Marque a opção Mail (2)  e vamos começar a terceira etapa do tutorial.

A imagem a seguir mostra um exemplo de como configurar uma resposta automática com o Contact form 7.

Lembre-se marcar a opção “Usar tipo de conteúdo HTML”.

Clique em salvar.

Caso apareça a mensagem “Este endereço de email não pertence ao mesmo domínio do site”, ignore-a.

3 – Configurando a aba mensagens e redirect pós cadastro (atualizado)

Clique na aba “Mensagens”. Nessa aba você pode substituir as mensagens que vem por padrão, por mensagens personalizadas. Não vou aprofundar nessa parte porque é bem intuitiva. Segue imagem:

Clique na aba configurações gerais e vamos configurar para onde o usuário será levado assim que ele enviar o contato, eu irei direcionar para a página inicial da Agência Nano Incub.

Insira o seguinte comando:

on_sent_ok: “location = ‘https://www.nanoincub.com.br’;”

*Atenção*

O método acima não funciona mais para redirect!

Por isso você vai ter que utilizar o seguinte método:

<script>
document.addEventListener(‘wpcf7mailsent’, function (event) {
location = ‘//nanoincub.com.br/’;
}, false);
</script>

Insira o comando acima dentro do seu formulário, localizado na primeira aba do plugin.

Insira um titulo para o seu formulário e clique em salvar.

4 – Configurações de SMTP

Configurações de e-mail realizadas, agora vamos configurar o SMTP do e-mail que irá receber o formulário de contato, para facilitar o processo instale o plugin – Easy WP-SMTP.

Link para download Easy WP-SMTP – https://br.wordpress.org/plugins/easy-wp-smtp/

Ou se preferir faça o download, instale e ative diretamente do wordpress.

Plugin instalado? Então vamos continuar =D

Pare o mouse na opção “Configurações” no menu principal do WordPress e clique em Easy-wp-smtp

O painel principal do plugin será exibido, vamos inserir as configurações de smtp.

Vamos entender o que faz cadas campo:

From Email Address – Email que aparecerá como remetente nas mensagems de contato (lembre-se de colocar uma e-mail profissional “email@seusite.com.br“, pois é mais fácil configurar as portas SMTP. No caso de gmail ou outros e-mails públicos, as portas são diferentes);

From Name – Nome do remetente que aparecerá na mensagem de contato;

SMTP Host – Informar o SMTP da empresa. smtp.dominiodaempresa.com.br;

Type of Encription – Deixa “NONE”;

SMTP Port – Porta padrão 587;

SMTP Authentication – YES;

SMTP username – Email que irá receber os formulários (deve ser do mesmo domínio utilizado acima ” email@seusite.com.br“);

SMTP Password – Senha do email.

Segue imagem de um exemplo:

Observações importantes:

Lembre-se de configurar o mesmo e-mail no Plugin de SMTP (configurado acima) com o e-mail utilizado no formulário do contact form, pois o e-mail que receberá o contato será o utilizado no formulário do Contact Form 7.

Eu aconselho fielmente que você teste o e-mail, é rápido e te passa a segurança de que realmente vai funcionar.

Para testar, basta salvar as configurações e preencher os campos:

To: e-mail do destinatário (pode ser qualquer e-mail que você tenha acesso)

Subject: um assunto qualquer

Message: uma mensagem de teste

Agora é só clicar em “Send Test Email”

Acesse o e-mail e veja se foi enviado o e-mail de teste.

Segue imagem de recebimento do meu e-mail de teste:

Vamos ver como ficou o nosso formulário, para inserir o formulário em uma página, basta acessar o Contact form 7 e clicar no nome do formulário que você acabou de criar. Copie o shortcode que mostra no topo da página, algo parecido com este aqui – [contact-form-7 404 "Não encontrado"], navegue até a página que deseja inserir o form e cole o código no corpo da página. Salve a página e veja o resultado

O meu ficou assim:

Agora vamos testar, preencha o campo E-mail com um e-mail válido que você tenha a senha para ver se foi enviado a resposta automática.

Resultado:

Enviei a mensagem e fui redirecionado para página que foi configurada para redirecionar o usuário.

E-mail enviado para o destinatário:

Resposta automática:

CALMA CALMA ! Ainda não acabou, é hora da “CEREJA DO BOLO”

Eu não vou aprofundar no assunto pois não é o foco do tutorial, mas vou dar um norte para você de como otimizar o layout do formulário com o BOOTSTRAP.

*Lembrando que para funcionar perfeitamente o que vou mostrar é necessário que o tema que você está utilizando seja desenvolvido com Bootstrap, o que é utilizado em grande parte dos temas.

Entre novamente na aba “Formulário” do Contact form 7 e analise o código a seguir e adapte com o que você criou anteriormente ( após o código terá uma breve descrição sobre o que está sendo feito).

Encare isso como um pequeno desafio para você de puxar e aprender mais.

<div class=”row”>

<div class=”col-md-6″>

<div class=”form-group”>

<label> Nome *</label>

[text* nome class:form-control]

</div>

</div>

<div class=”col-md-6″>

<div class=”form-group”>

<label> E-mail *</label>

[email* email class:form-control]

</div>

</div>

<div class=”col-md-6″>

<div class=”form-group”>

<label> Telefone</label>

[tel telefone class:form-control]

</div>

</div>

<div class=”col-md-6″>

<div class=”form-group”>

<label>Estado</label>

[select* uf include_blank “MG” “RJ” “SC” “SP”]

</div>

</div>

<div class=”col-md-12″>

<div class=”form-group”>

<label> Assunto</label>

[text* assunto class:form-control]

</div>

</div>

<div class=”col-md-12″>

<div class=”form-group”>

<label> Sua mensagem</label>

[textarea* mensagem x5 class:form-control]

[submit “Enviar”]

</div>

</div>

</div>

Um pouco sobre as principais classes do código acima, como disse é apenas um norte:

* class:form-control – Classe padrão bootstrap para campos de formulário. Deixa a aparência mais amigável.

* <div class=”form-group”> | Classe bootstrap para estilizar como um grupo os campos, formatando para inserção de novos campos já com padding, margin e outras propriedades.

* [textarea sua-mensagem x5 class:form-control]  | O x5 informa que a altura do textarea será de 5 linhas. Se fosse dizer que a largura seria de 5 colunas seria 5x

Resultado:

E assim chegamos ao fim do tutorial onde expliquei e ensinei as principais funcionalidades do plugin para wordpress Contact form 7.

Espero que este tutorial tenha lhe ajudado, qualquer dúvida estou à disposição. Um abraço!

Veja o Tutorial completo de Contact Form 7 Atualizado e em vídeo.

[cta id=”5380″]

PhoneGap tutorial – Iniciando um projeto (completo)

Neste tutorial de PhoneGap/cordova será apresentado o Framework PhoneGap com todas as instruções para a preparação de seu ambiente para o desenvolvimento utilizando as tecnologias HTML, CSS, e JavaScript. O objetivo é ensinar a configurar um ambiente para iniciar um projeto PhoneGap. E depois que você estiver dominando o Phonegap, indico que leia também o tutorial introdutório sobre Ionic que o Maurílio criou.

Este artigo se resume em:

  • O que é PhoneGap.
  • Como instalar Android SKD
  • Como instalar Ant Apache
  • Como instalar Node.js
  • Como instalar PhoneGap
  • Rodando um projeto Demo.

Para a execução deste tutorial de Phonegap você precisará de de algumas ferramentas:um editor de código, um Browser moderno (Chrome/Firefox/etc) e um bom conhecimento em HTML, CSS e Javascript.

O que é PhoneGap?

Já pensou o trabalho que seria ter que criar um aplicativo e disponibilizar para todas as plataformas, seja elas Android, IOS, Windows Phone, etc.?

Teríamos que aprender como cada plataforma trabalha, sem contar que teríamos que desenvolver o mesmo para cada plataforma, só de imaginar o trabalho que seria dá até um frio na barriga. E se existisse uma maneira de desenvolver um único aplicativo e que rodasse em todas as plataformas? Pois bem, esse é um dos motivos pelo qual o PhoneGap vem crescendo a cada dia.

O PhoneGap (também conhecido como Cordova) é um framework voltado para o desenvolvimento de aplicações para dispositivos móveis que permite desenvolver aplicações utilizando as tecnologias Javascript, HTML5, CSS3. Ele é multiplataforma e da suporte a alguns recursos bastante importante , tais como: Accelerometer, camera, compass, contacts, geolocation, notification (alert / sound / vibration, storage, media e network).

A tabela abaixo mostra a compatibilidade dos recursos para cada plataforma.

Uma das vantagens do Phonegap é que por se tratar de um web app, você poderá testar seu app diretamente no seu browser, sem precisar compilar o projeto e emular em uma AVD ou rodar diretamente no seu celular a cada alteração feita.

Aprenda a instalar o Ionic também

Para ampliar ainda mais seus estudos, nosso programador front-end Maurílio Novais criou um novo tutorial sobre Ionic.

Leia agora!

Leia o tutorial de Ionic

Instalando um ambiente para rodar o Phonegap (Android SKD)

Para que possamos dar inicio a um projeto, primeiro precisamos ter um ambiente para o desenvolvimento.

  • O primeiro passo é realizar o download do SDK do Android no site: http://developer.android.com/sdk/index.html.
  • Após fazer download, faça a instalação do mesmo.
  • Depois de realizar a instalação, procure pelo SDK Manager na pasta onde realizou a instalação do SDK Android e realize as atualizações necessárias.

Instalando Ant Apache

Para que possamos desenvolver para Android é preciso ter o Apache Ant instalado.

O Apache Ant é uma ferramenta utilizada para automatizar a construção de software. Ela é escrita na linguagem Java e foi desenvolvida inicialmente para ser utilizada em projetos desta linguagem.

A ferramenta Ant é um projeto da Apache Software Foundation. É um software livre, licenciado sob a licença Apache.

  • Primeiro baixe a distribuição binária do Apache Ant no site: http://ant.apache.org/bindownload.cgi
  • Depois descompacte o Apache Ant em qualquer lugar, no meu caso descompactei na raiz do disco D.

Está gostando deste artigo?

Coloque seu e-mail abaixo e fique atualizado com nossas novidades.

CADASTRE EM NOSSA LISTA DE PROGRAMADORES

[mailmunch-form id=”610647″]

Configurando Variáveis de Ambiente

Feita a instalação e a atualização do Android SDK e a instalação  do Apache Ant. É necessário  configurar as variáveis de ambiente.

 

  • Vá em Propriedades do Sistema -> Aba Avançado -> Váriáveis de Ambiente -> Em Váriáveis do Sistema

Ou

  • Tecle Tecla Windows + Pause Break > Configurações Avançadas do sistema > Variáveis de Ambiente

 

  • Crie uma variável chamada ANDROID_HOME e em seu valor informe a pasta no qual o SDK foi instalado.
  • Depois crie uma variável chamada ANT_HOME e em seu valor informe a pasta no qual o Apache Ant foi instalado.
  • Agora procure pela variável PATH e clique em editar
  • Em seu valor adicione a seguinte string:%ANT_HOME%bin;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools;

Até aqui já temos um ambiente pronto para desenvolver um app para android, agora iremos  instalar as ferramentas necessárias para utilizar o PhoneGap.

Instalando Node.js

Faça download do Node.js no site: http://nodejs.org/download/

Depois faça a instalação do mesmo.

Para verificar se a instalação foi feita corretamente abra Prompt de comando e digite :

node –v

Deverá aparece a versão do nodejs instalado em sua maquina conforme mostra a figura a seguir;

Criando um projeto PhoneGap

Agora estamos chegando na parte mais interessante do tutorial, logo abaixo iremos iniciar um projeto de PhoneGap!

Com o Node.js instalado corretamente em sua maquina, abra o Prompt de comando e digite o comando para instalar o Cordova CLI:

– npm install –g cordova

Vá para um diretório onde você irá armazenar seus projetos. Por  exemplo:

– cd ~/Projetos

Crie um projeto chamado “helloword”:

– cordova create helloword br.yourname.helloword Helloword

Entre na pasta do projeto criado:

– cd helloword

Adicione a plataforma que você queira desenvolver. No nosso caso  será para a plataforma Android.

– cordova platforms add android

Agora iremos adicionar alguns plugins básicos para o nosso projeto, ainda na pasta do projeto digite:

– cordova plugin add org.apache.cordova.device

– cordova plugin add org.apache.cordova.console

Verifique a estrutura do projeto criado, na pasta plugins devem conter duas pastas, uma para cada plugin instalado anteriormente e na pasta platforms a pasta android referente à plataforma instalada.

Rodando o projeto

Pronto agora nosso projeto de PhoneGap já pode ser rodado, para que possamos rodar esse projeto conecte um dispositivo Android em seu computador usando um cabo USB, entre na pasta platforms e digite:

– cordova run android

Mas caso você queira rodar seu app em um emulador Android, digite:

– cordova emulate android

E se você achar mais prático testar em seu próprio browser, vá na pasta www de seu projeto e abra o arquivo index.php no navegador de sua escolha.

Há alguns emuladores de dispositivos móveis que rodam em alguns browsers modernos que nos permite utilizar recursos como Accelerometer, compass, etc. Um deles é o Ripple Emulate do Chrome, ele ainda está na fase Beta mas oferece bastante recursos, facilitando assim a nossa vida.

Também desenvolvemos app mobile, caso esteja interessado entre em contato com nossa equipe.

Página oficial do PhoneGap: http://phonegap.com/