đŸ“± Initiation au dĂ©veloppement Mobile avec Flutter

đŸ“± Initiation au dĂ©veloppement Mobile avec Flutter

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 serialisation de donnĂ©es, a quoi cela sert ? Ex: transformer une rĂ©ponse JSON en objet Dart.
  • DiffĂ©rences principales (Performance, QualitĂ©, DĂ©ploiement) entre Hybride, PWA, Natif & Flutter
  • Dart, qu’est-ce que c’est ? DiffĂ©rence avec Javascript ? Qu'est ce que la gestion des optionnel en programmation, comment l'implĂ©menter avec Dart ?
  • Stateless vs Stateful, les Widgets et Cupertino vs Material dans Flutter ?
  1. CrĂ©ez un document sur Hackmd, Google Slides, Paste ou n’importe quel autre outils de prĂ©sentation.
  2. Faites des recherches sur votre sujet, comprenez le (environ 45 minutes)
  3. Présentez de maniÚre pédagogique (avec des exemples, des définitions simples et claires) au reste de la promotion. (environ 5 à 10 minutes de présentation)
  4. Déposez votre présentation (avec une page relatant vos sources) sur l'outil de collaboration de votre promotion.
  5. Vous pourrez utiliser les presentations lors de l'examen final.

🔎 Les endroits oĂč chercher

La doc de flutter, et leur super chaine youtube

đŸ“Č Votre premiĂšre application mobile

https://media.giphy.com/media/1TzKVQwH820wM/giphy.gif
Here we go again

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.

https://i.imgur.com/GdDY7dw.png

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”

https://i.imgur.com/0ywqNo1.png

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.

https://i.imgur.com/crqqXoI.png

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.

https://media.giphy.com/media/pPiEbdVp2EemAZucWg/giphy.gif

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

https://i.imgur.com/2vNjmRV.png

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

Le tout premier du genre :

VoilĂ  Ă  quoi ressemblait la 1Ăšre version du tout premier jeu du genre :

https://i.imgur.com/rjK4IjK.jpg

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 :

DĂ©fi Flamme(s)
Changer les couleurs de l'interface đŸ”„
Changer le nom de l'application đŸ”„
Prendre un autre thĂšme que celui des cookie đŸ”„
Changer la taille et la couleur de la police đŸ”„
Mettre une image de fond Ă  l'application đŸ”„đŸ”„
Mettre un icone d'application personnalisĂ© đŸ”„đŸ”„
Sauvegarder le nombre de cookie (https://pub.dev/packages/shared_preferences) đŸ”„đŸ”„
A chaque amĂ©lioration achetĂ©, le coĂ»t de l'amĂ©lioration augmente đŸ”„đŸ”„
Mettre une image de cookie Ă  la place du bouton đŸ”„đŸ”„
Faire apparaĂźtre le coĂ»t de chaque amĂ©lioration et ce qu'elle fait đŸ”„đŸ”„
Pouvoir acheter un multiplicateur de cookie qui coĂ»te 8 đŸȘ qui fait +1 a chaque clique đŸ”„đŸ”„đŸ”„
Animer le changement de cookie đŸȘ possĂ©dĂ© đŸ”„đŸ”„đŸ”„
Ajouter une bibliothĂšque Ă  son application et s'en servir đŸ”„đŸ”„đŸ”„
Changer la police en utilisant une bibliothĂšque Google Fonts đŸ”„đŸ”„đŸ”„
Les graphismes sont cohĂ©rents đŸ”„đŸ”„đŸ”„
Pouvoir acheter un "clique automatique" qui fait +1 toutes les secondes đŸ”„đŸ”„đŸ”„đŸ”„
Faire apparaĂźtre chaque curseur achetĂ© sur le cookie (utiliser une gridview) đŸ”„đŸ”„đŸ”„đŸ”„
Faire une animation d'un '+1' qui apparait et disparaĂźt đŸ”„đŸ”„đŸ”„đŸ”„
Le cookie change d'apparence en fonction du nombre cliquĂ© (par exemple en fonction de la frĂ©quence de clique) đŸ”„đŸ”„đŸ”„đŸ”„
Le cookie change d'apparence en fonction du nombre de cookie total đŸ”„đŸ”„đŸ”„đŸ”„
Ajouter un son et une vibration Ă  votre jeu đŸ”„đŸ”„đŸ”„đŸ”„đŸ”„

Exemple

https://i.imgur.com/ZmgzyiY.png

Assets graphiques

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

Nom Image
Cursor Image Curseur
Background Image Backround
Cookie Image Cookie
White Halo Image Halo
Hand Image Main

Ressources Ă  lire pour avancer

Commentaires

Connectez vous ou devenez un membre de Async pour rejoindre la conversation.
Entrez un mail ici pour recevoir un lien de connexion, super simple âšĄïž