Created by: Anisa Damayanti, S.Kom. For Study Purpose Only!
Pada bagian sebelumnya (Part 5) kita telah menyelesaikan setup halaman profile di sisi web menggunakan CodeIgniter 4. Pada tahap ini kita akan melangkah lebih jauh dengan menghubungkan back-end API dari CodeIgniter 4 ke front-end mobile menggunakan Snack Expo (React Native).
Langkah ini merupakan bagian penting dari pengembangan sistem yang lebih modern, karena memungkinkan data dari website (back-end) ditampilkan secara real-time pada perangkat mobile, baik menggunakan emulator maupun perangkat fisik (smartphone).
A. Pengantar & Tujuan
Integrasi API menjadi jembatan antara back-end (server) dan tampilan mobile (client). Dalam proyek ini, tujuan utamanya:
Membuat endpoint API di CodeIgniter4 untuk blog dan profile penulis (keseluruhan data profile termasuk jumlah posting).
Menghubungkan aplikasi React Native (Snack Expo) agar bisa memanggil API tersebut (fetch), menampilkan data blog & profile, melakukan refresh, serta menampilkan foto profil ataupun gambar pada blog.
Hasil yang diharapkan: ketika seseorang menambahkan blog melalui website back-end, maka aplikasi mobile akan langsung memuat data terbaru. Demikian juga profile penulis hanya akan muncul di aplikasi setelah penulis membuat postingan minimal 1 post.
Baca artikel mengenai Konsep React Native dan Snack Expo di sini
[windows] contoh menjalankan perintah php -S 10.xx.xx.xx:8080 -t public
[macOS] tampilan terminal jika berhasil menjalankan php spark serve
[windows] tampilan terminal jika berhasil menjalankan php spark serve
Selanjutnya mencoba memanggil API Profile pada Web Browser dengan mengetikan url berikut: IPv4Address:8080/api/profiles, kemudian tekan Enter
Contoh memanggil url 172.xx.xx.xx:8080/api/profiles dengan metode php spark serve
D. Langkah-langkah Membangun Front-end Mobile Snack Expo
Pada web browser, buka laman Expo.dev dan disarankan untuk login dengan akun gmail yang dimiliki sebelum melanjutkan ke tahapan selanjutnya
Contoh menjalankan aplikasi bernama happy red cake di emulator website Snack Expo
1. Persiapan Halaman Splash Screen dan Home Screen
Setelah memiliki 1 project snack expo, silakan untuk mengunggah logo project di dalam folder assets
Contoh mengunggah logo bernama logomyblog.png
Buatlah file baru bernama PageHeader.js di dalam folder components
Tambahkan isi file PageHeader.js dengan paragraf script berikut lalu simpan
Buatlah folder baru yang bernama constants
Kemudian di dalam folder constants, buatlah file baru bernama color.js
Tambahkan isi file color.js dengan paragraf script berikut lalu simpan
Buatlah folder baru yang bernama screens
Kemudian di dalam folder screens, buatlah file baru bernama SplashScreen.js
Tambahkan isi file SplashScreen.js dengan paragraf script berikut lalu simpan
Pada file App.js ubahlah seluruh script yang ada dengan paragraf script berikut lalu simpan
Jika muncul error seperti di bawah ini, klik Add depedency
Klik Add depedency sampai tidak memunculkan error
Bukalah aplikasi Expo Go pada perangkat fisik Android/iOS, login menggunakan akun yang sama dengan Snack Expo, lalu pilih folder project yang sedang dibangun
Contoh menjalankan folder project yang bernama MyBlog
Di dalam folder screens, buatlah file baru bernama HomeScreen.js
Copy seluruh paragraf script berikut dan Paste ke dalam file HomeScreen.js lalu simpan
import React,{useEffect,useState} from "react";import {SafeAreaView,FlatList,Text,TouchableOpacity,RefreshControl,View,StyleSheet} from "react-native";import {ActivityIndicator} from "react-native-paper";import {themeColor} from "../constants/colors";import PageHeader from "../components/PageHeader";export default function HomeScreen({navigation}){ return (<SafeAreaViewstyle={styles.container}><PageHeadertitle="Welcome to Our Blog"subtitle="Discover the latest stories and creative writings from our blogger"/></SafeAreaView>);}conststyles=StyleSheet.create({ container:{ flex:1, backgroundColor:themeColor,}, card:{ backgroundColor:"#fff", padding:15, marginHorizontal:18, marginBottom:12, borderRadius:12, shadowColor:"#000", shadowOpacity:0.1, shadowOffset:{ width:0, height:3}, shadowRadius:5, elevation:4, borderWidth:1, borderColor:"rgba(230,230,230,0.7)",}, title:{ fontSize:18, fontWeight:"600", color:"#222", marginBottom:4,}, meta:{ fontSize:12, color:"#777", marginBottom:6,}, content:{ color:"#666",}, button:{ marginTop:10, marginBottom:25, padding:12, backgroundColor:"#333", borderRadius:8, alignItems:"center", marginHorizontal:18,}, buttonText:{ color:"#fff", fontWeight:"600",}, loadingContainer:{ flex:1, justifyContent:"center", alignItems:"center", backgroundColor:themeColor,}, loadingText:{ marginTop:10, color:"#333", fontSize:16,}, overlay:{ position:"absolute", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(255,255,255,0.7)", justifyContent:"center", alignItems:"center", zIndex:10,}, overlayText:{ marginTop:10, color:"#333", fontSize:16,},});
JavaScript
Selanjutnya tambahkan paragraf script berikut di dalam file HomeScreen.js lalu simpan
Ubah file App.js dengan mengimpor beberapa depedency di bagian atas sebelum function App
Kemudian tambahkan function MainTabs lalu simpan
Selanjutnya alamatkan function MainTabs pada bagian NavigationContainer lalu simpan
Jika muncul error seperti di bawah ini, klik Add depedency
Klik Add depedency sampai tidak memunculkan error
Bukalah aplikasi Expo Go pada perangkat fisik Android/iOS, login menggunakan akun yang sama dengan Snack Expo, lalu pilih folder project yang sedang dibangun
Contoh menjalankan folder project yang bernama MyBlog dengan halaman Home yang sudah terisi data
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does.
let's work together!
