In ce tutoriel, nous allons commencer par créer une nouvelle application web en utilisant Quasar. Plus tard, nous apprendrons à la transformer en une application mobile en utilisant Capacitor. Si vous souhaitez rendre votre application plus attractive sur mobile.
Avec Capacitor, vous pouvez convertir votre application web Quasar en une 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 live à 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 JS.
Avec Capacitor, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa structure API et sa fonctionnalité épurée rendent facilement l'intégration dans votre projet. Croyez-moi, vous serez impressionné par la facilité avec laquelle vous pouvez obtenir une application 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
Choisissez l'option « App 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 generate, vous devriez voir un dossier frais à la racine de votre projet. dist Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement.
Intégration de Capacitor à votre application Quasar
Adding Capacitor to Your Quasar App
To 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 une dépendance de développement, et puis le configurer 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 pouvoir observer de nouveaux ios et context : Page/zone : Site de marketing Capgo. Rôle : Étiquette de navigation ou élément UI court. Vu dans : page trust.astro. Clé de message `et` (Et). 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 la webDirqui doit pointer vers le résultat de votre commande de build. Actuellement, elle est inexacte.
Pour rectifier cela, ouvrez le capacitor.config.json modifier et mettre à jour répertoire web:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Vous pouvez essayer en exécutant les commandes suivantes :
npm run generate
npx cap syncLa première commande npm run generate construira simplement votre projet Quasar et copiera la construction statique, tandis que la deuxième commande npx cap sync syncra les web code dans les bons endroits des plateformes natives afin qu'elles soient affichées dans une application.
De plus, la commande sync peut mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez un nouveau Capacitor plugins il est temps de relancer npx cap sync sans même s'en rendre compte, vous êtes maintenant effectivement terminé, alors voyons l'application sur un appareil !
sans même s'en rendre compte, vous êtes maintenant effectivement terminé, alors voyons l'application sur un appareil !
Créez et déployez 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 les applications iOS et au Google Play Console pour les applications Android.
Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le Capacitor CLI pour ouvrir facilement les projets de développement natif :
npx cap open ios
npx cap open androidUne fois que vous avez configuré vos projets de développement natif, 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à fait cela, 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 la touche de lecture 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 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 la mise en œuvre et l'intégration 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:
Le moment est venu de vous inscrire et d'obtenir votre clé API pour télécharger votre première version ! Commencez par Inscrivez-vous à 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 Pour installer le plugin dans votre application Capacitor.
Et ajoutez ensuite à votre application ce code en remplacement de CodePush :
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Cela informera le plugin natif que l'installation a réussi.
Se connecter à Capgo CLOUD:
Tout d'abord, utilisez le all apikey présent dans votre compte pour vous connecter avec le CLI :
`npx @capgo/cli@latest login YOU_KEY`Ajoutez votre première application:
Commencez par créer une application dans Capgo Cloud avec le CLI.
npx @capgo/cli@latest app addCette commande utilisera toutes les variables définies dans le fichier de configuration Capacitor pour créer l'application.
Téléchargez 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 dans votre fichier package.json.
Vérifiez dans Capgo si la construction est présente.
Vous pouvez même le tester avec mon application mobile 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.
Recevez une mise à jour en direct:
Pour que votre application reçoive une mise à jour en direct de Deploy, vous devrez exécuter l'application sur un appareil ou un émulateur. La façon la plus simple de procéder est de lancer votre application locale dans un émulateur ou un appareil connecté à votre ordinateur en utilisant la commande suivante.
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 des mises à jour en direct. Documentation des mises à jour en direct.
Utilisation des plugins Capacitor
Étudions 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/shareRien de particulier n'est fait avec le plugin de partage, mais il montre 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 le share() pages/index.vue à ceci : 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 :
<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>Commande : __CAPGO_KEEP_0__
npx cap syncAfter avoir cliqué sur le bouton, vous pouvez voir le dialogue de partage natif en action !
Ensuite, vous pouvez rendre l'application plus native sur iOS et Android avec les Capgo navigation et transitions, et résoudre les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.
UI natif avec Capgo Navigation et Transitions Native
J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais intégrer Ionic avec Quasar est hacky et rarement valable lorsque vous avez déjà Tailwind CSS.
Pour un sentiment mobile natif 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 natif, barre de Liquid Glass sur iOS, et un style de barre de tab flou sur Android. Votre routeur Quasar conserve l'état de la route ; le plugin possède la barre de chrome native.
- @capgo/capacitor-transitions — transitions de page à l'Ionic et un retour arrière par swipe sur l'edge sur iOS dans la couche WebView, sans adopter l'UI Ionic.
Installez les deux :
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncConfigurez 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 arrière-plan 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 cap-contentet appelez setDirection('forward') ou setDirection('back') Avant de naviguer. N'ajoutez pas de titres ou de pieds de page web lorsque la navigation native en possède la maîtrise.
Consultez les guides complets : Utilisez @capgo/capacitor-native-navigation et En utilisant @capgo/capacitor-transitions.
Aires de sécurité avec Tailwind
Pour les aires de sécurité des appareils dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié comme) tailwind-capacitor sur npm. Il fournit safe-areas des utilitaires et d'autres plugins de Tailwind compatibles avec Capacitor:
npm add -D tailwind-capacitorDans src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utilisez des utilitaires comme pt-safe, pb-safe, et px-safe au lieu de les répandre env(safe-area-inset-*) manuellement. Le projet est actuellement développé — si quelque chose manque pour votre configuration Quasar, ouvrir une PR sur 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 la balise de vueport seule n'a généralement pas résolu le problème. Travaillez à travers ces vérifications dans l'ordre.
Assurez-vous que la balise meta de vueport est appliquée correctement
In index.html (ou votre modèle HTML Quasar), définissez la balise meta de vueport dans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gérer la zone de sécurité iOS à partir d'un seul wrapper racine
Créez une coquille d'application unique et appliquez la mise en forme 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 de .app-shellLe recouvrement de la zone de sécurité dupliqué dans les en-têtes, les modaux et les enveloppes de mise en page peut rendre l'interface utilisateur coupée ou trop grande.
Avec @capgo/tailwind-capacitor, vous pouvez exprimer la même marge avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.
Définissez Capacitor iOS contentInset sur never premier
Dans capacitor.config.ts, préférez l'insérer natif désactivé et laissez CSS (ou la navigation native) contentInsetMode: 'css') prendre en charge la zone de sécurité :
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mélanger les marges automatiques de contenu de Capacitor avec CSS env(safe-area-inset-*) est une cause courante de double espacement.
Trouvez l'élément débordant réel
The principal coupable est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou un grand min-width.
In l'inspecteur Web 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 avec w-full lorsque possible. Beaucoup d'issues de débordement horizontal proviennent de 100vw / w-screen, une duplication de la marge de sécurité de l'aire sûre, ou un conteneur de largeur fixe — et non de la balise meta de la vue portefeuille 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 maintenir une interface utilisateur cohérente.
Et avec l'ajout de Capgo, il est même 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 la création d'applications mobiles avec des mises à jour en temps réel, Quasar et Capacitor.
Si vous utilisez La création d'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 La mise à jour ou la mise à jour de plugins pour les détails d'implémentation dans La mise à jour ou la mise à jour de plugins, Alternatives d'extension d'entreprise Ionic pour le flux de travail du produit dans les alternatives d'extension d'entreprise Ionic, et Capgo Bâtiments natifs pour le flux de travail du produit dans Capgo Bâtiments natifs.
