Flutterflow : le Guide Ultime | Tutoriel Ultra Complet pour débutants

flutterfow est la révolution du NO code en simplement 3 ans ils ont permis à 1 million de personnes de créer des applications et pourquoi pas même les publier sur les stores tout ça pour un PR modique de 79 dollars par mois dans cette vidéo vous allez apprendre tout ce que vous devez savoir pour maîtriser flutterfow et pourquoi pas créer votre première application et pourquoi pas aussi la mettre sur les store alors d'abord qu'est-ce que c'est flutterflow flutterflow c'est une plateforme qui a été créée par deux ex-employés de Google et eux leur mission c'était de rendre

le développement d'application mobile plus accessible pour ça ce qu'ils ont fait c'est qu'ils ont pris le framework flutter qui a été développé par Google et avec leur propre langage le dart et en gros ce qu'ils ont fait c'est qu'ils l'ont transformé en un Outin no code plus facile à apprivoiser et qui permet d'aller plus vite tout en se basant sur la puissance de flutter si par exemple il y a des librairies qui vous manquent vous pouvez directement les prendre sur la plateforme de flutter vous pouvez également rajouter du code directement donc du dart dans l'application

et vous pouvez choisir la base de données que vous souhaitez donc par défaut il y a firebase qui est un autre produit de Google mais vous pouvez aussi utiliser supabase Xano ou la base de données que vous voulez et c'est c'est précisément pour ça que flutterfow est allé aussi vite et est devenu aussi mature c'est parce qu'ils sont concentrés uniquement sur le fait de permettre de faire des belles applications sans s'occuper des bases de données et les fondateurs de flutterfow ont globalement fait un peu près la même chose que les fondateurs de Bubble c'est-à-dire mettre

à disposition un Outin code sauf que contrairement à bubble qui est développé en Javascript ils l'ont fait avec flutter de Google et ça ça a eu un avantage très important pour les fondateur c'est que Google a investi 25 millions de dollars dans l'outil donc autant dire qu'il est pas prêt de bouger et disons qu' avec bubble c'est vraiment les deux gros outils no code pour faire des applications voilà maintenant que les présentations sont faites on peut aller directement derrière mon écran alors nous voilà dans flutterfow et donc on va faire un petit tour du propriétaire

ça a beaucoup bougé depuis ma dernière vidéo donc je vais un peu vous représenter tout ce qu'il y a dans l'outil donc là la chose sur laquelle on arrive quand on crée notre première application donc vous allez sur flutterflow vous vous inscrivez il y a pas besoin de payer pour créer des applications vous payez que si vous les exportez et cetera donc vous pouvez aller directement sur flutterflow et bidouiller avec et donc vous allez créer votre première application et une fois que vous avez créé votre première application vous allez arriver là-dessus donc ici au milieu

on a le canva on va pouvoir mettre tous nos éléments de notre application à droite on a un peu une sorte de menu qu'on va utiliser pour justement paramétrer chacun des éléments qui est divisé en six tbles différentes donc ici ça va être vraiment le design les actions la donnée comment est-ce qu'on affiche la donnée ici là ça va être les animations et là ça va être la documentation donc ça c'est pour les trois parties principales ici vous allez avoir tous vos éléments donc les éléments que vous allez pouvoir ajouter justement à l'écran ils vont

être là et on va voir comment est-ce qu'on structure toutes les tous les éléments à l'intérieur d'une page directement ici vous pouvez également choisir ici la taille de l'écran vous avez les raccourcis clavier que je vous conseille d'apprendre pour aller plus vite ici direct faites-le dès que vous vous commencez avec flutterfow parce que ça va vous faire gagner du temps et ensuite on est bon là-dessus donc là c'est le tre ici vous avez les widgets donc chaque composant dans bubbles dans flutterfow ça s'appelle du coup des widgets et du coup vous en avez une tonne

je vais faire un un petit passage en revue des des composants qui sont intéressants donc colonne et row vous allez tout le temps les utiliser c'est ce qu'on va utiliser pour justement organiser les éléments donc pour ça on va venir mettre par exemple ici une RAW et vous voyez qu'à l'intérieur on peut mettre une colonne euh on peut mettre une une colonne et ensuite à l'intérieur une RAW et ensuite mettre un texte et un bouton et en fait c'est grâce à ça qu'on va organiser dans l'espace on va utiliser des colonnes et des lignes pour

dispatcher les éléments et ensuite on va pouvoir utiliser des marches pour que ça soit pas collé forcément ici on va pouvoir aussi venir utiliser les alignements pour bouger les choses à l'intérieur voilà ça c'est comme ça qu'on va organiser dans flutterfow donc colonne row vous allez tout le temps les utiliser texte et bouton évidemment aussi dès que vous allez avoir envie d'afficher un texte ou de pouvoir cliquer mais on peut cliquer même sur un texte on n'est pas forcément obligé de cliquer sur un bouton en fait peu importe ce sur quoi on clique on pourra

toujours déclencher des actions donc là il y a un container ça un container c'est ce qui va vous permettre comme le nom l'indique de contenir des choses à l'intérieur donc par exemple de faire quelque chose comme ça où vous avez voilà une bordure euh vous pouvez ensuite choisir la taille choisir des marges et cetera directement donc sur flutterfow contrairement à bubble pour ceux qui connaissent il y a pas de marge il y a que des paddings et donc eux ils appellent ça padding mais en soit c'est des marges externes et à l'intérieur en fait il

faut sélectionner le groupe à l'intérieur et lui-même lui mettre du padding aussi en fait vous avez pas margin et padding il y a que padding mais qui correspond à margin si vous connaissez bubble ensuite autre truc qui est très important donc c'est le stack le stack ça va vous permettre de mettre des choses les uns par-dessus les autres et on en a souvent besoin dans les applications mobiles parce qu'on va avoir par exemple des menus en bas ou des trucs qu'on a envie de mettre sur plusieurs niveaux donc pour ça on va utiliser stack ensuite

il y a des éléments qui sont préfaits comme par exemple card et cetera moi je les utilise pas trop mais vous pouvez les utiliser list view c'est dès lors qu'on va vouloir afficher des données donc on va utiliser le composant List view et ensuite en gros dès qu'on mettra un peu comme sur bubble avec les repeating group pour ceux qui connaissent dès qu'on va mettre un élément et qu'ensuite on aura de la donnée affichée et ben ça va répéter l'élément pour le nombre d'éléments qu'on a dans la base de données donc ça c'est pour la

list view ensuite grid view c'est la même chose mais cette fois c'est au format de gris donc par exemple vous avez x colonne x ligne et cetera là c'est juste en soit en ligne soit en colonne d'ailleurs ici list view peut être de de manière verticale ou horizontale donc là vous voyez verticale et on peut changer pour horizontale donc en fonction de parfois sur Airbnb par exemple il y a des listes qui sont plutôt horizontales donc si vous avez envie de varier vous pouvez utiliser list view dans tous les cas spacer bah comme son nom

l'indique ça fait un petit espace divider ça permet de faire une petite ligne qui va séparer donc là on la voit très légèrement vertical divider c'est la même chose mais ça c'est uniquement ça marche uniquement dans les dans les rows par exemple ici ça va pas marcher parce que je suis dans une colonne voilà c'est ce qui dit en bas du coup ça c'est le la table bar ça vous permet de mettre plusieurs table plusieurs onglets donc si vous avez plusieurs onglets différents à afficher et ensuite alors je vais passer sur carousel et cetera je

pense que vous voyez ce que c'est flippable card c'est pour faire des des cartes en key swipable stack c'est pour faire un petit peu comme ce que vous pouvez faire avec tinder data table c'est pour avoir une table un peu au format X Excel donc ça c'est des trucs qu'on peut utiliser form validation ça c'est un composant qui va vous permettre de valider des données donc par exemple si vous avez une adresse email de s'assurer que c'est bien au format email vous allez utiliser ça et à l'intérieur vous mettrez un champ ensuite vous avez les

éléments de base donc les éléments de base vous allez les utiliser pour designer l'application donc il y a les icônes il y a le texte il y a le Rich Text qui permet ça c'est un texte plutôt formaté ensuite vous avez le les images AG vous avez ici les images au format cercle des icônes des icônes au format de bouton ça ensuite c'est des des composants qui sont déjà pré misis moi je les utilise pas trop vous avez un vidé player donc vous pouvez mettre des vidéos de tout ce que vous voulez YouTube player calendrier

checkbox donc ça pour cocher ou décocher un switch qui fait globalement la même chose mais avec un design différent et un switch list donc là c'est pour avoir des une liste avec plusieurs à chaque fois checkbox sur chacune des options un toggle donc un toggle c'est comme un icône sauf qu'il va varier entre deux en gros c'est un petit peu comme si c'était un icône mais avec le mécanisme d'une checkbox c'est-à-dire que en fonction d'un État a euh ça va être coloré ou ça va être une icône différente et en fonction d'un état B l'icône

va être vide ou encore une fois icône différente par exemple on l'utilise beaucoup avec Instagram ou quand euh une photo n'est pas likée bah le cœur est vide et quand la photo est likée le cœur est plein bah ça c'est le composant qu'on appelle toggle ensuite vous avez un Audio Player WebView ça vous permet de de de mettre une vue embed comme on pourrait avoir donc par exemple autre que vidéo YouTube une vidéo Vimeo ou peut-être même un design sur figma et cetera vous pouvez utiliser WebView il y a une map statique il y a

Google Maps ad Banner donc c'est pour afficher de la publicité les animations et ceetera bon bref il y en a plein et conditional Builder celui-là il est important ça vous permet d' afficher deux types de de de composants différents donc admettons que il y ait un groupe où vous avez envie d'afficher x chose et une condition B où vous avez envie d'afficher x chose par exemple un utilisateur est connecté vous voulez montrer quelque chose et un utilisateur n'est pas connecté vous voulez montrer autre chose dans ce cas-là on va utiliser conditional build vous pouvez aussi

mettre du Markdown pour avoir du texte au format Markdown et ce qui est important c'est cela parce que cela ça va être euh des composants qui vont requérir euh un un input de l'utilisateur c'est pour ça qu'on appelle ça form elements donc là il y a le text field donc c'est juste un champ tout simple voilà comme ça où l'utilisateur peut venir écrire vous avez un dropdown pour choisir entre plusieurs options radio button pour choisir entre plusieurs options format QCM pin code bah pour mettre un code de sécurité ça on peut l'utiliser pour faire des

des vérifications et cetera des rating bar pour donner une note à quelque chose un formulaire de carte de crédit ça qui va être utilisé avec stripe voilà notamment au niveau du du paiement un bouton pour compter donc voilà et des des chips pour sélectionner dans une liste et cetera et cetera VO vous voyez il y a plein plein de composants différents du coup ça vous donne pas mal de liberté pour faire ce que vous voulez dans flutter flow donc là pour l'instant ce qu'on va faire c'est qu'on va rester là-dessus et on va passer à

un autre Anglet là je vous ai montré comment est-ce que enfin tous les composants qu'il y a un peu dans l'application donc ensuite vous pouvez construire vos pages comme vous voulez faire des actions donc ici c'est là où vous pouvez voir toutes vos pages donc pour créer une nouvelle page rien de plus simple vous allez ici et vous créez directement une nouvelle page ici voilà add new page et là vous pouvez choisir dans plein de templates qui sont plutôt jolis d'ailleurs qui et donc vous pouvez choisir un peu ce que vous voulez et directement si

par exemple je veux celle-là je peux choisir est-ce que j'utilise mon thème on y reviendra plus tard ou est-ce que je choisis le le thème euh qui est par défaut donc là on va faire ça et on va appeler ça dashboard donc on peut renommer les pages comme ça et on fait create page dès lors qu'on a notre nouvelle page elle s'affiche et là on a tous les composants qui sont déjà là euh déjà animés donc ça vraiment il font du bon taf chez flutterflow pour faire des templates qui marchent bien et donc ici vous

voyez tous les composants ce que je vous disais avec les colonnes et les row par exemple ici on a une colonne qui contient un premier texte qui contient un deuxième texte et qui contient ensuite une raow donc cette raow là qui contient un texte puis un texte puis ici euh un badge euh qui contient d'autres enfin qui contient d'autres choses donc là c'est euh comme ça qu'on construit sur flutterfow c'est en en mettant des colonnes à l'intérieur de rows et des à l'intérieur de lignes et des lignes à l'intérieur de colonnes donc ça c'est un

bon exemple maintenant qu'on a nos pages on peut donc les visualiser et là normalement on aurait tous les euh toutes les composantes donc on peut mettre ça ici et là vous voyez alors là on voit que la homepage parce qu'il y a pas de lien entre les deux mais si par exemple je retourne sur ma homepage ici et que je mets un une action pour aller vers la page dashboard donc là je fais navigate to dashboard ici on va avoir boum le lien et en fait du coup ça permet de visualiser on peut dézoomer comme

ça et ça permet de visualiser l'application et voir quelle page renvoie à quelle page euh pour voir un peu sa progression quand on construit notre application donc là j'ai mis une première action sur comment est-ce qu'on peut passer d'une page à l'autre on reviendra sur les actions après avant je vais vous montrer d'autres choses donc une fois qu'on a fait tout ça ce qui est important de comprendre c'est à quel point firebase est intégré à l'application donc firebase c'est une un outil qui permet de stocker des données directement sur donc sur firebase qui est un

outil très très complet pour stocker des données donc l'outil qui permet de stocker des données s'appelle Fire fireestore et vous avez plein d'autres choses des cloud functions et cetera on reviendra dessus après mais grosso modo vous pouvez vous avez juste à venir ici vous allez dans firebase vous créez un projet donc là vous pouvez l'appeler comme vous voulez vous choisissez la région donc là on va prendre Europe vous choisissez de vous loguer avec Google hop ça se connecte là vous choisissez select all comme ça vous faites continue et là il va créer le projet automatiquement

pour vous sur firebase donc ça c'est cool parce qu' il fallait qu'on le fasse manuellement et une fois que c'est fait vous allez pouvoir créer votre base de données directement depuis flutterfow vous êtes pas obligé d'aller sur firebase une chose à savoir c'est que firebase du coup ça vous permet de stocker toutes les données de vos utilisateurs et vous pouvez définir les données directement ici donc vous pouvez créer une collection par défaut vous pouvez créer la collection utilisateur et il va automatiquement reconnaître que vous essayez de créer une collection utilisateur il va vous proposer de

la créer donc c'est comme ça qu'on crée des collections sur une base de données on a des collections donc par exemple ici on pourra avoir une collection qui s'appelle tasks et on pourrait justement comme ça venir mettre toutes les informations de chaque de chaque tâche de chaque utilisateur ici vous pouvez utiliser lia et par exemple ici mettre à to do list app et en fait lia va crée le schéma de votre application pour vous donc là user et il fait par exemple ici username donc il rajoute username ici to do et il fait une référence

à l'autre collection qui s'appelle to Doo et ici met titre completed donc est-ce que ça a été fait ou pas due date et priorité qui est quelque chose qu'on retrouve dans toutes les applications todo list vous faites insert et voilà il vous a fait votre truc en temps réel donc là je peux juste tac virer ah oui non c'est bon il a tout do les tâches ah oui alors en fait il s'est un peu trompé parce que du coup je pense qu'il pense que ça que c'est utilisateur donc ça c'est pas très grave on va

supprimer la collection et on refera le lien ici donc là par exemple utilisateur ce que vous pouvez faire c'est vous pouvez le faire dans les deux sens les relations donc avant de parler de relation d'ailleurs je vais peut-être un petit peu vite je vais parler des différents types de propriétés donc sur flutterfow et sur firebase vous avez plein de types de propriétés différentes vous avez integer qui est euh des nombres entiers vous avez euh double qui est des nombres décimaux string qui est juste du texte dès que vous avez du texte peu importe ce que

c'est même si c'est un email et cetera vous allez utiliser string bouine c'est dès lors que vous avez un oui ou non donc c'est un peu comme une case à cocher ou une checkbox est-ce que c'est oui ou est-ce que c'est non donc par exemple ici completed c'est un bullin est-ce que la tâche elle a été faite ou pas ensuite color bah ça c'est pour une couleur pour faire varier en fonction par exemple permettre à des utilisateurs d'avoir une couleur de fond différ diff vous pouvez utiliser ça image path c'est pour des fichiers images vidé

pass la même chose pour les vidéos audio la même chose document reference c'est là où vous allez faire des croisements entre différentes données donc là si vous faites vous pouvez référencer par exemple une to Doo avec un utilisateur et là vous pouvez mettre l'utilisateur qui a la todo et vous pouvez choisir est-ce que plusieurs utilisateurs peuvent avoir une todo ou que un seul si un se si que un seul vous laissez ça décocher et si plusieurs vous cochez ça et ensuite ça fera le lien entre les deux une fois qu'on a fait ça ensuite vous

avez date time donc ça c'est pareil c'est juste une date avec l'heure vous avez latitude longitude pour les adresses et ensuite vous avez dat type et inom mais ça je reviendrai dessus après donc une fois que vous avez votre base de données et cetera vous allez pouvoir créer des choses directement dans la base de données qui vont être ajouter ou vous pouvez aussi gérer le contenu directement depuis ici et donc à partir de là là alors évidemment le projet n'est pas configuré donc il faut aller ici et ensuite venir configurer le projet voilà donc là

ça a été créé ensuite il faut créer l'authentification et le storage évidemment ça on va le faire tout de suite donc en gros là vous allez sur firebase je pense que flutter flow au fur et à mesure ils vont essayer de réduire au maximum le nombre de fois où il vous envoie sur firebase mais il y a encore des choses et donc ici vous pouvez choisir soit test mode soit production mode test mode en gros ça va vous faire comme une base de données de test qui va durer je pense 30 jours ouais c'est ça

30 jours et donc là c'est ce qu'on va faire et ensuite vous pouvez choisir le storage donc là par défaut il est déjà mis donc vous avez juste à mettre don et ça va automatiquement ensuite vous autoriser à pouvoir créer des choses dans votre base de données pour l'instant on nait pas le droit donc là ça va créer la valeur par défaut on peut retourner directement ici et on peut aussi s'occuper de l'authentification et ensuite on reviendra sur les bases de données donc l'authentification c'est très simple c'est deux clics vous allez ici vous pouvez choisir

entre plusieurs choses donc avec facebook avec Apple avec Twitter et cetera d'ailleurs on voit qu'à mon avis Apple a demandé à retirer le logo ça me fait rire et ensuite ici on va juste mettre enable ici et si vous voulez mettre un un un emailink c'est-à-dire un email qui va permettre aux utilisateurs de se connecter vous pouvez utiliser ça et ensuite ça permettra aux utilisateurs de se connecter là on va rester simple on va juste faire ça et là c'est bon les utilisateurs peuvent se connecter et donc vous pouvez créer un utilisateur par exemple ici

voilà je sais pas et là vous mettez n'importe quoi et l'utilisateur alors oui voilà et là vous avez créé votre premier utilisateur et les utilisateurs on peut les créer là mais on peut aussi les créer directement dans flutterfow et donc là une fois qu'on a tout tout bon on va juste autogénérer les les config files ça c'est pareil c'est le dernier process à faire pour valider la création de l'APP sur firebase et ensuite on pourra revenir directement là-dessus ensuite on peut revenir là où on était donc ici manage content et là en fait on peut

voir d'une manière différente les données sur les utilisateurs donc là on n pas encore d'utilisateur parce que on a que créé l'authentification ça c'est quelque chose qui est très important à comprendre sur euh flutterfow c'est que c'est pas parce que vous authentifiez un utilisateur qui va être créé dans la base de données c'est deux choses qui sont différentes donc là on peut faire par exemple tac celui-ci ensuite on met le nom on peut mettre une photo si on veut on peut mettre un UID un unique ID et un numéro de téléphone et ensuite vous faites

add document et là vous pouvez modifier les documents directement ici à noter que ensuite dans firebase vous allez pouvoir retrouver justement ces données là directement dans le stockage donc pour ça vous allez ici dans fireestore database et là vous voyez le document qu'on a créé juste ici pourquoi est-ce que flutterfow a fait un un endroit pour voir les données plutôt que firebase puisqu'on peut les voir ici en fait vous allez comprendre que firebase ne fonctionne pas vraiment de la même manière que les outils no code traditionnels parce que c'est une base de données en no

SQL ça veut dire qu'en gros c'est une base de données qui n'a pas de structure ça me paraît un peu bizarre de dire ça surtout pour les gens qui découvrent enfin qui sont nos codeurs de base en gros c'est tellement flexible que vous êtes pas obligé d'avoir les mêmes propriétés pour un utilisateur a ou un utilisateur B par exemple ici je pourrais créer un champ qui s'appelle je sais pas post et en fait c'est ici donc par exemple ici ce gar là à poste et en fait je peux créer un autre utilisateur qui aura une

autre chose et en fait il y aura que que les données qui vont matcher d'une certaine forme qui vont justement être vu quand on va faire des filtres et cetera l'avantage de ça c'est que ça donne beaucoup plus de flexibilité sur comment est-ce qu'on va appeler la donnée et cetera le désavantage c'est que quand on est habitué au nos codes et à des bonne base de données bien structuré bah en fait c'est un peu difficile moi j'ai toujours du mal avec avec firebase c'est pour ça que je l'utilise aussi peu que possible et je préfère

par exemple supabase mais voilà par défaut il y a une intégration avec flutter flow donc si vous voulez utiliser vous pouvez utiliser ici et en fait le fonctionnement de comment est-ce qu'on va appeler la donnée de de la base de données dans firebase on va faire des queries et ces queries vont nous permettre justement d'aller chercher les données donc ici c'est pour ça qu'ils ont fait un un endroit pour gérer le contenu de manière un peu plus simple et plus traditionnelle pour des no codeer mais si vous voulez aller voir où sont les données vous

pouvez également le faire via firebase ça nous amène ensuite à la suite donc là vous vous avez un bouton qui va qui s'appelle firebase schemer validation et qui en gros va vous permettre de comparer ce que vous avez dans firebase et dans fireestore avec le schéma de votre application et voir si ça va ou si ça va pas donc là ensuite vous pouvez valider votre schéma et s'il y a des mismatch entre les deux entre vous ce que vous avez et ce qu'il y a dans firebase il va vous indiquer une erreur ensuite ici il

y a ce qu'on appelle les firestore rules qui vont vous permettre c'est un peu comme les privacy rules pour ceux qui connaissent bubble qui vont vous permettre de prévenir qui peut voir quoi dans l'application donc là par défaut ici il y a un utilisateur donc par défaut tout le monde peut créer un utilisateur tout le monde peut lire un utilisateur personne peut modifier un utilisateur et personne peut supprimer un utilisateur vous pouvez changer tout ça et choisir entre plusieurs choses soit des utilisateurs qui sont authentifiés soit des utilisateurs qui sont tagués soit personne et vous

avez le choix entre les quatre ici si à chaque fois il vous dit donc par exemple ça c'est pour les la visibilité il vous dites if the collection should be excluded from rule generation donc ça si vous voulez que la collection ne fasse pas partie des règles ici c'est pareil est-ce que ça a de la donnée qui est sensitive donc là par exemple si vous êtes utilisateur faut absolument le cocher faites vraiment attention et là la dernière chose c'est est-ce que les documents doivent être supprimé dès lors que le l'utilisateur qui est lié à ce

document est supprimé donc ça c'est par exemple si vous avez un utilisateur qui supprime son compte et que l'utilisateur il est lié à des tâches est-ce que on va supprimer toutes les tâches qui sont liées à l'utilisateur donc c'est ici que vous pouvez configurer tout ça et ensuite vous déployez vos règles et euh ça va créer un peu un bout de code comme ça qui va être envoyé directement sur euh votre application maintenant autre chose très importante ce que vous pouvez faire dans euh flutterfow c'est ce qu'on appelle des DAT types donc les data types

c'est pas exa exactement la même chose que sur d'autres outils comme par exemple bubble c'est un moyen en fait de faire des associations de données parce que en fait on peut avoir très vite ici quand on est sur notre sur chacune des collections on peut avoir très vite plein plein de champs là c'est une application très simple mais si on a une application très avancée avec plein de champs à remplir et cetera ça peut prendre beaucoup de temps donc moi ce que je vous recommande c'est par exemple si vous avez des des des des champs

qu' ont plein d'AD qu' on plein de de propriétés différentes comme par exemple des adresses et bien ne crée pas City enfin ville pays et cetera crée plutôt adresse et créer un Data type qui va être lié à ça et donc là par exemple comment est-ce que je ferai ça j'irai ici je mettrai par exemple address et ici je créerai cinq champs donc un champ que j'appellerai City et là je mettrai juste un string comme ça et un champ bon je vais pas faire tous mais un champ par ex par exemple la première ligne de

l'adresse euh voilà et une fois que c'est fait j'ai mon dat type qui s'appelle address et je peux revenir ici et là je fais euh address et là je viens chercher un dat tyype et je viens chercher address et en fait ça va automatiquement charger les deux lignes mais sauf qu'ici j'en ai qu'une alors évidemment là c'est parce que j'en ai que deux mais imaginez si vous en avez 20 ou 30 qui sont liés par exemple à un formulaire qu'on doit remplir ben en fait c'est beaucoup plus simple de l'appeler formulaire et de faire un

dat type qui s'appelle formulaire et qui est lié à la base de données voilà en gros voyez-le comme un moyen de réduire les lignes ensuite vous avez ce qu'on appelle des inom et ces inom en gros ce que ça fait c'est que ça c'est un peu comme les option sets dans bubble vous pouvez faire par exemple colors et ici vous créez justement ça et vous pouvez mettre plusieurs valeurs donc là par exemple je peux mettre blue ensuite je peux mettre Green et cetera et cetera donc voilà c'est un peu comme les options set dans bubble

ou alors option set simple dans le sens où il y a qu'une seule propriété disons que c'est un peu comme si c'était des listes d'option déjà possible mais par contre vous pouvez que définir un type un type de nom quoi c'est juste une liste de noms et en fonction vous pouvez déclencher plusieurs conditions donc là par exemple couleur on pourrait dire si c'est bleu et cetera et cetera et en gros ça vous permet d'avoir une liste qui n'est pas dans la base de données sur firestore mais qui est vraiment dans l'application donc ça on l'utilise

assez souvent pour des quand par exemple on va utiliser des dropdown avec plusieurs options bah on va utiliser des inom si on n pas envie d'aller chercher quelque chose dans la base de données ensuite une autre chose très importante c'est ce qu'on appelle les upstates donc il y a deux types d'apstate différents il y a d'abord les upstat donc il y a ensuite les upstat donc il y a plusieurs types d'upstate et de constantes donc la différence entre upstate et constant c'est que upstate en gros ça va être des valeurs qui qui vont changer donc

là par exemple ici je pourrais mettre une upstate c'est une donnée qui va rester dans l'application et moi pour vous donner un exemple j'utilisais beaucoup quand j'avais créé mon application avec Zano et en fait ça me permettait de stocker ce truclà qu'on appelle du JSON donc c'tait un bout de données qu'on peut ensuite venir utiliser et décoder dans flutterfow et du coup ça me permettait de pas faire les col API à chaque fois vous inquiétez pas je vous expliquerai ce qui un co API après mais en gros euh voilà pensez que les upstat c'est un

moyen de stocker de manière temporaire ou même de manière pour longtemps en utilisant is persisted ici des données dans votre application et ça peut être n'importe quoi ça peut être quelque chose que vous voulez stocker de manière très temporaire comme par exemple je sais pas la personne a cliqué sur un menu il y a trois options de menu et vous voulez justement ça peut être par exemple quelqu'un qui a cliqué sur un menu et vous voulez voir est-ce que elle a cliqué sur le la table numéro 1 table numéro 2 table numéro 3 et vous

voulez sauvegarder sa table pour que quand il revient il retrouve ce qu'il avait recherché donc pour ça vous pouvez utiliser ici euh par exemple un un un chiffre entier vous mettez Tab comme ça et en fonction de là où il est dès lors qu'il clique vous modifier l'upstate et quand il revient dans l'application et bien ça il retrouvera la table sur laquelle il était c'est exactement ça l'upstate c'est en gros tout ce qu'on veut utiliser tout ce qu'on veut garder dans l'application sans pour autant envoyer des données au serveur et bien bien on va utiliser

des upsate et c'est l'équivalent grosso modo des custom States qu'on peut avoir dans bubble sauf que sur floutterfow ils sont divisés en plusieurs il y a d'abord les appstat qui sont liés justement à toute l'a qu'on peut retrouver dans toute l'AP et ensuite il y a des States sur les pages et des States sur les composants donc il sont différentes sortes ensuite on a les constant donc ça les constant c'est quelque chose qui va être dans l'application et en gros qui va vous servir comme données que vous allez pouvoir réutiliser donc là contrairement à aux

iNum où en fait on a juste un lot de plusieurs données là on va avoir une valeur par exemple si j'ai envie de mettre un taux de TVA et que de l'avoir toujours dans mon application bah je peux mettre ici TVA à 20 alors là c'est c'est un texte donc c'est un mauvais exemple mais vous avez compris c'est pour stocker des données qui ne vont ne pas bouger dans l'application donc là ici c'est quelque chose qu'on peut retrouver et dès lors que j'ai besoin de faire ça dès lors que j'ai besoin de calculer quelque chose

qui inclut la TVA bah je peux venir le chercher ici donc la différence upstate ça va changer et c'est fait pour rester stocké longtemps tandis que ça c'est plus une une valeur qu'on a envie de réutiliser un peu partout dans l'application maintenant on va passer au CO API alors si vous êtes pas familier avec les col P vraiment c'est une des choses les plus importantes quand on se met au code je pense que je ferai peut-être une vidéo bientôt pour expliquer tout ça en détail et le truc qui est vraiment important c'est de comprendre ici

comment est-ce qu'on peut atteindre des appays donc par exemple ici si j'ai envie d'atteindre la pay notion et bien tout simplement je vais pouvoir venir mettre ici euh alors je sais plus ce que c'est l'URL c'est peut-être Apin notion.s et ensuite sur chacune des API vous avez ce qu'on appelle des endpoints que vous pouvez atteindre sur chacun de ces endpoints vous pouvez préciser justement euh que c'est bien vous en utilisant un header ce header il peut dire plusieurs choses il peut dire un que vous vérifiez donc en général c'est quelque chose qui va ressembler à

ça authorization et ensuite vous avez deux points beer et ensuite ici vous allez avoir un token et ensuite vous avez également le type de contenu donc en général ça va être content type et ensuite application/json donc ça c'est vraiment les deux que vous allez avoir 90 % du temps et qui vont vous permettre d'authentifier le type de col API enfin le type de d'utilisateur que vous êtes avec votre token ici et également quel endpoint vous voulez atteindre en gros les endpoints c'est une partie de la base de données que notion met à disposition de tout

le monde pour aller chercher des données dans sa base de données et ensuite venir les rapatrier alors ça peut être pour plusieurs choses et du coup c'est ce que je vous je vais vous montrer après donc là par exemple ici une fois qu'on a notre groupe donc en gros on a un groupe par app ou un groupe par type de CO par app si vous en avez vraiment beaucoup et ici vous pouvez préciser du coup ce qui va après donc là par exemple je pourrais faire évidemment c'est pas la bonne URL mais je pourrais faire

par exemple euh euh blocks pour aller retrouver des blocs et ensuite vous allez vous avez des méthodes chaque méthode a un but bien spécifique si vous utilisez get c'est en général que vous voulez obtenir des données de l'API que vous essayez d'atteindre si vous utilisez poste c'est que vous voulez envoyer une nouvelle donnée donc la modifier mais c'est un peu bizarre ça peut être aussi utilisé pour faire des requête donc en gros même quand vous voulez utiliser get parfois vous pouvez utiliser post c'est un peu bizarre mais partez du principe que si vous voulez récupérer

des données de notion dans le cas dans ce cas préci vous utilisez get si vous voulez envoyer des données à notion vous utilisez post si vous voulez supprimer des données de noche vous utilisez delete put pour remplacer donc si vous voulez remplacer une donnée par une autre et patch pour modifier donc ça c'est comme ça et ensuite à à l'intérieur vous avez des query paramets que vous allez pouvoir envoyer euh donc là en général ici ça va changer vous voyez que quand j'ai get j'ai des paramètres de requête tout simplement parce que je vais émettre

une requête pour aller chercher des choses et par contre quand c'est du post je vais pouvoir utiliser du JSON donc pour formater les données le JSON c'est un langage qui est très important si vous l'avez pas appris apprenez-le c'est vraiment très important c'est un un quelque chose qui permet de hiérarchiser les données de la manière suivante donc là par exemple j'ai un objet donc c'est la base du JSON c'est d'avoir un objet parce que ça s'appelle JavaScript object notation et à l'intérieur de cet objet je vais avoir des propriétés donc là par exemple name et

là je mets to ok là ensuite je ferme mon objet donc tout ça là ça c'est un objet ensuite ici je peux avoir plusieurs propriétés donc là par exemple name too et là je vais mettre family name maréchal ok ensuite je peux faire d'autres valeurs et cetera mais l'intérêt du Dison c'est de pouvoir mettre une tonne d'objets à l'intérieur de d'une d'une tonne d'autres objets donc là par exemple ici si j'avais envie de mettre les tâches que j'ai et ben je ferai cette cette forme là ici je mettrai non pas un crochet comme ça d'objet

parce que j'en ai probablement plusieurs mais j'utiliserai ce qu'on appelle un array donc l'array il commence toujours par un crochet droit à l'inverse de l'objet qui commence par un crochet courbé comme ça et ensuite à l'intérieur je vais pouvoir créer par exemple une le nom de ma tâche donc là ici name et je mets le nom de ma tâche qui va être par exemple arroser les plantes ok une fois que c'est fait je fais virgule et je pourrais mettre par exemple date de fin et cetera et là je pourrais mettre bon je vais pas la

formater mais vous avez compris une fois que c'est fait à la fin de mon objet je peux en ouvrir un autre donc en gros c'est un objet c'est une série d'objets donc là j'ai objet numéro 1 ici tac qui commence ici et qui va jusqu'à la virgule jusqu'avant la virgule et ensuite j'en ai un autre qui pourrait pareil avoir name comme ça de points et ensuite je sais pas faire du Jard du jardinage ok ensuite dès lors que j'ai j'ai fini bah je ferme et ensuite je sur le dernier je je ferme je mets pas

de virgule parce que ça veut dire qu'il y en a plus on met que unee virgule quand il y en a encore je ferme ça et ensuite une fois que j'ai fini bah je peux refermer mon objet donc là vous voyez que à l'intérieur si on décompose on a un objet qui contient tout ensuite on a une propriété qui contient mon prénom une propriété qui contient mon nom de famille et ici on a ce qu'on appelle un array qui contient plusieurs tâches tâche numéro une jusqu'ici tâche numéro 2 jusqu'ici à la fin du coup on

ferme l'array et du coup on ferme ensuite l'objet ok ensuite on peut demander à ce qu' nous le formate et on peut mettre des variables donc ça c'est la deuxième partie c'est qu'évidemment là le truc est fixe donc si j'envoie une une une un fichier JSON comme ça ça va être fixe et du coup ça va ça va toujours être arroser les plantes donc pour ça on peut utiliser ce qu'on appelle des variables et ici on va utiliser une variable donc qui peut être par exemple string et une fois qu'on a créé cette variable on

va pouvoir venir l'utiliser et donc là par exemple ici le nom de la tâche peut changer et on va pouvoir venir chercher ça et le mettre juste ici et c'est précisément comme ça qu'on fait des colapi de manière dynamique voilà évidemment les colapi c'est un peu plus complexe mais c'est compliqué de le résumer de manière rapide je ferai probablement une autre vidéo où je vous explique mais sachez que vous pouvez atteindre n'importe quel API pour aller chercher des données ou envoyer des données et ça c'est vraiment pratique notamment si vous avez un backend externalisé donc

une base de données qui n'est pas sur firebase qui n'est pas avec une intégration directe à flutterfow ou vousù vous avez une app sur bubble par exemple vous pouvez l'utiliser ça je l'explique dans ma formation bubble apprenti mais voilà vraiment très très utile pour justement enrichir son App avec des données externes là vous avez tous les médias donc les médias en général vous allez pas trop venir là-dessus vous allez venir ici dès lors que vous avez besoin de d'uploader des fichiers directement ici en en mass mais sinon vous allez plutôt utiliser d'autres choses dont notamment

par exemple le designer et vous allez plutôt mettre les images ici en général c'est quand vous construisez vous mettez votre image et Ici vous mettez upload soit upload it file soit vous mettez asset et là ça vous permet d'uploader directement ici donc ça vous allez plutôt utiliser ça mais ça permet de retrouver tous les assets de votre projet que vous avez et du coup c'est assez pratique ensuite il y a les styles je reviendrai sur les le toutes les fonctions code après donc les styles ça vous permet de un peu customiser votre app comme vous

voulez donc vous pouvez customiser les différents breakps donc les breakps c'est un peu qu'est-ce qui va faire entre la taille entre une app mobile et une app tablet une app tablet et une version desktop vous vous pouvez choisir et ça en gros c'est la largeur de la page en pixel vous avez aussi les loading indicator donc là il y en a plein vous mettez ce que vous voulez vous pouvez choisir la couleur vous pouvez choisir la taille vous avez aussi le thème de la barre de scroll donc vous pouvez choisir l'épaisseur vous pouvez choisir ici

et là vous avez une preview donc là par exemple en thickness vous pouvez la rendre beaucoup plus fine ce qui est plutôt jolie mais moins pratique ou le faire de taille moyenne vous pouvez choisir est-ce qu'il y a un bord de réus ou pas si vous mettez zéro ce sera carré vous pouvez ensuite choisir voilà plein de choses pour customiser les scroll bar et ensuite vous pouvez aussi customiser le pull to refresh donc ça on va l'utiliser notamment quand on a des listes dynamiques qu'on a besoin de rafraîchir ensuite il y a les couleurs donc

là vous pouvez définir tout un tas de couleurs vous pouvez importer depuis coolors qui est un outil qui vous permet de justement générer comme ça des des palettes et vous avez juste à exporter il vous montre comment faire à partir d'ici ici et ensuite vous pouvez importer la la palette que vous générez automatiquement et sinon ici vous pouvez définir un un thème light et un thème dark pour laisser à l'utilisateur le choix de changer entre les deux vous pouvez aussi le générer avec lia et vous pouvez ensuite activer ou désactiver le Dark mode et ajouter

des couleurs comme bon vous semble ensuite il y a évidemment les typos et les icônes donc les icônes vous pouvez uploader des icônes customisées euh il y a un tuto qui est fait par flutter flow mais sinon j'en parle dans ma formation c'est relativement simple ça se fait plutôt plutôt bien il y a les custom fonts donc ça faites attention avec les custom fonts je vous recommande de manière générale d'utiliser plutôt des Fonts Google parce que parfois il y a des problèmes de compatibilité notamment sur iOS parce je sais pas pourquoi mais parfois certaines fontes

ne rendent pas forcément bien donc si vous voulez être safe utilisez les fontes Google qui sont en général bien supportés vous pouvez ensuite choisir plein de thèmes différents pour justement choisir la fonte que vous voulez donc soit dans Google soit autre et ensuite vous pouvez définir des tailles de texte pour des gros titres des petit titres des paragraphes et cetera choisir l'épaisseur du texte donc est-ce que c'est fin est-ce que c'est gras euh la taille de la police ici vous pouvez choisir le letter spacing entre chaque lettre et donc l'espacement entre chaque lettre et vous

pouvez choisir est-ce que c'est la fonte primaire ou secondaire vous pouvez avoir que deux fontes maximum mais en vrai c'est déjà pas mal parce que sinon ça fait un peu par casterx si vous avez trop de fontes ensuite vous pouvez créer des thè widgets donc ça ça va être des des des style que vous allez pouvoir réutiliser un peu partout dans votre application et donc dès lors que vous allez mettre à jour le thème widget vous allez remettre à jour tous les éléments qui utilisent le le le thème que vous avez créé ici voilà pour

cette partie là vous pouvez ensuite faire des actions customisées et ça les actions customisé ça se fait en plusieurs parties donc il y a une partie qu'on appelle custom functions c'est là où vous allez un peu manipuler les données ce qui est très bien et c'est une très très bonne intégration c'est que flutterfow a ajouté un code Copilot donc même si vous savez pas coder vous avez juste à mettre ici la description de la fonction que vous voulez donc par exemple euh calcule x + y et vous mettez une valeur x une valeur y il

va vous faire le calcul vous pouvez calculer des dates vous pouvez faire n'importe quel fonction que vous voulez et en fait lui il va vous retourner une fonction en code donc là vous allez avoir la la fonction qui apparaît et en fait 90 % du temps même si vous savez pas coder ça va marcher si si ça marche pas ne pas hésiter à utiliser chat GPT pour vous débugger ça peut vraiment être utile et parfois ça marche mieux et sinon bah n'hésitez pas à essayer de chercher par vous-même et il y a toujours moyen de

de de céder et puis parfois en changeant un petit peu la requête vous pouvez avoir des meilleurs résultats mais vraiment si vous avez vous savez pas coder ça peut être vraiment une bonne aide ce truc ensuite il y a les custom widgets donc ça ça va être des widgets customisés que vous allez pouvoir importer de des différentes librairies que vous pouvez trouver sur flutter et donc vous pouvez ajouter des dépendances ici donc que vous trouvez sur pub dev et vous pouvez importer directement ces widget donc là si je fais hop si je fais par exemple

pub.dev ici hop j'ai accès en fait à plein de packag et en fait je peux tous les voir et euh en fait il y en a il y a certains qui vont être des widgets que vous pouvez reprendre d'ici pour les mettre de manière customisée dans votre application sur flutterflow donc c'est à ça que ça sert les custom widget ça peut être par exemple des calendriés des voilà des petits modules qui peuvent enrichir votre app d'une manière ou d'une autre et donc c'est ici que vous allez les créer ensuite les actions customisées donc là c'est

pour faire pareil des actions qui vont être customisé dans votre app et des dès lors que vous êtes ici vous allez pouvoir voir justement ces actions customisées apparaître et et justement pouvoir les déclencher à partir d'ici donc ça peut être des actions qui vont appeler X ou Y chose vous pouvez les créer directement ici et vous pouvez ensuite avoir des fichiers customisés là-dessus donc ça c'est la partie code si vous êtes pas bon en code vous allez regarder ça sans doute dans un deuxième temps je vous conseille d'abord de créer vos Apps sur flutterflow et

ensuite de revenir à ça mais si vous êtes déjà à l'aise avec le code n'hésitez pas à creuser euh ces quatre fonctions enfin ces quatre possibilités parce que ça va vraiment enrichir votre R pour le coup une autre fonction que je pourrais mettre dans la même catégorie mais qui est un petit peu différente c'est ce qu'on appelle les cloud functions donc contrairement aux autres actions qui vont être vraiment sur enfin le device en tant que tel donc sur l'application les cloud functions vont être directement euh mises sur firebase donc pour ceux qui connaissent bubble et

qui connaissent les backend workflow c'est à peu près la même chose c'est-à-dire que vous allez faire passer des actions des séries d'actions sur le serveur pour ensuite reobtenir le résultat vous pouvez aussi déclencher des actions directement sur les cloud functions et mettre à jour des données dans votre base de données et cetera sans que l'utilisateur soit connecté parce que c'était un des problèmes sur flutterflow c'est qu'on pouvait pas déclencher des choses de manière automatique si l'utilisateur n'était pas sur l'application avec les cloud function même quand il dort on peut lui envoyer un email pour lui

rappeler qu'il a x tâche à faire ça c'est les cloud functions voilà pour la grosse partie maintenant on va passer à la partie réglage parce qu'il y en a beaucoup donc déjà app details vous pouvez mettre ici project name donc vous mettez le nom de l'APP display name donc là pareil vous remettez le nom de l'APP ensuite ici il y a la page de départ donc par exemple si vous avez un utilisateur qui est connecté ou pas donc là j'en ai pas parce que firebase n'a pas été euh l'authentification n'a peut-être pas été ajoutée voilà

ici hop et vous allez voir que dès que je le dès que je le mets hop directement ça change et en fait il y a deux pages différentes vous pouvez choisir le type d'authentification donc authentification customiser authentification via supabase ou firebase donc ça ça donne plus de flexibilité et ici du coup vous pouvez mettre notamment il vous explique comment faire les login avec tout et Facebook vous pouvez mettre votre application développeur sur Facebook et le l'ID ici et ça autorisera la connexion avec facebook ensuite il y a les notifications push donc ça les notifications push

qui sont qui que vous pouvez déclencher de manière manuelle ou pas d'ailleurs avec les les cloud functions mais vous pouvez aussi utiliser one signal qui est un autre outil pour envoyer des alors ça peut envoyer des notifications push mais ça peut aussi envoyer des emails et des notifications par SMS donc ça c'est un un outil qui est très utile ensuite si on revient ici on a justement les les dynamic links donc ça c'est quelque chose qu'on va beaucoup utiliser si vous utilisez firebase notamment ça va être une redirection qui va permettre d'aller à un endroit

spécifique de votre application donc si par exemple l'utilisateur il tape une URL dans son navigateur il va être dirigé à cet exacte URL dans l'application si vous avez activé les dynamic links donc ça c'est pareil c'est quelque chose qui est vraiment lié à fire base c'est un petit peu plus compliqué si vous utilisez pas firebase parce que bah c'est vraiment fait pour firebase mais voilà si si jamais vous voulez partir avec firebase tout est là ensuite il y a les app assets donc ça c'est le splash screen c'est le premier écran qui vient quand on

ouvre l'application launcher icon c'est l'icône de votre app et error image c'est l'image qui apparaît s'il y a une erreur ensuite il y a les nav bar et les app bar donc en gros les nav bar c'est les barres de navigation il faut absolument qu'il y ait deux pages différentes pour qu'il ait une navb et sur donc là ce qu'il faut faire pour afficher les deux c'est sur chacune des pages vous allez ici et vous faites show this page on the navb et ensuite vous faites la même chose avec la deuxième et là vous avez

une nav bar qui contient deux onglets cette nav bar elle est customisable comme vous voulez donc vous pouvez choisir le style euh plutôt Google comme ça machin plutôt floating euh vous choisissez ensuite vous pouvez choisir les marges le le padding les customiser comme vous voulez et même customiser les icônes de ces différentes tabes ici donc là vous pouvez choisir vous allez sur la page et vous modifiez tout ça collaboration vous pouvez ajouter des gens ici sur firebase donc là je vous ai déjà montré ce cet onglet là vous pouvez traduire votre app donc définir un

un premier langage donc ici d'abord il faut ajouter un langage donc là par exemple je mets French hop et ensuite je peux mettre English pour traduire mon app en anglais et ici je mets le primary c'est French et ensuite ici je peux changer est-ce que c'est English ou French pour celui qui va être mis donc là il vous dit est-ce que lequel vous voulez voir dans le la Builder et en fait ça ça vous permet de faire des traductions et de pouvoir voir très facilement et ici en fait vous allez retrouver tous les textes que

vous avez dans votre application et vous pouvez traduire très facilement comme ça donc ça c'est vraiment cool si vous voulez faire des apps multilingues et vous pouvez utiliser ici euh le le translate pour faire une traduction automatisée de vos traduction ensuite il y a les plateforme donc andro Android iOS et vous avez aussi web Mac OS Windows et Linux donc voilà si jamais vous avez envie vous pouvez utiliser toutes ces plateformes là ici vous avez donc plein plein de les messages de permission donc ça c'est quelque chose qui est spécifique quand on crée des applications

sur les store ils vont nous demander en général de mettre des petits messages pour autoriser les accès au Bluetooth et cetera donc là vous pouvez mettre un message de de demande de permission pour accéder à la caméra au calendrier et cetera donc là il y a les notifications notification firebase ici mobile deployment donc ça c'est toute la partie qui est liée à la publication sur l'App Store l'application sur l'App Store c'est pareil j'en parle dans ma formation c'est un process qui est un peu compliqué notamment si euh vous vous le mettez sur l'App Store d'Apple

parce que ils sont très chiants avec les les vérifications et cetera ils veulent pas accepter n'importe quel app donc il faut s'armer de patience et il faut faire des choses des prérequis qui sont assez importants pour être publiés ici vous avez la publication web donc vous pouvez choisir plein de choses sur le web vous pouvez choisir de faire une PWA donc qui où vous n'avez pas besoin d'être sur les stores vous pouvez choisir d'être référencé par le le le moteur de recherche euh vous pouvez avoir des pages individuelles pour chacune de vos pages euh et

voilà bref vous avez plein de choses différentes ici au niveau des paiements donc là vous pouvez activer stripe stripe c'est le truc le prestataire de paiement numéro 1 vous avez aussi braint tree si vous préférez euh braint tree il est lié à PayPal tout simplement parce que c'est le même groupe en gros braint tree c'est le c'est le stripe de Paypal euh Paypal qui est une grosse entreprise américaine et qui ont créé un concurrent à stripe qui s'appelle brain tree donc là vous mettez toutes les clés et cetera vous avez les documents les documentations pour

checker ça stripe c'est le numéro 1 c'est CELI que vous allez probablement utiliser le plus et donc la seule chose à savoir c'est ici pour varier du mode test au mode production vous mettez ça donc si c'est décoché c'est mode test si c'est coché c'est que c'est le vrai de vrai donc que vous allez être que vous allez vraiment recevoir des paiements ensuite revenue 4 c'est un un truc qui permet de faire des inapp purchase donc par exemple de faire des app des achats intégrés sur l'App Store je pense que vous connaissez c'est des petits

pour payer les abonnements et cetera donc utiliser revenu 4 c'est euh très bien fait très simple et ça pareil j'en parle dans ma formation aussi là il y a Razer pay donc ça c'est surtout pour l'Inde donc je vais passer parce que c'est pas forcément très intéressant supabase donc ça c'est une alternative à firebase qui est selon moi bien mieux mais qui est aussi beaucoup plus complexe à prendre en main donc si vous voulez vous risquer à à prendre supabase vraiment je vous conseille parce que c'est relativement simple ensuite il y a SQLite donc qui

est pareil mais plus pour faire une base de données un petit peu euh votre pour améliorer les la l'expérience offline de votre application GitHub bah pour mettre votre votre repos GitHub vous pouvez le mettre directement ici algolia pour faire une recherche avancée dans vos apps Google Analytics pour les Analytics Google Maps pour avoir accès au ou Google Maps c'est une API donc on n pas Google Maps comme ça nativement c'est en fonction de l'usage AdMob c'est pour avoir avoir des petites bannières de publicité max liveestam c'est pour faire des des live stream et on en

a fini chose à savoir ici vous avez un dbuger donc qui va aller identifier toutes les tous les problèmes que vous avez donc là il me dit par exemple sur stripe j'ai cinq problèmes euh il y a des choses qui sont en warning c'est-à-dire que ça c'est ça quand même nécessite votre attention et il y a des trucs qui sont des erreurs et ça vous vous pourrez pas tester votre application tant que vous avez pas résolu toutes les erreurs OK et là vous voyez que hop les les erreurs disparaisse ici vous avez le développeur menu

vous pouvez accéder au code télécharger le code télécharger l'apk directement ici vous avez des suggestions sur votre projet et vous avez différentes versions donc ça c'est ce qu'on appelle le versioning qui vous permet de faire un peu des sauvegarde de votre application et revenir à des moments en arrière si vous avez fait des trucs que vous aimez pas vous pouvez vous pouvez toujours revenir en arrière là c'est le test et vous avez plusieurs options de test soit vous avez ici un vrai un vrai run donc là évidemment il faut ici vous mettez le run mode

donc ça ça va vraiment construire votre application pour de vrai et le test mode ça va faire comme une prévisualisation de votre app le run mode prend beaucoup plus de temps à à build donc à se construire pour que vous puissiez tester et le test mode ça prend quelques secondes c'est c'est beaucoup plus lent que par exemple sur bubble mais ça reste tout à fait acceptable et ensuite vous pouvez partager le projet avec qui vous voulez donc voilà pour ce gros gros tour de ce qui est évidemment bubble mais on n pas fini parce que

de ce qui flutter flow pardon mais on n pas fini parce qu'il y a plein plein de choses encore à voir donc la première chose à voir c'est ici les les paramètres de page donc quand vous allez envoyer une page d'une page à une autre vous allez pouvoir transmettre des paramètres pour ceux qui connaissent bubble c'est la même chose par exemple si vous avez un un un id de collection vous pouvez envoyer cette collection vous pouvez envoyer n'importe quoi ça peut être un bouton et en fait en fonction de ces paramètres vous allez pouvoir afficher

ou cacher différentes choses ou même vous allez pouvoir réutiliser la donnée admettons par exemple que j'ai une liste j'ai une liste de catégories et bien si j'envoie un paramètre catégorie donc là si je fais un paramètre et que en fait c'est un document et c'est une catégorie je vais pouvoir réutiliser cette catégorie sur une autre page et donc comme ça ça va automatiquement mettre tous les outils qui sont lié à cette catégorie donc ça je peux l'utiliser et je peux également utiliser du JSON je peux également utiliser des couleurs et cetera je peux utiliser tout

ce que je veux et ça me permet d'envoyer des données d'une page à une autre évidemment il y a aussi d'autres choses donc par exemple il y a les ici les pages state donc c'est comme les up States que je vous disais c'est des petits des petites données que vous allez stocker temporairement dans une page donc là par exemple imaginons que j'ai euh une tab euh avec plusieurs plusieurs hop plusieurs menus alors oui ça l'a enlevé tac je vais Suppr je vais le faire sur l'autre page ça sera plus simple donc là imaginons que j'ai

envie de rajouter une tab ce que je peux faire c'est je viens ici donc là j'ai mes trois tabes et je peux dire dès lors que je suis sur la Tabe 2 et bien de de mettre numéro 2 par exemple ici je mets dès lors que je clique hop je mets on tap et là je fais page state donc alors je vais d'abord définir mon page state ici et là je vais mettre Tab et ensuite ici je mets un nombre donc integer ici et je peux mettre par défaut 1 ce qui veut dire que par

défaut c'est 1 et ensuite par exemple je peux dire que si ici je clique hop on tap et ben je vais faire ici euh state update page state ici et adfield je mets la tab donc que j'ai créé ici et là la valeur je change je fais 7 value et je mets 2 par exemple et du coup ça va remplacer la valeur 2 et si je vais sur une autre page euh évidemment alors si je mets sur une autre page c'est un mauvais exemple parce que du coup ça va l'oublier mais disons que ça aura

sauvegardé euh où est-ce que j'en suis sur cette page-là donc euh ça c'est pour ça qu'on utilise des upstate et on utilise des upstate dès lors qu'on a envie de garder une donnée spécifique si par exemple on on est en train de faire un calcul et qu'on a envie de garder la donnée bah on peut utiliser des page state et des app state qu'on a envie de les garder sur toute l'app ici c'est vraiment spécifique au euh à la page évidemment on a aussi euh d'autres States sur les composants euh ici et ça nous permet

pareil de stocker des données directement sur les composants ensuite une fois qu'on est là on a des choses qui sont importante donc là par exemple si je vais là-dessus hop ici je vais prendre une list view et cette list view ici je vais faire ce qu'on appelle une qu on va justement ajouter plein de choses donc on a les query pour faire des des requêtes un petit peu donc là ici on peut faire des requêtes avec par exemple aller chercher dans les tâches on peut définir est-ce qu'on veut avoir un count c'est-à-dire le nombre de

documents donc faut un document c'est une ligne dans la base de données soit on peut en avoir une liste donc avoir toutes les données soit on peut en avoir juste un seul on peut mettre des filtres donc filtrer par plein de choses par la date et cetera euh voilà on peut également le le l'organiser donc l'ordonner et ici on peut faire par exemple par due date et on peut choisir increasing decreasing donc decreasing ça va être la due date la plus élevée en gros en haut et la plus ancienne en bas pareil pour ici on

peut voilà mettre chois ordonné de A à Z et cetera et cetera on peut faire ensuite ici single time query ça veut dire que on va juste la faire une seule fois elle va pas se rupdater à chaque fois qu'il y a un changement on peut choisir de faire un infinite scroll si il y a beaucoup beaucoup d'éléments que la personne puisse scroller et voilà on peut faire ça de manière très simple ensuite ici on a d'autres options donc on a document from reference donc ça en gros ça permet de lister des documents en fonction

d'un d'un d'un lien entre deux collections ici on peut avoir un API call donc là par exemple on peut sélectionner un un les la réponse d'un call API donc si par exemple je vais chercher la base de données de notion la pay de notion je vais pouvoir avoir une liste avec plein de pages différentes je vais pouvoir afficher justement toutes ces page ici et ensuite algolia search c'est pour permettre une recherche dans ma base de données un peu plus précise notamment pour tout ce qui est quand on a une barre de recherche et cetera OK

et ensuite la deuxième chose que je vais devoir mettre c'est dès lors que je fais ma query donc là par exemple ici je fais ma query collection je fais ma query de to do je confirme et ensuite automatiquement ça va créer ici une back andquery et à l'intérieur en fait je vais pouvoir venir chercher des données donc là hop vous voyez il y en a quatre différentes et là dès lors que j'ai ça à l'intérieur je vais pouvoir venir chercher les données donc là ici hop je vais directement là et je vois to do document

title et du coup à chaque fois ça va mettre la le titre de mon document donc là ici j'ai mon titre évidemment là c'est quelque chose que j'ai pas encore montré mais vous avez plein de sources possibles de données donc il y a des sources que comme je vous ai dit des constantes qui qu'on peut venir rechercher ici des global properties donc il y a le le ici il y a le le Time il y a est-ce que l'utilisateur est connecté il y a la localisation il y a le type de contenu il y a

aussi le pourcentage de screen et cetera ça c'est c'est pour afficher ou cacher certaines choses en fonction de la taille de l'écran on peut faire un un lien à la page enfin on peut chercher le lien à cette page là on peut avoir les app state les page state on peut combiner du texte alors ça c'est pas vraiment hyper bien fait c'est moins fait que par exemple dans bubble mais on peut combiner plusieurs textes différents pour faire par exemple dans un un nombre aléatoire qui change dans la base de données et ensuite jour et bien

on va utiliser combat texte ensuite ici il y a daytime from Unix donc la différence entre Unix et daytime c'est que Unix c'est un code qui vous permet d'isoler géographiquement par rapport au au fuseau horaire une date spécifique donc c'est une série de nombres et en fait ce nombre c'est une série de chiffres et ce nombre-là est l'équivalent d'une date à la seconde près dans un endroit précis avec une taille zone spécifique c'est un code je crois qui commence en 1970 et qui permet d'avoir d'éviter les erreurs de de date lié au time zone parce

que on peut avoir plusieurs fois la même date en fonction de là où on est dans le monde donc c'est pour ça que ça a été créé ensuite il y a les valeurs conditionnelles ù en fonction de x condition on va avoir deux valeurs différentes si par exemple la personne elle a fait toutes ses tâches et ben on va afficher ça si la personne n'a pas fait toutes ses tâches on va afficher ça ensuite il y a le expression de code les custom fonctions l'internationalisation donc pour changer le le le texte le le le langage

et ensuite vous avez random data ça je les utilise pas beaucoup pour de pour tout vous dire voilà donc ça c'est pour les options dynamiques évidemment ça on peut l'utiliser partout en fait on peut l'utiliser que ce soit sur tous les paramètres ce soit la taille que ce soit le texte ce soit la police tout on peut utiliser ça partout et ça va nous être très utile maintenant on va parler des actions et les actions se divisent en plusies plusieurs choses donc il y a les actions simples les actions conditionnelles et les action blocks en

gros les action blocks c'est quelque chose que vous allez pouvoir déclencher de plusieurs endroits dans votre application et donc vous allez créer un action block que vous allez pouvoir réutiliser plutôt que faire copier-coller deux fois un composant qui va avoir une série d'actions vous allez faire un action block que vous allez pouvoir réutiliser à deux endroits donc ça typiquement il vous montre l'exemple par exemple d'un panier parce que c'est le truc qu'on peut avoir besoin un peu partout dans l'application euh de de comment dire de ajouter au panier c'est quelque chose qu'on peut avoir sur

plusieurs pages différentes donc je pense que c'est pour ça qu'ils ont mis cette illustration au niveau des actions on a énormément de choses on a euh déjà on peut avoir plusieurs actions en fonction de du du du mécanisme avec lequel on déclenche l'action donc si par exemple on met double tap si on met un un une longue press ça va être des choses qui vont être différentes que si on clique euh simplement sur le bouton ensuite on peut naviguer vers des pages on peut naviguer vers une page retour donc ça il faut l'avoir autorisé on

peut ensuite faire des queries donc là on peut créer un nouveau document lire un document mettre à jour un document supprimer un document ou faire query collection pour justement faire un peu la même chose qu'on avait là ici vous avez API call donc pour faire un col API déclencher un col aps vous pouvez rafraîchir la base de données donc ça peut être par exemple un bouton reset la la la request de votre base de données donc si par exemple vous avez un bouton refresh et que vous avez une liste en dessous bah ça va rafraîchir

vous pouvez créer une authentification donc ici un login Create Account pour créer un compte sign in avec le téléphone email verification link mettre à jour l'email et cetera vous avez une action quasiment pour tout et ensuite vous avez des actions spécifiques par exemple à alors je me suis j'ai cliqué sans faire exprès vous avez des des choses qui sont liées à à par exemple supabase donc insert row update row delete row SQ light query donc là c'est la même chose algolia search et generate current page link donc ça c'est pour une page spécifique vous avez

ensuite mettre à jour les state donc ce soit au niveau de l'application ou de la page vous pouvez ici vider le cache de la query en gros ça c'est quelque chose que vous pouvez faire sur flutterfow pour éviter parce que ça en fait vous payez à la consommation dans la base de et firebase c'est pas le moins cher donc pour limiter ça ils ont laissé la possibilité à l'utilisateur de définir de mettre les données en cache et donc vous allez pouvoir mettre justement soit dans toute l'abpp et cetera et vous allez pouvoir définir un nom

donc là par exemple tout do et vous allez pouvoir garder les données que vous avez mis en cache donc ça pareil il y a des tutos pour vous aider à faire ça c'est pas forcément le plus simple mais je pense que vous pouvez vous en sortir pour comprendre comment est-ce que ça fonction fonctionne mais en gros ça vous permet voilà de pas surdoser votre consommation de lecture de de documents parce que à chaque fois ça coûte de l'argent c'est des microocentimes mais si vous avez beaucoup d'utilisateurs ça coûte de l'argent donc si vous utilisez le

cash ça réduira ce nombre de consommation de lecture d'action donc ça c'est pour les différentes actions je vais reprendre ma petite liste comme ça on va faire le tour vous avez différents widgets donc il y a bottom sheet et un un comm une petite fenêtre qui vient d'en bas et qui se et qui remonte vous avez daytime picker pour choisir une date color picker pour choisir une couleur scroll to pour descendre sur la page vous avez scan barcode QR code expand image pour ouvrir une image launch map pour lancer une des des applications de map

vous avez un option pour valider un for enlever le texte bref en vrai il y en a une tonne je vais essayer d'en faire un maximum mais là ça va être un peu long vous pouvez aussi définir tous ces trucsl donc vous pouvez jouer des sons stopper des sons mettre une snack bar c'est une petite barre de vérification vous pouvez mettre une alerte dialogue qui va être une petite alerte et cetera vous pouvez déclencher des push notification vous pouvez mettre à jour de la donnée donc média ou fichier vous pouvez commencer ou finir des actions

donc ça on va l'utiliser pour du Time tracking par exemple modifier le le langage de l'APP copy to clipboard biometric verification donc ça c'est face ID start audio recording stop audio recording pour laisser vos utilisateurs enregistrer et vous avez ensuite partager lancer une URL pour ouvrir un lien envoyer un email appeler un numéro et cetera et cetera des animations des paiements et les custom actions et les cloud functions qui sont juste ici voilà là on a fait un bon tour la dernière chose que je voulais montrer c'est les animations donc il y a des animations

qui sont préfaites on page load et ensuite vous pouvez les customiser comme vous voulez donc par exemple ici si je mets ça et et je fais une animation dessus je fais par exemple fade et du coup ça va s'afficher voilà de manière un peu progressive je peux jouer sur tous les paramètres je peux les cacher avant de les animer je peux faire une boucle avec l'animation que ça se fasse en boucle voilà et ensuite je peux définir des animations dès lors qu'il y a un trigger donc dès qu'il se passe une action je peux définir

cette animation et ensuite je pourrais les déclencher dans les actions évidemment il reste d'autres choses dont j'ai pas parlé donc notamment ici les composants on peut créer des composants customisés on peut créer ici euh d'autres éléments donc là ici on a accès à tous les templates différents donc il y en a plein plein plein de composants template de composants à ne pas confondre avec les templates de page et on peut avoir nos thème widget juste ici voilà ce guide ultime sur flutterfow est terminé j'espère que ça vous a plu si c'est le cas n'hésitez pas

à liker cette vidéo n'hésitez pas à commenter aussi et vous pouvez également si vous voulez aller plus loin avec le No code rejoindre mon starter pack c'est un pack 100 % gratuit avec 20h de contenu pour apprendre le No code il y a des formations sur bubble sur flutterfow sur no chîn donc voilà n'hésitez pas le lien est le premier en description et puis si vous voulez continuer avec moi je vous conseille cette vidéo je vous dis comment être plus productif en utilisant le flow