Créer des applications mobiles avec SvelteKit et Capacitor

Dans ce tutoriel, nous allons commencer par une nouvelle application SvelteKit et passer à la développement mobile natif en utilisant Capacitor. Vous pouvez également intégrer Konsta UI pour une interface utilisateur mobile améliorée Tailwind CSS.

Capacitor vous permet de convertir facilement votre application web SvelteKit en une application mobile native sans nécessité 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 application mobile en utilisant Capacitor et, si souhaité, améliorez votre interface utilisateur mobile avec Konsta UI.

À propos de Capacitor

CapacitorJS est un changement de jeu ! 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 fournissent accès aux fonctionnalités de dispositif natif comme la caméra via un pont JavaScript.

Capacitor vous permet de créer une application mobile native fantastique sans aucune mise en place compliquée ou courbe d'apprentissage raide. Sa API et sa fonctionnalité épurée rendent facile son intégration dans votre projet. Vous serez impressionné par la simplicité avec laquelle vous pouvez atteindre une application native fonctionnelle 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 build

Après avoir exécuté la build commande, vous devriez voir un nouveau dist dossier à 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 SvelteKit

Pour emballer toute application web dans un conteneur mobile natif, il faut suivre quelques étapes initiales. Ensuite, il suffit de lancer une seule commande. sync Tout d'abord, installez le

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Ensuite, installez le package de base et les packages pertinents pour les plateformes iOS et Android.

Enfin, ajoutez les plateformes, et __CAPGO_KEEP_0__ créera des dossiers pour chaque plateforme à la racine de votre projet :

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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

ios et android Vous pouvez maintenant continuer avec la configuration de votre projet. dossiers de votre projet SvelteKit.

Ces sont des projets natives 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 fichier capacitor.config.ts qui contient certaines configurations de base Capacitor utilisées lors de la synchronisation. La seule chose dont vous devez vous soucier est 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 config

Maintenant que nous avons mis à jour nos paramètres Capacitor, passons à la mise à jour de notre projet Sveltekit en application statique en téléchargeant le bon package d'adaptateur statique :

npm i -D @sveltejs/adapter-static

Une fois le package installé, nous devrons modifier svelte.config.js fichier de l'adaptateur automatique en 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 config

Avec le svelte.config.js mis à jour, nous devrons ajouter une prerender option en créant un +layout.js aller à la page src/routes et ajoutez simplement l'export suivant à +layout.js:

export const prerender = true

Après avoir ajouté et mis à jour le +layout.js page, nous devrons ajouter nos plateformes mobiles, reconstruire notre projet pour créer le dossier build Vous pouvez le faire en exécutant les commandes suivantes :

La première commande

npm run build
npx cap sync

The second command npm run build construira votre projet SvelteKit et copiera la mise en œuvre 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 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 même s'en rendre compte, vous avez maintenant terminé le processus, 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 installed, and for Android apps, you need to have installé. De plus, si vous prévoyez distribuer votre application sur l'App Store, 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 android

Une 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 :

android-studio-run

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 « Exécuter » pour exécuter l'application sur votre appareil connecté, que vous pouvez sélectionner en haut. Voici un exemple :

xcode-run

Félicitations ! Vous avez réussi à déployer votre application web SvelteKit sur un appareil mobile. Voici un exemple :

Mais attendez, il y a aussi un moyen plus rapide de faire cela pendant le développement…

Capacitor Live Reload

À ce stade, vous êtes probablement habitué à avoir la mise à jour en temps réel 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 en direct 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 en0

Sur Windows, exécutez :

ipconfig

Regardez ensuite l'adresse IPv4.

Nous pouvons instruire Capacitor pour 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 correctscomme montré dans l'exemple ci-dessus.

Maintenant, nous pouvons appliquer ces modifications en les copiant vers notre projet natif :

npx cap copy

La 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 et affichera les modifications !

Tenez compte que si vous installez de nouveaux plugins tels que 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'adresse IP et le port corrects dans votre configuration. Le bloc code ci-dessus montre le port par défaut de SvelteKit à des fins de démonstration.

En utilisant les Capacitor plugins

Voici comment utiliser un Capacitor plugin en action, que nous avons mentionné quelques fois avant. Pour ce faire, nous pouvons installer un plugin simple en exécutant :

npm i @capacitor/share

Il n'y a rien de fancy dans le plugin de partage, mais il affiche le dialogue de partage natif ! Pour cela, nous n'avons besoin désormais que d'importer le package et d'appeler la share() fonction de notre application, alors changeons donc le src/routes/index.svelte en cela :

<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é 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 :

npx cap sync

Après avoir cliqué sur le bouton, vous pouvez assister à la belle dialogue de partage natif en action !

Ajouter Konsta UI

Pour utiliser Konsta UI dans votre application Nuxt 3, vous devez avoir tailwind est déjà installé et pour installer le package :

npm i konsta

De 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 ceci étendra la configuration par défaut (ou votre configuration personnalisée) de Tailwind CSS avec quelques variantes supplémentaires et des outils d'aide requis 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'ensemble de l'application avec src/routes/+layout.svelte:

<script>
  import { App } from 'konsta/svelte';
</script>

<App theme="ios">
  <slot />
</App>

dans le

Page d'exemple

Par exemple, ouvrez et modifiez-le en suivant : src/routes/index.svelte et changez-le en suivant :

<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 désynchronisé 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 un aspect natif quelque peu, 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 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 corrections de bogues.

Si vous souhaitez apprendre à ajouter Capgo à votre application SvelteKit, consultez l'article suivant :

Apprenez comment Capgo peut vous aider à construire des applications meilleures plus rapidement, Inscrivez-vous pour un compte gratuit aujourd'hui.