Dans ce tutoriel, nous allons commencer par créer une nouvelle application web en utilisant Quasar. Plus tard, nous apprendrons à la convertir en 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 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.
This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo to send live updates to your app in seconds.
À propos de Capacitor
CapacitorJS est vraiment un jeu de changer ! Vous pouvez incorporer facilement le __CAPGO_KEEP_0__ dans tout projet web, et il vous enveloppera votre application dans une vue web native, générant les projets Xcode et Android Studio natifs 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 structure API et sa fonctionnalité épurée rendent facile l'intégration dans votre projet. Faites-moi confiance, 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
Sélectionnez l'option « Application avec Quasar CLI » puis « Quasar v2 ».
Pour créer une application mobile native, nous avons besoin d'un export de notre projet. Par conséquent, incluez un script simple dans votre package.json que vous pouvez utiliser 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 dist au niveau de 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 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 sync commande.
Tout d'abord, nous pouvons installer le Capacitor CLI comme une dépendance de développement, puis configurez-le 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'archive.
Ensuite, nous devons installer le package de base et les packages pertinents pour les plateformes iOS et Android.
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 dossiers "ios" et dossiers "android" dans votre projet Quasar. Ce sont des projets natifs réels ! Pour accéder au projet Android ultérieurement, vous devez installer
Android Studio
android ios. Pour iOS, vous avez besoin d'un Mac et devriez installer Xcode.
En outre, vous devriez trouver un fichier capacitor.config.ts 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 fichier capacitor.config.json 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 mise en page statique, tandis que la deuxième commande npx cap sync syncraser 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 sync pourrait 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 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 installé Android Studio est installé. De plus, si vous prévoyez de distribuer votre application sur une boutique d'applications, 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 androidUne 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à 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 une méthode plus rapide pour procéder à 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 commode de corriger rapidement des bogues ou de faire des mises à jour mineures d'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. Cette guide étape par étape vous guidera dans l'intégration et l'implémentation de Capgo Live Update, 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é 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:
Tout d'abord, 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 test mobile.
Fixer le canal par défaut:
Après avoir envoyé votre application à Capgo, vous devez fixer votre canal par défaut pour que les applications puissent 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()Puis faites 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 depuis 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 la documentation complète sur les Mises à jour en direct.
Utiliser les plugins de Capacitor
Prenez un moment pour voir comment utiliser un Capacitor plugin 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/shareRien de spécial ne se passe avec le Partager plugin, 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 ce faire, 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 voir le 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é Optionnellement Ajouter Konsta UI dans votre application Quasar, vous devez d'abord avoir installé tailwind et pour installer le paquet :
npm i konstaDe 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 ceci étendra la configuration par défaut (ou votre configuration personnalisée) Tailwind CSS avec quelques variantes et utilitaires supplémentaires nécessaires pour Konsta UI.
Maintenant, nous devons configurer le Composant principal App theme).
afin de pouvoir définir certaines paramètres globaux (comme App Nous devons envelopper l'application entière avec pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>dans le
Page d'exemple
Maintenant que tout est configuré, nous pouvons utiliser les composants Vue de Konsta UI dans nos pages Quasar. 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 synchronisation après l'installation de tous les composants nécessaires, essayez de redémarrer tout. Une fois que vous avez fait cela, vous devriez voir une application mobile avec une apparence native quelque peu, construite avec Quasar et Capacitor !
Conclusion
Capacitor est une excellente option pour la construction d'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 Capgo, il est encore plus facile d'ajouter des mises à jour en direct à votre application, vous assurant que vos utilisateurs ont toujours accès aux dernières fonctionnalités et aux correctifs de bogues.
Si vous souhaitez apprendre à ajouter Capgo à votre application Next.js, consultez l'article suivant :
