Como fazer um APP em 1 dia!
Quer tirar uma ideia da cabeça mas não quer gastar tempo nem dinheiro para testá-la?
Segue aqui uma receitinha básica com ferramentas práticas que vão lhe ajudar a publicar um aplicativo mínimo que pode ser feito por uma única pessoa em algumas horas!
** E atenção! Tem certificado no final do tutorial! **
Primeiro, um spoiler da arquitetura que vamos usar. Não se preocupe se não estiver entendendo tudo logo de cara. Vamos guiar passo a passo por cada um dos pontos apresentados.
A sequência a seguir contém os passos do processo, que depois serão detalhados separadamente já com o código pronto para copiar e colar.
- Código fonte no GitHub
- Editor de código na Cloud - Gitpod
- Linguagem de alto nível - Python
- Frontend Materialized
- HTML, CSS, JavaScript
- Host na cloud - Heroku
- BigData básico - MongoDB
- API Endpoints
EXTRAS:
- Plugins de Autenticação
- Mapa + Localização
- CERTIFICADO!
Para esse tutorial você vai precisar de cadastro nas seguintes plataformas: GitHub.com, Gitpod.io, Heroku.com, MongoDB.com.
OBSERVAÇÃO: A arquitetura descrita aqui é SHELL FREE, ou seja, não utiliza linhas de comando! Você não precisará nem sair do seu navegador. 😀
.
FREE… FREE… PDF FREE!!!
Faça o download gratuito agora mesmo desse artigo em PDF:
bit.ly/APP1diaPDF
.
Outra DICA: Entre para o nosso grupo no TELEGRAM @APPem1dia e tire suas dúvidas conosco!!
.
Prontos para começar?!?
GitHub
Vamos começar acessando o site GitHub.com.
GitHub é um famoso repositório online de código que serve para ajudar a nós, desenvolvedores, a trabalhar em equipe de forma segura e eficiente.
Existem várias ferramentas de armazenamento e versionamento de código também muito boas no mercado, como por exemplo BitBucket.com. Escolhemos GitHub por ser a mais padronizada hoje em dia e também por ser a única que se integra facilmente de forma nativa com as outras ferramentas que iremos utilizar aqui nesse tutorial.
Acessou o site? Então agora clique no botão “Sign up” e faça seu cadastro se ainda não o tiver.
Para mais ajuda sobre como se cadastrar nas ferramentas, veja nosso vídeo no Youtube:
.
.
.
Depois clique no botão verde “New ” para criar um novo repositório.
Para facilitar sua vida neste tutorial, clique no link “Import a repository” que aparecerá na próxima tela. Você poderá importar um outro repositório que já temos PRONTO com todos os arquivos que iremos utilizar .
Na página de importação, cole o link do repositório abaixo que irá ser utilizado no campo de “Your old repository”, como na figura da tela a seguir:
https://github.com/allineo/AppBasicao.git
No campo “Name”, dê um nome para o repositório de código do seu projeto.
Crie o seu repositório como Público, para poder ser importado facilmente pelas demais ferramentas da arquitetura.
Então clique no botão “Begin import”.
O seu novo repositório será criado já com a estrutura abaixo que é a que iremos utilizar aqui.
Não se preocupe que iremos lhe guiar em parte por parte.
Gitpod - Editor online
Tem coisa mais fantástica do que editor de código na Cloud?!
O Gitpod é um editor online que se comunica diretamente com seu repositório no GitHub, levando e trazendo as alterações desenvolvidas no código de seu aplicativo de forma bastante intuitiva e sem precisar utilizar as linhas de comando do Git!
Entre no site Gitpod.io, clique no botão “Login” e faça o cadastro com a sua conta do GitHub.
Dê todas as permissões de acesso ao Github e aguarde aparecer o seu Dashboard.
Para clonar automaticamente um repositório do GitHub para o Gitpod, observe que é só usar o padrão de url abaixo:
https://gitpod.io/#https://github.com/url_do_SEU_REPO_no_GitHub
Sua workspace será criada automaticamente no Gitpod, já com os arquivos de código trazidos do seu repositório no Github.
Essa ação é o equivalente ao comando “git clone” do Git.
Observação: Se desejar alternar as cores de fundo de seu dashboard no Gitpod, só selecionar o menu: “File” > “Settings” > “Change Color Theme”.
Nome e Logo
A essa altura seu app já deve ter um nome, é sempre bom pensar em algo bem comercial.
Desenhe uma logo qualquer para começar, algo simples, porque esse app por enquanto é só para testar sua ideia.
DICA!
Uma boa ferramenta para desenhar uma logo rapidamente é a Canva.com.Observação: Faça o arquivo da logo em formato “.png”, com fundo transparente e dimensões mínimas de 512x512 pixels, para já poder usá-lo posteriormente como ícone do app na autenticação com o plugin do Facebook.
Agora voltando ao Gitpod, vamos começar o aquecimento.
Vá para dentro do diretório de nome “static” na raíz de seu projeto e importe o arquivo da sua logo e renomeie para “logoapp.png”. Delete o arquivo já existente.
Código de Exemplo
Já temos um repositório no GitHub com todos os arquivos de código do projeto que vamos utilizar aqui.
Acesse o link abaixo e observe os arquivos que você importou:
https://github.com/allineo/AppBasicao
Não se preocupe que vamos lhe ajudar a revisar arquivo por arquivo!
Backend Python
Python atualmente é uma das linguagens de programação mais utilizadas no mercado. Pode ser bastante simples para começar, por isso a escolhemos como o backend do nosso app.
Nesse nosso tutorial você só precisará de noções muito básicas de Python e de programação. Não precisará nem instalar nada, porque utilizaremos o nosso editor de código na cloud.
Pronto! Chegou o momento de começarmos a codar!
Abra, na raíz de seu projeto do Gitpod, o primeiro arquivo de código chamado “application.py”. Observe nesse arquivo o conteúdo de código abaixo:
from flask import Flask, render_template
application = Flask(__name__)
@application.route(‘/’)
def main():
return render_template(‘index.html’)
Atenção! A linguagem Python não utiliza chaves para delimitar seus blocos de comandos, por isso ela necessita das identações digitadas corretamente para conseguir compilar seu código. Observe o espaçamento de 4 caracteres em branco (espaços) para delimitar o bloco “def”, como na linha 9 acima.
E tem mais, seus problemas acabaram! Python não precisa de ponto e vírgula para finalizar as linhas de comando :-D
Flask
Como nosso app será para dispositivos móveis e para a web (um WebApp), então precisamos de um ambiente com um servidor Web.
Observe que para esse nosso tutorial escolhemos utilizar Flask por ser bastante leve e simples.
Flask é uma microframework web para Python que inclui as funcionalidades web que vamos precisar aqui.
O Flask é instalado automaticamente no seu aplicativo através do arquivo “requirements.txt”. Observe o descritor “flask” na primeira linha desse arquivo.
Observação: Caso deseje instalar o plugin do Flask no próprio Gitpod, digite o comando abaixo na janela bash de sua workspace, como na figura abaixo:
$ pip3 install flask
Observação:
Neste tutorial, os códigos de frontend e backend da aplicação encontram-se acoplados num mesmo projeto. Caso seja da preferência de sua equipe de trabalho, construa-os em projetos separados.E se por acaso, ao decidir colocar o frontend e o backend em servidores diferentes, ocorrer um erro de Cross-Origin, use a biblioteca CORS do Flask, como no exemplo abaixo.
Porém se for usar CORS, não se esqueça de importar a biblioteca no Python adicionando a linha “flask_cors” no arquivo “requirements.txt”.
Programando
Voltemos então ao código exibido anteriormente. Observe as cinco linhas de código da figura abaixo (arquivo “application.py”):
Na linha 1 é feita a importação do plugin do Flask para dentro do backend de nossa aplicação em Python:
“from flask import Flask”
Na segunda linha de código, o plugin Flask é instanciado e alocado na váriável de nome application:
“application = Flask(_name_)”
As próximas 3 linhas de código definem o método principal e inicial que se chama main:
“def main():”
O método main() contém uma única linha de comando que renderiza e retorna para o servidor o template index.html:
“ return render_template(‘index.html’)”
Ao método main() também é adicionada um anotação de código (@ ) que o associa a chamada da raíz da url da aplicação:
“@application.route(‘/’)”
Frontend
Em desenvolvimento de software, definimos frontend como tudo aquilo que toca o usuário final, toda a parte da interface que possui interação com o exterior do código.
Nesse exemplo faremos um frontend bem mínimo só para demonstrar a ideia de um desenvolvimento ágil e simples, sem design e sem nenhum objetivo maior.
Para entender melhor o que é Frontend e Backend, clique aqui nesses slides da Evelyn Mendes!
Mínimo Produto Viável
É muito importante que neste momento você consiga simplificar sua ideia ao máximo. Qual a funcionalidade mais crucial de toda a sua ideia? Qual a única página de todo o seu app que não pode ser retirada? Sempre tem como reduzir sua ideia a um Mínimo Produto Viável.
Em um próximo momento você poderá continuar a desenvolver funcionalidades próprias seguindo os princípios da simplicidade e do minimalismo, necessários para confrontar suas ideias com o comportamento de usuários reais da forma mais barata e eficiente possível.
HTML
Para uma tela de início do app, com um menu lateral básico do tipo hambúrguer, criamos o código HTML a seguir. Comece observando esse código para se ambientar com a arquitetura.
Na pasta “templates”, do seu projeto no Gitpod, abra o arquivo “index.html”.
Para esse layout de frontend, com menu retrátil, que funciona responsivamente tanto para computadores padrão como para dispositivos móveis e pequenos, utilizamos uma framework de frontend muito disseminada chamada Materialize (materializecss.com).
CSS
Você vai precisar olhar também todos os outros arquivos CSS e JS que estão no diretório “static” que foram copiados para o seu projeto.
Observe a importação do Cascading Style Sheets “main.css” na tag <head> do arquivo “index.html” do nosso código exemplo:
E depois a classe “background” sendo associada à primeira tag <div> do <body>.
E depois a definição da classe “.background” no arquivo “main.css” abaixo:
JavaScript
JavaScript, ou .js, que não tem nada a ver com a linguagem Java, é o que dá movimento, dinamismo, ao seu código HTML. São funções de código para serem executadas no próprio navegador, no frontend mesmo.
São vários arquivos JS usados no nosso código exemplo. Todos eles estão na pasta “static/js”. Observe abaixo as funções “function” do arquivo “application.js”, por exemplo:
Git Add, Commit e Push
A qualquer momento que desejar, você pode subir para o repositório do GitHub as alterações realizadas em seu projeto no Gitpod, ou seja, realizar o vulgo “Commit”. É importante fazer commit com frequência para deixar seu código fonte resguardado e acessível às outras pessoas do seu time de desenvolvimento.
Clique no último ícone (“Git”) do canto esquerdo superior do seu projeto no Gitpod, e você verá a lista dos arquivos ainda não comitados de seu projeto.
PRIMEIRO PASSO — Clique no ícone “+” (Stage All Changes) da seção “Changes”, onde estão agrupados os arquivos em que você fez suas últimas alterações. Esse clique é o equivalente ao comando “git add“ do Git.
SEGUNDO PASSO — Agora digite no campo “Commit message” uma mensagem que identifica essas suas últimas alterações de código e clique no botão de check para comitar o seu código dentro do Gitpod. Este é o clique equivalente ao comando “git commit“ do Git.
TERCEIRO PASSO — Depois de comitado, por último clique nos três pontinhos “…” e selecione a opção “Push”, para realmente enviar essas alterações para o seu repositório de origem no GitHub, sendo este finalmente o clique equivalente ao comando “git push“ do Git.
Pronto! Pode ir até o site do GitHub e atualize a página que você verá suas alterações por lá!
Ambiente Localhost
Não é necessário, mas se desejar você poderá executar e testar o código localmente em seu computador.
Siga os passos abaixo:
- Faça o download do seu código do Gitpod
- Download e instale python 3 em Python.org
- Instale as bibliotecas necessárias:
pip install Flask
pip install PyMongo
pip install DNSPython - Execute o arquivo application.py
py application.py
O Flask já inclui um servidor web básico para você poder visualizar seu código no seu navegador web!
Heroku Cloud
Um bom lugar para disponibilizar seu app atualmente é a tão famosa Cloud.
A plataforma Heroku.com é uma excelente opção de cloud para começar a aprender e a programar para a web.
Heroku é um PaaS, uma Plataform as a Service, ou seja, um gerenciador automático que disponibiliza um ambiente completo com servidores de aplicação já previamente instalados e configurados, e ao mesmo tempo totalmente flexível para diferentes linguagens de programação e infraestrutura que você queira usar (incluindo Python).
O Heroku também facilita muito nosso tutorial porque integra diretamente com o GitHub através de um botão click-to-deploy!
Crie seu usuário na plataforma Heroku.com e depois clique no botão “Create new app” para hospedar seu novo aplicativo.
Para o funcionamento do deploy com código Python no Heroku, é necessário adicionar três arquivos de configuração ao projeto. Volte ao Gitpod e observe na raíz de seu projeto os três arquivos abaixo:
“requirements.txt”, “runtime.txt” e “Procfile”.
Se desejar, acesse o código desses três arquivos de configuração através desse link abaixo:
https://github.com/allineo/AppBasicao/blob/master/
Aproveite para observar também que esses três arquivos já foram importados para o seu repositório do GitHub quando você importou os arquivos do projeto de exemplo no começo desse tutorial. Vá até o GitHub e certifique-se que eles estão lá.
Agora voltando para o Heroku.com, depois de criado o App e subido os arquivos de configuração para o GitHub, selecione a opção “Deploy” no menu, e então o método GitHub aparecerá entre as três opções de “Deployment Method”. Clique no botão “Connect to GitHub” e autorize a conexão.
Digite então o nome de seu repositório do GitHub no campo em aberto e clique em “Search”. Após a autorização, clique no botão “Connect” do repositório.
Com a conexão estabelecida, o deploy ficará disponível na seção “Manual Deploy”, através do botão “Deploy Branch” no final da página. A branch escolhida em geral será a “master”.
Ao clicar no botão “Deploy Branch”, o deploy começará a ser realizado.
Com o término bem sucedido, o Heroku gerará e disponibilizará gratuita e automaticamente uma url de domínio para seu app.
E mais… O Heroku já gera a url segura criptografada automaticamente no formato HTTPS!
Para acessar a sua url pública é só clicar no botão “View”!
Maaaas, caso o seu deploy não tenha sido bem sucedido… :-((
Você pode acessar o log do seu deploy no console do Heroku. Vá no botão “More” do console e selecione a primeira opção “View logs”.
Observação: Se desejar configurar uma url própria para seu app, você pode adquirí-la em algum provedor de domínios, como por exemplo, GoDaddy.com ou Registro.br, e depois adicione-a ao Heroku na seção “Domains” no menu “Settings”.
Banco de Dados
Continuando na montagem de uma base para seu app, vamos agora criar um formulário de cadastro que usa um banco de dados para armazenar as informações. O frontend para esse formulário de exemplo será bem simples.
Observe o código da seção “formPage” em seu template “index.html”:
Crie seu próprio formulário com os campos que dizem respeito ao modelo de negócios da ideia de seu app.
MongoDB
Agora vamos criar o banco de dados que armazenará os campos desse formulário que criamos. Escolhemos um banco de dados NÃO RELACIONAL (NoSQL) porque é o mais simples e ágil hoje em dia.
O MongoDB é uma opção bem disseminada no mercado com bastante recursos para o desenvolvimento. Armazena registros (que chama de documentos) diretamente no formato JSON.
MongoDB Atlas
Para não termos trabalho de instalação, configuração, manutenção, load balancing, escalonamento de software, etc, vamos utilizar um banco de dados que já seja oferecido na Cloud com todas essas facilidade preestabelecidas.
O MongoDB Atlas é uma opção auto gerenciada que tem uma versão de custo zero para desenvolvedores nas fases iniciais de projeto. Tudo o que a gente precisa para começar.
Comece criando o cluster onde seu banco de dados será provisionado. Escolha uma das “Free Tiers” e clique em “Create Cluster”.
Quando o cluster estiver criado, clique no botão “Connect” e vá seguindo todos os passos citados no botão “Get Started”.
Clique em “Add your current IP Address”, e aceite o endereço IP que for detectado clicando no botão “Add IP Address”.
Depois crie seu primeiro usuário admin, dê uma senha a ele e clique no botão “Create MongoDB User”. Finalmente clique em “Choose a connection method”.
Na seção de “Connection Method”, nós vamos conectar via aplicação que é a opção “Connect your Application”.
Nesta tela selecione o driver para Python, na versão “3.6 or later” e depois observe o código “Full Driver Example”.
Observe que o exemplo utiliza a biblioteca PyMongo, é ela que iremos utilizar para conectar no Python com o MongoDB. Você precisará copiar a string de conexão com o banco para colar em nosso código de exemplo.
Outra configuração importante, é liberar os endereços IPs do projeto no MongoDB Atlas, para o banco de dados ser acessado de qualquer lugar.
Na aba “Security”, clique na opção “IP Whitelist” e depois na action “Edit” de seu IP detectado. No popup, clique no botão “Allow access from anywhere” e depois clique em “Confirm”.
PyMongo
Voltemos ao código. Para persistir as informações digitadas no form que criamos no frontend precisamos criar o backend em Python. E para a conexão do backend com o banco de dados utilizaremos a biblioteca PyMongo.
Comece criando um diretório chamado de “py” no projeto do Gitpod e adicione o arquivo Python “dbconnect.py”, que executa a conexão com o MongoDB.
É só copiar o código abaixo: https://github.com/allineo/AppBasicao/blob/master/py/dbconnect.py
Repare que o banco de dados criado automaticamente pelo MongoDB Atlas no Cluster0 gratuito já vem com o nome padrão de “test”.
E ATENÇÃO! Para o diretório “py” funcionar como arquivos de código no seu projeto Python, é só adicionar o arquivo vazio “__init__.py” dentro desse diretório.
Adicione também o arquivo de configuração “config.json”, e substitua a string de conexão “dburi” pela url do seu banco de dados disponibilizada no botão “Connect” de seu cluster, lá de volta na interface do MondoDB Atlas.
Não esqueça de trocar também sua SENHA dentro da string de conexão.
Observação:
No futuro, recomendamos que use a configuração de variáveis de ambiente através do arquivo .env do Python e do método os.getenv().
As outras variáveis de configuração também deverão ser trocadas nas próximas seções desse artigo.
Agora você já pode adicionar ao mesmo subdiretório “py” do projeto, o arquivo “formCadastro.py”, que contém as funções que listam e salvam no banco os dados digitados no frontend através do formulário de cadastro:
Atualize o nome de sua collection (que é o equivalente às tabelas de dados dos bancos relacionais) na variável “dbcollectionname” (linha 8), com o nome que você quiser para sua tabela.
Observação: Não se preocupe porque sua collection será criada automaticamente no MongoDB, caso ela ainda não exista. Essas são as vantagens de um banco de dados Schemaless😀
API Endpoints
Para manter o backend e o frontend completamente desacoplados, independentes e flexíveis, criamos API endpoints para todas as chamadas feitas do frontend (cliente/navegador) para o backend (ou servidor).
Observe no código do arquivo “application.py”, os endpoints (cuja sintaxe se inicia pela anotação: @application.route) para salvar e recuperar os dados do fomulário no banco de dados:
Fetch
É aqui que toda a mágica da Web acontece!
As chamadas no frontend, ou seja dos arquivos que ficam armazenados no dispositivo/celular do cliente, para o acesso aos dados no backend, ou seja, aos arquivos que ficam armazenados no servidor/cloud do Heroku, são feitas através das funções FETCH do JavaScript, que por sua vez executa as requisições HTTP que precisamos para fazer o frontend conectar com o backend.
As funções fetch do nosso app se encontram no arquivo “form.js”:
Substitua o nome das variáveis de acordo com os campos do formulário que você desejar construir para o seu próprio app.
JSON
JavaScript Object Notation, é um formato de dados muito usado atualmente para transferir dados entre aplicações ou entre camadas de uma mesma aplicação.
Observe nas funções de fetch do JavaScript a variável “data” sendo criada no formato JSON (caracterizada pelas chaves {} e pelo conteúdo chave:valor), e o resultado do fetch também sendo retornado no formato JSON para o JavaScritpt.
Deploy
Atualize todos esses arquivos no seu código do Gitpod e depois faça o git add, commit e o push para o repositório remoto no GitHub.
Depois volte a interface do Heroku e clique no botão “Deploy Branch” como explicado anteriormente.
O botão “View” após o término do deploy irá disponibilizar o link do seu app novamente já com as funcionalidades novas.
Gostou do tutorial até aqui?
Deixe um feedback no próprio formulário de cadastro do nosso exemplo! Acesse: https://appbasicao.herokuapp.com
Data Explorer
Para visualizar os dados após eles serem criados, existe uma interface dentro do MongoDB Atlas.
É só clicar no botão “Collections” dentro da tela do Cluster. Este botão vai abrir a tela abaixo, com todos seus databases e os dados dentro de cada uma de suas collections.
Explore à vontade.
A partir de agora nós vamos começar a nos aprofundar bem mais nas funcionalidades e na complexidade dessas funcionalidades dentro de nosso app.
Mas não se preocupe que será possível acompanhar o desenvolvimento mesmo para quem ainda não tem muita prática, pois vamos descrever tela por tela, com cada passo que precisa ser dado para adicionar autenticação, mapa ou até mesmo migrar de Cloud para a plataforma da Amazon AWS.
Plugins de autenticação
Existem várias formas de autenticar um usuário em seu app. A pior delas é reinventar a roda e fazer todo o código de forma customizada com seu próprio punho.
São muitos os plugins de autenticação disponíveis no mercado. Vamos utilizar aqui, a título de exemplo, dois dos mais utilizados no mercado, que são o botão de Sign in do Facebook e do Google.
Existem também plataformas que já automatizam vários logins sociais ao mesmo tempo em um único plugin, como por exemplo o Firebase Authentication ou o Auth0.com.
Login com o Facebook
Para adicionar aquele botão de “Login com o Facebook” em seu app, você precisa começar associando a sua conta normal do Facebook (sim, eu sei que você tem uma) à uma conta de desenvolvedor do Facebook.
Acesse a plataforma Developers.Facebook.com, e clique na opção de “Adicionar Novo Aplicativo” à sua conta.
Digite o nome e o e-mail de contato de seu app e clique no botão “Criar identificação de aplicativo”.
Na próxima tela de “Cenários”, selecione a opção de “Integrar Login do Facebook” e clique em “Confirmar”.
Observação: Posteriormente você vai precisar do número “ID do Aplicativo”, que se encontra no topo da tela, para configurar o código do botão de login.
Na próxima tela de “Configurações Básicas”, preencha os campos de acordo com as informações de seu app.
O “Domínio do aplicativo” é a url configurada pelo Heroku. Adicione também a logo no tamanho mínimo de 512x512 pixels e selecione uma categoria para seu app.
A política de privacidade pode ser gerada por algum site disponível na web, e você pode adicionar o arquivo gerado diretamente na pasta “static” do código do seu aplicativo. Assim como esse exemplo que utilizamos aqui: https://appbasicao.herokuapp.com/static/policy.html
Clique em “Salvar alterações”.
Você vai precisar também configurar a url de retorno de seu app quando o usuário se autenticar pelo Facebook.
No menu esquerdo da tela, selecione a opção “Login do Facebook” e depois “Configurações”.
No campo “URIs de redirecionamento do OAuth válidos”, você pode cadastrar a própria url da página de início do seu app configurada pelo Heroku.
Clique novamente em “Salvar alterações”.
Por último, ative suas configurações clicando na opção “Desativado” que se encontra em cinza no topo da tela. Ao clicar aparecerá uma janela pop-up.
Confirme que deseja “Tornar o aplicativo público” e o botão ficará verde indicando que seu app está ativado no Facebook.
Agora vamos ao código do botão de login do Facebook que se encontra em nosso app.
No arquivo “index.html”, lá no seu projeto do Gitpod, abra a seção “head” e adicione os scripts de importação do plugin do Facebook, assim como o ressaltado na figura abaixo.
Pode copiar e colar o código do arquivo de exemplo a seguir:
https://github.com/allineo/AppBasicao/blob/master/templates/index.html
Depois vá até a seção “loginPage” no “body” desse mesmo arquivo “index.html” e observe o código do botão de login:
Continuando.
Agora copie todo o arquivo “facebook.js” de acordo com o código exemplo do GitHub, para dentro da pasta “/static/js/” de seu projeto no Gitpod.
https://github.com/allineo/AppBasicao/blob/master/static/js/facebook.js
Não esqueça de substituir a variável “appId” da função “FB.init” pelo seu “ID do Aplicativo”.
Observe a segunda linha da função “statusChangeCallback” onde é passado o token de acesso do usuário que acabou de se logar. Esse token, assim como o id do usuário logado, serão guardados em variáveis no JavaScript, para depois serem verificados no backend, quando o aplicativo fizer chamadas para os endpoints das APIs.
Observe também nesse mesmo arquivo a função “FB.api(/me)” na linha abaixo, que busca os dados de cadastro no Facebook do usuário logado e envia para o backend para serem salvos no banco.
No backend, o token de login do Facebook deve ser verificado antes dos dados serem acessados, para ter certeza que o usuário foi devidamente autenticado no frontend.
Segue o código para essa verificação:
https://github.com/allineo/AppBasicao/blob/master/py/authentication.py
Após a validação do token, os dados do usuário logado já podem ser salvos no banco de dados.
A função de salvamento desses dados é chamada pelo endpoint “/saveNewUser” do arquivo “application.py”, que por sua vez chama a função “saveUser” do arquivo “authentication.py” acima.
Você pode acompanhar os dados armazenado de todos os usuários que estão se logando em seu aplicativo, visualizando-os diretamente lá no banco de dados, através do Data Explorer do MongoDB Atlas, como foi mostrado anteriormente.
Google Sign-in
Para adicionar o botão de “Login com o Google” em seu app, você precisa configurar um projeto na plataforma do Google.
Acesse a url abaixo, comece clicando no botão “Configure a project” e adicione um novo projeto:
https://developers.google.com/identity/sign-in/web/sign-in
Selecione a opção “Web server” e digite a url de domínio do Heroku para o seu app no campo de “Authorized redirect URIs”. Depois clique em “Create”.
Na próxima tela aparecerão as strings “Client ID” e “Client Secret” para a conexão do código do seu app.
Copie-as antes de clicar em “Done”, ou então selecione a opção: “Download client configuration”.
Observação: Se precisar buscar o id de autenticação do cliente desse projeto depois de ter clicado no botão “DONE”, acesse a url abaixo e copie o valor da coluna “Client ID” da variável “OAuth client”.
https://console.cloud.google.com/apis/credentials
Voltando ao código do seu projeto do Gitpod.
No arquivo “index.html”, adicione as linhas necessárias à configuração do plugin do botão de login do Google, segundo a linha de código destacada no exemplo abaixo:
https://github.com/allineo/AppBasicao/blob/master/templates/index.html
Para o valor “content” da linha do “google-signin-client_id”, substitua pelo valor do “Client ID” gerado na criação de seu projeto Google descrito acima.
Observe também a importação do arquivo “googlelogin.js”, e o script de inicialização das apis do Google tudo na mesma seção de cabeçalho.
E então na seçao “body”, as tags html do botão em si, com o id
“google-signin2”, como na linha selecionada abaixo:
Agora no diretório “static/js”, adicione o arquivo “googlelogin.js”, para fazer a inicialização do botão de login com o Google e para pegar o token de login após o usuário se autenticar.
https://github.com/allineo/AppBasicao/blob/master/static/js/googlelogin.js
Nesse arquivo “googlelogin.js” também são enviados os dados do usuário logado para o backend para ser salvo no banco de dados.
No backend, a verificação é feita pela função “verifyGLToken” do arquivo “authentcation.py”.
https://github.com/allineo/AppBasicao/blob/master/py/authentication.py
Localização do usuário
Sua ideia pode necessitar de várias tecnologias diferentes ao ser implementada. Estamos demonstrando aqui algumas das funcionalidades mais comuns de um app, como por exemplo formulários de cadastro, login de usuário, campos de busca, mapas, etc.
Neste capítulo vamos falar de Geolocalização. Para pegar a localização atual do usuário do seu app, iremos utilizar a API de Geolocalização da linguagem HTML.
Segue abaixo o código Javascript para tal, observe a função “getLocation()” do arquivo “map.js”:
https://github.com/allineo/AppBasicao/blob/master/static/js/map.js
Ao iniciarmos o código do aplicativo, já podemos ir logo pegando na localização do usuário suas variáveis de latitude e longitude.
E então, junto com seus dados de login, já podemos salvar o log de acesso do usuário corrente no banco de dados.
A função javascript “saveNewUser“ do arquivo “aplication.js“ é que inicia esse processo de chamada fetch para o banco de dados no backend.
https://github.com/allineo/AppBasicao/blob/master/static/js/application.js
Mapa
Se tivermos informações de latitude e longitude de qualquer coisa, como por exemplo, pessoas, estabelecimentos, objetos em movimento ou não, etc, podemos plotar essa localização em um mapa e mostrá-lo em nosso app, caso essa funcionalidade seja relevante para o modelo de negócios de nossa ideia.
Por ser o mapa mais utilizado globalmente, como exemplo nesse tutorial, vamos utilizar o plugin de Mapas da Google para plotar as localizações que capturamos dos usuários que acessaram nosso app.
Vamos começar adicionando a Map Javascript API, da biblioteca da Google, ao seu arquivo “index.html”:
Agora, para realmente mostrar esse mapa na tela do nosso app e demarcar localizações nele, vamos precisar criar uma chave de autenticação na plataforma Google.
E ainda porém, para criarmos essa chave de autenticação, a Google exige que tenhamos um projeto em sua plataforma de Cloud e além disso, exige também que o “Billing” (autorização de cobrança) esteja habilitado nesse projeto, com um cartão de crédito válido e aceitável por eles.
Então vamos começar esse processo criando uma “Billing account“ para depois adicioná-la ao nosso projeto da Google Cloud.
Acesse o link abaixo:
https://console.cloud.google.com/billing/create
Deixe ou altere o nome da Billing Account, e clique em “Continue”.
Na seção do país, selecione o correspondente ao seu cartão de crédito. Clique em “Confirm”.
Na seção de “Payments Profile” informe todos os seus dados pessoais e de cartão de crédito para a Google. Sim, para disponibilizar o Google Maps em seu app você terá que ter um cartão de crédito válido e aceitável por eles.
Clique em “Confirm” novamente.
Pronto, Billing configurado.
Agora acesse o link abaixo, selecione a opção “Maps” e clique em “Continuar”:
https://cloud.google.com/maps-platform/?hl=pt-br#get-started
Na próxima tela, selecione o mesmo projeto criado no capítulo anterior do Google Sign-in e clique em “Next”.
Depois selecione a “Conta de Faturamento” (ou “Billing Account”) que você acabou de criar e clique em “Next”. O console da plataforma Google Cloud se abrirá automaticamente na tela abaixo:
Clique no botão “Próxima” e sua “Key” aparecerá. Copie essa chave para substitui-la na chave da API do Google Maps no seu arquivo “index.html”:
Observação: Se por acaso precisar pegar a Maps API Key posteriormente, clique no link abaixo e busque a “API Key” com a data em que você a criou:
https://console.cloud.google.com/apis/credentials
Ok! Superamos as credenciais.
Vamos agora finalmente adicionar o mapa ao nosso app!
O código para manipular o mapa encontra-se no arquivo “map.js”:
https://github.com/allineo/AppBasicao/blob/master/static/js/map.js
Observe a função “initMap()” para instanciar o mapa na sessão do usuário corrente.
E depois obeserve a função “addMarker()” para plotar os pinos no mapa.
Quer ver como ficou?!?
Então faça todo o processo de subir o código criado para o GitHub (commit e push no Gitpod).
Depois vá ao Heroku e faça o deploy clicando no botão “Deploy Branch“.
E então acesse a url pública de seu app clicando no botão “View“ quando o Heroku finalizar o deploy com sucesso.
Tchan nan !!! :-D
CERTIFICADO
Pronto! Se você chegou até aqui e entendeu a maior parte do que foi feito nesse tutorial, você está apto(a) a receber nosso certificado.
Entre em contato pelo nosso Telegram @APPem1dia e peça o seu!
