Flutter e Supabase: criando um app com BaaS

Preparando o Supabase - Apresentação

Introdução ao Curso de Flutter

Sejam bem-vindos a mais um curso de Flutter na Lura. Nós somos guiados por William Bezerra, que nos acompanhará ao longo de todo o curso. Utilizaremos uma base robusta, um backend de AgilesSF, para orientar a construção de funcionalidades dentro do nosso aplicativo de corrida. Este aplicativo funciona como uma rede social, onde podemos inserir nossos resultados de corrida, informações, quilometragem e tempo, além de listar nosso progresso. Também é possível editar, apagar e consumir esses dados em tempo real.

Requisitos e Conhecimentos Necessários

Utilizando o super base, que é o backend de AgilesSF, não precisamos de um outro backend, API ou algo do tipo para realizar a integração remotamente dentro do aplicativo. Para construir essa aplicação, é importante que já tenhamos alguns conhecimentos básicos, como entender um pouco de modelagem de banco de dados relacionais, para não nos perdermos ao configurar todo o projeto. Também é necessário compreender o consumo de APIs e como elas funcionam. Mesmo que não as utilizemos diretamente, é importante ter esse conceito bem definido para não ficarmos perdidos no processo. Além disso, é fundamental conhecer a base do Flutter e entender seu funcionamento. Com esse conhecimento, já conseguimos construir toda a aplicação. Nos vemos na próxima aula.

Preparando o Supabase - Criando projeto no Supabase

Introdução ao Projeto RunCycle

Parece que não há snippets de código fornecidos para integrar com a transcrição. No entanto, posso ajudar a estruturar o que seria o próximo passo no desenvolvimento do aplicativo, baseado na transcrição fornecida.

Estruturação do Projeto com Supabase

Você foi contratado por uma startup chamada RunCycle, que é uma empresa que possui um aplicativo destinado a ser uma rede social para corredores. Nesse aplicativo, os corredores podem registrar suas corridas e interagir por meio de comentários, criando um ecossistema focado nesse setor. O aplicativo já possui uma estrutura inicial, e nossa tarefa é dar continuidade ao desenvolvimento dessa plataforma.

Atualmente, o aplicativo apresenta uma tela inicial com uma lista de corridas, que, no momento, está vazia. Há um botão para adicionar novas corridas, onde podemos selecionar o tipo de treino, descrição, tempo, distância, calorias e batimentos cardíacos. Por exemplo, podemos adicionar um tipo de treino como corrida, inserir a descrição "corrida intensa", o tempo de 30 minutos e 15 segundos, a distância de 5 quilômetros, 500 calorias e uma frequência cardíaca de 150 batimentos por minuto. Ao salvar, teremos a listagem desse conteúdo, permitindo visualizar o tipo de treino, dados como distância e calorias, além da descrição inserida. Também é possível ver a data do registro, editar a corrida (por exemplo, alterar de "intensa" para "moderada"), salvar as alterações, interagir e até apagar a corrida. Diversas interações podem ser feitas com a postagem.

Esse será nosso primeiro desafio na empresa. Entretanto, podemos nos perguntar: se já está funcionando, qual é o desafio? Na verdade, não está funcionando, pois tudo que vemos está completamente simulado. Os dados estão salvos apenas na memória. Se abrirmos o repositório que carrega esses dados, veremos que é basicamente uma lista de entidades vazias na memória. Nosso desafio é pegar todo esse fluxo e integrá-lo com um back-end. No entanto, a empresa não possui um back-end.

Escolha do Supabase como Solução

Como resolver esse desafio, sendo que nossa especialidade é mobile e não back-end? Nunca trabalhamos com back-end. Como criar essas APIs? Precisamos buscar alternativas no mercado e, possivelmente, nos depararemos com uma das melhores opções atualmente: o Supabase. Trata-se de uma ferramenta open source, fácil de integrar, que permite utilizar lógicas e integrações diretamente dentro do aplicativo, no Flutter, facilitando bastante nosso trabalho.

Com isso, vamos acessar a página inicial do Supabase, que explica seu funcionamento e algumas funcionalidades. A partir daí, iniciaremos a criação do nosso projeto.

Criação de Conta e Organização no Supabase

No botão verde destacado, "Start Your Project", devemos clicar para ser redirecionados a uma página de login, que estará completamente em inglês. Caso não saibamos ler em inglês, podemos clicar com o botão direito, se estivermos usando o Chrome, e solicitar a tradução da página para o português, facilitando a compreensão.

Na parte inferior dessa página, há um botão "Sign Up Now", que significa "Crie Sua Conta Agora". Ao clicar nele, temos a opção de entrar com nossa conta do GitHub, o que é viável, considerando que todos aqui provavelmente já possuem uma conta no GitHub. Caso não queiramos usar a conta do GitHub, podemos criar uma conta com e-mail e senha, que é o que faremos. Após criar a conta, receberemos um e-mail de confirmação. Devemos acessar nosso e-mail, confirmar a conta, e assim retornaremos à página do nosso projeto.

Após criar e confirmar a conta, seremos direcionados para a página "New Organization". Nela, precisamos criar um espaço de trabalho. Podemos definir o nome e o tipo de conta, que pode ser pessoal, educacional, startup, entre outros. Neste caso, utilizaremos a opção pessoal.

Escolha do Plano e Criação do Projeto

Também devemos escolher o tipo de plano. Existem três planos específicos no Supabase: Free, Pro e Team. Utilizaremos o plano Free, que é interessante para iniciantes, oferecendo até 5 GB de dados, 1 GB para armazenamento e suporte para até 50 mil usuários. Para nosso contexto, será muito útil para começar. Caso o projeto cresça, podemos migrar para um plano Pro ou até mesmo um plano maior, dependendo das necessidades.

Após definir o plano Free, clicamos em "Criar Organização" (Create Organization). O sistema processará a criação da organização, e com ela criada, poderemos trabalhar no Workspace para desenvolver nosso projeto. Precisamos definir o nome do projeto, por exemplo, "Run Cycles".

Em seguida, devemos gerar uma senha para nosso banco de dados. Podemos clicar em "Gerar Automaticamente" para obter uma senha. Essa informação é sensível, então devemos salvá-la e, se necessário, gerar uma nova no futuro. Podemos deixar a região padrão já definida pelo sistema e clicar em "Criar um Novo Projeto". Assim, o projeto será criado e estará pronto para ser utilizado no desenvolvimento do nosso aplicativo.

Próximos Passos

Com o projeto criado, o próximo passo é preparar todo o projeto para integrá-lo ao nosso aplicativo. Isso será abordado no próximo vídeo.

No próximo vídeo, abordaremos como integrar o Supabase ao aplicativo Flutter, começando pela configuração do cliente Supabase no aplicativo e a criação de métodos para interagir com o banco de dados, como adicionar e listar corridas.

Preparando o Supabase - Estrutura relacional e criação da tabela de corridas

Introdução ao Supabase e Funcionalidades Futuras

Agora que nosso projeto foi criado no Supabase, precisamos configurar como utilizá-lo dentro do nosso aplicativo. Um ponto importante é que o Supabase não serve apenas para armazenar e ler dados. Ele possui outras funcionalidades que abordaremos em cursos futuros desta formação. Por exemplo, temos funcionalidades de autenticação, armazenamento de arquivos, funções adicionais e tempo real, que discutiremos no final deste curso. São funcionalidades simples e fáceis de aplicar em seu projeto.

Foco no Aplicativo: Corridas

Vamos dar continuidade. Nosso foco principal no aplicativo é registrar, listar, editar e excluir corridas. Para isso, a primeira coisa que precisamos fazer é criar uma tabela no banco de dados do nosso back-end do Supabase, onde armazenaremos esses valores.

Se não soubermos o que é uma tabela ou como trabalhar com elas, é importante estudar um pouco sobre bancos de dados relacionais, como o Postgres, para ter um conceito mais bem definido. Isso nos ajudará a entender melhor quando formos criar e explicar as tabelas, garantindo que tudo fique bem estruturado e funcional.

Criando a Tabela de Corridas no Supabase

Vamos continuar. Como estamos focando apenas em corridas agora, sem questões de contas ou usuários, a ideia é registrar, listar, editar e apagar corridas. A primeira tabela que vamos criar é a tabela de corridas. No Supabase, vamos acessar a seção "Get Started By Building Out Your Database", que nos orienta a começar a construir nosso banco de dados.

Existem duas formas de trabalhar com o banco de dados no Supabase: usando o Table Editor, que é a interface do Supabase para criar tabelas, ou o SQL Editor. Se já tivermos conhecimento em MySQL e na criação de funções em SQL, podemos usar comandos SQL para criar tabelas. Por exemplo, o comando CREATE TABLE todos com os dados necessários. Isso é mais simples para quem domina essa linguagem específica. Caso contrário, recomendamos usar o Table Editor, que é o que utilizaremos aqui.

Configuração da Tabela de Corridas

Abrindo o Table Editor, veremos a relação com todas as tabelas do nosso projeto. No momento, não temos nenhuma. Vamos clicar no botão verde "Create a New Table" para criar uma nova tabela. Vamos definir essa nova tabela como a tabela de corridas, que pode ser descrita como "tabela de registro de todas as corridas feitas por usuários".

Podemos ativar o real-time para futuras configurações, pois abordaremos isso ao longo do curso. Também está ativado o row level security (segurança a nível de linha). Após marcar todas as informações, definiremos as colunas, que são os dados que teremos dentro dessa tabela. Por padrão, já são adicionadas duas colunas: uma coluna de ID, que é o identificador de cada linha dentro de uma tabela, e created_at, que é a data de criação de cada item dentro de uma tabela.

Definindo Colunas da Tabela

Além disso, nós vamos precisar criar colunas para cada um dos dados que vamos registrar dentro da corrida. Por exemplo, será necessário registrar o tipo de treino. Vamos adicionar uma nova coluna e criar um nome. No projeto, chamamos o tipo de treino de type. Vou abrir o run para que possamos entender. Temos aqui o type, que é do tipo string. Podemos utilizar e seguir o mesmo padrão dentro da entidade de corridas. O type será do tipo string, ou seja, text. Ele não pode ser nulo, portanto, será obrigatório. Caso queiramos marcar como valor primário, podemos fazê-lo. Um valor primário é um valor que identifica aquela coluna ou linha e não pode se repetir em outras linhas. Por exemplo, o id é um valor primário.

Registramos o type. Vamos adicionar outra coluna para a description, que é a descrição de como foi o treino. É um texto, então escolhemos text. Vamos para a próxima coluna: o tempo. No projeto, colocamos como duration, que está em segundos. É uma duração em segundos da corrida, então será um inteiro. Vamos ter o duration, e o tipo dele será int. Temos opções como double, float point numbers, numeric, mas utilizaremos int8, que é o tipo de int para números inteiros.

Além do duration, teremos a distância, que no projeto é registrada em quilômetros. Ela é um double, ou seja, podemos ter valores como 5.5 km, 5.6 km, etc. A distância será um double, especificamente float8. Além da distância, temos também as calorias, que são inteiras dentro do projeto, e os batimentos cardíacos. No modelo, temos as calorias e o hearth rate. As calorias serão int8, e o hearth rate também será int8.

Testando a Tabela de Corridas

Com isso, temos todos os dados necessários para registrar uma corrida no banco de dados. Vamos salvar. O sistema está criando e adicionando as oito colunas. Esse processo pode demorar um pouco. Após a estruturação, temos a tabela de runs. Para testar se está funcionando, podemos clicar no botão verde e inserir uma linha, uma informação dentro da tabela, para verificar se será registrada.

Vamos testar. Clicamos em "Recessed Row". O id e o createdAt são gerados automaticamente, então não precisamos definir esses valores. Vamos para os outros. Podemos definir o tipo como "caminhada" e uma descrição de teste. A duração pode ser, por exemplo, 300 segundos, que equivalem a 5 minutos. A distância pode ser 1.2 km. As calorias, supomos que foram 80. O ritmo, ou batimentos cardíacos por minuto médio, foi, por exemplo, 100. Vamos salvar. Salvamos, e temos o primeiro item na tabela de corridas.

Próximos Passos: Integração com o Aplicativo

Temos o id, que é o id run, a data de criação, o tipo, a descrição, a duração, a distância, as calorias, o ritmo cardíaco médio, enfim, todas as informações necessárias para criar uma corrida. Com isso, já temos a estrutura de dados pronta para começar a integrar e mostrar esses itens, especificamente, na listagem do aplicativo, sem utilizar dados simulados, mas sim dados no banco de dados remoto, que podemos distribuir para todos os usuários da aplicação.

Nosso próximo passo é justamente fazer isso: pegar esses dados remotos dentro do Supabase e integrá-los com o aplicativo, para deixar de utilizar as funções simuladas e começar a utilizar as versões remotas.

Sobre o curso Flutter e Supabase: criando um app com BaaS

O curso Flutter e Supabase: criando um app com BaaS possui 113 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Preparando o Supabase
• Conectando Supabase com o Flutter
• Criando, editando e apagando corridas
• Paginação com o Supabase
• Dados em tempo real com supabase