Membangun Aplikasi Seluler dengan React dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi React baru dan beralih ke pengembangan mobile native menggunakan __CAPGO_KEEP_0__. Jika diinginkan, Anda juga dapat menambahkan Konsta UI untuk meningkatkan UI mobile dengan Tailwind CSS. Aplikasi React app and transition to native mobile development using Capacitor. Optionally, you can also add Tutorial ini akan mengantumkan Anda melalui prosesnya, mulai dari aplikasi React baru dan kemudian mengintegrasikan __CAPGO_KEEP_0__ untuk beralih ke aplikasi mobile native. Selain itu, Anda juga dapat menggunakan Konsta UI secara opsional untuk meningkatkan UI mobile dengan Tailwind CSS. Tentang __CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you can optionally use Konsta UI Tailwind CSS

Capacitor

CapacitorJS

Melalui Capacitor, Anda mendapatkan aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Slim API dan fungsi yang diperbarui membuatnya mudah untuk diintegrasi ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile native yang sepenuhnya berfungsi dengan Capacitor!

Mengatur Aplikasi React Anda

Sementara ada beberapa metode untuk memulai aplikasi React, mari kita pilih yang paling sederhana dalam tutorial ini yang menyediakan aplikasi React kosong:

npx create-react-app my-app

Untuk menciptakan aplikasi mobile native, kita memerlukan ekspor projek kita. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke package.json yang dapat digunakan untuk membangun dan mengexport proyek React:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Anda dapat menjalankan npm run build tanpa khawatir, dan Anda seharusnya dapat melihat folder baru di root proyek Anda.

Folder ini akan digunakan oleh Capacitor nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

Mengambahkan Capacitor ke Aplikasi React Anda

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tetapi setelah itu, hal itu sebenarnya cukup sederhana seperti menjalankan satu sync perintah.

Pertama-tama, kita dapat menginstal Capacitor CLI sebagai dependensi pengembangan, dan kemudian mengaturinya dalam proyek kita. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.

Kemudian, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Akhirnya, kita dapat menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek 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

Pada titik ini, Anda seharusnya dapat melihat folder baru ios dan android dalam proyek React Anda.

Itu adalah proyek asli native!

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

Selain itu, Anda harus menemukan file capacitor.config.ts 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 tidak akurat.

Untuk memperbaiki hal ini, buka file capacitor.config.json file dan update webDir:

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

Anda dapat mencobanya dengan menjalankan perintah-perintah berikut:

npm run build
npx cap sync

Perintah pertama npm run build hanya akan membangun proyek React Anda dan mengexport build statis.

Sementara perintah kedua npx cap sync akan sinkronisasi semua web code ke tempat-tempat yang tepat di platform-platform native sehingga dapat ditampilkan dalam aplikasi.

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

Tanpa menyadari, Anda sudah selesai, jadi mari kita lihat aplikasi di perangkat!

Buat dan Deploy aplikasi native

Untuk mengembangkan aplikasi iOS, Anda membutuhkan Xcode terinstal, dan untuk aplikasi Android, Anda membutuhkan Android Studio terinstal. 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-baru ini mengembangkan aplikasi mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek aplikasi native:

npx cap open ios
npx cap open android

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

android-studio-run

Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengdeploy aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengantarkan Anda melalui prosesnya (tetapi lagi, Anda perlu mendaftar ke 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:

xcode-run

Selamat! Anda telah berhasil mengdeploy aplikasi web React ke perangkat mobile. Contoh berikut ini:

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

Capacitor Live Reload

Sekarang Anda mungkin sudah terbiasa dengan hot reload pada semua framework modern, dan kabar baiknya adalah Anda bisa memiliki fungsi yang sama pada perangkat seluler dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload pada jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Langkah pertama adalah menentukan alamat IP lokal Anda. Jika Anda menggunakan Mac, Anda bisa menemukan informasi ini 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 kami. capacitor.config.ts file:

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

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

export default config;

Pastikan Anda menggunakan alamat IP dan port yang benar, saya telah menggunakan port React default dalam contoh ini.

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

npx cap copy

Perintah ini mirip dengan copy , tetapi hanya syncmenyalin perubahan yang dibuat ke folder web dan konfigurasi, tanpa mengupdate proyek native. Anda dapat menyebarluaskan aplikasi Anda satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi React Anda,

__CAPGO_KEEP_0__ akan secara otomatis memuat perubahan-perubahan tersebut. Aplikasi akan secara otomatis reload dan menampilkan perubahan!

Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native Anda. Ini karena file native telah berubah, dan hal ini tidak dapat dilakukan secara instan.

Perlu diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port React default untuk keperluan demonstrasi.

Menggunakan Plugin Capacitor

Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah disebutkan beberapa kali sebelumnya. Untuk melakukan ini, kita dapat menginstal plugin yang cukup sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin Pengiriman, tapi plugin ini tetap saja menampilkan dialog pengiriman native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi share() dari aplikasi kita. Mari kita ubah src/App.js untuk keperluan ini:

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

function App() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  };

  return (
    <div>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

npx cap sync

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

Untuk membuat tombol terlihat lebih ramah mobile, kita dapat menambahkan gaya menggunakan library komponen UI favorit saya untuk aplikasi web - React (tanpa cela).

Menambahkan Konsta UI

Saya telah bekerja selama tahun-tahun dengan Ionic untuk membangun aplikasi cross-platform yang luar biasa, dan itu salah satu pilihan terbaik selama beberapa tahun. Tapi sekarang saya tidak merekomendasikannya lagi; itu sangat hacky untuk mengintegrasikannya dengan React, dan itu tidak sepadan ketika Anda sudah memiliki tailwindcss.

Jika Anda ingin UI mobile yang terlihat bagus yang dapat menyesuaikan diri dengan gaya iOS dan Android, saya merekomendasikan Konsta UI.

Anda perlu memiliki tailwind sudah terinstal

Untuk menggunakan itu, kita hanya perlu menginstal paket react package:

npm i konsta

Selain itu, Anda perlu memodifikasi file: tailwind.config.js akan memperluas konfigurasi CSS Tailwind default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas tambahan yang diperlukan untuk Konsta UI.

// 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 Sekarang kita perlu mengatur komponen utama

untuk mengatur beberapa parameter global (seperti Kita perlu mengelilingi aplikasi seluruhnya dengan dalam theme).

Halaman Contoh App Sekarang ketika semua sudah diatur, kita dapat menggunakan komponen Konsta UI React di aplikasi React kita. src/App.js:

import { App } from 'konsta/react';
import './App.css';

function MyApp({ Component, pageProps }) {
  return (
    // Wrap our app with App component
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

__CAPGO_KEEP_0__

For example, mari kita buka src/App.js dan ubah menjadi:

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

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

      <Block strong>
        <p>
          Here is your React & 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 className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

export default App;

Jika reload hidup tidak sinkron setelah menginstal semua komponen yang diperlukan, coba restart semuanya. Setelah itu, Anda seharusnya melihat sebuah aplikasi seluler dengan tampilan yang agak native, dibangun dengan React dan Capacitor!

Anda seharusnya melihat halaman berikut sebagai hasilnya:

Kesimpulan

Capacitor adalah pilihan yang sangat baik untuk membangun 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-fitur terbaru dan perbaikan bug.

If you would like to learn how to add Capgo to your React app, take a look at the next article:

Capacitor ke aplikasi React Anda, lihatlah artikel berikutnya:

Jika Anda menggunakan Membangun Aplikasi Mobile dengan React 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 GitHub Integrasi Aksi untuk detail implementasi di GitHub Aksi Integrasi.