Membangun Aplikasi Seluler 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. SvelteKit app and transition to native mobile development using Capacitor. Optionally, you can also integrate Konsta UI untuk UI mobile Tailwind CSS yang ditingkatkan.

Capacitor memungkinkan Anda untuk dengan mudah mengonversi aplikasi web SvelteKit Anda 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 Capacitor dan, jika diinginkan, meningkatkan UI mobile Anda dengan Konsta UI.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Ini dapat dengan mudah diintegrasi ke dalam proyek web apa pun, mengelilingi aplikasi Anda dengan native webview dan menghasilkan proyek Xcode dan Android Studio native untuk Anda. Plugin-pluginnya memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JavaScript.

Capacitor memungkinkan Anda untuk membuat aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Fungsionalitas API dan Capacitor yang terintegrasi dan terstruktur membuatnya mudah untuk diintegrasikan ke dalam proyek Anda. Anda akan terkejut dengan betapa sederhananya mencapai aplikasi mobile 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.

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

Mengambahkan Capacitor ke Aplikasi SvelteKit Anda

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita perlu mengikuti beberapa langkah awal. Setelah itu, hal itu sebenarnya cukup sederhana dengan menjalankan perintah tunggal. sync Pertama, instal

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Kemudian, instal paket inti dan paket relevan untuk platform iOS dan Android.

Terakhir, tambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek Anda:

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 dan android Menambahkan __CAPGO_KEEP_0__ ke Aplikasi SvelteKit Anda folder di proyek SvelteKit Anda.

Ini adalah proyek asli native!

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

Selain itu, Anda harus menemukan file capacitor.config.ts 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 capacitor.konfigurasi.ts file dan update webDir:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

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

npm i -D @sveltejs/adapter-static

Setelah paket diinstal, kita akan perlu mengubah svelte.config.js 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 +layout.js menu ke halaman src/routes dan cukup tambahkan ekspor berikut ke +layout.js:

export const prerender = true

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

Perintah pertama

npm run build
npx cap sync

Perintah pertama npm run build akan membangun proyek SvelteKit Anda dan menyalin pembangunan statis, sementara perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat dari platform native sehingga dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, jadi ketika Anda menginstal plugin baru Capacitor, saatnya untuk menjalankan npx cap sync lagi.

Tanpa menyadari, Anda telah menyelesaikan proses ini, jadi mari kita lihat aplikasi di perangkat!

Membangun dan Mengembangkan Aplikasi Native

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

Jika Anda baru-baru ini memulai 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, mengdeploy aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengdeploy aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut ini:

android-studio-run

Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengdeploy aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (tetapi lagi, Anda perlu mendaftar ke 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:

xcode-run

Selamat! Anda telah berhasil mengdeploy aplikasi web SvelteKit ke perangkat mobile. Contoh berikut ini:

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

Capacitor Live Reload

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

Aktifkan akses ke aplikasi yang dihosting secara lokal dengan reload hidup 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 dapat menemukan informasi ini dengan menjalankan perintah berikut di terminal:

ipconfig getifaddr en0

Pada Windows, jalankan:

ipconfig

Lalu cari alamat IPv4.

Kita dapat 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 untuk menggunakan alamat IP dan port yang benar, seperti yang ditunjukkan dalam contoh di atas.

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

npx cap copy

Komentar copy perintah ini mirip dengan sync, tetapi hanya menyalin perubahan yang dibuat ke folder web dan konfigurasi, tanpa memperbarui proyek asli.

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

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

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

Memanfaatkan Capacitor Plugin

Mari kita lihat cara 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 Plugin Bagikan, tetapi itu membuka dialog bagikan asli! share() Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi dari aplikasi kita, jadi mari kita ubah 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>

menjadi ini:

npx cap sync

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

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

Menambahkan Konsta UI tailwind sudah terinstal dan untuk menginstal paket:

npm i konsta

Selain itu, Anda perlu memodifikasi file: tailwind.config.js akan memperluas konfigurasi CSS Tailwind default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas bantuan yang diperlukan untuk Konsta UI.

// 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 Sekarang kita perlu mengatur komponen utama

untuk dapat menetapkan beberapa parameter global (seperti Kita perlu mengelilingi aplikasi seluruhnya dengan dalam theme).

Halaman Contoh App Sekarang ketika semua sudah teratur, kita dapat menggunakan komponen Konsta UI Svelte di halaman SvelteKit kita. src/routes/+layout.svelte:

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

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

and to install the package:__CAPGO_KEEP_0__

Additionally, you need to modify your__CAPGO_KEEP_1__

Untuk contoh, mari kita buka src/routes/index.svelte dan ubah 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, coba restart 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 yang sederhana untuk berbagi code dan menjaga UI yang konsisten.

Dan dengan penambahan Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.

Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi SvelteKit Anda, lihatlah artikel berikutnya:

Pelajari bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, Daftar untuk akun gratis Hari ini.

Membangun Aplikasi Mobile dengan SvelteKit dan Capacitor