Costruire Applicazioni Mobili con SvelteKit e Capacitor

In questo tutorial, inizieremo con una nuova app SvelteKit e passeremo alla sviluppo di app mobili native utilizzando __CAPGO_KEEP_0__. Oltre a ciò, potete anche integrare app and transition to native mobile development using Capacitor. Optionally, you can also integrate Martin Donadieu per un'interfaccia utente mobile Tailwind CSS migliorata.

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

Segui questo passo dopo passo per trasformare la tua app SvelteKit in un'applicazione 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 un webview nativo 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'applicazione mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API e la sua funzionalità streamlinata rendono facile l'integrazione nel tuo progetto. Sarai sorpreso dalla semplicità con cui puoi ottenere un'applicazione nativa funzionale completa 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.

Aggiungere Capacitor al tuo App SvelteKit

Per avvolgere qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali. Successivamente, è semplice come eseguire un comando singolo. sync Prima, installa il

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

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

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 e android Aggiungi __CAPGO_KEEP_0__ al tuo App SvelteKit cartelle nel tuo progetto SvelteKit.

Questi sono progetti nativi reali!

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

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

Per risolvere questo problema, apri il capacitor.config.ts file e aggiorna il webDir:

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 Capacitor, passiamo alla nostra applicazione Sveltekit a 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 il 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 prerendering creando un +layout.js passa alla pagina src/routes e aggiungi semplicemente l'esportazione seguente a +layout.js:

export const prerender = true

Dopo aver aggiunto e aggiornato il +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:

npm run build
npx cap sync

Il primo comando npm run build costruirà il tuo progetto SvelteKit e copierà la costruzione statica, mentre il secondo comando npx cap sync syncronizzerà tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati in un'app.

Inoltre, il comando sync potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi nuovi Capacitor plugin, è tempo di eseguire npx cap sync 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 app Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire il tuo app sul negozio di app, devi iscriverti al programma di sviluppo Apple per iOS e al Google Play Console per Android.

Se sei nuovo allo sviluppo mobile nativo, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i tuoi progetti nativi, distribuire il tuo app su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire il tuo app su un dispositivo connesso senza modificare alcuna impostazione. Ecco un esempio:

In Xcode, devi impostare il tuo account di firma per distribuire il tuo app su un dispositivo reale invece che solo sul simulatore. Se non hai fatto questo prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto al programma di sviluppo). Dopo di che, puoi semplicemente premere play per eseguire l'app sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai distribuito con successo la tua app 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 reload caldo con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con minimo sforzo!

Abilita l'accesso alla tua applicazione ospitata localmente con il riavvio in tempo reale su il tuo rete avendo l'app 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

Su Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Possiamo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce al 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;

Assicurati di utilizzare l'indirizzo IP e la porta corretticome mostrato nell'esempio sopra.

Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:

npx cap copy

Il copy comando è simile a sync, ma copierà solo le modifiche apportate al folder web e alla configurazione, senza aggiornare il progetto nativo.

Puoi ora distribuire nuovamente la tua 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 un rebuild del tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati, e non è possibile farlo in tempo reale.

Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il port di default di SvelteKit per fini dimostrativi.

Utilizzando Capacitor Plugin

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

npm i @capacitor/share

Non c'è nulla di particolarmente complesso nel Plugin di condivisione, ma apre la finestra di condivisione nativa! Per questo, adesso dobbiamo solo importare il pacchetto e chiamare il share() funzione dalla nostra app, quindi cambiamo il src/routes/index.svelte in 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 prima, 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, potrai assistere alla bella finestra di condivisione nativa in azione!

Aggiungere Konsta UI

Per utilizzare Konsta UI nella tua app Nuxt 3, hai bisogno di installato già Tailwind 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 aggiuntive e utilità di aiuto necessarie per Konsta UI.

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

Ci serve avvolgere l'intera app con App nel 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.

Per esempio, apriamo e cambiamo in src/routes/index.svelte e cambiare in:

<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 l'installazione di tutti i componenti necessari, prova a riavviare tutto. Una volta fatto, dovresti vedere un'app mobile con un aspetto nativo, costruita con SvelteKit e Capacitor!

Vedi la seguente pagina come risultato:

Conclusione

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, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desideri imparare a aggiungere Capgo alla tua app SvelteKit, guarda l'articolo successivo:

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