Blog Development and Profile Management Using CodeIgniter4 (Part 6 – Integrating Backend API to Snack Expo Mobile App)

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:

1. Membuat endpoint API di CodeIgniter4 untuk blog dan profile penulis (keseluruhan data profile termasuk jumlah posting).
2. 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

React Native with Snack Expo

B. Tools Equipment

• Server XAMPP
• IDE Visual Studio Code
• Web Browser with latest version (Chrome, Chrome Developer, Mozilla Firefox, Microsoft Edge)
• IP Address dari WIFI atau Hotspot
• Perangkat fisik Android/iOS
• IDE Snack Expo
• Project myblog-nama-kelas yang sudah dibuat sebelumnya (Part 1-5)
• Pada terminal folder project myblog-nama-kelas menjalankan perintah
  – macOS: php spark serve –host 0.0.0.0 –port 8080
  – windows: php -S IPv4Address:8080 -t public

C. Langkah-langkah Aktifasi Endpoint API CodeIgniter4

• Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start

• Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya

1. Persiapan Konfigurasi Blog Model, Controller, & Route

Blog Model

• Bukalah folder app/Models/BlogModel.php
• Tambahkan isi file BlogModel.php dengan paragraf script berikut lalu simpan

Blog Controller

• Bukalah folder app/Controllers
• Buatlah folder baru bernama Api di dalam folder app/Controllers

• Selanjutnya buatlah file baru bernama BlogApiController.php di dalam folder app/Controllers/Api

• Tambahkan isi file BlogApiController.php dengan paragraf script berikut lalu simpan

Route

• Bukalah folder app/Config
• Ubah file Routes.php dengan mendaftarkan url baru untuk memanggil API Blog lalu simpan

• Kemudian pada file App.php cari line $baseURL dan ubah http://localhost/myblog-nama-kelas/public/ menjadi http://IPv4Address:8080/ lalu simpan

• Pada terminal di dalam folder project myblog-nama-kelas jalankan perintah:
  – macOS: php spark serve –host 0.0.0.0 –port 8080
  – windows: php -S IPv4Address:8080 -t public

• Selanjutnya mencoba memanggil API blog pada Web Browser dengan mengetikan url berikut: IPv4Address:8080/api/blogs, kemudian tekan Enter

2. Persiapan Konfigurasi Profile Model, Controller, & Route

Profile Model

• Bukalah folder app/Models/ProfileModel.php
• Tambahkan isi file ProfileModel.php dengan paragraf script berikut lalu simpan

Profile Controller

• Bukalah folder app/Controllers
• Buatlah file baru bernama ProfileApiController.php di dalam folder app/Controllers/Api

• Tambahkan isi file ProfileApiController.php dengan paragraf script berikut lalu simpan

Route

• Bukalah folder app/Config
• Ubah file Routes.php dengan mendaftarkan url baru untuk memanggil API Profile lalu simpan

• Pada terminal di dalam folder project myblog-nama-kelas jalankan perintah:
  – macOS: php spark serve –host 0.0.0.0 –port 8080
  – windows: php -S IPv4Address:8080 -t public

• Selanjutnya mencoba memanggil API Profile pada Web Browser dengan mengetikan url berikut: IPv4Address:8080/api/profiles, kemudian tekan Enter