Ficha 01 · Low-code básico
Exercício 1 · Conta Airtable + base "Tarefas"
Cria conta gratuita Airtable. Cria base "Tarefas Pessoais" com tabela "Tasks" e fields: - Nome (single line text) - Prioridade (single select: Alta/Média/Baixa, com cores) - Feita (checkbox) - Data limite (date)
Adiciona 5 tarefas de exemplo.
Resposta:
Passos: 1. airtable.com → sign up gratuito. 2. Add a base → Start from scratch → "Tarefas Pessoais". 3. Tabela "Tasks" (rename da default "Table 1"). 4. Renomear "Name" → "Nome". 5. Adicionar field "Prioridade" → Single select → opções Alta (vermelho), Média (amarelo), Baixa (verde). 6. Adicionar field "Feita" → Checkbox. 7. Adicionar field "Data limite" → Date. 8. Inserir 5 records.
Screenshot da base deve mostrar grid view com tudo preenchido.
Exercício 2 · Views múltiplas em Airtable
Continuando, cria estas views adicionais: - Kanban agrupada por Prioridade. - Calendar baseada em Data limite. - View filtrada "Por fazer" (Feita = unchecked).
Resposta:
- Kanban: + (em Views) → Kanban → Group by = Prioridade → Create.
- Calendar: + → Calendar → Date field = Data limite → Create.
- View filtrada "Por fazer":
- Duplicar Grid view, renomear "Por fazer".
- Filter → Where Feita = unchecked.
- Sort by Data limite ascending.
Cada view mostra a mesma data mas visualizada diferente.
Exercício 3 · Form em Airtable
Cria uma view do tipo Form para a tabela Tasks. Customiza para ter título, instruções, e só os fields Nome + Prioridade + Data limite visíveis. Partilha o link.
Resposta:
-
- → Form view → "Form Tasks".
- Editor visual abre:
- Título: "Adicionar Tarefa".
- Descrição: "Preenche para adicionar à lista".
- Esconder field "Feita" (esquerda → toggle off).
- Marcar Nome e Prioridade como required.
- Share button (topo direito) → Share form → copy link.
- Quem abre o link pode submeter tarefas — entram automaticamente na BD.
Casos de uso: feedback, inscrições, recolha de dados.
Exercício 4 · Glide app
Cria conta Glide gratuita. Conecta a Google Sheet (cria nova: Nome, Foto URL, Email, Cargo, Telefone — 5 colegas/contactos). Glide gera app mobile. Testa instalação no telemóvel.
Resposta:
- Google Sheet: drive.google.com → New Sheet → "Equipa".
- Colunas: Nome, Foto (URL pública), Email, Cargo, Telefone.
- 5 linhas com dados (fotos de unsplash.com são públicas).
- Glide: glideapps.com → sign in com Google → New App → "From Google Sheets" → escolher "Equipa".
- Glide auto-gera lista + detalhe.
- Customizar:
- Style: cards com foto.
- Theme: cor primary.
- Actions no email/telefone: open mail / call.
- Share → copy public link.
- No telemóvel: abrir link → "Add to Home Screen" → ícone aparece como app.
Resultado: directório profissional, instalável, em 30 minutos.
Exercício 5 · Bubble — projecto + página
Cria conta Bubble gratuita. Cria app "MeuApp". Na Index page: - Adiciona texto "Bem-vindo". - Input + Button "Submeter" → ao clicar mostra alert com o texto do input.
Resposta:
- bubble.io → sign up → New app → name "MeuApp" (não usar template).
- Editor abre. Design tab por defeito.
- Drag Text element → "Bem-vindo" → font size 32.
- Drag Input → posicionar abaixo.
- Drag Button → "Submeter" → ao lado do input.
- Workflow tab:
- "When Button Submeter is clicked":
- Add an action → Element Actions → Show alert.
- Message:
Input A's value(clica para inserir referência ao input).
- Preview (canto superior direito) → testar.
Bubble gera URL única tipo myapp-12345.bubbleapps.io.
Exercício 6 · Bubble — Data Type + Repeating Group
Continuando, cria Data Type "Note" com fields title (text) e content (text). Na página:
- Inputs para title e content + Button "Save" → cria novo Note na BD.
- Repeating Group abaixo mostra todas as notes existentes.
Resposta:
Data:
1. Data tab → Data types → New type → "Note".
2. Add fields: title (text), content (text).
Design:
3. Adicionar 2 Inputs ("TitleInput", "ContentInput") + Button "Save".
4. Adicionar Repeating Group:
- Type of content: Note.
- Data source: Do a search for Notes.
- Set layout (Vertical, 1 column).
- Dentro da cell: Text com Current cell's Note's title + Text com Current cell's Note's content.
Workflow: 5. "When Button Save is clicked": - Create a new thing: type Note. - title = TitleInput's value. - content = ContentInput's value. - Reset inputs.
Preview: escreve nota → save → aparece na lista abaixo. BD funcional.
Exercício 7 · Bubble — delete e edit
Adiciona ao exercício anterior: - Botão "X" em cada nota → apaga. - Click na nota → popup com inputs preenchidos + botão "Update".
Resposta:
Delete: 1. Na cell do Repeating Group, adicionar Button "X" pequeno. 2. Workflow: When Button X clicked → Delete Current cell's Note → Confirmation popup (opcional).
Edit: 1. Adicionar Popup à página (não visível por defeito). 2. No popup: inputs "EditTitle", "EditContent", Button "Update" + Button "Cancel". 3. Workflow: When cell is clicked → Show popup → Set states of popup (current note = Current cell's Note). - (Ou: directamente popular inputs com values do Current cell's Note via data source). 4. When Update clicked → Make changes to Current popup's note → title = EditTitle's value, content = EditContent's value → Hide popup.
Bubble usa "states" para guardar referências temporárias entre cell e popup.
Exercício 8 · Airtable + Bubble integração
Cria base Airtable "Products" com 5 produtos (nome, preço, foto). Em Bubble, instala plugin "API Connector" e configura ligação à API de Airtable. Mostra produtos numa Repeating Group.
Resposta:
Airtable side:
1. Base "Products" com tabela Products: name (text), price (currency), photo (attachment).
2. 5 records.
3. Account → Developer hub → Personal access token → criar token com scope data.records:read na base.
4. URL base: https://api.airtable.com/v0/[BASE_ID]/Products (BASE_ID em url da base).
Bubble side:
1. Plugins → add → "API Connector".
2. Add another API → Name "Airtable".
3. Authentication: Private key in header → key Authorization, value Bearer YOUR_TOKEN.
4. Add another call:
- Name: "Get Products".
- Method: GET.
- URL: https://api.airtable.com/v0/BASE_ID/Products.
- Initialize call → Bubble lê resposta JSON e cria tipo.
5. Repeating Group:
- Type: AirtableProduct (gerado pelo plugin).
- Data source: Get data from external API → Airtable - Get Products.
- Cell: Text Current cell's AirtableProduct's fields name.
Bubble + Airtable é stack muito comum: Airtable como BD visual, Bubble como UI.