In ce tutoriel, nous allons commencer par créer une nouvelle application web en utilisant Quasar. Plus tard, nous apprendrons à la transformer en application mobile en utilisant Capacitor. Si vous souhaitez rendre votre application plus attractive sur mobile.
Avec Capacitor, vous pouvez transformer 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 entrer dans le domaine des applications mobiles natives. De plus, vous utiliserez Capacitor Capgo À propos de __CAPGO_KEEP_0__
About Capacitor
Avec __CAPGO_KEEP_0__, vous obtenez une application mobile native fantastique sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa structure __CAPGO_KEEP_1__ 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 fonctionnelle avec __CAPGO_KEEP_2__!
With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!
Pour créer une nouvelle application Quasar, exécutez la commande suivante :
Quasar
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 empaqueter 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 de l'interface utilisateur 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 le fichier et mettez à jour webDir:
{
"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 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 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 encore.
Sans vous en rendre compte, vous êtes maintenant effectivement terminé, alors voyons 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 le magasin d'applications, 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 natives :
npx cap open ios
npx cap open androidUne fois que vous avez configuré vos projets natives, déployer votre application sur un appareil connecté est facile. Dans Android Studio, il suffit d'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 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 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 une méthode plus rapide pour 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 commode de corriger rapidement des bogues ou de faire des mises à jour mineures dans 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 s'inscrire et d'obtenir votre clé de API pour télécharger votre première version ! Commencez par s'inscrire à un compte de 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.
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 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 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 des 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/shareRien de spécial ne se passe 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é plus tôt, 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 syncAprès 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 Capgo de navigation et de 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.
UI natif avec Capgo de navigation et de transitions natives
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 native, 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 à la manière d'Ionic et un retour arrière par swipe sur l'éditeur sur iOS, sans adopter l’UI d'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 tab de verre liquide (iOS utilise la mise en page système ; Android utilise un fond de fenêtre 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 les 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') 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 pour les alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : Copie de marketing de comparaison/migration d'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 pour 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 pour Capwesome). | Page/zone : Page de services de conseil. Rôle : Sous-titre ou tagline de section. 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 des services de conseil). | Page/zone : Copie de marketing de comparaison/migration d'Appflow. Rôle : Étiquette UI courte ou élément de navigation. 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).
avant de naviguer. N'ajoutez pas de titres ou de pieds de page web en doublon lorsque la navigation native possède ces surfaces. Using @capgo/capacitor-native-navigation Utiliser @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation 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 ne résout généralement pas 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 enveloppe 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 .app-shellLe doublonnement de la mise en forme de la zone de sécurité dans les en-têtes, les modales et les enveloppes de mise en page rend souvent 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 nativement 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 réel qui déborde
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, une duplication de la marge de sécurité de l'aire sûre, ou d'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 de maintenir une interface utilisateur cohérente.
Et avec l'ajout de CapgoEn outre, 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 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, Ajouter ou Mettre à jour les plugins pour les détails d'implémentation dans Ajouter ou Mettre à jour les 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.
