Membangun Aplikasi Seluler dengan React dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi React baru dan kemudian beralih ke pengembangan mobile native menggunakan __CAPGO_KEEP_0__. Jika Anda ingin, Anda juga dapat menambahkan Konsta UI app and transition to native mobile development using Capacitor. Optionally, you can also add __CAPGO_KEEP_0__ memungkinkan Anda untuk dengan mudah mengubah aplikasi web React menjadi aplikasi mobile native tanpa perubahan signifikan atau belajar keterampilan baru seperti React Native. Dengan beberapa langkah sederhana, sebagian besar aplikasi React dapat diubah menjadi aplikasi mobile.

Tutorial ini akan mengajak Anda melalui prosesnya, mulai dari aplikasi React baru dan kemudian mengintegrasikan Capacitor untuk beralih ke aplikasi mobile native. Selain itu, Anda juga dapat menggunakan

Konsta UI

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 untuk meningkatkan UI mobile dengan Tailwind CSS. untuk meningkatkan UI mobile Anda dengan Tailwind CSS.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikan itu ke dalam proyek web apa pun, dan itu akan mengemas aplikasi Anda ke dalam view web native, menghasilkan proyek Xcode dan Android Studio native untuk Anda. Selain itu, plugin-nya 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 native yang sepenuhnya berfungsi dengan Capacitor!

Mempersiapkan Aplikasi React

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 membuat aplikasi mobile native, kita memerlukan ekspor proyek kita. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam 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 menjalankannya sekarang npm run build tanpa khawatir, dan Anda seharusnya dapat melihat folder baru di root proyek Anda.

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

Adding Capacitor to Your React App

Untuk mengemas aplikasi web menjadi kontainer mobile native, kita harus mengikuti beberapa langkah awal, tapi setelah itu, itu seolah-olah hanya perlu menjalankan satu sync perintah.

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

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

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

Dengan titik ini, Anda seharusnya dapat melihat folder baru ios dan android folder-folder di proyek React Anda.

Itu adalah proyek asli native!

Untuk mengakses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda membutuhkan Mac dan sebaiknya 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 mengacu pada hasil perintah pembangunan Anda. Saat ini, itu tidak akurat.

Untuk memperbaiki hal ini, buka file capacitor.config.json dan perbarui 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 hasil pembangunan statis.

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

Selain itu, perintah sinkronisasi mungkin juga memperbarui platform-platform native dan menginstal plugin-plugin, sehingga ketika Anda menginstal plugin baru Capacitor Sekarang saatnya menjalankan kembali. npx cap sync Tanpa menyadari, Anda sekarang sudah selesai, jadi mari lihat aplikasi di perangkat!

Buat dan Deploy aplikasi native

Untuk mengembangkan aplikasi iOS, Anda memerlukan

Xcode terinstal, dan untuk aplikasi Android, Anda memerlukan 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 dalam pengembangan mobile native, Anda dapat menggunakan

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

__CAPGO_KEEP_1__

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 play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:

xcode-run

Selamat! Anda telah berhasil mengirimkan aplikasi web React ke perangkat mobile. Berikut adalah contoh:

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

Capacitor Live Reload

Sekarang Anda mungkin sudah terbiasa dengan hot reload dengan semua framework modern, dan kabar baiknya adalah Anda dapat memiliki fungsi yang sama pada perangkat mobile dengan upaya minimal!

Aktifkan akses ke aplikasi 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 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: 'out',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Pastikan Anda menggunakan alamat IP dan port yang benarSaya telah menggunakan port React default dalam contoh ini.

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

npx cap copy

Perintah ini mirip dengan copy tetapi hanya akan syncmenjalankan perintah ini Salin perubahan yang dibuat ke folder web dan konfigurasi, tanpa memperbarui proyek native.

Anda dapat menyelesaikan aplikasi 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 rekonstruksi proyek native. Ini karena file native 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 React default 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 menginstal plugin yang cukup sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin Sharetetapi itu tetap membuka dialog berbagi asli! 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;

seperti ini:

npx cap sync

Seperti yang 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:

react-__CAPGO_KEEP_0__-share

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

Menambahkan Konsta UI Saya telah bekerja selama tahun-tahun dengan Ionic tailwindcss.

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

Anda perlu memiliki tailwind sudah terinstall

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

npm i konsta

Selain itu, Anda perlu mengubah 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 Tailwind CSS default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas bantuan yang diperlukan untuk Konsta UI.

Sekarang kami perlu mengatur komponen utama untuk mengatur beberapa parameter global (seperti theme).

Kami perlu mengelilingi aplikasi utuh dengan App di 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 semua sudah terkonfigurasi, kita bisa menggunakan komponen Konsta UI React di aplikasi React kita.

Bukankah lebih baik kita membuka src/App.js dan ubahlah menjadi seperti ini:

// 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 live reload 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 sederhana untuk berbagi code dan menjaga antarmuka pengguna yang konsisten.

Dengan penambahan Capgo, bahkan lebih mudah lagi untuk menambahkan pembaruan live ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.

Jika Anda ingin belajar bagaimana menambahkan Capgo ke aplikasi React Anda, lihatlah artikel berikutnya:

Membangun Aplikasi Mobile dengan React dan Capacitor