R4A.10 - Compléments Web (vuejs)

• Cliquer sur "Next", puis choisir un OS pour le simulateur. Il est fort possible que l'OS ne soit pas déjà disponible, auquel cas, il faut le télécharger en cliquant sur la flèche à côté du nom, comme indiqué dans l'image ci-dessous.

• Une fenêtre s'ouvre puis le téléchargement commence.
• Une fois terminé, terminer la configuration, notamment en donnant un nom au simulateur, son orientation, etc.
• Une fois la création terminée, le simulateur est disponible dans la liste de l'écran d'accueil.
• Pour vérifier que tout fonctionne, cliquez sur la flèche pour lancer l'émulateur. Une fenêtre ressemblant au téléphone apparaît, puis après quelques dizaines de secondes, l'écran d'accueil android s'affiche.
• Il est ensuite possible d'interagir comme sur un téléphone réel, bien que certaines opérations fassent "ramer" l'émulateur.

• La dernière étape consiste à indiquer au système d'exploitation les chemins d'accès au SDK de android-studio.
• Pour cela, il faut éditer le fichier .bashrc (ou .profile, selon votre cas) et ajouter à la fin, quelque chose du genre :

################################
# Android SDK
###############################
export ANDROID_HOME="/home/toto/Android/Sdk"
export ANDROID_SDK_ROOT="/home/toto/Android/Sdk"
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/emulator:/usr/local/android-studio/bin

•  Il faut bien entendu remplacer /home/toto par le chemin vers votre propre répertoire Android/Sdk

2.2°/ Installation de gradle

ATTENTION: Pcette étape n'est réellement nécessaire que s'il y a un problème avec le plugin gradle d'Android Studio, ce qui arrive malheureusement assez souvent, par exemple dès que l'on fait une mise à jour de ce plugin !

• Quand malheureusement, le plugin gradle installé avec le sdk android est dans une version trop récente par rapport au projet généré par quasar, le plus simple est d'utiliser une version "externe" de gradle, en l'installant.
• Pour cela, d'aller sur https://gradle.org/releases/ et de télécharger l'archive binary-only de la dernière version (par exemple 9.3.1)  ou supérieure.
• En tant que root, copier l'archive téléchargée gradle-9.3.1-bin.zip dans /usr/local et la décompacter.
• Ensuite, il suffit d'ajouter le chemin d'accès à l'exécutable de gradle dans son .bashrc :

################################
# Gradle
###############################
export PATH=$PATH:/usr/local/gradle-9.3.1/bin

2.3°/ Installation des paquets node pour quasar

• Il suffit d'utiliser npm pour faire un installation globale :

npm install -g @quasar/cli

2.4°/ JDK/JRE Java

• Android studio s'installe directement avec un JDK/JRE Java et par défaut les projets vont l'utiliser.
• Il est cependant possible d'utiliser un JDK "externe" déjà installé en réglant les paramètre du projet android.
• Dans ce cas, la documentation de capacitor 7 précise que le JDK minimal est le 21.

npm init quasar

npm install @ionic/pwa-elements
npm install @capacitor/camera

quasar dev

quasar build

// on suppose que l'on est à la racine du projet
cd dist/spa
quasar serve

quasar dev -m electron

quasar build -m electron

quasar mode add capacitor

cd src-capacitor
npm install @ionic/pwa-elements
npm install @capacitor/camera@latest-7

Ensuite, il faut lancer la création de l'application pour android avec :

quasar dev -m capacitor -T android

• Lors du premier lancement, un certain nombre de paquets vont être téléchargés, et un projet android studio créé.
• Ensuite android studio se lance automatiquement et vous demande s'il doit "faire confiance" à ce projet.
• En cliquant sur "Trust", le projet est ouvert.
• Android studio va télécharger les paquets nécessaires et créer une configuration d'exécution. Il est ensuite possible de la lancer avec le simulateur de mobile de votre choix.
• Si vous modifiez un fichier source, les changements provoquent une recompilation et le résultat apparaît directement dans android studio.

3.7°/ Construire l'application mobile pour la production

• Pour construire l'application :

quasar build -m capacitor -T android

4°/ Exemples

4.1°/ Sources

• Il existe beaucoup de tutoriel pour faire sa première application mobile avec quasar. Voici notamment un lien vers une application pour avoir le cours de crypto-monnaie  :
  • le tutoriel : https://diligentdev.medium.com/quasar-writing-a-web-and-mobile-cryptocurrency-app-with-the-same-codebase-ba708bc8d375
  • le dépôt : https://bitbucket.org/TheDiligentDev/quasar-crypto-app/src/master/. 
• Cela permet d'illustrer l'accès à une API distante avec Axios, et comme on peut le constater, cela ne change strictement rien par rapport à une application SPA.
• A noter que cette application n'utilise aucun plugin capacitor afin d'utiliser le matériel du mobile.

• Un autre exemple, mais prévu pour la v1 de quasar est disponible ici : 
  • le tutoriel : https://www.dynamsoft.com/codepool/quasar-qr-code-scanner.html
  • le dépôt ici : https://github.com/tony-xlh/Quasar-QR-Code-Scanner
• Cette application utilise notamment l'appareil photo.

• Pour illustrer les plugins de capacitor, il existe également de nombreux tutoriels, notamment sur le site même de capacitor : https://capacitorjs.com/docs/apis
• Capacitor est globalement fait pour être indépendant de l'environnement de développement. Il est donc facile d'adapter les exemples à une application quasar.
• On peut même utiliser le très bon exemple provenant du framework ionic :https://ionicframework.com/docs/vue/your-first-app
• En effet, à part les composants ionic qui changent, la partie capacitor est globalement la même.

 4.2°/ mini tutoriel avec prise de photo

• lancer npm init quasar pour créer un projet.
• la suite suppose que le répertoire du projet est testquasar.
• lancer les commandes suivantes :

cd testquasar
npm install @ionic/pwa-elements
npm install @capacitor/camera
quasar mode add capacitor
cd src-capacitor
npm install @ionic/pwa-elements
npm install @capacitor/camera

• Editer le fichier quasar.config.js qui se toruve à la racine du projet, et trouver un champ boot. Modifier ce champ avec :

    boot: [ 'capacitor' ],

•  Créer un fichier src/boot/capacitor.js avec dedans :

import { defineCustomElements } from '@ionic/pwa-elements/loader'

export default () => {
  defineCustomElements(window)
}

•  Editer le fichier src/layouts/MainLayout.vue :
  • vers la fin du template :

    <q-page-container>
        <q-btn color="primary" label="Get Picture" @click="captureImage" />
        <img :src="imageSrc">     
      <router-view />
    </q-page-container>

• • au début de la partie <script setup>, ajouter les imports :

import { Camera, CameraResultType } from '@capacitor/camera'

• • et à la fin, modifier/ajouter le code suivant :

const leftDrawerOpen = ref(false)
const imageSrc = ref('')
// functions
async function captureImage () {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  })
  // The result will vary on the value of the resultType option.
  // CameraResultType.Uri - Get the result from image.webPath
  // CameraResultType.Base64 - Get the result from image.base64String
  // CameraResultType.DataUrl - Get the result from image.dataUrl
  imageSrc.value = image.webPath
}
function toggleLeftDrawer () {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

• Pour tester en mode application web : quasar dev
• Normalement, quand on clique sur le bouton, un widget apparaît pour prendre une photo, si l'ordinateur possède une caméra. Sinon, il propose d'aller chercher une photo sur le disque.
• Pour tester sur un simulateur de mobile android : quasar dev -m capacitor -T android