Dvelopper les app Mobile flutter : Comprendre son ecosysteme à travers Quiz Codeur

Il faut au prealable avoir dejà lu les posts suivant (ces liens demandent d'etre abonné du blog si vous ne l'etes pas encore faite le c'est un seul click vous pouvez utilisez votre compte facebook ou google pour le faire):

1=> Documentation tecnique backen/Backoffice/API REST c'est ici

2 => Documentation technique Flutter + Reactjs c'est ici

3=> Fonctionalité QuizCodeur c'est ici 

4=> Fonctionalité à ajouter, integrer, developper => ici

En Grande ligne qu'est ce que Flutter?

C'est une framework de developpement multiplateforme ce qu'on appelle en jargon du coding une SDK(software developement kit en anglais) mis sur pied par google pour faciliter la creation des applications multiplatforme et va au dela des seules applications mobiles, en parole simple, avec un meme code flutter, on peut generer sans grand effort une meme app pour android, ios, web, PWA ou meme desktop.L'image suivante decrit l'ecosystem de flutter

Flutter utilise le langage Dart, qui est un lanage orienté objet proche de c#,java, typscript et meme si vous avez eut à travailler avec javascript vous vous y trouverez et comme je vous ai toujours dit, le langage de programmation importe peu et ne doit pas etre un frein pour vous quand il s'agit d'apprendre une nouvelle technologie car d'un langage à l'autre seul les syntaxes changes mais le font est le meme et on a pas besoin de chercher forcement d'abord à comprendre dart pour comprendre flutter on comprendra dart en codant les app pour flutter ça doit etre l'approche de tout dev qui sort d'un autre langage.

Comment Flutter fait il pour reuissir à creer des applications natives multiplaformes?

Flutter est une plateforme pour créer des app natives, car en fait flutter dessine à l'ecran lui meme ses propres composantes à travers la bibliothèque appellé skia dejà utilisé pour le rendering de google chrome, donc flutter sur chaque plateforme, intercepte le canvas natif de la plateforme et dessine lui meme à travers le moteur graphique Skia à l'ecran, c'est à dire que les widgets de flutter sont dessiné par flutter à l'ecran et non son pas des SDK natif des plateformes, dans flutter, tout est widget, tout ce que vous voyez à l'ecran (bouton, appbar, menu, list, texte etc..) dans flutter sont des widgets(des componentls si on etait en reactjs ou angular par exemple), il y a meme des widget invisible juste pour faire le layout, par exemple des widgets pour creer des espaces, des colonnes, des lignes, des separateurs etc.. donc en bref comme l'image de ce post, flutter c'est un arbre de widget. 

De nos jours il y a de milliers de app professionelles mobiles fait avec Flutter et notre plateforme QuizCodeur suit la meme logique en image je vous donne juste quelque super app que vous trouvez sur les stores fait en flutter:

Architecture de Flutter

Flutter est basé sur une architecture qui contient les composantes suivantes:

Le Framework : dans cette categorie/layer ecrit en dart, on retrouve les bibliothèques qui nous servent à faire les app (bibliothèques de thèmes, widget, animations, gesture, layout bref les fonctionalités de bases), on retrouve aussi dans ce layer ce qu'on appelle les plugin cet à dire des bibliothèques specifiques qui font interaction avec la plateforme, par exemple des bibliothèques pour l'accès au camera, la serialisation et deserialisation des fichier json,la geolocalisation, les payement avec In App purchase par exemple car ces fonctionalités sont présent dans les plateformes et comme flutter a ses propres composantes il faut bien des plugin qui doivent faire un pont entre le monde flutter et certaines operations specifique aux plateformes et cela est fait à travers ce qu'on appelle plugin.

Le layer Engine : contient le moteur de flutter, il est fait en c++,c'est là ou on retrouve les bibliothèques pour faire les operations primitives comme le rendu graphyque, l'I/O(entree/sortie) etc..

Embbeder : utilisé pour le packatage dans chaque plateforme.

Learning by doing : comment est organisé le code flutter de QuizCodeur?

Pour les dev qui font partie du projet Flutter (qui veut en faire partire doit juste me communiquer son account github et surtout on doit etre sur un seul projet à la fois si non on risque de se perdre dans differents projets), vous devz avoir aussi lu tous les liens mentionnés en debut de ce post car ils continnenent dejà certaines informations et lien pour vous permettre de prendre la main et de connaitre très bien le projet que j'eviterai de repeter ici dans ce post le projet est structuré en grande ligne comme en image:

1. Vous devz toujours ouvrir votre projet flutter dans android studio en modalité "Project" car ça nous donne generalement d'un seul coup d'oeil toute l'aborescence du contenu du projet de manière qu'on peu à vu d'oeil connaitre exactement toutes ses parties ou les repertoires qui le composent.

2. Quand on crée un projet Flutter, on a le choix de specifier à l'avance les plateformes (android, ios, web, desktop etc..) qu'on veut dès le depart integré au projet et flutter nativement vous creez un repertoire destiné à chaque plaforme attention, nous en tant que developpeur, rarement on va coder ou developper ou ecrire des lignes de code dans ces repertoires, generalement flutter au moment de la compilation du code dart depose dans ses repertoires les resources specifiques à chaque plateforme, les applications android sont fait soit en java ou kotlin(recommandé actuellement par google) donc flutter doit produire dans ce repertoire du resource specifique pour android et du code en kotlin, alors que dans le repertoire de ios, il doit produire les resources specifiques a apple ios et du code en switf etc.. le plus souvent nous en tant que developpeur, c'est la ou on par mettre les images specifiques à chaque plaformes par exmple dans QuizCodeur Flutter on a ceci:

Ceux qui ont eut à programmert les app natives à android avec java ou kotlin ne se perdront absolument pas dans l'image ci dessus, on reconnais la les repertoires ou on met les images et ouvrez le pour voir les images de la app android QuizCodeur tout se trouve là bas, un fichier important que le plus souvent on peut manipuler à la main dans ce repertoire c'est le fichier AndroidManifest.xml, c'est un fichier très très important car Android au lancement de chaque app, lit ce fichier qui contient les metadonnées de la app et aussi certaines actions/operations que la app veut faire sur le smartphone, donc c'est un fichier obligatoire pour tous les app android que ce soit fait en flutter, ionic, Xamarin, react native etc.. ce fichier est obligatoire, pour en savoir plus sur les elements de ce fichier important, je vous invites à lire cet article

3- Assests : c'est le repertoire ou on doit mettre les resources comuns à toutes les plateformes, par resources j'entends par là : les images, les fichiers audio, les fichier json qui nous servent pour le projet, les fichiers xml etc.., si vous ouvrez ce repertoire, il est organisé comme suit :

la app QuizCodeur est multilingue, du moins ça a été projecté pour supporter plusieurs langues, actuellement l'anglais par defaut, le français et l'italien(car je vis et travaille en italie) mais on pourra supporter plusieurs langues, il y a une option dans la app dans le menu qui permet à l'utilisateur de changer la langue de la app et en un coup on passe d'une langue en une autre pour reuissir cettre traduction automatique, le projet QuizCodeur utilise des fichiers json que vous trouvererz dans le repertoire Assest/Languages chaque langue ayant sa propre traduction et au demarage de la app, tous les langues supportées par la plateforme sont lues à partir de leur json correspondant plus sauvées dans les préferences de l'utilisateur à travers HIVE , dans la meme lancée vous trouverez dans Assests, un repertoire qui contient les fichiers audio utilisé pour le quiz par exemple quand l'utilisateur trouve ou rate une question il y a un song different qui est lu directement de ce repertoire etc.. bref vous avez compris à quoi sert le repertoire assests.

4- Le repertoire Build : au debut vous naurez pas ce repertoire, on l'obtient seulement quand on compile ou debug l'application flutter, flutter creer et regenere ce repertoire a chaque compilation du projet, et c'est ça qui contient les fichiers executable qu'on deploie dans les plateformes par exemple la apk pour android ou l'ipa pour ios ou un repertoire avec les fichier html et javascript s'il s'agit d'un projet web etc..

5. Le repertoire Ios : c'est l'euivalent du repertoire android abordè ci dessus, ceux qui on eut a faire une app ios avec Xcode et objectif-C ou switf vont immediatement se retrouve dans la structuration de ce dossier qui contient les resource exclusif pour ios si on en a et pour le moment on n'en  dira pas plus.

6. Lib: Ce repertoire c'est le coeur du projet, c'est la ou il y a notre code source ecrit en dart qui contient les fichier .dart de notre projet, generalement dans le langage dart on parle de regroupement de code en package un peu comme en java, regrouper le code en package c'est comme regrouper les fichier par repertoire et sous repertoire et sous repertoire etc... donc quand vous mettez le source code d'un widget ou d'une fonctionalité dans un repertoir, il fait partire du package de ce repertoire pour expliquer à travers des images

Notre projet QuizCodeur est fait de plusieurs package, chaque package contient des sous fonctionalités du projet, et chaque fonctionalité est contenu soit dans un rtepertoire, soit dans un sous repertoire etc.. en coding, on divise toujours pour mieux reigner et s'organiser, si une fonctionalité est complexe, la première idée c'est de le decouper en petite fonctionalité minuscules qu'on peut facilement resoudre et les fonctionalitès en amont feront appelle à ces fonctionalités pour accomplir la tache de depart, ça c'est le B-A=BA du coding d'ou la naissance des package et de leur organisation en repertoire, donc un package=une macro fonctionalité. nous avons 4 Macro fonctionalités dans QuizCodeur App, features, UI, utils, App contient tout ce qui faut pour demarrer la app, Features les microfonctionalités de tout genre, UI les screens et els widget donc tout ce que vous voyez à l'ecran, utils c'est un helper donc les choses generiques qu'on utilise un peu partout de gauche à droite dans le projet. Le fichier main.dart est le fichier qui contient le point d'entrée de tout projet flutter, donc le code du demarage de la app flutter, ce fichier fait partir du package principale et notre package principale est "itinnovdesign" qui est specifié dans le fichier pubspec.yaml

c'est pourquoi vous observerez en parcourant tous les fichiers que les import qui font reference à ce package sont ceux que nous avons codé nous meme et les autres import font reference au bibliotheque externe, donc dans le fichier main.dart on retrouve le code suivant:

qui a fait du java, c, c#, python etc.. retrouve la fonction main, c'est cette fonction qui est appellé au demarage de la app, et nous faisons appelle au à la fonction initializeApp() qui se trouve dans "import 'package:itinnovdesign/app/app.dart' qui contient tout ce qu'il faut pour construire le premier ecran à faire voir à l'utilisateur c'est egalement dans ce fichier qu'on construit toutes les données qui seront manipulées par la app en faisant des requetes HTTP au backend REST API en utilisant un gestionnaire des état qu'on appelle Bloc/Cubit, comme dans l'image suivante pris de app.dart, vous trouverez partout dans le code de gauche à droite l'utlisation de Bloc/cubit à travers des widget specifique BlocProvider etc..

c'est quoi un Gestionnaire d'etat? State manager?

Une application comme QuizCodeur est plein de widgets, beaucoup de widgets meme que vous ne pouvez immaginer il suffit de voir les milliers de classes utilisés dans differnts packages, ces widgets doivent communiquer entreux eux, ou mieux ces widgets doivent travailler sur les memes données, le but d'avoir un widget dans une app est de manipuler les données si non la app n'aurai aucun sens, donc quand l'utilisateur fait un click par exmple sur "Quiz Zone" ou "Guest The word" etc... il s'attend à avoir une autre page qui lui permet d'avoir un menu avec les questions regroupées par categorie, donc en faisant juste un clique sur ces option, avant de passer à la page du choix des categories, les widgets concernés doivent se passer des donnéens afin que le widget de destination puisse faire une action, aprexemple faire recour à l'API REST en backend pour recuperer toutes les categories et les sous categories etc.. ayant des milliers de widgets qui doivent se passer les donnèes et travailler sur les milliers de données, il devient abasolument necessaire d'avoir un gestionnaire des etats, un etat c'est une donnée qu'on manipule dans notre code, donc une variable en terre à terre , par exmple la liste des categories de quiz est un etat qu'on doit monitorer de widget à widget et chaque fois faire appelle au backend pour voir s'il n'y a pas une nouvelle categorie ou bien si une autre categorie qui existait dejà n'a pas été eliminée etc.. pour avoir un seul point centrale ou on peut regrouper et manipuler les données donc les états, on utilise un gestionnaires des etats, state manager et Bloc/Cubit servent à gerer les etats, ce ne sont pas les seuls, j'utilise d'autres dans d'autres projets de flutter le meilleur d'ailleur c'est GetX mais c'est pour des personnes dejà avancées en coding car il utilise les dependence injection et pour ne pas perdre mes followers sur ce projet, j'ai opté pour Bloc/Cubit qui est plus intuitifs à comprendre dans d'autres projets on utilisera GetX. Si vous voulez etre curieux et appronfondire Bloc/Cubit lisez ici

7.Web : Vous l'avez immaginez, ce repertoire contient les resources pour le web si le web avait été inclu dans les plateformes au depart de la creation de la app flutter.

8. pubspec.yaml : la c'est un fichier hyper important dans flutter, c'est un peu comme package.json dans npm(nodejs, reactjs, angular, vuejs) etc... c'est la bas ou on doit specifuer tous les packages externes à utiliser dans notre app, dans l'image suivante, dans QuizCodeur quelques bibliothèques/package externe que nous avons utilisés dans, par exemple je vous parlais tout à l'heure de Hive pour stoker les données systhem et de l'utilisateur, je doit bien le specifier dans ce fichier et la commande "Flutter Get" est utilisé pour le telecharger sur le web et l'ajouter à mon projet.

Voilà une description breve, mais riche de ce que vous pourrez trouvez dans le projet, je ne suis pas entré ici dans les details specialement technique dans le code existant et si vous etes interessé que j'affronte n'importe quel aspect du code que vous avez sous la main, faite me le savoir inbox et on en reparlera sur un post en faisant si besoin une demo out context.

 

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: