Membangun Aplikasi Mobile 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 React app and transition to native mobile development using Capacitor. Optionally, you can also add aplikasi untuk tampilan mobile yang ditingkatkan dengan Tailwind CSS.

Capacitor memungkinkan Anda untuk dengan mudah mengonversi aplikasi web React Anda menjadi aplikasi mobile native tanpa perubahan signifikan atau belajar keterampilan baru seperti React Native.

Dengan hanya beberapa langkah sederhana, sebagian besar aplikasi React dapat diubah menjadi aplikasi mobile.

Tutorial ini akan memandu Anda melalui prosesnya, mulai dari aplikasi React baru dan kemudian mengintegrasikan Capacitor untuk memasuki ranah aplikasi mobile native. Selain itu, Anda juga dapat menggunakan Konsta UI untuk meningkatkan tampilan mobile dengan Tailwind CSS.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke dalam proyek web apa pun, dan akan menggabungkan aplikasi Anda ke dalam tampilan web native, menghasilkan proyek Xcode dan Android Studio native untuk Anda. Selain itu, plugin-pluginnya memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JS.

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

Mengatur Aplikasi React Anda

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

npx create-react-app my-app

Untuk membuat aplikasi mobile native, kita membutuhkan eksport dari proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam file package.json kami yang dapat digunakan untuk membangun dan mengexport proyek React: Anda dapat menjalankan tanpa harus khawatir, dan Anda seharusnya dapat melihat folder baru di root proyek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

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

Menambahkan __CAPGO_KEEP_0__ ke Aplikasi React Anda npm run build Untuk mengemas aplikasi web ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tetapi setelah itu, hanya perlu menjalankan satu

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your React App

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ sync __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ Capacitor CLI sebagai dependensi pengembangan, dan kemudian atur dalam proyek kami. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.

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

# 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 sebuah capacitor.config.ts file 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 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 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 waktunya untuk menjalankan npx cap sync lagi.

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

Membangun dan Mengembangkan Aplikasi Native

Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terpasang, dan untuk aplikasi Android, Anda memerlukan Studio Android sudah 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 memulai pengembangan mobile native, Anda dapat menggunakan __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ untuk dengan mudah membuka proyek native:

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

xcode-run

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

react-mobile-app

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

__CAPGO_KEEP_0__ Live Reload

Capacitor Live Reload

__CAPGO_KEEP_0__ Live Reload di perangkat seluler dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload yang hidup 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 menemukan hal ini 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 file kami: capacitor.config.ts Pastikan untuk menggunakan

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;

alamat IP dan port yang benar file: config.xml, Saya telah menggunakan port React default dalam contoh ini.

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

npx cap copy

The copy Perintah ini mirip dengan sync, tetapi hanya menyalin perubahan yang dibuat ke folder web dan konfigurasi, tanpa mengupdate proyek native.

Anda dapat mengdeploy aplikasi Anda satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi React Anda, aplikasi akan secara otomatis reload dan menampilkan perubahan!

Perlu diingat bahwa jika Anda menginstal 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 menunjukkan port React default untuk keperluan demonstrasi.

Menggunakan Plugin Capacitor

Mari kita lihat cara 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 ini, Plugin Bagikantetapi tetap saja membuka dialog bagikan native! share() Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi dari aplikasi kita. Mari kita ubah src/App.js

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;

menjadi ini:

npx cap sync

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

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

Menambahkan Konsta UI

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

Jika Anda ingin tampilan UI seluler yang menarik dan dapat menyesuaikan gaya iOS dan Android, saya merekomendasikan Konsta UI.

Anda perlu memiliki tailwind sudah terinstall

Untuk menggunakan itu, kita hanya perlu menginstal paket react 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/**/*.{js,ts,javascript,tsx}',
  ],
  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 mengatur beberapa parameter global (seperti theme).

Kita perlu mengelilingi aplikasi utuh dengan App dalam 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;

Halaman Contoh

Sekarang ketika segalanya telah diatur, kita dapat menggunakan komponen React UI Konsta di aplikasi React kita.

Misalnya, buka src/App.js dan ubahnya 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 Anda melakukannya, Anda seharusnya melihat aplikasi seluler dengan tampilan yang agak alami, dibangun dengan React 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 sederhana untuk berbagi code dan menjaga UI yang konsisten.

Dan dengan penambahan dari Capgo, bahkan lebih mudah untuk menambahkan pembaruan live 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 React Anda, lihatlah artikel berikutnya: