Membangun Aplikasi Seluler dengan React.js Pemurnian dan Capacitor

Tutorial ini akan mengajak 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 antarmuka native menggunakan Konsta UI.

Capacitor memungkinkan Anda mengubah 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 tahu, aplikasi React.js Anda akan 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 tampilan web native sambil menghasilkan proyek Xcode dan Android Studio native. Selain itu, melalui plugin-nya, Anda dapat mengakses fitur perangkat native seperti kamera melalui jembatan JS.

Capacitor menawarkan cara yang sederhana untuk membuat aplikasi mobile native tanpa harus menghadapi kesulitan atau kurva belajar yang curam. Fungsionalitas API dan sederhana membuatnya mudah untuk diintegrasikan ke dalam proyek Anda.

Pengaturan Aplikasi React.js

Mari kita lakukan 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 sekejap. 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 penggabung 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.”

Kemudian, 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 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

Direktori iOS dan Android saat ini sudah hadir di proyek React.js Anda.

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

Kemudian, update direktori web dalam hal ini 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 akan membangun proyek React.js Anda, sedangkan 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 tanpa 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 keduanya:

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 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-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 menginstal ulang aplikasi Anda 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 diinstal, seperti kamera, maka diperlukan pembangunan ulang proyek native Anda. Hal ini karena file-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 0, yang memicu dialog berbagi asli:

npm i @capacitor/share

Untuk menggunakan itu, import paket dan panggil fungsi yang sesuai dari aplikasi kami. Pertimbangkan untuk: share() App.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;

Mengimplementasikan Konsta UI: UI Mobile yang Lebih Menarik npx cap sync.

Untuk pengalaman UI 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:

Ubah file Anda seperti ini:

npm i konsta

Konsta UI akan melengkapi konfigurasi CSS Tailwind Anda dengan variasi dan utilitas tambahan yang diperlukan untuk Konsta UI. tailwind.config.js Sekarang, atur komponen App utama untuk menetapkan parameter global seperti

// 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 parameter global seperti

parameter global seperti theme. Tutup aplikasi utama dengan App 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')
);

Gunakan komponen React Konsta UI di halaman React.js kita. Buka src/App.js dan ubahnya menjadi:

// 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 semua telah dilakukan dengan benar, Anda seharusnya melihat integrasi santai antara React dan Konsta UI untuk memberikan aplikasi seluler Anda tampilan asli.

Kesimpulan

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

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

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

Membangun Aplikasi Mobile dengan React.js Pemurnian dan Capacitor