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__. Anda juga dapat menambahkan __CAPGO_KEEP_1__ Native Navigation dan Transisi untuk merasakan aplikasi mobile native, serta menggunakan tailwind-__CAPGO_KEEP_2__ untuk area-area yang aman. __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. app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

app dan Capacitor

Ikuti langkah-langkah ini untuk mengubah aplikasi SvelteKit Anda menjadi aplikasi mobile menggunakan Capacitor, dengan navigasi Native, Transisi, dan panduan layout iOS opsional Capgo.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Ini dapat diintegrasi dengan mudah ke dalam proyek web apa pun, menggandung aplikasi Anda dalam sebuah view web native 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. Fungsionalitasnya yang tipis API dan terstruktur membuatnya mudah untuk diintegrasi ke dalam proyek Anda. Anda akan terkejut dengan seberapa sederhana cara mencapai aplikasi native yang sepenuhnya berfungsi dengan Capacitor!

Persiapan Aplikasi SvelteKit

Untuk membuat aplikasi SvelteKit baru, jalankan perintah berikut:

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

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

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

Capacitor memungkinkan Anda untuk membuat aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Fungsionalitasnya yang tipis __CAPGO_KEEP_1__ dan terstruktur membuatnya mudah untuk diintegrasi ke dalam proyek Anda. Anda akan terkejut dengan seberapa sederhana cara mencapai aplikasi native yang sepenuhnya berfungsi dengan __CAPGO_KEEP_2__!

Persiapan Aplikasi SvelteKit sync command.

Pertama, instal 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.

Selanjutnya, 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 asli native!

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

Selain itu, Anda harus menemukan sebuah capacitor.config.ts berkas 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 berkas capacitor.config.ts dan update directory web:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Karena 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 terinstal, kita 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 terupdate, kita perlu menambahkan prerender option dengan membuat sebuah +layout.js halaman src/rute dan hanya tambahkan ekspor berikut ke Setelah menambahkan dan memperbarui file:

export const prerender = true

layout.js Setelah menambahkan dan memperbarui file layout.js Setelah menambahkan dan memperbarui file layout.js

halaman, kita perlu menambahkan platform mobile kita, membangun kembali proyek kita untuk membuat folder

npm run build
npx cap sync

build npm run build Anda dapat melakukannya dengan menjalankan perintah-perintah berikut: npx cap sync Perintah pertama akan membangun proyek SvelteKit Anda dan menyalin build statis, sedangkan perintah kedua akan menyinkronkan semua web code ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi.

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

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

Pembangunan dan Pengiriman 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 Anda di toko aplikasi, Anda perlu bergabung dalam Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

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

npx cap open ios
npx cap open android

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

Pada 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 mengarahkan Anda melalui prosesnya (tetapi lagi, Anda perlu terdaftar dalam Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:

Selamat! Anda telah berhasil mengirimkan aplikasi web SvelteKit Anda ke perangkat mobile. Berikut adalah contoh:

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

Capacitor Live Reload

Dengan kemampuan live reload ini, Anda dapat memiliki fungsi yang sama seperti pada semua framework modern, dan kabar baiknya adalah bahwa Anda dapat memiliki fungsi yang sama ini pada perangkat mobile dengan upaya yang minimal!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload On 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 menemukannya 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 file: capacitor.config.ts Pastikan untuk menggunakan

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;

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:

Langkah terakhir adalah

npx cap copy

The copy command ini mirip dengan sync, tetapi hanya akan mengcopy perubahan yang dibuat ke folder web dan konfigurasi, tanpa mengupdate proyek native.

Anda dapat menyelesaikan proses deploy aplikasi 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 menginstall plugin baru seperti kamera, masih memerlukan rebuild proyek native. Hal ini karena file native telah berubah, dan tidak dapat dilakukan secara langsung.

Perlu diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port default SvelteKit 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 menginstall plugin sederhana dengan menjalankan:

npm i @capacitor/share

There’s nothing fancy about the Bagikan plugin, tapi itu membawa dialog bagikan asli! share() For this, we now only need to import the package and call the 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>

ke ini:

npx cap sync

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

UI yang terasa asli dengan __CAPGO_KEEP_0__ Native Navigation dan Transisi Saya telah bekerja selama tahun-tahun dengan Membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan SvelteKit adalah sulit dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan sentuhan mobile asli dalam aplikasi SvelteKit + Capacitor , gunakan plugin Capgo daripada kit UI web seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Pengaturan rute SvelteKit tetap; plugin menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman Ionik dan swipe balik iOS di layer WebView, tanpa menerima UI Ionik.

Install kedua:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki sistem; Android menggunakan latar belakang WebView yang diboroskan):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  goto(`/${id}`);
});

Tambahkan transisi halaman native di shell aplikasi:

<script>
  import { goto } from '$app/navigation';
  import { routerOutlet, page, setDirection } from '@capgo/capacitor-transitions/svelte';
  import '@capgo/capacitor-transitions';

  function openSettings() {
    setDirection('forward');
    goto('/settings');
  }
</script>

<cap-router-outlet use:routerOutlet>
  <cap-page use:page>
    <cap-content slot="content">
      <slot />
    </cap-content>
  </cap-page>
</cap-router-outlet>

Terapkan halaman yang dilutekan di cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum berpindah ke halaman lain. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi-native dan Menggunakan @capgo/capacitor-transisi.

Wilayah aman dengan Tailwind

Untuk wilayah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor On npm). It provides safe-areas Fasilitas dan plugin lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

Dalam src/app.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Pakai fasilitas seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya secara manual. env(safe-area-inset-*) Projek ini aktif dikembangkan — jika ada yang kurang untuk pengaturan SvelteKit Anda, Buka PR di GitHub.

Mengatasi Masalah Layout iOS (Viewport, Area Aman, dan Horizontal Overflow)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan pengecekan-pengecekan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Ini src/app.htmlatur tag meta viewport di <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Handle area aman iOS dari satu wrapper root saja

Buatlah sebuah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang banyak:

html,
body,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Selimuti semua konten halaman di dalam .app-shell. Penggunaan padding area aman yang berulang di header, modal, dan wrapper layout sering membuat tampilan UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitor, Anda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Set Capacitor iOS contentInset ke never Pertama

Dalam hal ini, lebih baik mengaktifkan inset native dan biarkan CSS (atau Native Navigation’s capacitor.config.ts) mengontrol area aman: contentInsetMode: 'css'Menggabungkan __CAPGO_KEEP_0__’s automatic content inset dengan CSS

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Temukan elemen yang benar-benar mengalami overflownya

Penyebab biasanya adalah elemen yang menggunakan

, Tailwind 100vw, lebar piksel tetap, atau besar w-screenDalam Safari Web Inspector, jalankan: min-width.

Dengan Tailwind, gantilah

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

With Tailwind, replace w-screen Dengan w-full ketika memungkinkan. Banyak masalah keluaran horizontal datang dari 100vw / w-screen, padding area yang aman yang diulang, atau kontainer dengan lebar tetap — bukan dari tag meta viewport itu sendiri.

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

Belajar bagaimana Capgo dapat membantu Anda membuat aplikasi yang lebih baik dengan lebih cepat, daftar diri Anda secara gratis hari ini.

Teruskan dari Pembangunan Aplikasi Mobile dengan SvelteKit dan Capacitor

Jika Anda menggunakan Pembangunan Aplikasi Mobile dengan SvelteKit dan Capacitor untuk merencanakan otomatisasi CI/CD, hubungkannya dengan Capgo CI/CD untuk alur kerja produk di Capgo CI/CD, Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Native, Capgo Integrasi untuk alur kerja produk di Capgo Integrasi, Integrasi CI/CD untuk detail implementasi di Integrasi CI/CD, dan Aksi Integrasi GitHub untuk detail implementasi di Aksi Integrasi GitHub.