Membangun Aplikasi Seluler Dengan Ionic Dan React

Ionic baru-baru ini menambahkan dukungan untuk React; jadi sekarang, pengembang Bereaksi bisa mendapatkan keuntungan dari Ionic untuk membangun aplikasi seluler hybrid dan aplikasi web progresif (PWA). Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana memulai menggunakan Ionic dengan React dengan membangun aplikasi demo sederhana dari awal.

Prasyarat

Untuk mengikuti tutorial ini dengan benar, Anda memerlukan prasyarat berikut:

• versi terbaru Node.js dan npm terinstal di sistem Anda,
• pengetahuan tentang TypeScript dan React.

Anda dapat memeriksa apakah Anda telah menginstal versi Node.js (v10) terbaru dengan menjalankan perintah berikut:

 $ node -v

Memperkenalkan React Dan Ionic

Mari kita mulai dengan pengenalan singkat untuk React dan Ionic.

Menurut situs resmi:

“React adalah library JavaScript deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. Ini memungkinkan Anda membuat UI kompleks dari potongan kode kecil dan terisolasi yang disebut 'komponen'.”

React berfokus pada pembuatan UI dan tidak menyediakan alat bawaan apa pun untuk tugas umum yang diperlukan dalam pengembangan web, seperti mengambil data jarak jauh dan perutean, jadi Anda harus menggunakan beberapa pustaka pihak ketiga yang ada untuk tugas ini.

Menurut situs web Ionic:

“Ionic Framework adalah perangkat UI seluler open-source gratis untuk mengembangkan aplikasi lintas platform berkualitas tinggi untuk iOS, Android, dan web asli — semuanya dari satu basis kode.”

Pada dasarnya, ini adalah sekumpulan komponen UI yang dapat Anda gunakan dengan JavaScript biasa atau kerangka kerja atau pustaka front-end populer, seperti Angular, React atau Vue, untuk membangun aplikasi seluler hybrid dan PWA.

Dalam tutorial ini, kita akan melihat dan menggunakan beberapa komponen Ionic UI seperti berikut:

• IonMenu: Dengan ini, panel samping navigasi akan meluncur dari sisi tampilan saat ini.
• IonToolbar: Bar atas ini diposisikan di atas atau di bawah konten.
• IonHeader: Komponen induk ini menyimpan komponen toolbar.
• IonContent: Komponen ini menyediakan area konten, dengan metode untuk mengontrol area yang dapat digulir dan hal lainnya. Anda hanya memerlukan satu komponen konten di dalam satu tampilan.
• IonList: Komponen ini berisi item dengan konten data serupa, seperti gambar dan teks. Itu terdiri dari objek IonItem.
• IonItem: Komponen ini mungkin berisi teks, ikon, avatar, gambar, input, dan elemen asli atau kustom lainnya.
• IonButton: Komponen ini menyediakan elemen yang dapat diklik, yang dapat digunakan dalam formulir atau di mana pun yang membutuhkan fungsionalitas tombol standar yang sederhana.
  

Menginstal Ionic CLI v5

Antarmuka baris perintah (CLI) Ionic, versi 5, memiliki dukungan untuk membuat proyek Ionic berdasarkan React. Jadi, mari kita mulai dengan menginstal alat dari npm.

Buka CLI, dan jalankan perintah berikut:

 $ npm install -g ionic

Pada saat penulisan, Ionic's CLI v5.2.3 adalah yang terbaru.

Catatan : *Menurut cara Anda menginstal Node.js di sistem Anda, Anda mungkin perlu menambahkan sudo sebelum perintah Anda di macOS atau Linux atau menjalankan command prompt sebagai administrator di Windows jika Anda mendapatkan kesalahan izin. Anda juga dapat dengan mudah memperbaiki izin npm Anda atau menggunakan alat seperti nvm.*

Selanjutnya, instal Cordova Resources (yang digunakan untuk menghasilkan sumber daya Cordova secara lokal) dan Native Run (digunakan untuk menyebarkan binari aplikasi ke perangkat):

 $ npm install -g cordova-res native-run

Ini diperlukan hanya jika Anda ingin menguji aplikasi Anda pada perangkat seluler atau emulator yang sebenarnya.

Membuat Proyek Ionik Dan Bereaksi

Sekarang, mari kita buat proyek berdasarkan React. Kembali ke terminal Anda, pastikan Anda berada di direktori kerja Anda, dan jalankan perintah berikut:

 $ ionic start myApp --type=react

Kami menggunakan --type=react untuk menghasilkan proyek berdasarkan React. Anda selanjutnya harus memilih template starter dari yang tersedia. Mari pilih menu sidemenu untuk template pemula dengan menu samping dan navigasi.

Setelah membuat proyek dan menginstal dependensi, Anda dapat menyajikan aplikasi Anda secara lokal menggunakan perintah berikut:

 $ cd ./myApp $ ionic serve

Aplikasi Anda akan tersedia dari alamat https://localhost:8100, dan Anda benar-benar dapat menggunakan browser web Anda untuk mulai memainkannya.

Ionic disebut kerangka kerja seluler hibrida karena menggunakan teknologi web yang awalnya dirancang untuk membuat aplikasi web, bersama dengan wadah asli (Cordova atau Capacitor), untuk membangun aplikasi seluler tanpa menggunakan teknologi asli untuk platform target, seperti Java atau Kotlin untuk Android atau Swift untuk iOS.

Karena aplikasi seluler Anda sebenarnya adalah aplikasi web, Anda dapat melakukan sebagian besar pengembangan dengan menguji di browser web tanpa menggunakan emulator atau perangkat seluler nyata, kecuali untuk menguji fitur perangkat asli seperti kamera atau penyimpanan SQLite, jika Anda ' telah menggunakannya di aplikasi Anda. Bahkan, dimungkinkan untuk menggunakan teknik tertentu untuk meniru plugin yang menyediakan fitur asli dan melakukan seluruh pengujian selama pengembangan di browser web Anda.

Membersihkan Proyek Kami

Kami memiliki struktur dasar aplikasi, dengan dua halaman (beranda dan daftar) dan sebuah menu. Mari kita hapus halaman daftar karena itu hanya kode boilerplate.

Pertama, hapus file src/pages/List.tsx , lalu buka file src/App.tsx , dan hapus entri untuk halaman daftar dari larik appPages :

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

Juga, hapus impor halaman daftar dari file:

 import List from './pages/List';

Selanjutnya, hapus <Route path="/:tab(home)/list" component={List} exact={true} /> dari komponen App :

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

Komponen App adalah komponen root yang di-render oleh aplikasi kita. Jika Anda membuka file src/index.tsx , Anda akan menemukan kode berikut:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

Metode render() digunakan untuk merender elemen React ke dalam DOM di elemen root yang disediakan.

Bertema Aplikasi

Setelah membuat, menyajikan, dan membersihkan proyek Ionic kita, sekarang mari kita lihat bagaimana kita dapat mengubah warna UI agar terlihat lebih profesional.

Mari kita mulai dengan menu samping. Buka file src/components/Menu.tsx , dan tambahkan atribut color dengan nilai primary ke komponen IonToolbar , IonContent , IonList dan IonItem UI:

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

Ionic menyediakan beberapa warna default (primer, sekunder, tersier, sukses, peringatan, bahaya, terang, sedang dan gelap) yang dapat digunakan untuk mengubah warna komponen UI. Warna dapat diterapkan ke komponen ionik untuk mengubah warna default menggunakan atribut color . Lihat “Warna” untuk informasi lebih lanjut.

Warna-warna ini memiliki nilai default, tetapi Anda dapat menyesuaikannya melalui beberapa variabel CSS yang telah ditentukan sebelumnya. Lihat “Memodifikasi Warna“.

Ini adalah screenshot menu kami:

Selanjutnya, mari kita ubah warna halaman Beranda. Buka file src/pages/Home.tsx , dan atur atribut color komponen IonToolbar dan IonContent ke primary :

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

Ini adalah tangkapan layar halaman:

Memasang Axios Dan Mengkonsumsi REST API

Kita akan melihat cara menginstal Axios dan menggunakan RESTful API pihak ketiga di aplikasi kita, dan kita juga akan melihat cara menampilkan data yang diambil menggunakan kartu Ionic dan komponen daftar.

Setelah bertema aplikasi kita, sekarang mari kita lihat cara mengambil data menggunakan Axios. Kami akan menggunakan API pihak ketiga yang tersedia dari NewsAPI.org.

Pertama, kita perlu mengambil kunci API, sehingga kita dapat berkomunikasi dengan API. Buka halaman pendaftaran, masukkan informasi Anda, dan daftarkan akun. Anda akan diberikan kunci API; perhatikan itu, dan mari kita lanjutkan.

Kembali ke terminal Anda, dan jalankan perintah berikut untuk menginstal Axios:

 $ npm install axios --save

Selanjutnya, buka file src/pages/Home.tsx , dan mulai dengan mengimpor Axios dan IonButton :

 import { IonButton } from '@ionic/react'; import axios from 'axios';

Selanjutnya, tentukan variabel konstan API_KEY dan URL :

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

Di variabel URL, kami akan menambahkan titik akhir untuk mendapatkan berita utama teratas dari sumber kami, TechCrunch. Anda dapat menggunakan sumber apa pun yang Anda inginkan dari sumber yang tersedia.

Catatan : Pastikan untuk meletakkan kunci API Anda sendiri di variabel API_KEY .

Selanjutnya, tentukan metode fetchArticles() sebagai berikut:

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

Kami cukup memanggil metode axios() untuk mengirim permintaan GET ke titik akhir berita, dan hasil dari metode ini adalah janji yang perlu diselesaikan untuk mendapatkan data berita.

Selanjutnya, perbarui komponen HomePage sebagai berikut untuk memanggil metode fetchArticles() dan menyelesaikan janji yang dikembalikan:

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

Dalam komponen fungsi kami, pertama-tama kami memanggil kait useState() dari React untuk membuat variabel status articles , yang akan menampung artikel berita setelah kami mengambilnya dari API.

useState() mengembalikan variabel status, yang memiliki array kosong sebagai nilai awalnya dan fungsi yang dapat kita gunakan untuk mengubah nilai variabel. Kami menggunakan tugas destrukturisasi untuk membongkar nilai dari pasangan yang dikembalikan ke dalam variabel yang berbeda (yaitu articles dan setArticles() ).

Selanjutnya, kita memanggil kait useEffect() untuk melakukan efek samping di komponen kita. Dalam kasus kami, efek sampingnya adalah mengambil data dari API berita menggunakan metode fetchArticles() , yang mengembalikan sebuah janji. Setelah janji diselesaikan, kami memanggil metode setArticles() untuk menetapkan data berita ke variabel articles .

Baik useState() dan useEffect() adalah kait React bawaan yang diperkenalkan di React 16.8; mereka hanya membiarkan Anda menggunakan status dan fitur Bereaksi lainnya tanpa harus menulis kelas. useEffect() setara dengan memanggil metode siklus hidup componentDidMount , componentDidUpdate dan componentWillUnmount yang digabungkan dalam komponen berbasis kelas.

Terakhir, dalam template tampilan, kita mengulangi array articles menggunakan metode map() , dan kita menampilkan judul setiap artikel berita di dalam elemen IonItem dari komponen IonList , dan juga tombol yang membawa kita ke halaman artikel lengkap.

Ini adalah tangkapan layar halaman:

Anda dapat menemukan kode sumber di repositori GitHub ini.

Kesimpulan

Dalam tutorial ini, kami telah mulai menggunakan Ionic dan React dan menggunakannya untuk membangun aplikasi seluler sederhana yang mengambil dan menampilkan data berita dari API pihak ketiga menggunakan klien Axios. Kita juga telah melihat cara menggunakan hook di React — yaitu, useState() dan useEffect() — untuk membuat status dan melakukan efek samping di dalam komponen fungsi React. Dengan Ionic, kita telah melihat betapa mudahnya menghasilkan proyek berdasarkan React dan bagaimana kita dapat membuat tema aplikasi menggunakan atribut warna dari komponen.