Tutorial React Native Cara Mudah Membuat Aplikasi Berita

Tutorial React Native Membuat Aplikasi Berita

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

Pada tutorial ini, kita akan belajar membuat aplikasi berita sederhana dengan menggunakan React Native. Pertama, pastikan pada laptop kalian sudah menginstal React Native, bagaimana jika belum pernah menginstal React Native ? Kalian dapat membukanya pada dokumentasi cara instal react native. 

Ikuti langkah-langkah berikut untuk membuat 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 jika diperlukan. Setelah berhasil mendaftar, sekarang kalian sudah mendapatkan API Key seperti pada gambar berikut :

2. Mencoba menampilkan data dari News API

Untuk mencoba menampilkan data dari News API, kalian dapat menggunakan 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 menu News Source, sebagai contoh saya akan menampilkan berita untuk wilayah Indonesia, pilih country Indonesia. 

Kalian dapat memilih sub kategori berita yang akan ditampilkan, saya memilih kategori technology. Kemudian copy url endpoint dari API :

Buka aplikasi postman, dan coba lakukan request dengan metode GET maka hasilnya 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 baru dan beri nama screens.

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

4. Buka file NewsPage.js

Buka file NewsPage.js yang sudah dibuat, pertama tambahkan kode untuk import library yang diperlukan :

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

Tambahkan kode dibawahnya untuk membuat class baru :

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

Pada constructor, kita membuat state untuk menangani ketika melakukan request menampilkan loading, dan ketika berhasil menerima request loading tidak ditampilkan.

Tambahkan kode didalam class NewsPage untuk mengambil data dari API, saya menggunakan fetch bawaan dari React Native. Kalian dapat 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 saat aplikasi akan dimuat.

5. Buka file NewsItem.js

Tambahkan kode berikut untuk membuat tampilan item dari berita yang akan ditampilkan :

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

import NewsItem from './NewsItem.js';

Kemudian tambahkan kode didalam class NewsPage setelah kode request ke API :

Penjelasan kode diatas :
- render digunakan untuk menampilkan pada layar
- ActivityIndicator digunakan untuk progress bar ketika melakukan request ke API
- ScrollView digunakan untuk komponen yang dapat discroll
- FlatList digunakan untuk membuat 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 seperti 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 seperti berikut :

import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../screens/NewsPage';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

Sekarang kalian dapat mencoba menjalankan aplikasinya pada emulator atau device, hasilnya seperti berikut :

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

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

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: