Membangun Aplikasi Mobile dengan React.js Pemurnian dan Capacitor

Tutorial ini akan membawa Anda melalui proses menciptakan aplikasi mobile menggunakan React dan Capacitor. Setelah itu, Anda akan tahu cara mengubah aplikasi web React.js menjadi aplikasi mobile native dengan Capacitor, serta menambahkan sentuhan native dengan Capgo Navigasi dan Transisi Native.

Capacitor memungkinkan transformasi aplikasi web React.js menjadi aplikasi mobile native dengan mudah, tanpa perlu perubahan besar atau belajar strategi baru seperti React Native.

Prosesnya melibatkan beberapa langkah sederhana, dan sebelum Anda menyadari, aplikasi React.js Anda sudah menjadi aplikasi mobile yang berfungsi sepenuhnya. Jadi, tetaplah bersama kami untuk membantu Anda dalam perjalanan ini.

Capacitor Ringkasan

CapacitorJS adalah perubahan besar. Ia dapat menyatu dengan proyek web apa pun dan menggabungkan aplikasi Anda ke dalam native webview sambil menghasilkan proyek native Xcode dan Android Studio. Selain itu, melalui plugin-nya, Anda dapat mengakses fitur perangkat native seperti kamera melalui jembatan JS.

Capacitor offers a straightforward way to create a native mobile application without any hassle or steep learning curve. Its simple API and streamlined functionality make it easy to incorporate into your project.

Mengatur Aplikasi React.js Anda

Mari kita pilih metode yang paling sederhana untuk memulai aplikasi React. Kami akan menggunakan manajer paket npm untuk membuat aplikasi React baru:

npx create-react-app my-app

Untuk mengubah proyek kami menjadi aplikasi mobile native, sebuah ekspor dari aplikasi kami diperlukan.

Kami akan kembali ke hal ini dalam beberapa saat. Terlebih dahulu, mari kita pahami cara mengintegrasikan Capacitor ke dalam aplikasi React kami.

Mengintegrasikan Capacitor ke dalam Aplikasi React.js Anda

Langkah awal pengaturan mungkin sedikit rinci, tetapi setelah itu, memperbarui wrapper aplikasi native Anda menjadi se sederhana sebagai menjalankan sync perintah.

Pertama, kami akan menginstal Capacitor CLI sebagai dependensi pengembangan dan mengaturnya dalam proyek kami. Selama pengaturan, terima nilai default untuk nama dan ID paket dengan menekan “enter.”

Selanjutnya, kita akan menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Akhirnya, kita akan menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root projek kita:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React 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

Direktori ios dan android sudah ada di projek React.js Anda.

Untuk mengakses projek Android nanti, instal Android Studio. Untuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.

Perbarui directory web dalam capacitor.config.json seperti yang ditunjukkan di bawah:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

Jalankan perintah pembangunan dan sinkronkan proyek Anda dengan Capacitor:

npm run build
npx cap sync

Bagian npm run build perintah akan membangun proyek React.js Anda, sementara npx cap sync akan menyinkronkan web code di tempat-tempat yang tepat di platform native sehingga dapat dieksekusi dalam aplikasi.

Sekarang, dengan sedikit keberuntungan dan tidak ada kesalahan, aplikasi React.js Anda seharusnya sudah siap untuk diluncurkan pada perangkat!

Membangun dan Mengembangkan Aplikasi Native Anda

Mengembangkan aplikasi iOS memerlukan Xcodedan aplikasi Android memerlukan Studio AndroidJika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda harus mendaftar ke Program Pengembang Apple untuk iOS dan Console Google Play untuk Android.

Capacitor CLI memudahkan proses membuka proyek native berikut:

npx cap open ios
npx cap open android

Saat proyek native Anda telah terkonfigurasi, mengirimkan aplikasi Anda ke perangkat yang terhubung adalah proses yang sederhana.

Untuk Studio Android, tunggu sampai segalanya terisi dan kemudian kirimkan aplikasi Anda ke perangkat yang terhubung.

Untuk Xcode, buatlah akun tanda tangan Anda untuk mengirimkan aplikasi Anda ke perangkat nyata bukan hanya simulator. Setelah itu, cukup tekan tombol play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat dipilih di bagian atas.

Jika semuanya berjalan lancar, Anda akan telah mengubah aplikasi web React.js Anda menjadi aplikasi mobile native!

Capacitor Live Reload

Framework pengembangan modern biasanya dilengkapi dengan hot reload, dan beruntungnya, Anda dapat memiliki hal yang sama dengan Capacitor tetapi di perangkat mobile Anda!

Anda dapat membuat aplikasi yang dihosting secara lokal dapat diakses dengan live reload di jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Pertama-tama, tentukan alamat IP lokal Anda. Pada Mac, Anda dapat melakukannya dengan menjalankan ipconfig getifaddr en0 di terminal. Pada Windows, jalankan ipconfig dan cari alamat IPv4.

Setelah itu, instruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan parameter lain ke file Anda: capacitor.config.ts Pastikan Anda menggunakan IP dan port yang akurat. Jalankan

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

untuk menerapkan perubahan-perubahan ini ke proyek native kami. npx cap copy Setelah mengunduh aplikasi Anda satu kali lagi melalui Android Studio atau Xcode, perubahan-perubahan dalam aplikasi React Anda akan secara otomatis di-reload dan ditampilkan di aplikasi Anda!

Namun, perlu diingat bahwa jika plugin baru dipasang, seperti kamera, maka diperlukan pembangunan ulang proyek native Anda. Hal ini karena file native akan berubah dan tidak dapat diperbarui secara real-time.

Menggunakan __CAPGO_KEEP_0__ Plugins

Mari kita lihat secara singkat bagaimana menggunakan plugin Capacitor. Mari kita instal plugin sederhana, yaitu

Let’s take a quick look at how to use a Capacitor plugin. Let’s install a simple one, the pluginsyang memicu dialog berbagi asli:

npm i @capacitor/share

Menggunakannya, import paket dan panggil fungsi yang relevan dari aplikasi kami. Pertimbangkan untuk menggunakan share() Aplikasi.js Setelah menginstal plugin baru, jangan lupa untuk menyinkronkan kembali proyek React Anda menggunakan:

import { Share } from '@capacitor/share';

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

Selanjutnya, Anda dapat membuat aplikasi terasa lebih asli di iOS dan Android dengan navigasi dan transisi __CAPGO_KEEP_0__ dan memperbaiki masalah tata letak iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong. npx cap sync.

Tampilan UI yang terasa asli dengan Capgo Navigasi dan Transisi Asli

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan React adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS Untuk tampilan mobile asli di aplikasi React + __CAPGO_KEEP_0__ , gunakan plugin __CAPGO_KEEP_1__ daripada kit UI web saja seperti Konsta UI:.

For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-navigasi native — navbar native, tab bar Liquid Glass pada iOS, dan gaya tab bar yang berbayang pada Android. Router React Anda menjaga keadaan jalur; plugin ini menguasai chrome native.
• @capgo/capacitor-transisi — transisi halaman gaya Ionic dan swipe-back iOS pada layer WebView, 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 berbayang):

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 }) => {
  navigate(`/${id}`);
});

Tambahkan transisi halaman native di dalam shell aplikasi Anda:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const navigate = useNavigate();
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (outletRef.current) {
      setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
    }
  }, []);

  const openSettings = () => {
    setDirection('forward');
    navigate('/settings');
  };

  return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}

Bungkus halaman yang dilalui dengan cap-router-outlet, cap-page, dan cap-content, dan 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 pada npm). Ini menyediakan safe-areas utilitas dan plugin lainnya yang ramah Capacitor Tailwind:

bun add -D tailwind-capacitor

In src/index.css:

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

Menggunakan utilitas seperti pt-safe, pb-safe, dan px-safe daripada menaburkan env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan React Anda, buka PR di GitHub.

Pengaturan Layout iOS (Viewport, Area Aman, dan Overflows Horizontal)

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

Pastikan tag meta viewport diterapkan dengan benar

Tambahkan tag meta viewport di index.html di dalam <head>:

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

Pengaturan Area Aman iOS dari satu wrapper root saja

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

html,
body,
#root {
  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);
}

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

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

Atur Capacitor iOS contentInset ke never pertama

In capacitor.config.ts, lebih baik gunakan inset native yang dinonaktifkan dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css'Miliki area yang aman:

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

Menggabungkan Capacitor’s konten inset otomatis dengan CSS env(safe-area-inset-*) Memasang padding adalah penyebab umum dari jarak ganda.

Cari elemen yang sebenarnya mengalami overflow

Penyebab biasanya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel yang tetap, atau lebar yang besar min-width.

Dalam Safari Web Inspector, jalankan:

[...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,
  }));

Dengan Tailwind, gantikan w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, pengulangan padding area aman, atau kontainer dengan lebar tetap — bukan dari tag meta viewport itu sendiri.

Konklusi

Capacitor menyediakan cara yang mulus untuk membangun aplikasi native berdasarkan proyek web yang sudah ada, menyediakan cara yang sederhana untuk berbagi code dan memiliki UI yang konsisten.

Terima kasih pada teknologi seperti Capacitor, membangun aplikasi mobile dari aplikasi web React.js sudah tidak pernah semudah ini. Tingkatkan kemampuan pengembangan web Anda dengan menciptakan aplikasi mobile native yang impresif. Selamat berkode!

Untuk informasi lebih lanjut tentang cara Anda dapat mempercepat proses pengembangan aplikasi, daftar untuk akun gratis hari ini.

Teruskan dari Membangun Aplikasi Mobile dengan React.js Murni dan Capacitor

Jika Anda menggunakan Membangun Aplikasi Mobile dengan React.js Murni dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-aktivitas-hidup-nyata untuk detail implementasi di @capgo/capacitor-aktivitas-hidup-nyata, Menggunakan @capgo/capacitor-pemain-video untuk kemampuan asli di Menggunakan @capgo/capacitor-pemain-video, @capgo/capacitor-pemain-video untuk detail implementasi di @capgo/capacitor-pemain-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli di Menggunakan @capgo/capacitor-navigasi-asli.