Création d'applications mobiles avec mises à jour en temps réel, Quasar et Capacitor.

Dans ce tutoriel, nous allons commencer par créer une nouvelle application web à l'aide de Quasar. Plus tard, nous apprendrons à la transformer en application mobile à l'aide de Capacitor. Si vous souhaitez rendre votre application plus attractive sur mobile.

Avec Capacitor, vous pouvez convertir votre application web Quasar en application mobile sans avoir besoin de faire beaucoup de choses difficiles ou d'apprendre une nouvelle façon de créer des applications comme vous le feriez avec quelque chose appelé React Native.

Ce tutoriel vous guidera tout au long du processus, en commençant par une nouvelle application Quasar et en incorporant ensuite Capacitor pour passer dans le domaine des applications mobiles natives. De plus, vous utiliserez Capgo pour envoyer des mises à jour en direct à votre application en quelques secondes.

À propos de Capacitor

CapacitorJS est vraiment un changement de jeu ! Vous pouvez l'intégrer facilement dans tout projet web, et il enveloppera votre application dans une vue web native, générant le projet Xcode et Android Studio natif pour vous. De plus, ses plugins fournissent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JavaScript.

Avec Capacitor, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa mince API et sa fonctionnalité épurée en font un plaisir à intégrer dans votre projet. Faites-moi confiance, vous serez impressionné par la facilité avec laquelle vous pouvez atteindre une application mobile native fonctionnelle avec Capacitor!

Préparation de votre application Quasar

Pour créer une nouvelle application Quasar, exécutez la commande suivante :

npm init quasar

Sélectionnez l'option « Application avec Quasar CLI » puis « Quasar v2 ».

Pour créer une application mobile native, nous avons besoin d'une export de notre projet. Par conséquent, ajoutons un script simple à notre package.json qui peut être utilisé pour construire et copier l'application Quasar :

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Après avoir exécuté la commande generate , vous devriez pouvoir repérer une nouvelle dist dossier à la racine de votre projet.

Ce dossier sera utilisé par Capacitor plus tard, mais pour l'instant, nous devons le configurer correctement.

Ajouter Capacitor à votre application Quasar

Pour emballer n'importe quel application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales, mais ensuite, c'est aussi simple que d'exécuter un seul sync commande.

Tout d'abord, nous pouvons installer le Capacitor CLI comme dépendance de développement, et puis configurer ensuite dans notre projet. Lors de la configuration, vous pouvez appuyer sur “entrer” pour accepter les valeurs par défaut pour le nom et l'ID de l'application.

Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.

Finalement, nous pouvons ajouter les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de notre projet :

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Quasar project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

À ce stade, vous devriez être en mesure d'observer de nouveaux iOS et Android les dossiers de votre projet Quasar.

Ce sont des projets natives réels !

Pour accéder au projet Android ultérieurement, vous devez installer Android Studio. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.

De plus, vous devriez trouver un fichier capacitor.config.ts qui contient certaines configurations fondamentales Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est le répertoireWeb, qui doit pointer vers le résultat de votre commande de build. Actuellement, c'est inexact.

Pour rectifier cela, ouvrez le capacitor.config.json fichier et mettez à jour le répertoireWeb:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Vous pouvez essayer en exécutant les commandes suivantes :

npm run generate
npx cap sync

La première commande npm run generate va simplement construire votre projet Quasar et copier la build statique, tandis que la deuxième commande npx cap sync va synchroniser tous les web code dans les bons endroits des plateformes natives afin qu'ils puissent être affichés dans une application.

De plus, la commande de synchronisation pourrait mettre à jour les plateformes natives et installer des plugins, donc lors de l'installation d'un nouveau Capacitor plugins il est temps de lancer npx cap sync à nouveau.

Sans vous en rendre compte, vous êtes maintenant effectivement terminé, voyons donc l'application sur un appareil !

Construire et déployer des applications natives

Pour développer des applications iOS, vous devez avoir Xcode installé, et pour les applications Android, vous devez avoir Android Studio installé. De plus, si vous prévoyez de distribuer votre application sur l'app store, vous devez vous inscrire au programme Apple Developer pour iOS et au Google Play Console pour Android.

Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser les Capacitor CLI pour ouvrir facilement les projets natifs :

npx cap open ios
npx cap open android

Une fois que vous avez configuré vos projets natifs, déployer votre application sur un appareil connecté est facile. Dans Android Studio, vous n'avez qu'à attendre que tout soit prêt, et vous pouvez déployer votre application sur un appareil connecté sans modifier les paramètres. Voici un exemple :

Dans Xcode, vous devez configurer votre compte de signature pour déployer votre application sur un appareil réel au lieu du simulateur. Si vous n'avez pas déjà effectué cela, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit dans le Programme des développeurs). Une fois cela fait, vous pouvez simplement appuyer sur la touche play pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

Félicitations ! Vous avez réussi à déployer votre application web Quasar sur un appareil mobile. Voici un exemple :

Mais attendez, il existe également une façon plus rapide de procéder pendant le développement…

Capgo Mise à jour en temps réel

Capgo Mise à jour en temps réel est un service qui permet aux développeurs de déployer des mises à jour à leurs applications mobiles sans passer par le processus traditionnel de soumission de l'App Store. Cela peut être un moyen pratique pour corriger rapidement des bogues ou apporter de petites mises à jour à une application sans attendre le processus de revue de l'App Store.

L'intégration de Capgo dans votre application Quasar est un processus simple qui vous permet de tirer parti de la puissance des mises à jour en temps réel. Ce guide étape par étape vous guidera à travers l'intégration et la mise en œuvre de Capgo Mise à jour en temps réel, vous permettant de délivrer des mises à jour sans heurt.

Inscrivez-vous et accédez au tableau de bord de Capgo:

Il est temps de vous inscrire et d'obtenir votre clé API pour télécharger votre première version ! Commencez par l'inscription à un compte Capgo.

Installez le Capgo SDK:

Exécutez depuis une ligne de commande, directement dans le répertoire racine de votre Capacitor application, la commande suivante :

npm i @capgo/capacitor-updater && npx cap sync Pour installer le plugin dans votre Capacitor application.

Ajoutez ensuite à votre application ce code en remplacement de CodePush :

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Cela indiquera au plugin natif que l'installation a réussi.

Connectez-vous à votre compte Capgo CLOUD.:

Tout d'abord, utilisez l'apikey présente dans votre compte pour vous connecter avec le __CAPGO_KEEP_0__: all Ajoutez votre première application Commencez par créer une application dans CLI Cloud avec le __CAPGO_KEEP_1__.

`npx @capgo/cli@latest login YOU_KEY`

Cette commande utilisera toutes les variables définies dans le fichier de configuration __CAPGO_KEEP_0__ pour créer l'application.:

Let’s get started by first creating an app in Capgo Cloud with the CLI.

    npx @capgo/cli@latest app add

This command will use all variables defined in the Capacitor config file to create the app.

present in your account to log in with the __CAPGO_KEEP_0__::

Exécutez la commande pour construire votre code et l'envoyez à Capgo avec :

npx @capgo/cli@latest bundle upload`

Par défaut, le nom de la version sera celui de votre fichier package.json.

Vérifiez dans Capgo si la construction est présente.

Vous pouvez même le tester avec mon application sandbox mobile.

Définir le canal par défaut:

Après avoir envoyé votre application à Capgo, vous devez définir votre canal par défaut pour permettre aux applications de recevoir des mises à jour de Capgo.

npx @capgo/cli@latest channel set production -s default

Configurer l'application pour valider les mises à jour:

Ajoutez cette configuration à votre fichier JavaScript principal.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Faites ensuite un npm run build && npx cap copy mettre à jour votre application.

Recevez une mise à jour en direct:

Pour que votre application reçoive une mise à jour en direct depuis Deploy, vous devrez exécuter l'application sur un appareil ou un émulateur. La façon la plus simple de procéder est de simplement utiliser la commande suivante pour lancer votre application locale dans un émulateur ou un appareil connecté à votre ordinateur.

  npx cap run [ios | android]

Ouvrez l'application, mettez-la en arrière-plan et ouvrez-la à nouveau, vous devriez voir dans les journaux que l'application a effectué la mise à jour.

Félicitations ! 🎉 Vous avez réussi à déployer votre première mise à jour en direct. C'est juste le début de ce que vous pouvez faire avec les mises à jour en direct. Pour en savoir plus, consultez la documentation complète Mises à jour en direct.

Utilisation des plugins Capacitor

Étudions comment utiliser un plugin Capacitor en action, que nous avons mentionné quelques fois avant. Pour ce faire, nous pouvons installer un plugin relativement simple en exécutant :

npm i @capacitor/share

Il n'y a rien de particulier à ce plugin Partagemais il amène quand même le dialogue de partage natif ! Pour cela, nous n'avons besoin désormais que d'importer le package et d'appeler la fonction correspondante de notre application, alors changeons donc la share() function pages/index.vue à cela :

<template>
  <div>
    <h1>Welcome to Quasar and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

Comme mentionné précédemment, lors de l'installation de nouveaux plugins, nous devons effectuer une opération de synchronisation et puis redéployer l'application sur notre appareil. Pour effectuer cela, exécutez la commande suivante :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !

Ajout de Konsta UI (facultatif)

Pour utiliser Konsta UI dans votre application Quasar, vous devez avoir tailwind déjà installé et pour installer le package :

npm i konsta

De plus, vous devez modifier votre tailwind.config.js fichier :

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig permettra d'étendre la configuration par défaut (ou votre configuration personnalisée) de Tailwind CSS avec quelques variantes et utilitaires supplémentaires nécessaires pour Konsta UI.

Maintenant, nous devons configurer la racine Application composant afin de définir certaines paramètres globaux (comme theme).

Nous devons envelopper l'application entière avec App dans le pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Page d'exemple

Une fois que tout est configuré, nous pouvons utiliser les composants UI Konsta Vue dans nos pages Quasar.

Par exemple, ouvrez pages/index.vue et modifiez-le en

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

Si le rechargement en direct est hors synchronisme après avoir installé tous les composants nécessaires, essayez de redémarrer tout. Une fois que vous avez fait cela, vous devriez voir une application mobile avec un aspect natif, construite avec Quasar et Capacitor!

Conclusion

Capacitor est une excellente option pour construire des applications natives basées sur un projet web existant, offrant une façon simple de partager code et de maintenir une interface utilisateur cohérente.

Et avec l'ajout de CapgoC'est même encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et corrections de bogues.

Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :