Dans ce tutoriel, nous allons commencer par créer une nouvelle application web à l'aide de Quasar. Plus tard, nous apprendrons à la convertir 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 To envoyer des mises à jour en direct à votre application en quelques secondes.
À propos de Capacitor
CapacitorJS est vraiment un jeu de changer ! Vous pouvez l'intégrer facilement dans tout projet web, et il enveloppera votre application dans une vue web native, générant les projets Xcode et Android Studio natifs 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 mise en place 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 émerveillé par la facilité avec laquelle vous pouvez obtenir 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, incluez un script simple dans notre package.json que vous pouvez utiliser pour créer et copier le projet Quasar :
{
"scripts": {
// ...
"build": "quasar build"
}
}Après exécution de la commande generate, vous devriez pouvoir repérer 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.
Ajouter Capacitor à votre application Quasar
Adding Capacitor to Your Quasar App
commande. sync Tout d'abord, nous pouvons installer le
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
that can be utilized to build and copy the Quasar project: is not translated because it is a protected token
Enfin, 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 android dossiers dans votre projet Quasar.
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 configurations fondamentales Capacitor utilisées 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 fichier et mettez à jour le 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 build statique, tandis que la deuxième commande npx cap sync syncrera 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 plugin npx cap sync il est temps de relancer
à nouveau.
Sans vous en rendre compte, vous êtes maintenant effectivement terminé, alors voyons donc l'application sur un appareil !
Développer 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
Si vous êtes nouveau dans le développement mobile natif, vous pouvez utiliser le Capacitor CLI pour ouvrir facilement les projets natifs :
npx cap open ios
npx cap open androidUne fois que vous avez configuré vos projets natifs, la mise en ligne de 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 fait cela avant, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit dans le programme de développeur). 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 :
Félicitations ! Vous avez réussi à déployer votre application web Quasar sur un appareil mobile. Voici un exemple :
Mais attendez, il existe une façon plus rapide de faire cela pendant le développement…
Capgo Mise à jour en direct
Capgo Mise à jour en direct est un service qui permet aux développeurs de déployer des mises à jour de 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.
Intégrer 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 dans l'intégration et l'implémentation de Capgo Live Update, vous permettant de livrer des mises à jour sans heurt.
Inscrivez-vous et accédez au tableau de bord Capgo:
Le moment est venu 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 Pour installer le plug-in dans votre application Capacitor.
Et ajoutez ensuite à votre application ce code en remplacement de CodePush :
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Cela indiquera au plug-in natif que l'installation a réussi.
Se connecter à Capgo CLOUD:
Premièrement, utilisez l' 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 la version sera celui de votre fichier package.json.
Vérifiez dans Capgo si la construction est présente.
Vous pouvez même la tester avec mon application de sandbox mobile.
Faire le canal par défaut:
Après avoir envoyé votre application à Capgo, vous devez faire votre canal par défaut pour que les applications reçoivent 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.
Recevoir 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 faire cela est simplement d'utiliser la commande suivante pour lancer votre application locale sur 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 le document complet Mises à jour en direct.
Utiliser les plugins Capacitor
Prenez un regard sur la façon d'utiliser un Capacitor plugin 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 n'est à propos du plugin de partage, mais il montre quand même le dialogue de partage natif ! Pour cela, nous n'avons maintenant besoin que d'importer le package et d'appeler la fonction correspondante de notre application, alors changeons donc le share() pages/index.vue à cela : 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>Après avoir cliqué sur le bouton, vous pouvez assister à la belle dialogue de partage natif en action !
npx cap syncOptionnellement Ajouter Konsta UI
Pour utiliser Konsta UI dans votre application Quasar, vous devez avoir
tailwind déjà installé Optionally Adding Konsta UI To use Konsta UI in your Quasar app, you need to have tailwind already install And pour installer le package :
npm i konstaDe plus, vous devez modifier votre fichier : 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 ceci étendra la configuration par défaut (ou votre configuration personnalisée) de Tailwind CSS avec quelques variantes et utilitaires d'aide requis pour Konsta UI.
Maintenant, nous devons configurer la page principale Composant d'application afin de pouvoir définir certains paramètres mondiaux (comme theme).
Nous devons envelopper l'application entière avec App dans la pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>Page d'exemple
Maintenant que tout est configuré, nous pouvons utiliser les composants Vue de Konsta UI dans nos pages Quasar.
Par exemple, ouvrez pages/index.vue et changez-le en fonction du suivant :
<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 quelque peu, construite avec Quasar et Capacitor!
Conclusion
Capacitor est une excellente option pour créer des applications natives en fonction d'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 Capgo, il est encore plus facile d'ajouter des mises à jour en direct à votre application, 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 :
Continuez de la section Créer des applications mobiles avec des mises à jour en direct, Quasar et Capacitor.
Si vous utilisez Créer des applications mobiles avec des mises à jour en direct, Quasar et Capacitor. pour planifier le travail de plugin natif, connectez-le avec Répertoire des plugins Capgo pour le flux de travail du produit dans le répertoire des plugins Capgo, Plugins Capacitor par Capgo pour le détail d'implémentation dans les plugins Capacitor par Capgo, Ajout ou mise à jour des plugins pour le détail d'implémentation dans l'ajout ou la mise à jour des plugins, Alternatives de plugins Ionic Enterprise pour le flux de travail du produit dans les alternatives de plugins Ionic Enterprise, et Capgo Builds natifs pour le flux de travail du produit dans les builds natifs Capgo.
