Service de fléchettes: page Web Flutter

Entraînement

La dernière fois, nous nous sommes retrouvés sur le fait que notre serveur Web reçoit un nom de domaine et a appris à établir une connexion sécurisée avec le client. Cependant, nous n'avons encore absolument rien à montrer à notre futur utilisateur. Bien que l'on puisse déjà partager l'idée d'une startup et annoncer la date de sortie du MVP . Une page Web informative convient à cette tâche. Écrivons-le dans Dart en utilisant le framework FlutterWeb. Toutes nos applications client du service deviendront une extension de cette page particulière. Nous essaierons de mener un développement aussi adaptatif et structuré que possible, de sorte que le développement et les assemblages pour les plates-formes requises (web-android-iOS) ne deviennent qu'une routine.







Commençons par installer Flutter:

• Installer git
• Nous clonons le référentiel avec la version bêta de Flutter avec la commande

  git clone https://github.com/flutter/flutter.git -b beta

• Pour exécuter des commandes flutter à partir de la ligne de commande, vous devez spécifier le chemin d'accès à ses fichiers exécutables dans le système d'exploitation. Ouvrons les variables OS, pour cela nous commençons à entrer "changement des variables d'environnement de l'utilisateur actuel" dans la barre de recherche.
  
  
  
  
  
  
  
  Dans la fenêtre, sélectionnez la variable Chemin et cliquez sur Modifier . Dans la liste qui s'ouvre, créez une nouvelle ligne avec l'adresse des fichiers exécutables flutter dans le système de fichiers, par exemple C: \ flutter \ bin
• Installez l'extension VScode pour flutter
• Redémarrez VScode (pour que les nouvelles variables OS soient appliquées) et dans le terminal vérifiez l'état de flutter avec la commande
  
  
  
  

  flutter doctor

  
  
  
  
  
  
  la chose la plus importante ici est que flutter est installé en version bêta (avec support de développement web)
• Maintenant, nous activons le développement Web avec l'équipe
  
  
  
  

  flutter config --enable-web

Créer un nouveau projet et démarrer le débogage

Nous créons un nouveau projet avec une équipe

flutter create < >

Ouvrons-le immédiatement dans VScode avec la commande

code < >

Ouvrons le fichier main.dart dans le dossier lib et commençons le débogage avec la commande F5 :







peut-être, lorsque vous démarrez le débogage pour la première fois, vous devrez sélectionner Chrome comme périphérique de débogage:







supprimez le contenu du fichier main.dart . Ajoutez une méthode main vide et la classe racine de l'application, qui retourne une instance de MaterialApp dans la méthode build () : Ensuite, créez l'ensemble suivant de sous-dossiers de projet: Décrivez brièvement l'objectif de chacun d'eux:

• di est un mécanisme de communication entre les composants de l'application. Tous les services, référentiels, clients réseau nécessaires au fonctionnement de l'application seront créés et enregistrés ici. J'utiliserai la bibliothèque GetIt
• domaine - objets de données. Classes de présentation de données
• res - couleurs, lignes, importations de chemins vers des images et des polices. Tout ce qui concerne les ressources statiques
• service - services pour travailler avec des données
• ui - interface
• utils - classes d'utilité

Ajoutez les dépendances requises dans le fichier pubspec.yaml:

Préparation à la mise à l'échelle des éléments de l'interface utilisateur

On suppose que notre page doit s'adapter en fonction de la taille de l'écran de l'appareil client et de son emplacement (mode portrait ou paysage).



Commençons par les images d'arrière-plan. Leur préparation dépasse le cadre de l'article, je vais donc laisser ces deux liens ici:

• Pixabay.com - référentiel de photos de contenu
• Paint.net - éditeur graphique

Placez les images finies dans le dossier / assets / images, ajoutez ce chemin aux ressources dans le fichier pubspec.yaml:







je préfère accéder aux ressources sous la forme d'un arbre avec des paramètres. Dans ce cas, le chemin d'accès à l'image d'arrière-plan du stub:

images.background(bool isPortrait).stub

Pour ce faire, dans le dossier res , créez un fichier appelé images.dart avec des classes d'adresses d'image:







Pour redimensionner les tailles de l'interface et des polices, nous avons connecté la bibliothèque ScreenUtil . Sa fonctionnalité se résume à deux choses:

• Enregistrement de la taille d'écran "de base". Ici, vous devez définir la largeur et la hauteur de l'écran pour lequel la mise en page principale est effectuée et la nécessité de mettre à l'échelle les polices.
• Un ensemble d'extensions pour appliquer un facteur de mise à l'échelle aux nombres (num). Par exemple, 100.w signifie que le résultat de cette expression sera pour un écran 1920dp => 100dp, et pour un écran iPhone8 avec une largeur de 414dp => 100x (414/1920) = 21.6dp. Autrement dit, cinq fois moins. Il existe également des extensions pour la hauteur et la taille de la police.

Créons un fichier /utils/screen_util_ext.dart et une méthode d'initialisation statique dedans: Ajoutez un







appel à la méthode d'initialisation du zoom à la méthode build () du widget racine:







étendez les fonctionnalités de la bibliothèque de zoom avec plusieurs extensions supplémentaires dans le fichier /utils/screen_util_ext.dart :

Injection de dépendance

Il est temps d'implémenter un mécanisme pour créer et enregistrer des composants d'application à l'aide de la bibliothèque GetIt . Dans le dossier lib / DI / , créez le fichier di_container.dart . Nous y écrirons une méthode statique getItInit () et initialiserons une instance du conteneur GetIt . Enregistrons le premier composant - une instance de la classe Images :







Ajoutez l'appel de la méthode d'initialisation à main () :







L'accès au composant Images ressemblera à ceci:







De la même manière, enregistrons une classe avec des ressources avec des chaînes.

Page stub

Maintenant, dans le dossier UI , créez un fichier stub.dart avec la classe de page stub StubScreen, étendez la classe de base StatelessWidget et remplacez sa méthode abstraite build () . Notre page est une image en arrière-plan et deux blocs d'informations devant elle, placés en fonction de l'orientation de l'écran.

Référentiels et service

Pour afficher dynamiquement le temps restant avant la sortie, vous devez:

1. Obtenez les paramètres du serveur avec les dates de début de développement et de publication
2. Créer un flux d'événements pour le changement de temps restant
3. Combinez ces données en les transmettant au flux de sortie pour affichage sur l'interface utilisateur

Décrivons les objets de domaine (POJO) pour ces données:











Référentiels pour recevoir les paramètres et créer un flux d'événements:











Service pour la logique d'événements:







Enregistrez ces composants dans un conteneur DI:

Widget de temps restant

Le temps restant avant la sortie peut être représenté par 4 nombres: jours, heures, minutes, secondes. Représentons ces paramètres sous forme d'énumération:







Ajoutons des fonctionnalités aux paramètres en utilisant l'extension: Le







widget d'affichage du cadran, du numéro et de la signature sera animé, pour cela nous étendrons la classe StatefulWidget . Sa particularité est que l' Elément (la vue construite et affichée) ne correspond pas au widget lui-même, mais à son état ( State ). L'état, contrairement au widget, est modifiable. Autrement dit, ses champs peuvent être modifiés sans recréer complètement l'instance.











Besoin de clarifier ici ce que sont Animation , AnimationController et TickerProviderStateMixin... Donc AnimationController est un wrapper sur un simple paramètre à double valeur . La valeur de ce paramètre change linéairement dans la plage de 0,0 à 1,0 (elle peut également être modifiée dans la direction opposée ou remise à 0,0). Cependant, pour modifier ce paramètre, un objet TickerProviderStateMixin spécial est utilisé , qui est un paramètre obligatoire pour l' AnimationController et lui indique que le moteur graphique est prêt à créer un nouveau cadre. Ayant reçu un tel signal, AnimationController calcule combien de temps s'est écoulé depuis l'image précédente et calcule combien il faut changer la valeur de sa valeur . Les objets d' animation s'abonnent à AnimationControlleret contiennent une fonction de dépendance de la valeur de sortie sur le changement linéaire (dans le temps) de la valeur AnimationController .



La méthode d'initialisation de l'état initState () est appelée une fois lors de la création:







Lorsque l'état du widget est détruit, la méthode dispose () est appelée :











Le widget sera représenté par une pile ( Stack ), avec le AnimatedBuilder pour le nombre et l'échelle placés dedans :







Il reste à implémenter la primitive graphique sous forme d'arc:







Ajouter 4 ces widgets à l'écran sont des stubs:

Construire et publier

Avant de créer l'application, vous devez remplacer le nom et la description de l'application dans les fichiers ./web/index.html ./web/manifest.json et pubspec.yaml .



Arrêtez le débogage et générez la version de l'application avec la commande

flutter build web

L'application terminée se trouve dans le répertoire ./build/web/ . Veuillez noter que les fichiers .last_build_id et main.dart.js.map sont des fichiers de service et peuvent être supprimés.

Plaçons l'application sur le serveur préparé dans l'article précédent. Pour ce faire, copiez simplement le contenu du répertoire ./build/web/ dans / public / sur notre serveur:

scp -r ./* root@91.230.60.120:/public/

Résultat



Code source github Les



questions et commentaires sont les bienvenus. Vous pouvez discuter avec l'auteur sur la chaîne Telegram .

Au lieu d'une conclusion

Notre application client est déjà prête à recevoir les premières données du serveur - des informations sur la date de sortie. Pour ce faire, dans le quatrième article, nous allons créer une application serveur squelette et la placer sur le serveur.