1. React
  2. Ionic

Ionic

Références  : 

Qu'est ce que Ionic ?

En termes simples, Ionic est un framework libre d'utilisation qui permet de créer des applications mobiles pour iOS, Android et Windows Phone, à partir d'une base de code unique. En d'autres termes, Ionic est un outil de développement mobile multiplateforme.

Ionic a été fondé en 2012 par une start-up technologique appelée Drifty Co, et c'est aujourd'hui le meilleur framework open-source au monde pour la création d'applications mobiles (hybrides) multiplateformes.

Comment fonctionne Ionic ?

Ionic vous permet de développer des applications mobiles en utilisant les technologies et les langages du web comme HTML, CSS, JavaScript, Angular, React et TypeScript. Par conséquent, considérez Ionic comme un kit de développement logiciel (SDK) pour la création d'applications mobiles hybrides. En tant que tel, Ionic fournit une collection de composants qui imitent l'aspect, la convivialité et les fonctionnalités natives de chaque plateforme mobile. Ces composants comprennent par exemple des boutons, des onglets, des menus, des listes, des cartes, des modaux, etc.

En plus de ces composants qui donnent le style et l'aspect des applications mobiles, Ionic fournit également les comportements appropriés comme la navigation et les gestes - par exemple, le glissement, la rotation et les événements de pincement, pour n'en citer que quelques-uns. Ionic comprend également une collection d'icônes appelées Ionicons. Tous ces composants sont des éléments que vous utilisez dans la construction de vos applications ioniques, ainsi que les plugins Cordova et PhoneGap.

Prérequis

TypeScript

Voir le support de cours sur TypeScript

Custom Hook

Un hook personnalisé n'est qu'une fonction qui utilise d'autres hooks React.

https://react.dev/learn/reusing-logic-with-custom-hooks

Android Studio

  • Installer Android Studio
  • Installer Android 12.0 dans Android Studio : Tools > SDK Manager > Android 12.0
  • Créer un device virtuel dans Android Studio : Pixel 6 API 30

React + TypeScript

Référence : https://create-react-app.dev/docs/adding-typescript/

Ressouce en français : https://grafikart.fr/tutoriels/ts-react-types-2042

Exercice 1

Créer une application  React / TypeScript "testCounter" qui permet de créer un bouton "compteur" que l'on peut incrémenter et décrémenter au clic sur un bouton "+" et "-". Cette application qui utilisera

Exercice 2

Créer une application React / TypeScript "tasks" qui permet de gérer des tâches. L'application utilisera :

  • le typage TypeScript notamment pour les "composants fonctionnels" cf : https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components
  • useState cf : https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks
  • Une interface que vous appelerez TaskInterface et que vous placerez dans le dossier "interfaces". Cette interface rendra obligatoire les propriétés "id" et "label" et optionnelle la propriété "date"
  • Une interface que appellerez TasksInterface qui étendra le type Array et qui utilisera TaskInterface
  • Un fichier tasks.json que vous placerez dans le répertoire "mocks"
  • Une fonction "getTasks()" que vous exporterez depuis le fichier services/tasks.ts et qui renverra une promesse. Vous ne traiterez que le cas de figure où la promesse est tenue et "resolve" renverra les tasks que vous aurez importées depuis tasks.json
  • les hooks "useState" et "useEffect". C'est dans "useEffect" que vous ferez appel à la fonction "getTasks" pour alimenter le state (via setTasks) après le premier rendu 
     

Installation de Ionic avec windows

Installez la dernière version de node : https://nodejs.org/en/download/current/

Utilisez la console de Visual Studio Code pour lancer les commandes suivantes

npm install -g @ionic/cli
ionic --version
ionic start

A la question "Use the app creation wizard?", répondez "Y" et cela vous envoie sur le site web de ionic. Choisissez :

  • first-ionic-app pour le nom de l'application
  • choisissez une imoji
  • une couleur
  • Le templage "Menu"
  • React pour frameword

Cliquez sur "Continuez"

Si vous n'avez pas encore de compte sur ionic, c'est le moment d'en créer un ou d'utiliser votre compte gihub par exemple.

Vous êtes ensuite automatiquement renvoyé vers une page locale du type "http://localhost:8123/?code=rCnbYKvJdGSqNroNVoC7Cz07UFCSbAFI3Hcn8BlyqzjGDnbG&state=74c4b6f2" dont le message principal est : 

Your app is now building in your terminal!

Retournez sur la console de visual Studio Code

En cas de problèmes de droits 

Utilisez "powerShell" pour donner les drois d'exécution des scripts :  

Set-ExecutionPolicy unrestricted -Scope CurrentUser

Documentation

Commandes de base 

cf https://ionicframework.com/docs/ja/cli/commands/build

ionic serve // pour lancer l'application

Ouvrir l'application sur Android Studio

cf https://ionicframework.com/docs/developing/android

Attention d'installer Android Studio et de bien ajouter au "Path" le SDK (Software Development Kit ) d'Android

ionic build // pour construire l'appliction exécutable par le navigateur
ionic capacitor add android // pour ajouter la plateforme android 
ionic capacitor build android // pour construire l'application exécutable sur android (ou Android Studio) 
ionic capacitor open android // Pour lancer l'application avec Android Studio

Une fois que vous avez ouvert android depuis la console et depuis le répertoire racine de votre application, il vous faudra :

  • créer un device (Android Virtual Device - Pixel 6 Pro par exemple)
  • cliquer sur la flèche verte "Run App" 
    Image 1
  • Attendre, et parfois relancer pour enfin voir ce que cela donne dans un "device virtuel"
    Android Virtual Device

Exercice

Reprenez l'exercice concernant les tâches et adaptez le à ionic en n'utilisant ques des componenent ionic et notamment "IonList" et "IonReorderGroup".

Vous devriez optenir un résultat de ce type :

ionic task list