Deixe uma issue com suas sugestões e,ou criticas sobre este material. Ajudará muito na remodelagem deste e construção de outros.
Aqui compartilharei com você minhas experiências e aceito suas sugestões de como realizar um login utilizando o back4app.com. Este projeto servirá também pra eu refinar este código para outras projetos. No final aprenderemos juntos...
Para entender melhor este repositório é importantíssimo assistir a primeira parte disponivel neste outro repositorio:
https://github.com/catalunha/learning_about_b4a_dart
Em seguida assista aos videos desta playlist, https://www.youtube.com/playlist?list=PL-rdGqWQhUziIYWzcd4x3dJjp_qiWiDYt, nesta seguencia. Ou acesse cada video individualmente.
- Introdução (https://youtu.be/VBzItwVTPDY)
- Tables User & Profile (https://youtu.be/i0l-JqZqJuo)
- EmailVerified (https://youtu.be/rAT1oabrs-4)
- App (https://youtu.be/Qk9uY8IXaSA)
- Pubspec (https://youtu.be/9BWDN1TElgo)
- Splash (https://youtu.be/H0CVXHlrVpc)
- Login (https://youtu.be/_rlj9Uahwow)
- RegisterEmail (https://youtu.be/7Dyq1L9Fqys)
- Home (https://youtu.be/iBcpLiu_kPc)
- EditProfile (https://youtu.be/1a7qbahK6Pg)
- List (https://youtu.be/N_1xluOm2oI)
- Testes (https://youtu.be/ScPnIVKXAWc)
- Cloud Code e Web Hosting (https://youtu.be/uY72rdCb9sI)
A seguir apresento algumas anotações utilizadas nos videos e registrada aqui pra facilitar.
Splash | Login | Cadastro |
---|---|---|
![]() |
![]() |
![]() |
Email Não verificado | Acesso não liberado | Email ja cadastrado |
---|---|---|
![]() |
![]() |
![]() |
Home | Editar profile | Listar tabela |
---|---|---|
![]() |
![]() |
![]() |
Criar table Profile com os campos [email,typeString,typeFile,isActive]
Criar campo [profile] e apontar para Profile
Destacar a importancia do campo emailVerified
Acessar Server Settings e configurar email verification
Exemplo de configuração para verificação de email
Exemplo de configuração para recuperação de senha
Email recebido quando usuario cadastrado.
Email Verificado e atualizado no database do back4app
Antes da verificação de email
Após a verificação de email
- Criar projeto em Flutter no terminal flutter create --project-name=learning_about_b4a_flutter --org br.catalunhamj --platforms android,web ./learning_about_b4a_flutter
- Configurar pubspec.yaml
- images
- .env com .gitignore
- lib/main.dart
- lib/app/app.dart
- lib/app/routes.dart
- lib/app/core
- lib/app/core/models
- lib/app/core/models/user_model.dart
- lib/app/core/models/profile_model.dart
- lib/app/core/utils
- lib/app/core/models
- lib/app/data/repositories
- lib/app/data/b4a
- lib/app/data/b4a/connect_b4a.dart
- lib/app/data/b4a/entity
- lib/app/data/b4a/table
- lib/app/data/b4a/utils
- Splash
- lib/app/view/controllers/splash
- lib/app/view/pages/splash
- Register via email
- Login
- Home
- Edit Profile
- List
Primeira etapa é construir o codigo em versão web com este comando:
catalunha@pop-os:~/myapp/learning_about_b4a_flutter$ flutter build web
Depois executar com F5 para ver o resultado e tudo funcionando conforme versão no Android.
Acessando ao App Settings -> Server Settings -> Webhosting
Poderemos configurar as informações de hospedagem.
Localmente precisamos configurar o projeto localmente para deploy com os seguintes comandos:
catalunha@pop-os:~/myapp/learning_about_b4a_flutter/back4app$ b4a new
catalunha@pop-os:~/myapp/learning_about_b4a_flutter/back4app$ b4a new
Would you like to create a new app, or add Cloud Code to an existing app?
Type "(n)ew" or "(e)xisting": e
6: learning_about_b4a
Select an App to add to config: 7
Please enter the name of the folder where we can download the latest deployed
Cloud Code for your app "learning_about_b4a"
Directory Name:
You can either set up a blank project or download the current deployed Cloud Code
Please type "(b)lank" if you wish to setup a blank project, otherwise press ENTER:
Successfully downloaded Cloud Code to "/home/catalunha/myapp/learning_about_b4a_flutter/back4app/learning_about_b4a".
Successfully configured email for current project to: "catalunha.mj@gmail.com"
Como anteriormente ja construimos a aplicação web podemos linkar o build/web com o public do b4a. Usando para isto um link simbólico.
catalunha@pop-os:~/myapp/learning_about_b4a_flutter/back4app/learning_about_b4a$ ln -s /home/catalunha/myapp/learning_about_b4a_flutter/build/web public`
catalunha@pop-os:~/myapp/learning_about_b4a_flutter/back4app/learning_about_b4a$ ls -la
total 20
drwxr-xr-x 3 catalunha catalunha 4096 Dec 13 09:20 .
drwxrwxr-x 3 catalunha catalunha 4096 Dec 13 08:10 ..
drwxr-xr-x 3 catalunha catalunha 4096 Dec 13 08:15 cloud
-rw------- 1 catalunha catalunha 187 Dec 13 08:10 .parse.local
-rw------- 1 catalunha catalunha 100 Dec 13 08:10 .parse.project
lrwxrwxrwx 1 catalunha catalunha 58 Dec 13 09:20 public -> /home/catalunha/myapp/learning_about_b4a_flutter/build/web
A função em núvem que utilizaremos para atualizar as tabelas de User e Profile serão estas.
E deve ser coloca em
catalunha@pop-os:~/myapp/learning_about_b4a_flutter/back4app/learning_about_b4a/cloud$
Parse.Cloud.afterSave(Parse.User, async (req) => {
let user = req.object;
if (user.get('profile') === undefined) {
const profile = new Parse.Object("Profile");
profile.set('email', user.get('email'));
let profileResult = await profile.save(null, { useMasterKey: true });
user.set('profile', profileResult);
await user.save(null, { useMasterKey: true });
console.log(`afterSave Parse.User: ${user.id} Created profile.`);
}
});
Parse.Cloud.afterDelete(Parse.User, async (req) => {
let user = req.object;
console.log(`afterDelete Parse.User: ${user.id}`);
let profileId = user.get('profile').id;
console.log(`deleting Profile: ${profileId}`);
const profile = new Parse.Object("Profile");
profile.id = profileId;
await profile.destroy({ useMasterKey: true });
});
Lembre-se sempre de construir o build primeiro
catalunha@pop-os:/myapp/learning_about_b4a_flutter$ flutter build web
Depois subir o deploy
catalunha@pop-os:/myapp/learning_about_b4a_flutter/back4app/learning_about_b4a$ b4a deploy
Ainda estou resolvendo a forma correta para colocar as variáveis de ambiente no b4a e obté-las no Flutter.
Mas após o deploy envie individualmente o arquivo .env para public/assets no hosting do b4a
Assim a aplicação conectará perfeitamente ao banco de dados.
help.back4app.com/hc/requests/32443