Creating Mobile Apps with live updates, Quasar and 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 monde des applications mobiles natives. De plus, vous utiliserez Capgo pour envoyer des mises à jour en temps réel à votre application en quelques secondes.

À propos de Capacitor

CapacitorJS est vraiment un changement de jeu ! Vous pouvez l'intégrer facilement à 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 vous donnent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JS.

Avec Capacitor, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa couche API et sa fonctionnalité épurée rendent l'intégration dans votre projet un jeu d'enfant. Croyez-moi, vous serez impressionné par la facilité avec laquelle vous pouvez obtenir une application mobile native complète avec Capacitor !

Préparation de votre application Quasar

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

npm init quasar

Configuration du projet 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 le projet Quasar :

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

Après avoir exécuté la commande generatevous devriez voir un dossier frais à la racine de votre projet. dist Configuration du projet Quasar

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Quasar App

Pour emballer toute application web dans un conteneur mobile natif, nous devons suivre quelques étapes initiales, mais ensuite, c'est aussi simple que d'exécuter une seule commande. sync Tout d'abord, nous pouvons installer le

Capacitor Capgo Capacitor CLI 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 Capgo créera des dossiers pour chaque plateforme à la racine de notre projet:

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

Initialize Capacitor

dossiers iOS ios et android dossiers

ce sont des projets natifs 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 capacitor.config.ts fichier dans votre projet, qui contient certaines paramètres fondamentaux Capacitor utilisés lors de la synchronisation. La seule chose dont vous devez vous soucier est le webDir, qui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.

Pour rectifier cela, ouvrez le capacitor.config.json et mettez à jour le webDir:

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

context : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `solutions_cordova_to_capacitor_ai_step2_body`). Page/zone : page de marketing de solutions de Capgo. Rôle : phrase de copie de site web. Vu dans : page solutions/cordova-to-capacitor-ai.astro. Clé de message `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

npm run generate
npx cap sync

Vous pouvez essayer cela en exécutant les commandes suivantes : npm run generate La première commande npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

va synchroniser toutes les web __CAPGO_KEEP_0__ dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application. Capacitor plugins __CAPGO_KEEP_0__ plugins npx cap sync encore.

Vous n'avez pas réalisé, mais 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 distribuer votre application sur l'app store, vous devez vous inscrire au Apple Developer Program pour iOS et au Google Play Console pour Android.

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

npx cap open ios
npx cap open android

Une fois que vous avez configuré vos projets natives, 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 :

android-studio-run

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 fait cela avant, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit au programme de développement). Une fois cela fait, vous pouvez simplement appuyer sur play pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

xcode-run

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

Mais attendez, il existe également un moyen 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 dans leurs applications mobiles sans passer par le processus traditionnel de soumission de l'App Store. Cela peut constituer 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.

La mise en œuvre 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. Cette étape par étape vous guidera dans 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 s'inscrire et d'obtenir votre clé API pour télécharger votre première version ! Commencez par s'inscrire à un compte Capgo.

Installez le Capgo SDK:

À partir d'une ligne de commande, directement dans le répertoire racine de votre application Capacitor, exécutez :

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

Et 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.:

Premièrement, utilisez l' all apikey présente dans votre compte pour vous connecter avec le CLI :

`npx @capgo/cli@latest login YOU_KEY`

Créez votre première application:

Commencez par créer une application dans le Capgo Cloud avec le CLI.

    npx @capgo/cli@latest app add

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

Envoyez votre première version:

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

npx @capgo/cli@latest bundle upload`

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

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

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

Fixer le canal par défaut:

Après avoir envoyé votre application à Capgo, vous devez faire de votre canal la valeur 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 pour mettre à jour votre application.

Reçoivez 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 manière 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-l’en arrière-plan et ouvrez-l’à 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 sur les mises à jour en direct. Documentation sur les mises à jour en direct.

Utilisation des plugins Capacitor

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

npm i @capacitor/share

Ce plugin n'a rien de spécial, mais il ouvre 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, donc changeons le fichier pages/index.vueLe plugin de partage share() Nous avons maintenant besoin de simplement importer le package et d'appeler la fonction correspondante de notre application, donc changeons le fichier 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 cela, exécutez la commande suivante :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez assister à la belle boîte de dialogue de partage native en action !

Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec des Capgo de navigation et des transitions, et corriger les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.

J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais intégrer cela avec Quasar est hacky et rarement intéressant lorsque vous avez déjà Tailwind CSS.

Pour un sentiment de mobilité native dans une application Quasar + Capacitor , utilisez les plugins Capgo au lieu des kits UI web uniquement comme Konsta UI :

@capgo/capacitor-native-navigation — barre de navigation native, barre de Liquid Glass de la tablette sur iOS, et un style de barre de tablette flou sur Android. Votre routeur Quasar conserve l'état de la route ; le plugin possède la barre de chrome native.
@capgo/capacitor-transitions Des transitions de page telles que celles utilisées par Ionic, ainsi que la possibilité de faire glisser vers l'arrière sur iOS dans la couche WebView, sans adopter l'interface utilisateur d'Ionic.

Installez les deux :

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

Configurez la navigation native avec le mode d'insertion CSS pour que le contenu web respecte les barres natives :

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Affichez une barre de tabs en verre liquide (iOS utilise la mise en page système ; Android utilise un fond de couche WebView flou) :

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Ajoutez des transitions de page natives dans votre coquille d'application :

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

Enveloppez les pages routées dans cap-router-outlet, cap-pageet appelez cap-contentou setDirection('forward') context : fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Vu dans : page alternatives.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA Alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Vu dans : page ionic-appflow.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Vu dans : page capwesome.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Page/zone : page de services de consulting. Rôle : Sujet de sous-titre ou de tagline. Vu dans : page consulting.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de consulting). | Page/zone : page de comparaison/migration d'Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins Ou). setDirection('back') avant de naviguer. N'ajoutez pas de titres ou de pieds de page web en doublon lorsque la navigation native possède ces surfaces.

Voir les guides complets : Utiliser @capgo/capacitor-navigation native et Utiliser @capgo/capacitor-transitions.

Aires sûres avec Tailwind

Pour les aires sûres du dispositif dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sur tailwind-capacitor @npm). Il fournit safe-areas utilities and other Capacitor-friendly Tailwind plugins:

npm add -D tailwind-capacitor

@__CAPGO_KEEP_0__ src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

En pt-safe, pb-safeUtilisez des utilitaires comme px-safe au lieu de les répandre env(safe-area-inset-*) à la main. Le projet est actuellement développé — si quelque chose manque pour votre configuration Quasar, open a PR on GitHub.

Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité, et Débordement horizontal)

Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster seul le tag Vueport ne suffit généralement pas. Travaillez à travers ces vérifications dans l'ordre.

Vérifiez que le tag meta Vueport est appliqué correctement

En index.html (ou votre modèle HTML Quasar), définissez le tag meta Vueport dans <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gérez la zone de sécurité iOS à partir d'un seul enveloppe racine

Créez une coquille d'application unique et appliquez la mise en page de la zone de sécurité là-bas — et non dans plusieurs composants imbriqués :

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Enveloppez tout le contenu de la page à l'intérieur .app-shell. La mise en forme de la zone de sécurité redondante dans les en-têtes, les modaux et les enveloppes de disposition rend souvent l'interface utilisateur coupée ou trop grande.

Avec @capgo/tailwind-capacitor, vous pouvez exprimer la même mise en forme avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.

Fixez Capacitor iOS `contentInset` à `never` context : Page/zone : Page de produits de mise à jour en direct. Rôle : Étiquette de l'interface utilisateur courte ou élément de navigation. Clé de message `live_update_dynamic_label_to` (Étiquette de mise à jour dynamique pour).

premier capacitor.config.tsDans contentInsetMode: 'css', préférez l'inset natif désactivé et laissez CSS (ou la navigation native)

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) le padding est une cause fréquente de double espace.

Trouvez l'élément qui déborde vraiment

Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou une large min-width.

Dans l'Inspecteur Web de Safari, exécutez :

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Avec Tailwind, remplacez w-screen par w-full lorsque possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screen, de la duplication de la marge de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de la zone de vue elle-même.

Conclusion

Capacitor est une excellente option pour créer 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.

And avec l'ajout de CapgoEn effet, il est encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et correctifs de bogues.

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

Continuez à partir de Créer des applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor.

Si vous utilisez Créer des applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor. pour planifier le travail de plugin natif, connectez-l’avec Capgo Répertoire de plugins pour le flux de travail du produit dans Capgo Répertoire de plugins, Capacitor Plugins par Capgo pour les détails d'implémentation dans Capacitor Plugins par Capgo, Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins, Alternatives de Plugins Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugins Entreprise Ionic, et Capgo Bâtisseurs Natives pour le flux de travail du produit dans Capgo Bâtisseurs Natives.