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 navigasi dan transisi native __CAPGO_KEEP_1__ untuk merasa seperti aplikasi mobile asli, serta menggunakan tailwind-__CAPGO_KEEP_2__ untuk area-are 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.

Capacitor allows you to easily convert your SvelteKit web application into a native mobile app without the need for significant modifications or learning a new skill like React Native.

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

Tentang Capacitor

CapacitorJS adalah perubahan besar! Ini dapat diintegrasi dengan mudah ke dalam proyek web apa pun, menggandung aplikasi Anda dalam sebuah tampilan 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. Fungsi API dan fungsi yang disederhanakan membuatnya mudah untuk diintegrasikan ke dalam proyek Anda. Anda akan terkejut dengan betapa sederhananya mencapai aplikasi native yang sepenuhnya berfungsi dengan Capacitor!

Mempersiapkan 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, 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.

Menambahkan Capacitor ke Aplikasi SvelteKit Anda

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita perlu mengikuti beberapa langkah awal. Setelah itu, hanya perlu menjalankan perintah tunggal untuk menghasilkan aplikasi mobile yang siap digunakan. sync perintah.

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

Kemudian, 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.

Mereka adalah proyek asli native!

Untuk mengakses proyek Android nanti, Anda perlu menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.

Selain itu, Anda harus menemukan file capacitor.config.ts dalam 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 pengaturannya direktori web:

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 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 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 sebuah +layout.js halaman src/rute dan hanya tambahkan ekspor berikut ke +layout.js:

export const prerender = true

Sesudah menambahkan dan memperbarui halaman, kita akan perlu menambahkan platform mobile, membangun kembali proyek untuk membuat folder build Anda dapat melakukannya dengan menjalankan perintah-perintah berikut: Perintah pertama akan membangun proyek SvelteKit Anda dan menyalin pembangunan statis, sedangkan perintah kedua

akan sinkronisasi semua web __CAPGO_KEEP_0__ ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi.

npm run build
npx cap sync

Perintah kedua npm run build akan sinkronisasi semua web __CAPGO_KEEP_0__ ke tempat yang tepat di platform native sehingga dapat ditampilkan di aplikasi. npx cap sync Perintah kedua akan sinkronisasi 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 kembali.

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

Membangun dan Mengirimkan Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terpasang, dan untuk aplikasi Android, Anda memerlukan Android Studio terpasang. 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 dalam pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native baik itu:

npx cap open ios
npx cap open android

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

Pada Xcode, Anda perlu mengatur akun tanda tangan Anda untuk menginstal 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 pada perangkat terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:

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

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

Capacitor Live Reload

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

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload di 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

Di 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 Anda menggunakan alamat IP dan port yang benarseperti yang ditunjukkan dalam contoh di atas.

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

npx cap copy

The copy perintah ini mirip dengan sync, tetapi hanya mengcopy perubahan yang dibuat pada folder web dan konfigurasi, tanpa memperbarui 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!

Pertimbangkan bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native. Hal ini karena file native telah 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 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 menginstal 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__ Navigasi dan Transisi Asli Saya telah bekerja selama tahun-tahun dengan untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan SvelteKit adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

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

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang terblurr di Android. Pengaturan route SvelteKit tetap; plugin menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman Ionic-style dan swipe-back di lapisan WebView iOS, tanpa menerima UI Ionic.

Pasang 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 terblurr):

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>

Bungkus halaman yang dilalui dengan cap-router-outlet, cap-pagedan cap-contentdan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi asli menguasai permukaan tersebut.

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

Area aman dengan Tailwind

Untuk area aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor di npm). Ini menyediakan safe-areas fasilitas dan plugin Tailwind 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";

Gunakan fasilitas seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya secara manual. Projek ini aktif dikembangkan — jika ada yang hilang untuk pengaturan SvelteKit Anda, env(safe-area-inset-*) buka PR di __CAPGO_KEEP_0__ open a PR on GitHub.

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak

atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar

protectedTokens

Dalam src/app.html, atur tag meta viewport di <head>:

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

Atur area aman iOS dari satu wrapper root saja

Buat sebuah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen nested beberapa kali:

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);
}

Bungkus semua konten halaman di dalam .app-shellPengaturan padding area aman yang berulang di header, modal, dan wrapper tata letak sering membuat 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.

Atur Capacitor iOS contentInset menjadi never Pertama

Dalam capacitor.config.ts, lebih baik menggunakan inset asli yang dinonaktifkan dan biarkan CSS (atau Navigasi Asli) mengontrol area yang 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 mengalir keluar

Penyebab biasanya adalah elemen yang menggunakan

, Tailwind 100vw, lebar piksel yang 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 overflow horizontal berasal 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 yang terkini.

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 diri 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 Otomatisasi CI/CD untuk alur kerja produk di Capgo Otomatisasi CI/CD, Capgo Pembangunan Natively untuk alur kerja produk di Capgo Pembangunan Natively, 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