Sujet

Créer une application Flutter qui fonctionne aussi bien sur Android que sur iOS.

L'application se base sur le module de GP de cette année. Ainsi vous devrez retrouver vos documents et dossiers de conceptions pour pouvoir avoir du contenu utile à mettre dans l'application mais aussi pour bien comprendre l'intérêt de l'application.

Lien vers le Drive de l'équipe qui à inspiré ce projet

Je vous ai mâché le travail le plus possible pour que vous puissiez vous focaliser sur :

• L'application Flutter et ses fonctionnalités
• Rendre cohérente la communication des données entre back/front

Le reste devrait être une tranche de gâteau (ça rend moins bien qu'en anglais.)

Matériel requis :

• Au moins 1 smartphone iOS (si iOS vous aurez besoin d'un mac aussi) ou Android.

🏗 Architecture et Flux

Basez vous sur le schéma suivant pour comprendre ce que l'on attend de votre système.

Flutter CN

Whimsical

🍿Le back-end

Grace à la puissance du cloud, vous allez pouvoir mettre en place un back-end très facilement. Une app mobile c'est aussi et surtout un back-end dans l'immense majorité des cas. Ainsi nous allons :

• Mettre en place un back-end Strapi avec une base de données 🐘 Postgres
• Déployer le tout sur Heroku
• Utiliser un serveur de stockage S3 pour les fichiers (fourni)

Vous devrez donc définir correctement les modèles de données sur l'application et sur le back-end, gérer le flux de données et les envois de fichiers / de requêtes.

Si vous vous débrouillez bien, le back-end ne nécessite aucune ligne de code, que de la configuration.

🆙 Upload de fichiers sur Strapi

Vous devrez configurer l'upload des fichier sur Strapi :

Nous avons mis en place un bucket Scaleway pour vous. Heroku ne garanti pas la conservation des fichiers images ou SQLite puisque l'environnement se détruit / se reconstruit aléatoirement.

• Il faudra utiliser le plugin Upload de Strapi quand vous en serez là  demander moi les identifiants du bucket s3 et nous pourrons mettre ça en place.
• Il est possible (et recommandé) d'utiliser le `plugin provider` suivant : https://github.com/team-appforge/strapi-provider-upload-scaleway qui va vous faciliter la tâche

📱L'application

Utiliser les maquettes fournies pour éviter de perdre du temps en conception

Il se peut que vous deviez ajouter / modifier les interfaces en fonction de contraintes de développement ou de vos choix, mais ne déviez pas trop, vous n'aurez pas le temps.

Flutter CN - Wireframe

Whimsical

Les grandes parties de l'application :

• Faire le système de connexion au back-end (Strapi + JWT + Flutter)
• Utiliser Provider pour diffuser dans l'application les données en temps réelle
• Faire la navigation entre les vues
• Réaliser les différents écrans (Ressources, Profil, Questions)
• Réaliser la capture audio + l'envoi de rapport au back-end
• Mettre en place la bibliothèque de visualisation graphique des compétences

Organisation

Il y a beaucoup à faire, et pour vous aider voici plusieurs manières de grouper intelligemment le développement :

• ⭐️ Commencer par élaborer votre Navigation (l'enchainement des écrans et le choix de l'API de navigation Flutter)

Ensuite répartissez vous des features :

• Feature A : Capture Audio -> Upload d'un rapport (HTTP+ Strapi)
• Feature B : Authentification (HTTP + Strapi) -> Provider -> Shared Preferences
• Feature C : Fetching des questions (HTTP + STRAPI) -> Questionnaire de compétence -> Profil (avec graphique)
• Feature D : Fetching des ressources (HTTP + Strapi) -> Provider -> Affichage des ressources

Pour terminer l'application :

Mixer toutes les features avec Provider, une couche HTTP commune et une interface comme sur la maquette.

Ressources

Back

• Comment déployer Strapi sur Heroku avec PG
• Content API dans Strapi
• Upload d'un objet et d'un ou plusieurs fichier dans la même requête avec Strapi

Les données du questionnaires

Attention à cette partie, essayer de vous limiter à 4 ou 5 compétences à mesurer pour ce MVP.

Retrouver les ressources que vous aviez eu ou fait en GP pour créer ou copier un questionnaire "savoir-être" simple (pas plus de 8 questions) qui permettra de définir un niveau de départ pour chaque grandes compétences.

Peu importe la pertinence scientifique, puisque vous pourrez modifier les questions à votre guise via le back-end. Il faut montrer un concept ici.

Fetching (HTTP+STRAPI)

• Récupération des données via HTTP :
• Création de modèles Dart
• Décodage des données JSON -> Modèles Dart

Tout est expliqué dans ce cookbook

Shared Preferences

Utile pour sauvegarder des données propre à l'utilisateur pour personnaliser son experience. C'est comme le localStorage du web.

On l'utilise avec la bibliothèque shared_preferences

Provider

Pour bien comprendre l'intérêt de provider, et comment l'intégrer dans votre app. Réalisez en groupe le projet d'exemple proposé par Flutter, n'hésitez pas à poser des questions et à bien lire l'exemple.

Simple app state management

A simple form of state management.

Flutter Logo

Les fichiers

• L'envoi et la réception des fichiers sons ne doit pas se faire en base64, vous devrez gérer du binaire (Multipart ou binary body).

En Flutter avec la lib http c'est comme ceci : https://pub.dev/documentation/http/latest/http/MultipartRequest-class.html

Enregistrement audio

• Enregistrer de l'audio avec Flutter (penser à regarder le projet de démo qui contient le code nécessaire)
• Gérer les permissions avec Flutter (la démo de l'enregistrement audio contient déjà tout, il faut ajouter les dépendances recommandées)

Natif

Puisque vous allez toucher à des fonctionnalités bas niveau du framework de chaque système, vous devrez modifier un peu de configuration native, notamment pour les permissions.

Hésitez pas à me poser des questions sur ce point plutôt que galérer avec de la configuration bête et méchante.

Liens à consulter pour réaliser le projet

• Exemple de code et démo de Flutter (Flutter Gallery)
• Exemples d'applications
• Bibliothèques Flutter : Pub.dev

🪝Points importants

• Gestion des autorisation et rôles dans Strapi directement
  • Pensez à gérer cela avec le plugin Permissions & Roles
• Utilisez les api d'asynchronicité de Flutter (Stream et Future) et comprenez les, pour l'examen finale il y aura des questions dessus.
• Pas de mode hors-ligne demandé, mais pour sauvegarder certaines données d'identifications il faudra surement utiliser les sharedPreferences
• Vous aurez probablement pleins d'idée pour améliorer l'application durant le développement, vous verrez des choses qui manque etc. Attention ! Réalisez déjà l'essentiel, le "sucre" on le rajoute après, quand on a le temps.

Modalités

• 🙌 Travail par équipe de 4 maximum.
• 🗓 A présenter à Philippe lors de la dernière séance de Flutter.

Tips

Si vous avez une erreur du type :

symbol(s) not found for architecture arm64 
# ou
Undefined symbols for architecture arm64:

[BUG]: Undefined symbol: ___gxx_personality_v0 · Issue #666 · Canardoux/flutter_sound

Flutter Sound Version : FULL or LITE flavor ?LITE Important: Result of the command : flutter pub deps | grep flutter_sound |-- flutter_sound_lite 8.0.1+11 | |-- flutter_sound_platform_interface 8.0...

GitHubCanardoux

Autrement pour iOS pensez qu'il vous faut un compte Apple Développeur pour build sur un appareil physique.

Rendus

Sur Drive seront attendus :

• Les liens de vos répertoires git pour le projet
  • 1 repertoire pour l'application
  • 1 pour la partie serveur.
• Une démonstration de l'application sous forme de vidéo pour la postérité et montrer qu'on est des bons sur Annecy
• L'URL du serveur (en ligne et accessible)
• Bonus : L'URL de la documentation d'API du serveur

Ne versionnez jamais des identifiants de connexion, ou des clés d'API !

Aller plus loin

• Listing des rapports dans la partie "Rapport d'expédition"
• Supprimer un rapport
• Nommer un rapport
• Faire une interface back-end vraiment utile pour les formateurs
• Faire les défis du jour

Déploiement sur le Play Store

Bonus : Vous pourrez déployez votre app sur le PlayStore, nous vous prêteront notre compte développeur Google

Rendez vous ici pour deployer votre application sur le Playstore.