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 Anda ingin, Anda juga dapat mengintegrasikan Konsta UI untuk mendapatkan antarmuka mobile yang lebih baik dengan Tailwind CSS. __CAPGO_KEEP_0__ memungkinkan Anda untuk dengan mudah mengonversi aplikasi web SvelteKit Anda menjadi aplikasi mobile native tanpa perlu melakukan modifikasi signifikan atau belajar kemampuan baru seperti React Native. app and transition to native mobile development using Capacitor. Optionally, you can also integrate SvelteKit app and transition to native mobile development using __CAPGO_KEEP_0__. Optionally, you can also integrate

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 dan, jika diinginkan, meningkatkan UI mobile Anda dengan Konsta UI.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Ini dapat diintegrasi dengan mudah ke dalam proyek web apa pun, menggandakan aplikasi Anda dalam sebuah tampilan web native dan menghasilkan proyek Xcode dan Android Studio native untuk Anda. Plugin-nya 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. API dan fungsi yang diperbarui membuatnya mudah untuk diintegrasi ke dalam proyek Anda. Anda akan terkejut dengan betapa sederhananya mencapai aplikasi mobile 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, 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 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.

Ini adalah proyek native asli!

Untuk mengakses proyek Android nanti, Anda perlu menginstal Android Studio. Untuk iOS, Anda perlu Mac dan sebaiknya 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 directory web:

import { CapacitorConfig } from '@capacitor/cli'

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

export default config

Setelah kita telah mengupdate 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 menjadi 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 akan perlu menambahkan prerender option dengan membuat sebuah +layout.js halaman src/rute dan tambahkan ekspor berikut ke Setelah menambahkan dan memperbarui file:

export const prerender = true

layout.js Setelah menambahkan dan memperbarui file layout.js halaman, kita perlu menambahkan platform mobile kita, membangun kembali proyek kita untuk membuat folder build

Anda dapat melakukannya dengan menjalankan perintah-perintah berikut:

npm run build
npx cap sync

Perintah pertama npm run build akan membangun proyek SvelteKit Anda dan menyalin build statis, sedangkan perintah kedua npx cap sync akan sinkronkan 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.

Tidak 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 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. 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 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. Contoh berikut ini:

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

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

Capacitor Live Reload

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

Aktifkan akses ke aplikasi 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 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

Langkah copy perintah ini mirip dengan sync, tetapi hanya mengcopy perubahan yang dibuat pada 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 pada aplikasi Svelte Anda, aplikasi akan secara otomatis reload dan menampilkan perubahan!

Pertahankanlah perlu diingat bahwa jika Anda menginstall plugin baru seperti kamera, masih memerlukan rebuild proyek native. 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 menginstall plugin sederhana dengan menjalankan:

npm i @capacitor/share

There’s nothing fancy about the Plugin Berbagi, tetapi itu membuka dialog berbagi native! 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>

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

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

Menambahkan Konsta UI To use Konsta UI in your Nuxt 3 app, you need to have tailwind sudah terinstall dan untuk menginstall package:

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 UI Konsta.

Sekarang kita perlu mengatur komponen utama App untuk dapat menetapkan 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>

Contoh Halaman

Sekarang ketika semua sudah diatur, kita dapat menggunakan komponen UI Konsta Svelte di halaman SvelteKit kita.

Contohnya, mari kita buka src/routes/index.svelte dan ubahnya menjadi seperti berikut:

<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 Anda melakukannya, 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 diri Anda untuk akun 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