Dans ce tutoriel, nous allons commencer avec une nouvelle SvelteKit app et passer à un développement mobile natif en utilisant Capacitor. Vous pouvez également intégrer Konsta UI pour une interface utilisateur mobile améliorée avec Tailwind CSS.
Capacitor vous permet de convertir facilement votre application web SvelteKit en une application mobile native sans nécessiter de modifications importantes ou d'apprendre une nouvelle compétence comme React Native.
Suivez ce guide étape par étape pour transformer votre application SvelteKit en une application mobile en utilisant Capacitor et, si vous le souhaitez, améliorez votre interface utilisateur mobile avec Konsta UI.
À propos de Capacitor
CapacitorJS est un jeu de hasard ! Il peut être intégré facilement dans tout projet web, en enveloppant votre application dans une vue web native et en générant des projets Xcode et Android Studio natifs pour vous. Ses plugins vous donnent accès aux fonctionnalités de l'appareil natif comme la caméra via un pont JavaScript.
Capacitor vous permet de créer une fantastique application mobile native sans aucune configuration compliquée ou courbe d'apprentissage raide. Sa maigre API et sa fonctionnalité épurée rendent facile l'intégration dans votre projet. Vous serez impressionné par la simplicité de réaliser une application native complète avec Capacitor !
Préparation de votre application SvelteKit
Pour créer une nouvelle application SvelteKit, exécutez la commande suivante:
npm create svelte@latest my-app
cd my-app
npm install
npm run buildAfter exécuter la commande, vous devriez voir un nouveau dossier à la racine de votre projet. build Ce dossier sera utilisé par __CAPGO_KEEP_0__ plus tard, mais pour l'instant, nous devons le configurer correctement. dist __CAPGO_KEEP_0__ à Ajouter à Votre Application SvelteKit
This folder will be used by Capacitor later, but for now, we need to set it up correctly.
Adding Capacitor to Your SvelteKit App
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sync comme dépendance de développement et configurez-le dans votre 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, installez le package de base et les packages pertinents pour les plateformes iOS et Android. Capacitor CLI __CAPGO_KEEP_0__
__CAPGO_KEEP_1__
Capacitor
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your SvelteKit 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 voir de nouveaux ios et android dossiers dans votre projet SvelteKit.
Ces sont des projets natifs réels !
Pour accéder au projet Android plus tard, 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 de votre projet, qui contient quelques paramètres de base 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, il est incorrect.
Pour corriger cela, ouvrez le capacitor.config.ts fichier et mettez à jour le webDir:
import { CapacitorConfig } from '@capacitor/cli'
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'build',
}
export default configpuisque nous avons mis à jour nos paramètres de base Capacitor, passons à la modification de notre projet Sveltekit en application statique en téléchargeant le bon package d'adaptateur statique :
npm i -D @sveltejs/adapter-staticAprès l'installation du package, nous devrons modifier le svelte.config.js fichier depuis l'adaptateur automatique vers statique :
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
}
export default configAvec le svelte.config.js mis à jour, nous devrons ajouter un prérender option en créant un +layout.js page pour src/routes et ajoutez simplement l'export suivant à +layout.js:
export const prerender = trueAprès avoir ajouté et mis à jour la +layout.js page, nous devrons ajouter nos plateformes mobiles, reconstruire notre projet pour créer build dossier
Vous pouvez le faire en exécutant les commandes suivantes :
npm run build
npx cap syncLa première commande npm run build construira votre projet SvelteKit et copiera la mise en page statique, tandis que la deuxième commande npx cap sync syncra toutes les web code dans les bons endroits des plateformes natives afin qu'elles puissent être affichées dans une application.
De plus, la commande de synchronisation pourrait mettre à jour les plateformes natives et installer des plugins, donc lorsque vous installez de nouveaux Capacitor plugins, il est temps de relancer npx cap sync Sans vous en rendre compte, vous avez maintenant complété le processus, alors voyons l'application sur un appareil !
Construire et déployer des applications natives
protectedTokens
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 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à effectué cela, Xcode vous guide à travers le processus (mais encore une fois, vous devez être inscrit au programme développeur). 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 SvelteKit sur un appareil mobile. Voici un exemple :
But attendez, il existe également une méthode plus rapide pour effectuer cela pendant le développement…
Capacitor Live Reload
À ce stade, vous êtes probablement habitué à avoir un rechargement chaud avec tous les frameworks modernes, et la bonne nouvelle est que vous pouvez avoir la même fonctionnalité sur un appareil mobile avec un minimum d'effort !
Activer l'accès à votre application hébergée localement avec rechargement live sur votre réseau en ayant l'application Capacitor charger le contenu à partir de l'URL spécifique.
La première étape consiste à déterminer votre adresse IP locale. Si vous utilisez un Mac, vous pouvez trouver cela en exécutant la commande suivante dans le terminal :
ipconfig getifaddr en0On Windows, exécutez :
ipconfigEnsuite, recherchez l'adresse IPv4.
On peut instruire Capacitor à charger l'application directement depuis le serveur en ajoutant une autre entrée à notre capacitor.config.ts fichier :
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.x.xx:3000',
cleartext: true
}
};
export default config;Assurez-vous d'utiliser l'adresse IP et le port corrects, comme montré dans l'exemple ci-dessus.
Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :
npx cap copyLa copy commande est similaire à sync, mais elle ne copiera que les modifications apportées au dossier web et à la configuration, sans mettre à jour le projet natif.
Vous pouvez maintenant déployer votre application une fois de plus à l'aide d'Android Studio ou Xcode. Après cela, si vous modifiez quelque chose dans votre application Svelte, l'application se rechargera automatiquement And montrez les changements!
Prenez en compte Cela signifie que si vous installez de nouveaux plugins comme la caméra, il est toujours nécessaire de reconstruire votre projet natif. C'est parce que les fichiers natifs sont modifiés, et cela ne peut pas être fait en temps réel.
Notez que vous devez utiliser l'IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port par défaut SvelteKit pour des fins de démonstration.
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 simple en exécutant :
npm i @capacitor/shareCe plugin n'a rien de spécial. Le plugin de partagemais il ouvre le dialogue de partage natif ! share() Pour cela, nous n'avons désormais besoin que d'importer le package et d'appeler la fonction de notre application, alors changez donc le src/routes/index.svelte
<script>
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>
<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>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 syncAprès avoir cliqué sur le bouton, vous pouvez assister à la belle boîte de dialogue de partage native en action !
Ajouter Konsta UI
Pour utiliser Konsta UI dans votre application Nuxt 3, vous devez avoir tailwind déjà installé et pour installer le package :
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: [
'./src/routes/**/*.{svelte}',
'./src/components/**/*.{svelte}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig permettra d'étendre 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 Application afin de pouvoir définir certaines paramètres globaux (comme par exemple theme).
Nous devons envelopper l'application entière avec App dans la src/routes/+layout.svelte:
<script>
import { App } from 'konsta/svelte';
</script>
<App theme="ios">
<slot />
</App>Page d'exemple
Maintenant que tout est configuré, nous pouvons utiliser les composants Konsta UI Svelte dans nos pages SvelteKit.
Par exemple, ouvrez src/routes/index.svelte et changez-le en
<script>
import {
Page,
Navbar,
Block,
Button,
List,
ListItem,
Link,
BlockTitle,
} from 'konsta/svelte';
</script>
<Page>
<Navbar title="My App" />
<Block strong>
<p>
Here is your SvelteKit & 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>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, construite avec SvelteKit et Capacitor !
Vous devriez voir la page suivante comme résultat :
Conclusion
Capacitor est une excellente option pour construire des applications natives sur la base 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 CapgoC'est même 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 corrections de bogues.
Si vous souhaitez apprendre à ajouter Capgo à votre application SvelteKit, consultez l'article suivant :
Découvrez comment Capgo peut vous aider à créer des applications meilleures et plus rapides. Inscrivez-vous à un compte gratuit aujourd'hui.
Continuez de la section précédente : Construction d'applications mobiles avec SvelteKit et Capacitor
Si vous utilisez Construction d'applications mobiles avec SvelteKit et Capacitor pour planifier l'automatisation de CI/CD, connectez-le avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour le détail d'implémentation dans Intégration CI/CD, et GitHub Actions d'intégration pour le détail d'implémentation dans GitHub Actions d'intégration.
