Objectifs Pédagogiques

• Connaitre les différentes technologies de développement mobile
• Développer une application mobile simple
• Accepter de ne pas savoir comment tout fonctionne derrière son code
• Savoir utiliser Android studio ou VS Code pour développer avec Flutter
• Créer une interface mobile avec Flutter
• Utiliser les raccourcis d’assistance Android Studio et de refactoring
• Être rigoureux des protocoles
• Comprendre le concept de Widget
• Utiliser les outils de développement spécifique à Flutter
• Connaitre les basiques de la programmation Dart
• Naviguer dans la documentation
• Naviguer dans les bibliothèque Flutter (Pub.dev)
• Intégrer une bibliothèque Flutter dans une app
• Comprendre le système de "Null Safety" en programmation moderne

Let’s do it ⚔️

Création de votre première application Mobile avec Flutter

Flutter est un framework mobile multiplateforme, qui est quasi-natif.

En réalité le framework Flutter n’utilise ni des composants natifs, ni du web pour son interface mais des composants fait maison qui sont rendus par la couche graphique bas niveau du système d’exploitation.

En gros imaginez les interfaces de Flutter comme un jeu vidéo rendu sur votre écran, où les personnages sont des boutons et les niveaux sont des interfaces utilisateur.

Cela permet d’avoir une performance égal au rendu d’un jeu vidéo (60 FPS), d’éviter d’être dépendant de la plateforme (puisque les couches de développements graphique sont similaires entre OS) et d’avoir bien plus de performance qu’avec un framework web comme Cordova / Ionic.

Les plateformes

Flutter fonctionne sur :

• 📲 iOS
• 🤖 Android
• 🕸 Le Web
• 🖥 Linux, MacOS & Windows
• 🚙 iOT (Objets connectés)

👌 Pour en savoir plus sur les nouveautés de Flutter

☝️ Travail sur les notions !

Avant de commencer les choses sérieuses on va faire un petit tour des concepts de bases.

🎓 Ce travail compte dans l'évaluation

Séparez vous en plusieurs groupes et répartissez vous les sujets suivants :

• Qu'est-ce que la sérialisation de données, a quoi cela sert ? Ex: transformer une réponse JSON en objet Dart. Et comment faire un appel réseau en Flutter ?
• Différences principales entre Hybride, PWA, Natif & Flutter. Comment choisir l'une ou l'autre de ces solutions dans la vie réelle ? Comment créer la navigation dans une application Flutter ? Donner un exemple avec Navigation 1.0.
• Dart, qu’est-ce que c’est ? Les différences avec Javascript ? Qu'est ce que la gestion des optionnel en programmation, comment l'implémenter avec Dart ? Comment créer une classe en Dart ?
• Stateless vs Stateful Widgets, Cupertino vs Material dans Flutter ? Donner un exemple de construction d'une interface avec des widgets Flutter, comprenant au moins un Single Child widget et un Multi Child Widget. Qu-est-ce qu'un Child ? Comment peut-on créer son propre Widget ?

Créez un document sur Hackmd, Google Slides, Paste ou n’importe quel autre outils de présentation.

Faites des recherches sur votre sujet, comprenez le (environ 45 minutes)

Présentez de manière pédagogique (avec des exemples de code, des définitions simples et claires) au reste de la promotion. (environ 5 à 10 minutes de présentation)

Déposez votre présentation (avec une page relatant vos sources) sur l'outil de collaboration de votre promotion.

🔎 Les endroits où chercher

La doc de flutter, et leur super chaine youtube

• Des démos https://gallery.flutter.dev/#/
• Google et Wikipédia
• Reddit, etc.

📲 Votre première application mobile

Avant de commencer l’exercice, créez un fichier texte (peu importe l’éditeur pour le moment) afin de noter les réponses aux diverses questions qui seront posées durant cet exercice.

Ouvrez l’IDE Android Studio

Normalement vous avez installé les outils en amont de ce cours, si c’est pas le cas, alors j’espère que vous avez une bonne connexion, et le guide d’installation officiel.

Cliquez sur Create a new Flutter Project

Nous allons créer un nouveau projet Flutter, qui est le ☝️Framework que nous allons apprendre à utiliser durant cette formation.

Assurez vous qu’il y a bien un bouton Create a new Flutter Project autrement c’est qu’il manque le plugin Flutter à votre IDE, dans ce cas appelez le formateur ou essayer de vous débrouiller en lisant la documentation officielle ici)

Choisissez Flutter Application

Vous devriez voir cette fenêtre apparaitre, cliquez sur “Flutter Application”

Remplissez le formulaire

Choisissez un nom de projet comme “my_first_app”, les noms en Français sont proscrits par convention, il faut vous habituer à l’anglais dans le développement informatique.

Choisissez ensuite le lieu de stockage de votre code source, puis validez en cliquant sur Next

Cochez bien les 2 cases sous Platform channel language cela nous permettra de ☝️compiler notre application pour Android et iOS.

Vous devriez voir du code source apparaitre. Maintenant regardez le formateur fixement, on va attaquer les choses sérieuses 😈.

Itération 1 - 🍪 Cookie Clicker

Vous avez de la chance le projet Hello World de base de Flutter est un clicker ! On va pouvoir partir de cette base :)

Mini défis !

• Vous allez réaliser une application de type ‘clicker game’.
• Vous allez devoir choisir et réaliser des défis, à chaque défis réalisé vous gagnez le nombre de flamme correspondant.
• A la fin de la journée regardez votre nombre de flamme, le but du jeu est d’en avoir le plus possible !

C’est quoi un clicker game ?

Le jeu incrémental (de l’anglais incrémental), ou idle game (littéralement « jeu inactif »), ou encore clicker game est un genre de jeux vidéo dont la mécanique de jeu principale consiste en de simples actions à l’interactivité volontairement limitée : il peut s’agir de cliquer à répétition ou bien de simplement laisser le jeu s’exécuter, le « joueur » n’ayant alors rien à faire. Le plus souvent, cette mécanique de jeu entraîne une progression monétaire virtuelle permettant d’améliorer certaines caractéristiques afin encore une fois d’accélérer l’acquisition monétaire. Ce genre apparu au début des années 2000 s’est popularisé avec le succès de Cookie Clicker en 2013 et s’est largement répandu au sein des jeux sur navigateur. -Wikipedia

Un cookie clicker

Le tout premier du genre :

Voilà à quoi ressemblait la 1ère version du tout premier jeu du genre :

Le premier Cookie clicker mobile

Principe :

Un Cookie Clicker est un jeu vidéo dont l’objectif est de produire un maximum de cookies.

Système de jeu :

Le joueur doit produire des cookies en cliquant sur un cookie situé à gauche de l’écran.

Les cookies ainsi accumulés permettent d’acheter des objets qui produisent des cookies de manière autonome ou de façon plus rapide : sont ainsi obtenus fermes, usines, mines, mais aussi souris pour cliquer à sa place, etc…

Le prix de ces objets augmentant progressivement. Le joueur a aussi accès à des améliorations permettant d’améliorer sa production, par objets, par clics, ou dans l’absolu. Le jeu ne connaît à l’heure actuelle pas de fin véritable.

Principe des défis :

• Chaque participant choisis les défis qu’il veut relever.
• Notez les défis que vous voulez relever, ainsi que votre objectif de flammes total.
• Dès qu’un défi est relevé appelez le formateur pour qu’il vienne le valider.

Attention si vous faites valider votre défis mais qu’il n’est pas terminé vous perdez des points !

• Un défi réussi : Vous remporter le nombre de flamme correspondant 🔥
• Un défi échoué : Vous perdez le nombre de flammes correspondant 💧

Liste des défis :

Exemple

Assets graphiques

Voici, pour vous aider, quelques assets graphiques pour démarrer rapidement

Ressources à lire pour avancer

• Pour comprendre le concept de base de Flutter : les widgets
• Ajouter une image à votre projet Flutter
• Les layouts avec Flutter, comment agencer, construire son interface widget par widget
• Utilisez le Hot Reload (vous ne voudrez plus jamais faire de web après :p)
• Les animations avec Flutter
• → Source très utile pour voir comment les widgets se comportent, quand les utiliser etc. Le material Design pour Flutter
• Générer une palette de couleur pour material
• Générer les différentes tailles d’image pour un icone d’application
• Tapez “Flutter” sur le play store ou l’app store pour avoir des applications de “démo” avec des themes et idées et même du code directement parfois
• Comment ajouter des bibliothèques à votre application ?
• 💙 Et le meilleur site du monde pour les bibliothèques Flutter : Pub.dev