Sviluppo di App Mobili con SvelteKit e Capacitor

In questo tutorial, inizieremo con una nuova SvelteKit app e passeremo alla sviluppo di app mobili native utilizzando Capacitor. Opzionalmente, puoi anche integrare Konsta UI per un'interfaccia utente mobile Tailwind CSS migliorata.

Capacitor ti consente di convertire facilmente la tua applicazione web SvelteKit in un'app mobile nativa senza dover effettuare modifiche significative o imparare una nuova skill come React Native.

Segui questo passo dopo passo per trasformare il tuo app SvelteKit in un'app mobile utilizzando Capacitor e, se desiderato, migliorare l'interfaccia utente mobile con Konsta UI.

Sui vantaggi di Capacitor

CapacitorJS è un vero cambiamento! Può essere integrato facilmente in qualsiasi progetto web, avvolgendo l'applicazione in una view web nativa e generando progetti Xcode e Android Studio nativi per te. I suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JavaScript.

Capacitor ti consente di creare un'app mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API sottile e la sua funzionalità streamlinata rendono facile l'integrazione nel tuo progetto. Sarai sorpreso dalla semplicità con cui puoi ottenere un'app nativa completamente funzionale con Capacitor!

Preparazione dell'app SvelteKit

Per creare una nuova app SvelteKit, esegui il seguente comando:

npm create svelte@latest my-app
cd my-app
npm install
npm run build

Dopo l'esecuzione del build comando, dovresti vedere una nuova dist cartella alla radice del tuo progetto.

Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.

Aggiunta di Capacitor all'app SvelteKit

Per pacchettare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. Dopo di che, è semplice come eseguire un comando singolo sync command.

Prima, installa il Capacitor CLI come dipendenza di sviluppo e configuralo nel tuo progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.

Successivamente, installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

Infine, aggiungi le piattaforme, e Capacitor creerà cartelle per ogni piattaforma nella radice del tuo progetto:

# 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

In questo punto, dovresti vedere nuove ios e android cartelle nel tuo progetto SvelteKit.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare Android Studio. Per iOS, è necessario un Mac e dovrebbe installare Xcode.

Inoltre, dovrebbe trovare un file capacitor.config.ts nel suo progetto, che contiene alcune impostazioni di base Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovete prestare attenzione è il webDir, che deve puntare al risultato del vostro comando di build. Attualmente, è sbagliato.

Per risolvere questo, aprire il file capacitor.config.ts e aggiornare il directoryWeb:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

Ora che abbiamo aggiornato le nostre impostazioni di Capacitor, vediamo di cambiare il nostro progetto Sveltekit in un'applicazione statica scaricando il pacchetto di adattatore statico appropriato:

npm i -D @sveltejs/adapter-static

Dopo l'installazione del pacchetto, dovremo modificare svelte.config.js file dall'adattatore auto a statico:

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

Con il svelte.config.js aggiornato, dovremo aggiungere un'opzione di prerender creando una pagina +layout.js per src/route e basta aggiungere l'esportazione seguente a Dopo aver aggiunto e aggiornato il:

export const prerender = true

layout.js pagina, avremo bisogno di aggiungere le nostre piattaforme mobili, ricostruire il nostro progetto per creare il build cartella Puoi farlo eseguendo i seguenti comandi:

Il primo comando

npm run build
npx cap sync

costruirà il tuo progetto SvelteKit e copierà la costruzione statica, mentre il secondo comando npm run build sincronizzerà tutte le web __CAPGO_KEEP_0__ nei posti giusti delle piattaforme native affinché possano essere visualizzate in un'app. npx cap sync You can do it by running the following commands: The first command will build your SvelteKit project and copy the static build, while the second command will sync all the web code into the right places of the native platforms so they can be displayed in an app.

Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare i plugin, quindi quando installi nuovi Capacitorplugin npx cap sync , è il momento di eseguire

ancora.

Senza rendersene conto, hai ora completato il processo, quindi vediamo l'app sul dispositivo!

Sviluppa e distribuisci app native Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di avere Android Studio

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

Una volta configurati i tuoi progetti nativi, il deployment dell'applicazione su un dispositivo connesso è facile. In Android Studio, basta attendere che tutto sia pronto e puoi deployare l'applicazione su un dispositivo connesso senza modificare alcuna impostazione. Ecco un esempio:

In Xcode, devi configurare il tuo account di firma per poter deployare l'applicazione su un dispositivo reale al posto del simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto al Programma per sviluppatori). Dopo di che, puoi semplicemente premere play per eseguire l'applicazione sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai con successo deployato la tua applicazione web SvelteKit su un dispositivo mobile. Ecco un esempio:

Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo…

Capacitor Live Reload

Da adesso, sei probabilmente abituato a avere il hot reload con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!

Abilita l'accesso alla tua applicazione ospitata localmente con live reload On il tuo rete Per avere il Capacitor caricare il contenuto dalla specifica URL.

Il primo passo è capire l'indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo eseguendo il seguente comando nel terminale:

ipconfig getifaddr en0

On Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Posiamo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce nel nostro capacitor.config.ts file:

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;

Sicuro di utilizzare l'indirizzo IP e la porta corretti, come mostrato nell'esempio sopra.

Ora, possiamo applicare questi cambiamenti copiandoli nel nostro progetto nativo:

npx cap copy

Le copy il comando è simile a syncma lo utilizzerai solo copierai solo le modifiche apportate al cartello web e alla configurazione, senza aggiornare il progetto nativo.

Ora puoi distribuire nuovamente il tuo app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nel tuo app Svelte, l'app si ricaricherà automaticamente e mostrerà le modifiche!

Tieni presente che se installi nuovi plugin come la fotocamera, è ancora necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati e non possono essere modificati in tempo reale.

Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il porto predefinito di SvelteKit a scopo dimostrativo.

Utilizzo dei plugin Capacitor

Ecco un esempio di come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato prima. Per farlo, possiamo installare un semplice plugin eseguendo:

npm i @capacitor/share

There’s nothing fancy about the Condividi pluginma porta in evidenza il dialogo di condivisione nativo! Per questo, adesso abbiamo bisogno di importare il pacchetto e chiamare la share() funzione dal nostro app, quindi cambiamo il src/routes/index.svelte a questo:

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

Come menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

Dopo aver premuto il pulsante, puoi assistere al bellissimo dialogo di condivisione nativo in azione!

Aggiungere Konsta UI

Per utilizzare Konsta UI nella tua app Nuxt 3, hai bisogno di avere tailwind già installato e per installare il pacchetto:

npm i konsta

Inoltre, è necessario modificare il tuo tailwind.config.js file:

// 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 estenderà la configurazione di default (o la tua personalizzata) di Tailwind CSS con alcune varianti e utilità di aiuto necessarie per Konsta UI.

Ora abbiamo bisogno di configurare il componente principale App in modo da poter impostare alcuni parametri globali (come theme).

Dobbiamo avvolgere l'intera app con App in il src/routes/+layout.svelte:

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

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

Pagina di Esempio

Ora che tutto è stato configurato, possiamo utilizzare i componenti Svelte di Konsta UI nelle nostre pagine SvelteKit.

Ad esempio, apriamo src/routes/index.svelte e cambialo nel seguente:

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

Se il live reload è fuori sincronia dopo aver installato tutti i componenti necessari, prova a riavviare tutto. Una volta fatto, dovresti vedere un'app mobile con un aspetto nativo abbastanza naturale, costruita con SvelteKit e Capacitor!

Vorresti vedere la seguente pagina come risultato:

Conclusioni

Capacitor è un'ottima scelta per costruire applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.

E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'app, assicurandoti che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desideri imparare a aggiungere Capgo al tuo'app SvelteKit, prendi un'occhiata all'articolo successivo:

Impara come Capgo possa aiutarti a costruire applicazioni migliori in modo più veloce, iscrivi il tuo account gratuito oggi.

Continua a lavorare con Building Mobile Apps con SvelteKit e Capacitor

Se stai utilizzando Building Mobile Apps con SvelteKit e Capacitor per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native, Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni, Integrazione CI/CD per i dettagli di implementazione in Integrazione CI/CD, e Azioni di integrazione di GitHub per i dettagli di implementazione in Azioni di integrazione di GitHub