Contexte Oless

Création d’une application mobile pour votre hôtel. Il permettra de réserver une chambre, de supprimer sa réservation pour un client connecté. L’administrateur pourra afficher l’ensemble des réservations de l’hotel. Celles ci seront enregistrées en local sur le téléphone puis sur une base de données distante.

On réalisera cette application en Flutter 3 (3.0.4 en 2022 ).

Création de la page d’accueil de l’Hôtel

Site de référence : https://flutter.dev/

Partie 1 – Installation

  • installer Android Studio
  • ajouter l’extension Flutter et Dart
  • redémarrer Android Studio
  • Dans more action, aller dans virtual device manager et créer en un nouveau
  • Télécharger la version d’Android correspondante
  • Créer un projet Android avec la version de votre emulateur pour qu’il télécharge les dépendances
  • Important : Lancer ce projet sur l’emulateur

firstapp

  • Dans le sdk manager, ajouter command line tools

Si vous avez un iphone, il faut également un mac et suivre les étapes suivantes :

  • installer xcode
  • ajouter un simulateur 
  • installer homebrew 
  • installer cocoapods 

 

  • Télécharger flutter et décompresser le
  • ajouter flutter au path puis  redémarrer votre ordinateur
  • Exécuter flutter doctor en console et résoudre les problèmes sauf Visual Studio

cmd

  • Lancer Android Studio et créer un projet Flutter nommé Oless ( il est probable que vous deviez indiquer la destination du sdk de flutter sur votre ordinateur à android studio)
  • Lancer l’emulateur grâce à l’icone sur la droite

bb

  • Vérifier que l’application se lance sur l’emulateur à gauche, ici Pixel 5
  • Lancer l’application, vous devriez voir celle ci sur la droite et pouvoir la tester.
  • Modifier la couleur de l’application selon votre charte graphique
  • Incrémenter de 2 à chaque clic.

Téléphone

  • aller sur le numéro de build de votre téléphone et appuyer 7 fois
  • dans options développeur, activer le débogage USB
  • Changer la couleur et lancer sur votre téléphone (il faut se mettre en développeur mode et activer le débogage usb)

Un cours sur Dart et Flutter : https://www.udemy.com/course/flutter-dart-creez-des-applications-pour-ios-et-android

Partie 2 – Création de la page de l’Hôtel

  • Ajouter un bouton
  • Se rediriger sur une autre page et afficher la description de l’Hotel