Je vais vous montrer comment vous pouvez utiliser Flutter et AWS Amplify pour passer rapidement de rien à une application mobile multiplateforme fonctionnelle avec authentification et infrastructure backend. Ce qui prendrait généralement environ une semaine à une petite équipe de développement pour la configuration peut être réalisé en une fraction du temps en utilisant cette boîte à outils.
Si vous suivez ce tutoriel, cela ne devrait pas vous prendre plus d’une heure. Eh bien, cela m’a pris plusieurs heures à me battre avec divers problèmes, mais j’espère que je les ai suffisamment bien documentés pour que vous ne devriez pas les toucher.
Voici le produit fini. Si vous voulez la version « voici celle que j’ai créée », suivez les étapes du fichier Lisez-moi, vous devriez l’avoir en place et fonctionner en une quinzaine de minutes. Voici le lien GitHub.
Ce tutoriel est composé de cinq parties :
- Prérequis et configuration de la base de code
- Ajouter une authentification
- Télécharger une photo de profil
- Stockage des détails de l’utilisateur
- Ajouter une touche de design
Recommandation
Flutter est une plate-forme très mature qui est utilisée depuis plusieurs années maintenant, avec une communauté florissante et de nombreux plugins et extensions pour réaliser la plupart des choses.
Amplify est également une plate-forme solide ; cependant, j’ai trouvé la fonctionnalité API difficile à utiliser et les bibliothèques Flutter n’étaient pas à jour avec les dernières annonces et fonctionnalités d’Amplify. En particulier, travailler avec AppSync GraphQL et DataStore (pour le magasin de données hors ligne et la synchronisation) était assez fragile (comme vous le verrez plus tard).
Associés, ces deux éléments constituent une excellente combinaison pour accélérer le développement de prototypes d’applications mobiles, mais lorsque vous avez l’impression de plier Amplify à votre volonté, n’ayez pas peur de l’abandonner au profit de travailler directement avec les services AWS. résumés.
L’application de démonstration que j’ai créée contient des informations sur le profil de l’utilisateur, une exigence commune à de nombreuses applications. Vous pouvez créer un compte et vous connecter, télécharger une photo de profil et soumettre quelques détails sur vous-même. Nous entrerons dans les détails de la pile complète, en travaillant avec Flutter et Dart pour le code d’application jusqu’à DynamoDB pour vous donner une vue d’ensemble de ce que vous devez savoir.
Première partie : Prérequis et configuration de la base de code
Ce didacticiel suppose que vous avez déjà configuré les éléments suivants sur votre machine :
| Éditeur de code/ EDI | J’utilise VSCode car il dispose d’un bon ensemble de plugins Flutter et Dart qui accélèrent le développement, tels que le chargement automatique des dépendances, Dart linting et intellisense. Vous êtes libre d’utiliser n’importe quel IDE qui fonctionne pour vous |
| Compte AWS | Créez un compte AWS si vous n’en avez pas déjà un. Visitez la page officielle d’AWS pour connaître les étapes de création d’un compte AWS.
Tout ce que nous allons utiliser aujourd’hui fait partie du niveau gratuit, il ne devrait donc rien vous coûter de suivre ce tutoriel. |
| CLI AWS et CLI AWS Amplify | Installez les outils AWS et Amplify CLI.
Assurez-vous d’avoir une version à jour de Node et NPM (c’est ce que les CLI utilisent). Visitez le site Web officiel de Node.Js pour télécharger la version à jour. Si vous devez exécuter plusieurs versions de Node, je vous recommande d’utiliser NVM pour les gérer et basculer entre elles. Pour installer AWS CLI, visitez la page officielle d’AWS. |
| XCode (pour iOS) | Si vous n’avez pas accès à un Mac, vous pouvez déployer des instances EC2 exécutant MacOS dans AWS ces jours-ci, que vous pouvez utiliser lorsque vous avez besoin de créer des artefacts iOS.
Téléchargez Xcode via le Mac App Store. Suivez le reste des étapes ici pour le configurer pour le développement iOS Flutter. |
| AndroidStudio (pour Android) | Suivez les étapes ici pour être prêt pour le développement Android Flutter. |
| SDK flottant | Suivez ces étapes pour que Flutter et ses dépendances soient opérationnels (si vous êtes sur un Mac, d’autres guides sont disponibles pour d’autres systèmes d’exploitation). |
Flutter et Amplify disposent d’outils d’échafaudage qui créent la structure initiale de votre projet. Il est important de les faire dans un certain ordre ; sinon, votre structure de dossiers ne correspondra pas à ce que les outils attendent, ce qui vous causera un mal de tête à rectifier plus tard.
Assurez-vous de créer d’abord votre structure de base de code en utilisant Flutter, puis initialisez Amplify en son sein.
J’ai utilisé la documentation officielle de démarrage de Flutter pour lancer ma démo.
Voyons si nous pouvons faire fonctionner Flutter. Tout d’abord, pour vérifier qu’il est correctement installé et ajouté à votre PATH, vous pouvez exécuter flutter doctor.
S’il s’agit de votre première incursion dans le développement mobile, il y aura quelques points à aborder ici. Pour moi c’était :
- Installation d’Android Studio (et de la CLI du SDK Android).
- Installation de XCode et CocoaPods.
- Accepter les termes et conditions des outils Android et iOS.
Création de la base de code de votre application
Lorsque vous avez toutes les conditions préalables prêtes, vous pouvez créer l’échafaudage Flutter. Cela crée le dossier dans lequel nous allons travailler, alors exécutez cette commande à partir d’un répertoire parent :
flutter create flutterapp --platforms=android,ios
J’ai spécifié Android et iOS comme plates-formes cibles pour supprimer la configuration inutile pour d’autres plates-formes (par exemple, Web, Windows, Linux).
Vous voudrez peut-être renommer le répertoire de niveau supérieur créé à ce stade au cas où vous ne voudriez pas qu’il corresponde au nom de votre application. Je l’ai changé de « flutterapp » à « flutter-amplify-tutorial » (nom de mon référentiel git).
À ce stade, Flutter a créé soixante-treize fichiers pour nous. Voyons en quoi consistent ces éléments :
Les dossiers avec lesquels nous passerons le plus de temps sont ios/android et lib/. Au sein de la ios et android les dossiers sont des ressources de projet qui peuvent être ouvertes respectivement avec XCode et Android Studio. Ces projets agissent comme l’interopérabilité entre le code Dart indépendant de la plate-forme et vos plates-formes cibles, et vous pouvez les utiliser pour tester votre application sur les plates-formes respectives. Essayons cela avec iOS maintenant :
Configuration iOS
open -a Simulator
flutter runSur mon Mac, avec une configuration minimale de XCode, cela est passé de rien à l’exécution d’un simulateur iPhone 14 Pro Max avec l’application Flutter échafaudée en cours d’exécution, ce qui est plutôt chouette.
Si vous voyez ci-dessous : alors félicitations, vous avez réussi à générer l’échafaudage.
Vous pouvez également ouvrir le ios/Runner.xcodeproj également dans XCode, explorez son contenu et exécutez-le sur des simulateurs et des appareils physiques comme vous le feriez pour tout autre projet XCode.
Configuration Android
Android est un peu moins simple, car vous devez configurer explicitement un émulateur dans Android Studio avant de pouvoir l’exécuter. Ouvrez le android/flutterapp_android.iml projet dans Android Studio pour commencer, puis vous pouvez configurer et exécuter un émulateur pour tester l’application.
Donnez à Android Studio quelques minutes pendant qu’il télécharge Gradle et toutes les dépendances nécessaires pour exécuter l’application. Vous pouvez suivre la progression de celle-ci dans la barre de progression en bas à droite.
Une fois Android Studio installé, si vous avez déjà un appareil simulé configuré dans AVD, vous devriez pouvoir appuyer sur le bouton de lecture en haut à droite de la fenêtre :
Et voilà, la même application sous Android :
Il s’agit d’une démonstration de l’exemple de code d’application fourni lorsque vous créez un nouveau projet Flutter. Au cours de ce didacticiel, nous remplacerons progressivement ce code par le nôtre.
C’est un bon point pour faire un git commit, maintenant nous avons les fondations configurées pour le développement de Flutter. Nous sommes maintenant à un point où nous pouvons commencer à bricoler avec le code Flutter et voir nos résultats sur iOS et Android simultanément.
Flutter utilise Dart comme langage intermédiaire entre Android et iOS, et tout le code avec lequel vous interagirez vit au sein du lib/ dossier. Il devrait y avoir un main.dart fichier, où nous allons commencer à bricoler.
Configurer et déployer une nouvelle application à l’aide d’Amplify
Maintenant que nous avons les outils de l’application mobile prêts à fonctionner, nous avons besoin d’une infrastructure backend pour prendre en charge les fonctionnalités de l’application.
Nous utiliserons AWS et ses nombreux services pour prendre en charge notre application, mais tout sera géré à l’aide du service AWS Amplify. La plupart d’entre elles seront gérées de manière transparente pour nous, et au lieu de nous soucier des services à utiliser, nous nous concentrerons sur les fonctionnalités que nous souhaitons déployer.
Pour commencer, dans votre dossier de code, exécutez ce qui suit :
Cette commande initialise AWS Amplify dans votre projet. Si vous ne l’avez jamais utilisé auparavant, il vous posera un certain nombre de questions. Pour les personnes suivantes qui collaborent sur le projet exécutant cette commande, configurez leur environnement local avec la configuration Amplify déjà en place.
Cela fournira certaines ressources AWS initiales pour stocker la configuration et l’état de votre application Amplify, à savoir un compartiment S3.
La barre de progression et l’état du déploiement ci-dessus peuvent sembler familiers à certains. Il s’agit de CloudFormation et, tout comme AWS CDK, Amplify utilise CFN en arrière-plan pour provisionner toutes les ressources requises. Vous pouvez ouvrir la console des piles CloudFormation pour la voir en action :
Enfin, lorsque la CLI est terminée, vous devriez voir une confirmation similaire à celle ci-dessous, et vous pourrez voir votre application nouvellement déployée dans la console Amplify :
Gestion de l’environnement
AWS Amplify a la notion d’« environnements », qui sont des déploiements isolés de votre application et de vos ressources. Historiquement, la notion d’environnements devait être créée au sein de n’importe quel écosystème : (par exemple, CloudFormation, CDK), en utilisant des conventions de nommage et des paramètres. Dans Amplify, c’est un citoyen de première classe – vous pouvez avoir plusieurs environnements qui autorisent des modèles, tels que la mise en service d’environnements partagés, par lesquels les modifications sont promues (par exemple, Dev> QA> PreProd> Prod) ainsi que la fourniture d’environnements par développeur ou fonctionnalité -bifurquer.
Amplify peut également configurer et fournir des services CI/CD pour vous en utilisant l’hébergement Amplify, les ajouter et les intégrer dans vos applications pour fournir un écosystème de développement de bout en bout. Cela configure CodeCommit, CodeBuild et CodeDeploy pour gérer la gestion du contrôle des sources, la création et le déploiement d’applications….