R4A.10 - Compléments Web (vuejs)

npm init quasar

quasar dev

• Normalement, cela lance directement le navigateur avec l'URL servie (par défaut http://localhost:9000)
• Comme pour les projets classiques, on peut modifier le code et voir en direct les changements.

3.3°/ Construire l'application SPA pour la production

• Pour construire l'application :

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 dev -m capacitor -T android

Remarque : si ce n'est déjà fait, cette commande va créer un répertoire src-capacitor à la racine du projet.

ATTENTION :

• Selon la version de quasar que vous utilisez, il est possible qu'il crée un projet capacitor avec des paquets npm en version "ancienne", comme la v2. Cela pose de nombreux problème car capacitor en est à la v5 et la plus par des exemples que l'on trouve sont pour la v4 ou supérieure
• Pour vérifier si vous avez la bonne version, il suffit d'aller dans src-capacitor et consulter le fichier package.json. Si vous voyez une ligne du type : "@capacitor/core": "2.0.0", c'est que quasar a utilisé une ancienne version.
• Pour le forcer à utiliser une version récente, par exemple la v5, il faut reinstaller les paquets. Pour cela :

cd src-capacitor
rm -rf node_modules
rm package-lock.json

•  Ensuite, il faut éditer le fichier package.json et modifier la liste des paquets avec :

   "dependencies" : {
        "@capacitor/core": "^5.0.0",
        "@capacitor/cli": "^5.0.0",
        "@capacitor/android": "^5.6.0",
    }

• Ensuite, il suffit de lancer l'installation : npm install

• Si le projet fait appel à des plugins capacitor tels que la caméra, il faut également les installer. Par exemple, pour utiliser la caméra :

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

• 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 et il est possible de le 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.6°/ 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, en prenant bien garde de sélectionner webpack comme builder.
• la suite suppose que le répertoire du projet est testquasar.
• lancer les commandes suivantes :

cd testquasar
quasar mode add capacitor
cd src-capacitor
rm -rf node_modules
rm package-lock.json

•  Si besoin (par ex, version ancienne de capacitor), éditer le fichier package.json et modifier les dépendances avec :

"dependencies": {
    "@capacitor/cli": "^5.0.0",
    "@capacitor/core": "^5.0.0"
    "@capacitor/android": "^5.6.0",
  }

•  lancer les commandes suivantes :

npm install
npm install @capacitor/android
npm install @ionic/pwa-elements
npm install @capacitor/camera
cd ..
npm install @ionic/pwa-elements
npm install @capacitor/camera

Remarque : il est un peu bizarre mais essentiel d'installer les plugins capacitor aussi bien dans le répertoire dédié à capacitor qu'à la racine du projet. En effet, les sources de l'application se trouvent à la racine du projet et il faut bien que la compilation puisse accéder aux plugins capacitor, sinon la compilation webpack échouera. D'un autre côté, si les plugins ne sont pas présents dans le répertoire de capacitor, c'est la compilation pour android qui ne produira pas une application fonctionnelle.

• Editer le fichier quasar.config.js 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>, ajouter les imports :

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

• •  modifier la fonction setup() comme suivant :

  setup () {
    const leftDrawerOpen = ref(false)
    const imageSrc = ref('')

    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
    }
    
    return {
      essentialLinks: linksList,
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      },
      imageSrc,
      captureImage,
    }
  }

• 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