Membangun Aplikasi Mobile dengan React.js murni dan Capacitor

Tutorial ini akan memandu Anda membuat aplikasi mobile menggunakan React, Capacitor, dan Konsta UI. Setelah itu, Anda akan tahu cara mengubah aplikasi web React.js menjadi aplikasi mobile native dengan Capacitor, dan menerapkan UI native menggunakan Konsta UI.

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

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

Capacitor Ringkasan

CapacitorJS adalah perubahan besar. Ia dapat terintegrasi dengan proyek web apa pun dan membungkus aplikasi Anda ke dalam tampilan web native sambil menghasilkan proyek Xcode dan Android Studio native. Selain itu, melalui pluginnya, Anda dapat mengakses fitur perangkat native seperti kamera melalui jembatan JS.

Capacitor menawarkan cara yang sederhana untuk membuat aplikasi mobile native tanpa masalah atau kurva belajar yang curam. Fungsi API dan fungsionalitas yang diperluruhkan membuatnya mudah diintegrasikan ke proyek Anda.

Setting Up Your React.js App

Untuk memulai aplikasi React yang paling sederhana, kita akan menggunakan manajer paket npm untuk membuat aplikasi React baru:

npx create-react-app my-app

Mengubah proyek kita menjadi aplikasi seluler native memerlukan export proyek kita. Kami akan kembali ke hal ini dalam beberapa saat. Terlebih dahulu, mari kita pahami cara mengintegrasikan __CAPGO_KEEP_0__ ke dalam aplikasi React kita.

Mengintegrasikan Capacitor ke dalam Aplikasi React.js Anda

Integrating Capacitor into Your React.js App

perintah. sync Pertama, kita akan menginstal __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sebagai dependensi pengembangan dan mengaturnya dalam proyek kita. Selama proses pengaturan, tekan “enter” untuk menerima nilai default untuk nama dan ID bundle.

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

Terakhir, kita akan menambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek kita:

Capacitor

# 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 sekarang sudah ada di proyek React.js Anda.

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

Kemudian, update webDir di proyek Anda capacitor.config.json file seperti yang ditunjukkan di bawah ini:

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

Jalankan perintah build dan sinkronkan proyek Anda dengan Capacitor:

npm run build
npx cap sync

The npm run build Perintah ini akan membangun proyek React.js Anda, sementara npx cap sync akan mengatur web code di tempat-tempat yang tepat di platform native sehingga dapat dijalankan di aplikasi.

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

Membangun dan Mengembangkan Aplikasi Native

Membangun aplikasi iOS memerlukan Xcode, dan aplikasi Android memerlukan Android Studio. Jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda harus bergabung dengan Program Pengembang Apple untuk iOS dan Console Google Play untuk Android.

The Capacitor CLI memudahkan proses membuka proyek native baik:

npx cap open ios
npx cap open android

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

Untuk Android Studio, 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 play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat Anda pilih di 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 datang 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, tentukan alamat IP lokal Anda. Di Mac, Anda dapat melakukannya dengan menjalankan ipconfig getifaddr en0 di terminal. Di Windows, jalankan ipconfig dan cari alamat IPv4.

Setelah itu, instruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan parameter lain ke dalam capacitor.config.ts file:

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;

Pastikan menggunakan IP dan port yang akurat. Jalankan npx cap copy untuk menerapkan perubahan-perubahan ini ke proyek native kita.

Setelah menginstal aplikasi satu kali lagi melalui Android Studio atau Xcode, perubahan-perubahan dalam aplikasi React Anda akan secara otomatis dimuat ulang dan ditampilkan di aplikasi Anda!

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

Menggunakan Capacitor Plugins

Mari kita lihat cara menggunakan plugin Capacitor secara singkat. Mari kita instal plugin sederhana, yaitu Share plugin, yang mempromosikan dialog berbagi native:

npm i @capacitor/share

Untuk menggunakan plugin ini, import paket dan panggil fungsi yang terkait share() fungsi dari aplikasi kami. Pertimbangkanlah App.js:

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;

Setelah menginstal plugin baru, jangan lupa untuk menyinkronkan kembali proyek React Anda menggunakan npx cap sync.

Mengimplementasikan Konsta UI: Tampilan Mobile yang Lebih Menarik

Untuk pengalaman tampilan mobile yang lebih menarik, kami akan menggunakan Konsta UI. Ini menyediakan gaya yang spesifik untuk iOS dan Android, dan mudah digunakan.

Untuk menggunakan Konsta UI, instal paket React:

npm i konsta

Mengubah tailwind.config.js file seperti ini:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig akan menambahkan variasi dan utilitas tambahan yang diperlukan untuk Konsta UI ke konfigurasi Tailwind CSS Anda saat ini.

Sekarang, atur komponen utama App untuk mengatur parameter global seperti themeTerapkan App di sekitar aplikasi utama Anda di src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

Pilihlah komponen Konsta UI React untuk halaman React.js kami. Buka src/App.js dan modifikasi untuk:

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
} from 'konsta/react';

export default function MyApp() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

Jika segala sesuatu telah dilakukan dengan benar, Anda seharusnya melihat integrasi tanpa hambatan antara React dan Konsta UI untuk memberikan aplikasi seluler Anda tampilan asli.

Kesimpulan

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

Terima kasih kepada teknologi seperti Capacitor, membangun aplikasi seluler dari aplikasi web React.js telah tidak pernah lebih mudah. Tingkatkan kemampuan pengembangan web Anda ke tingkat berikutnya dengan menciptakan aplikasi seluler native yang impresif. Selamat berkode!

Untuk lebih banyak tentang bagaimana Anda dapat mempercepat proses pengembangan aplikasi Anda, daftar diri untuk akun gratis hari ini.

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

Jika Anda menggunakan Membangun Aplikasi Seluler dengan React.js Murni dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Untuk kemampuan asli di @capgo/capacitor-live-activities untuk kemampuan asli di @capgo/capacitor-live-activities @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities Untuk kemampuan asli di @capgo/capacitor-video-player untuk kemampuan asli di @capgo/capacitor-video-player @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Untuk kemampuan asli di @capgo/capacitor-native-navigation untuk kemampuan asli di @capgo/capacitor-native-navigation

Membangun Aplikasi Mobile dengan React.js Murni dan Capacitor