Ficha 02 · FlutterFlow + Thunkable + publicação

1. flutterflow.io → sign up.
2. New project → name "Café Order" → blank.
3. Firebase setup:
4. console.firebase.google.com → New project "cafe-order-app".
5. Authentication → Sign-in method → enable Email/Password.
6. Firestore → create database (test mode para começar).
7. Voltar ao FlutterFlow → Settings → Firebase → conectar:
8. Project ID, App nickname.
9. Sigue prompts FF para auto-generar configs.

Após este passo, podes criar Firestore collections directamente do FF editor.

1. Firestore (FF Editor → Firestore → Create collection):
2. Collection "products":
   • id, name (string), price (double), photo (string url), description.

3. Adicionar 5 documentos de exemplo.

4. FF Page "Menu":

5. App Bar: title "Menu".

6. Body:

   • Column → ListView (Vertical).
   • Backend Query on ListView: Firestore → products → No filter.
   • Cell: Card →
   • Row:
     • Image (network) → bind to products.photo.
     • Column (flex):
     • Text → bind to products.name (bold).
     • Text → bind to products.description (small).
     • Text → bind to products.price + " €".
     • Button "+" → action: Add to cart (state).

7. Run → ver no preview.

1. App State (FF Editor → App State):

2. Add field "cart" → type "Document Reference" (Product) → List → default [].

3. Action no botão "+":

4. Update App State → Add to list "cart" the product reference.

5. AppBar badge:

6. Container com Text bind to "App State > cart > length".

7. Cart Page:

8. ListView → bind to App State "cart".
9. Each item: cell com Image, Name, Price.
10. Footer: Text "Total: " + Sum(cart items prices).

11. Button "Checkout" (sem implementação real ainda).

12. Remove from cart action: Update App State → Remove from list "cart" at index.

1. Firebase Authentication: já está ligado do exercício 1.

2. FF Pages:

3. Login: 2 TextFields (email, password), Button "Sign in" → Auth Action → Login with Email.
4. Signup: similar + name field → Auth Action → Create Account with Email.
5. Profile: read AuthenticatedUser data → display.

6. Splash: on page load → check currentUserUid → if signed-in, navigate Home; else Login.

7. Auth flow:

8. FF → Authentication tab → Initial Page logic:

   • If logged in → Menu.
   • Else → Login.

9. Logout button: Action → Auth → Log out → Navigate to Login.

1. Firebase Console → Project → Build → Cloud Messaging → enable.

2. FlutterFlow → Settings → Push Notifications → Enable.

3. Auto-gera código para registrar device token.

4. Run app no telemóvel (Test Mode ou build):

5. Pede permissão para notifications.

6. Após aceitar, FCM regista device token.

7. Firebase Console → Cloud Messaging → New campaign:

8. Title: "Especial do dia!"
9. Body: "Hoje café por 1€"
10. Target: All users.
11. Send.

Notification chega ao telemóvel em segundos.

Para notifications automáticas (ex: "ordem pronta"): Cloud Functions Firebase chamadas por trigger.

1. thunkable.com → New Project → Cross Platform → Blank.

2. Design tab:

3. Label "Tip Calculator" (header).
4. TextInput "billInput" (Type: Number).
5. Slider "tipSlider" (Min 0, Max 30, Value 15).
6. Label "tipDisplay" → "Tip: 15%".
7. Label "tipAmount" → "Tip: €0.00".

8. Label "totalAmount" → "Total: €0.00" (large, bold).

9. Blocks tab:

10. When tipSlider.Value changes:

    • Set tipDisplay.Text to "Tip: " + (tipSlider.Value rounded) + "%".
    • Set tipAmount.Text to "Tip: €" + (billInput.Text * tipSlider.Value / 100).
    • Set totalAmount.Text to "Total: €" + (billInput.Text * (1 + tipSlider.Value / 100)).

11. When billInput.Changed: mesma lógica.

12. Live test: instalar Thunkable Live app → scan QR code → testar instantaneamente.

1. Política de privacidade: - Gerador gratuito: termly.io ou app-privacy-policy-generator.firebaseapp.com. - Resposta: nome app + tipo dados (email, push token, etc.). - Output: URL para hospedar (GitHub Gist público, Google Docs publicado, ou Notion público).

2. Screenshots: - Capturar no telemóvel (premir botão Power + Volume Down em Android). - Resolução: dispositivos modernos OK (mínimo 1080x1920 portrait). - 4 ecrãs principais da app. - Editar com texto explicativo (Canva, Figma): "Lista todos os teus pratos", "Add new item with photo", etc.

3. Ícone: - 512x512 px PNG. - Sem texto pequeno (não se vê). - Cor distintiva. - Usar Canva / Figma / Photopea. - Free: lookmoji.com, iconfinder com creative commons.

4. Descrições: - Curta (Google Play 80 chars): "App para registar refeições diárias com fotos e calorias." - Longa (até 4000 chars): - Primeiras 2 frases mais importantes (mostradas em "ver mais"). - 3-5 features principais com bullets. - Quem é para. - Call to action.

5. Texto loja Apple: - Subtítulo (30 chars). - Promotional text (170 chars) — alterável sem update. - Keywords (100 chars separados por vírgula, sem espaços).

Stores valorizam textos claros, sem promessas exageradas, sem emojis em excesso.

Instalação PWA (sem stores): - Glide: app URL → no telemóvel → Add to home screen → ícone aparece. - FlutterFlow web build: similar. - Adalo: web URL → idem.

Critérios de comparação:

Quando escolher:

• Glide: validação rápida, internal tools, MVPs simples (1-3 dias).
• Adalo: apps que vão para stores, sem complicação técnica.
• FlutterFlow: apps sérias com futuro escalável, equipas técnicas.

Conclusão típica para projecto pessoal pequeno: Glide ganha em rapidez. Para empresa séria: FlutterFlow ou Adalo conforme orçamento. Para validação de ideia: Glide chega.