De nombreuses technos permettent d'obtenir des applications mobiles (apk sur les stores). Lesquelles ?

Natif Android, Natif iOS

Flutter, React native

Cordova, Capacitor

On va distinguer 4 familles de solutions:
Natif, Semi-natif, Compilé, Full Hybride

Application natives

Android : Java/Kotlin (AAC, Retrofit, Room)

iOS : Objective C/Swift (Moya/Realm)

• + : Le plus proche de la machine possible (perfs, features de l'OS dispo day one)
• La différence de perf est à relativiser sur des appareils récents
• - : tout écrire 2 fois (voir 3 si il faut une app web voir 4 si desktop)
• - : on est piégé par Apple et Google (il faut un mac, et XCode)

Application semi-natives

React Native: logique en React, mais appelle l'UI native Android/iOS

• + : Une bonne partie du code est mutualisée
• + : Bonne perfs (je crois)
• - : Demande du travail spécifique à chaque plateforme et soucis de compatibilité (je crois)
• - : demande souvent de quand même faire du natif, manque de fonctionnalités (pas de push notifications par exemple)

Application compilées

Unity: moteur de jeu (C# + framework dédié), compilé vers Android,iOS...

Flutter: code en Dart, compilé vers Android, iOS (et Linux + Web depuis 2.0)

• + : Une seule base de code
• + : Excellentes performances et look'n'feel
• + : Hot reload
• + : Système de plugins pour appeler du code natif
• - : Demande d'apprendre un nouveau framework et concepts (pas de css, html, système de widget...)
• - : Un peu jeune donc pas encore de grosse archi dispo, tout à structurer soi-même (de moins en moins vrai)
• Clairement en passe de devenir incontournable.

Application full hybrides

Anciennement Cordova, maintenant Capacitor: application JS qui envoie des messages à des plugins natifs.

• + : Une seule base de code : la webapp (vue/react/angular/whatever)
• + : De nombreux plugins natifs existent déjà et facile de créer les votre au besoin
• + : Aucun nouvelle notion pour un webdev tant que les plugins natifs existent
• - : la moins performante des solutions (mais dans 95% des cas OSEF)

Capacitor en 2 mots

Capacitor génère des projets XCode / AndroidStudio / Electron à partir d'une webapp. Ces projets sont natifs, ils se buildent et se configurent comme des projets natifs (e.g. AndroidManifest.xml, build.gradle...)

Le projet généré est une "Super WebView" qui va embarquer la webapp et fournir des API js pour appeler des plugins natifs (GPS, bluetooth, vibreur...)

Le crédo de Capacitor : "Write once, run Everywhere”

Ecrivez votre webapp comme d'habitude (Angular/React/Vue/Js pur), puis ensuite:

npm install @capacitor/core @capacitor/cli

Installe les libraires Capacitor ainsi que la CLI (npx cap *) dans votre webapp existante

npx cap init

Crée un fichier capacitor.config.json

Crée un fichier capacitor.config.json

{
  "appId": "org.univ.compostmap",
  "appName": "compostmap",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

webdir indique où capacitor doit aller chercher notre webapp buildée et minifiée.

Comment obtenir une version buildée et minifiée ?

npm run build

Dans notre cas, webdir = dist

npx cap add android

Génére un vrai projet Android qu'on peut ouvrir avec android studio

npx cap add ios

npx cap add electron

Idem pour ios et desktop (electron)

npx cap open android

Ouvre le projet avec Android Studio

On peut lancer/builder le projet comme un projet Android classique

Exercice 20: Compostmap sur Android

Utilisez Capacitor pour créer la version mobile de Compostmap

On retrouve notre bon vieux manifest (les permissions c'est toujours là que ça se passe)

Unique activité MainActivity, la "super WebView" (on reviendra dessus)

Notre webapp Vue (dossier dist) est embarquée dans les assets

Notre webapp Vue (dossier dist) est embarquée dans les assets

Et donc l'application est directement disponible offline grâce à notre travail sur le client-side routing (vue-router)

Bien sûr il faudra gérer le offline pour la partie REST (avec des DB dans le localstorage comme Dexie ou plus proprement avec des ServiceWorkers)

Pour mettre à jour l'application mobile quand on fait un changement dans la webapp :

npm run build

puis

npx cap copy

Avec Capacitor 3 également possible de faire du Live reload

Il est possible d'automatiser le npx cap copy et la création de l'APK signé dans la CI (exemple gitlab Android)

L'APK signé est directement publiable sur le PlayStore (il faut un compte payant, je peux prêter le mien)

La philosophie de capacitor: du JS (Vue/React/Angular) partout où on peut

Du natif où c'est vraiment nécessaire. Des exemples ?

Haptics (vibreur), Accéléromètre, Appareil photo, Réalité augmentée...

Pour le natif, Capacitor repose sur la notion de plugin.

Chaque plugin va définir des API en JS. La "super webview" Capacitor va envoyer des évènements en JS pour interragir avec le code natif de la plateforme sur laquelle il est lancé.

Une version native du plugin, répondant à ces APIs, va être implémentée pour chaque plateforme (e.g. BarCode avec ZXSING sur Android et AVFoundation sur iOS).

Exemple : appareil photo (avec permissions)

Exemple : position GPS (avec permissions)

Usage plus complexe : Universal Linking

Permet à l'application d'intercepter certaines URL (e.g. http://compostmap.fr/compost/33), de se lancer et d'afficher un écran en fonction

Des dizaines de plugins officiels et communautaires sont disponibles. Capacitor ne couvrira peut être pas encore tous vos besoins...

Mais il est possible de créer vos propres plugins assez facilement (nécessite de savoir faire du natif).

Le module nous a permis de nous initier:

Au développement Android Natif (pour creuser: Kotlin, Android Architecture Components)

Au développement de SPA en VueJS (pour creuser: events, Webpack, SCSS/LESS, Dexie, Service Workers, VueX)

Au développement hybride avec Capacitor (pour creuser: Universal Links, création de plugins, Flutter!)

Merci beaucoup d'avoir été présents et attentif !

Après l'examen je vous enverrais un questionnaire sur le cours, merci de le remplir pour les étudiants de l'année prochaine