Membangun Aplikasi Mobile dengan SvelteKit dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi SvelteKit baru dan beralih ke pengembangan mobile native menggunakan __CAPGO_KEEP_0__. Jika diinginkan, Anda juga dapat mengintegrasikan Konsta UI app and transition to native mobile development using Capacitor. Optionally, you can also integrate __CAPGO_KEEP_0__ memungkinkan Anda untuk dengan mudah mengubah aplikasi web SvelteKit menjadi aplikasi mobile native tanpa perlu melakukan modifikasi signifikan atau belajar keterampilan baru seperti React Native. Ikuti panduan langkah demi langkah ini untuk mengubah aplikasi SvelteKit Anda menjadi aplikasi mobile menggunakan __CAPGO_KEEP_0__ dan, jika diinginkan, meningkatkan UI mobile Anda dengan Konsta UI.

Tentang Capacitor

Follow this step-by-step guide to transform your SvelteKit app into a mobile app using Capacitor and, if desired, enhance your mobile UI with Konsta UI.

Capacitor

SvelteKit

Mengaktifkan Capacitor memungkinkan Anda untuk membuat aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. APInya yang tipis dan fungsi yang diperbarui membuatnya mudah untuk diintegrasi ke proyek Anda. Anda akan terkejut dengan betapa sederhananya mencapai aplikasi native yang sepenuhnya berfungsi dengan Capacitor!

Mengatur Aplikasi SvelteKit Anda

Untuk membuat aplikasi SvelteKit baru, jalankan perintah berikut:

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

Setelah menjalankan build perintah, Anda harus melihat folder baru di root proyek Anda. dist Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kita perlu mengaturnya dengan benar.

Mengaktifkan Capacitor di Aplikasi SvelteKit Anda

Adding Capacitor to Your SvelteKit App

Pertama, instal __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sync __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ Capacitor CLI sebagai dependensi pengembangan dan atur dalam proyek Anda. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.

Langkah berikutnya, instal paket inti dan paket relevan untuk platform iOS dan Android.

Akhirnya, tambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek Anda:

# 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

Pada titik ini, Anda seharusnya melihat folder baru ios dan android dalam proyek SvelteKit Anda.

Folder-folder ini adalah proyek native asli!

Untuk mengakses proyek Android nanti, Anda perlu menginstal Android StudioUntuk iOS, Anda perlu Mac dan seharusnya menginstal Xcode.

Selain itu, Anda harus menemukan sebuah capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Satu-satunya hal yang perlu Anda perhatikan adalah webDir, yang harus mengarah ke hasil perintah build Anda. Saat ini, itu salah.

Untuk memperbaiki ini, buka file capacitor.config.ts dan update webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Sekarang kita telah memperbarui pengaturan Capacitor kita, mari kita ubah proyek Sveltekit kita menjadi aplikasi statis dengan mengunduh paket adapter statis yang tepat:

npm i -D @sveltejs/adapter-static

Setelah paket tersebut terinstal, kita akan perlu mengubah svelte.config.js mengambil file dari auto-adapter ke statis:

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

Dengan svelte.config.js diperbarui, kita akan perlu menambahkan prerender option dengan membuat sebuah +layout.js halaman ke src/routes dan hanya tambahkan ekspor berikut ke +layout.js:

export const prerender = true

Setelah menambahkan dan memperbarui layout, kita perlu menambahkan platform mobile, membangun kembali proyek untuk membuat folder +layout.js Setelah itu, kita perlu menambahkan platform mobile, membangun kembali proyek untuk membuat folder build Anda dapat melakukannya dengan menjalankan perintah-perintah berikut:

Perintah pertama

npm run build
npx cap sync

akan membangun proyek SvelteKit Anda dan menyalin build statis, sedangkan perintah kedua npm run build akan sinkronkan semua web __CAPGO_KEEP_0__ ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi. npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

__CAPGO_KEEP_0__ Capacitor pluginsperintah-perintah npx cap sync lagi.

Tentu saja, Anda telah menyelesaikan proses ini, jadi mari kita lihat aplikasi di perangkat!

Membangun dan Mengirimkan Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda membutuhkan Xcode terinstal, dan untuk aplikasi Android, Anda membutuhkan Android Studio terinstal. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda perlu mendaftar ke Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Jika Anda baru mengenal pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native:

npx cap open ios
npx cap open android

Setelah Anda telah mengatur proyek native Anda, mengirimkan aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut ini:

Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengirimkan aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengantarkan Anda melalui prosesnya (tetapi lagi, Anda perlu terdaftar di Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat terhubung, yang dapat Anda pilih di bagian atas. Contoh berikut ini:

Selamat! Anda telah berhasil menginstal aplikasi web SvelteKit ke perangkat mobile. Contoh:

Tapi tunggu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…

Capacitor Live Reload

Sekarang Anda mungkin sudah terbiasa dengan hot reload pada semua framework modern, dan kabar baiknya adalah Anda bisa memiliki fungsi yang sama pada perangkat mobile dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload pada jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Langkah pertama adalah menentukan alamat IP lokal Anda. Jika Anda menggunakan Mac, Anda bisa menemukannya dengan menjalankan perintah berikut di terminal:

ipconfig getifaddr en0

Di Windows, jalankan:

ipconfig

Lalu cari alamat IPv4.

Kita bisa menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke dalam 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;

Pastikan Anda menggunakan alamat IP dan port yang benar, seperti yang ditunjukkan dalam contoh di atas.

Sekarang, kita bisa menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek asli kita:

npx cap copy

Perintah ini mirip dengan copy , tetapi hanya syncmenyalin perubahan yang dibuat ke folder web ke proyek asli kita. dan konfigurasi, tanpa memperbarui proyek asli.

Anda dapat menyebarluaskan aplikasi Anda satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Svelte Anda, aplikasi akan secara otomatis reload dan menampilkan perubahan!

Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek asli Anda. Hal ini karena file native berubah, dan tidak dapat dilakukan secara instan.

Perlu diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port SvelteKit default untuk keperluan demonstrasi.

Menggunakan Capacitor Plugins

Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah disebutkan beberapa kali sebelumnya. Untuk melakukan ini, kita dapat menginstal plugin sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin Pengiriman, tetapi mengeluarkan dialog pengiriman native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi share() fungsi dari aplikasi kami, jadi mari kita ubah src/routes/index.svelte ke ini:

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

Seperti yang disebutkan sebelumnya, ketika menginstal plugin baru, kami perlu melakukan operasi sinkronisasi dan kemudian meng-redeploy aplikasi ke perangkat kami. Untuk melakukan ini, jalankan perintah berikut:

npx cap sync

Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli native dalam aksi!

Menambahkan Konsta UI

Untuk menggunakan Konsta UI di aplikasi Nuxt 3 Anda, Anda perlu memiliki tailwind sudah terinstal dan untuk menginstal paket:

npm i konsta

Selain itu, Anda perlu memodifikasi 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 akan memperluas konfigurasi CSS Tailwind default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas bantuan yang diperlukan untuk Konsta UI.

Sekarang kita perlu mengatur komponen utama Aplikasi untuk mengatur beberapa parameter global (seperti theme).

Kita perlu mengelilingi aplikasi seluruhnya dengan App dalam src/routes/+layout.svelte:

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

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

Halaman Contoh

Sekarang ketika segalanya telah diatur, kita dapat menggunakan komponen Konsta UI Svelte di halaman SvelteKit kita.

Misalnya, mari kita buka src/routes/index.svelte dan ubahnya menjadi:

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

Jika reload hidup tidak sinkron setelah menginstal semua komponen yang diperlukan, cobalah mengulangi semuanya. Setelah itu, Anda seharusnya melihat sebuah aplikasi seluler dengan tampilan yang agak native, dibangun dengan SvelteKit dan Capacitor!

Anda seharusnya melihat halaman berikut sebagai hasilnya:

Kesimpulan

Capacitor adalah pilihan yang sangat baik untuk membuat aplikasi native berdasarkan proyek web yang sudah ada, menawarkan cara sederhana untuk berbagi code dan menjaga UI yang konsisten.

Dan dengan penambahan dari Capgo", aplikasi Anda bahkan lebih mudah untuk menambahkan pembaruan hidup, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug yang terkini.Jika Anda ingin belajar cara menambahkan __CAPGO_KEEP_0__ ke aplikasi SvelteKit Anda, lihatlah artikel berikutnya:

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat,

Learn how Capgo can help you build better apps faster, hari ini. Ditulis oleh