Tutorial React Native Cara Gampang Menciptakan Aplikasi Berita

Tutorial React Native Membuat Aplikasi Berita

 - React Native merupakan framework yang dikembangkan oleh Facebook untuk membangun aplikasi berbasis mobile. React Native memakai Javascript sebagai codebase yang memungkinkan untuk dipakai pada platform Android dan iOS. Fitur hot reload pada React Native sangat membantu dalam proses pengembangan aplikasi.

Pada tutorial ini, kita akan berguru menciptakan aplikasi isu sederhana dengan memakai React Native. Pertama, pastikan pada laptop kalian sudah menginstal React Native, bagaimana bila belum pernah menginstal React Native ? Kalian sanggup membukanya pada dokumentasi cara instal react native. 

Ikuti langkah-langkah berikut untuk menciptakan aplikasinya :

1. Membuat akun di News API

Pertama, mendaftar akun di News API untuk mendapatkan API Key, pilih tombol Get API Key.

Selanjutnya isi formulir pendaftaran, dan jangan lupa untuk verifikasi email bila diperlukan. Setelah berhasil mendaftar, kini kalian sudah mendapatkan API Key menyerupai pada gambar berikut :

2. Mencoba menampilkan data dari News API

Untuk mencoba menampilkan data dari News API, kalian sanggup memakai Postman. Jika belum menginstal Postman, download di website resmi Postman.

Sekarang pada halaman News API kembali ke home, pilih tombol < Back to home pada pojok kiri atas. Pilih sajian News Source, sebagai referensi saya akan menampilkan isu untuk wilayah Indonesia, pilih country Indonesia. 

Kalian sanggup menentukan sub kategori isu yang akan ditampilkan, saya menentukan kategori technology. Kemudian copy url endpoint dari API :

Buka aplikasi postman, dan coba lakukan request dengan metode GET maka alhasil akan sepert berikut :

3. Membuat project react native

Buat project react native, pilih salah satu dari instalasi React Native sebelumnya :

React Native versi CLI :

react-native init NewsApp 

React Native versi expo :

expo init NewsApp 

Selanjutnya untuk struktur projectnya, buat folder gres dan beri nama screens.

Tambahkan 2 file gres pada folder screens :
- NewsPage.js : untuk halaman menampilkan berita
- NewsItem.js : untuk menciptakan tampilan item berita

4. Buka file NewsPage.js

Buka file NewsPage.js yang sudah dibuat, pertama tambahkan isyarat untuk import library yang diharapkan :

import React, {Component} from 'react'; import {     ScrollView,      FlatList,      ActivityIndicator } from 'react-native'; 

Tambahkan isyarat dibawahnya untuk menciptakan class gres :

export default class NewsPage extends Component {     constructor() {         super();         this.state = { isLoading: true }     } } 

Pada constructor, kita menciptakan state untuk menangani ketika melaksanakan request menampilkan loading, dan ketika berhasil mendapatkan request loading tidak ditampilkan.

Tambahkan isyarat didalam class NewsPage untuk mengambil data dari API, saya memakai fetch bawaan dari React Native. Kalian sanggup mempelajarinya pada Networking dengan React Native.

async componentDidMount() {     try {         const url = 'https://newsapi.org/v2/top-headlines?country=id&category=technology&apiKey=3964c57788ee4edcad4038d6bc318c18';         const response = await fetch(url);         const responseJson = await response.json();         this.setState({             isLoading: false,             dataSource: responseJson.articles         }, function () {             console.log(responseJson.status);             console.log(responseJson.totalResults);         });     }     catch (error) {         console.log(error);     } } 

Sebagai catatan, proses request ke API dilakukan ketika componentDidMount, yaitu pada ketika aplikasi akan dimuat.

5. Buka file NewsItem.js

Tambahkan isyarat berikut untuk menciptakan tampilan item dari isu yang akan ditampilkan :

Buka kembali file NewsPage.js, tambahkan import untuk file NewsItem.js dengan isyarat berikut :

import NewsItem from './NewsItem.js'; 

Kemudian tambahkan isyarat didalam class NewsPage sesudah isyarat request ke API :

Penjelasan isyarat diatas :
- render dipakai untuk menampilkan pada layar
- ActivityIndicator dipakai untuk progress kafe ketika melaksanakan request ke API
- ScrollView dipakai untuk komponen yang sanggup discroll
- FlatList dipakai untuk menciptakan list yang datanya diambil dari response API

6. Ubah default aplikasi

Sebelum mencoba dijalankan, ubah untuk default file bawaan dengan file yang sudah kita buat sebelumnya, caranya ada 2 versi sesuai dengan instalasi React Native kalian.

Untuk React Native CLI :
Buka file index.js pada root project, kemudian ganti pada url import dengan file yang sudah dibuat.
Contoh dari project saya, menjadi menyerupai berikut :

/**  * @format  */  import {AppRegistry} from 'react-native'; import App from './screens/NewsPage'; import {name as appName} from './app.json';  AppRegistry.registerComponent(appName, () => App); 

Untuk React Native versi expo :
Buka file AppEntry.js pada folder node_modules, kodenya menjadi menyerupai berikut :

import { KeepAwake, registerRootComponent } from 'expo'; import App from '../../screens/NewsPage';  if (__DEV__) {   KeepAwake.activate(); }  registerRootComponent(App); 

Sekarang kalian sanggup mencoba menjalankan aplikasinya pada emulator atau device, alhasil menyerupai berikut :

Untuk source code lengkapnya, kalian sanggup membukanya di repository github saya.

Sekian Tutorial React Native Cara Praktis Membuat Aplikasi Berita, bila ada pertanyaan atau mau berdiskusi sanggup lewat kolom komentar. Subscribe website codingtive melalui form email dibawah untuk mendapatkan update artikel dan tutorial. Terima kasih sudah berkunjung 

Share this post