Tutorial React Native Cara Mudah Membuat Aplikasi Berita
![]() |
Tutorial React Native Membuat Aplikasi Berita |
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 NewsAppReact Native versi expo :
expo init NewsApp
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 :
Untuk React Native versi expo :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);
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
Belum ada Komentar untuk "Tutorial React Native Cara Mudah Membuat Aplikasi Berita"
Posting Komentar