Program Studi Bisnis Digital • FEB UNDIP

Lab Pemrograman

Pertemuan 4 — Integrasi Script Python Dasar ke Aplikasi React Native

Bagaimana perhitungan harga, diskon, dan ongkos kirim yang ditulis dalam Python bisa "berbicara" dengan aplikasi mobile yang Anda bangun memakai React Native.

RPS MINGGU 4 • 2X50 MENIT

Selamat datang kembali di Lab Pemrograman. Pertemuan lalu Anda sudah mulai membangun komponen aplikasi dengan HTML, CSS, JavaScript, dan React Native — sekarang bayangkan komponen-komponen itu perlu melakukan sesuatu yang lebih rumit, misalnya menghitung skor kelayakan kredit UMKM, memberi rekomendasi produk, atau memproses data penjualan dalam jumlah besar. Pekerjaan semacam ini biasanya lebih mudah ditulis dengan Python karena ekosistemnya yang kaya untuk pengolahan data, tetapi aplikasi mobile Anda ditulis dengan JavaScript lewat React Native. Pertanyaannya: bagaimana caranya dua bahasa pemrograman yang berbeda ini bisa saling bekerja sama dalam satu aplikasi? Hari ini kita akan menjawab pertanyaan itu, dari konsep dasarnya sampai mempraktikkan sendiri bagaimana aplikasi React Native Anda memanggil sebuah script Python dan menampilkan hasilnya di layar.

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda mampu:

TUJUAN 1–2

Menjelaskan mengapa Python tidak bisa berjalan langsung di dalam aplikasi React Native, dan pola arsitektur yang menjembataninya.
Membangun script Python sederhana dan membungkusnya menjadi API (glos: Application Programming Interface, "pintu" komunikasi antar-program) yang bisa diakses lewat internet.

TUJUAN 3–4

Memanggil API Python tersebut dari komponen React Native memakai fetch(), lalu menampilkan hasilnya di layar aplikasi.
Menyusun alur data ujung-ke-ujung: input pengguna → proses Python → tampilan React Native, lengkap dengan penanganan galat sederhana.

Konteks: seluruh contoh hari ini memakai kasus khas bisnis digital Indonesia — kasir UMKM, checkout toko online, dan kalkulator ongkos kirim.

Empat tujuan hari ini disusun berjenjang, sama seperti pertemuan-pertemuan sebelumnya. Kita mulai dari memahami konsep dasar mengapa dua bahasa pemrograman berbeda ini perlu "dijembatani", bukan langsung digabung dalam satu file. Setelah itu Anda akan menulis sendiri script Python kecil dan membungkusnya menjadi layanan yang bisa diakses dari luar. Langkah ketiga, Anda akan belajar sisi React Native-nya, yaitu cara memanggil layanan tersebut dan menampilkan hasilnya kepada pengguna. Terakhir, kita satukan semuanya menjadi satu alur kerja yang utuh, termasuk apa yang terjadi kalau ada kesalahan di tengah jalan, misalnya koneksi internet terputus. Semua konsep ini akan langsung Anda pakai lagi di Pertemuan 5 saat kita membahas state dan props secara lebih mendalam, jadi pastikan Anda benar-benar paham polanya, bukan sekadar menghafal kodenya.

Mengapa Integrasi Ini Penting?

Bayangkan Anda membangun aplikasi kasir untuk UMKM. Aplikasinya dibuat dengan React Native, tetapi Anda ingin memakai kekuatan Python untuk hal berikut.

HITUNGAN BISNIS

Total harga, diskon berjenjang, dan pajak (PPN) yang aturannya sering berubah — lebih mudah dikelola terpusat di Python.

OLAH DATA

Rekomendasi produk, ramalan stok, atau analisis penjualan — Python punya pustaka data science yang matang.

LOGIKA BERSAMA

Satu aturan bisnis dipakai ulang oleh aplikasi mobile, website admin, dan laporan — ditulis sekali di Python.

Pola ini disebut arsitektur client-server: React Native berperan sebagai client (sisi yang dilihat pengguna), Python berperan sebagai server (sisi yang memproses data di belakang layar).

Mari kita mulai dengan gambaran nyata. Sebuah aplikasi kasir UMKM yang dibangun dengan React Native perlu menghitung total belanja, menerapkan diskon, dan menambahkan pajak setiap kali transaksi terjadi. Anda bisa saja menulis logika ini langsung dalam JavaScript di dalam aplikasi, tetapi bayangkan kalau aturan diskon berubah setiap bulan, atau kalau pemilik toko juga punya website admin dan laporan penjualan yang butuh logika hitungan yang sama persis — kalau logikanya ditulis terpisah-pisah di banyak tempat, risiko salah hitung antar-platform jadi tinggi. Solusinya, logika hitungan itu ditulis sekali di Python sebagai "otak" terpusat, lalu aplikasi React Native, website, dan sistem laporan sama-sama memanggil otak yang sama itu. Pola arsitektur seperti ini disebut client-server, dan ini adalah salah satu pola paling umum dalam pengembangan aplikasi bisnis digital modern, termasuk aplikasi-aplikasi besar seperti Tokopedia maupun Gojek.

Bagian 1 dari 3

Konsep & Arsitektur Integrasi

Sebelum menulis kode, kita perlu paham dulu mengapa Python dan React Native tidak bisa "digabung langsung", dan jalur apa yang menghubungkan keduanya.

Kenapa Python Tidak Bisa "Ditempel" ke React Native?

React Native berjalan di atas mesin JavaScript (glos: program yang menerjemahkan kode JS jadi aksi di layar HP) — mesin ini tidak mengerti sintaks Python sama sekali.

REACT NATIVE

Ditulis dengan JavaScript.
Berjalan langsung di HP pengguna (Android/iOS).
Tugasnya: tampilan & interaksi pengguna.

PYTHON

Ditulis dengan Python, bahasa berbeda.
Tidak bisa dijalankan oleh HP pengguna secara langsung.
Harus dijalankan di server terpisah.

Analoginya seperti dua orang berbeda bahasa: keduanya tidak bisa "digabung jadi satu orang", tetapi bisa berkomunikasi lewat penerjemah — dalam pemrograman, penerjemah itu adalah API lewat internet.

Ini adalah kesalahpahaman paling umum bagi pemula: mengira Anda bisa menulis baris kode Python langsung di tengah-tengah file React Native, seperti mencampur dua bahasa dalam satu kalimat. Kenyataannya tidak bisa, karena keduanya berjalan di "mesin" yang sama sekali berbeda. Aplikasi React Native, begitu di-install di HP Android atau iPhone, dijalankan oleh mesin JavaScript yang tertanam di sistem operasi HP tersebut — mesin ini hanya mengerti JavaScript, sama sekali tidak mengenal sintaks Python. Sementara itu, Python biasanya dijalankan di komputer server, bukan di HP pengguna. Jadi kalau Anda ingin memakai kekuatan Python di dalam aplikasi mobile, satu-satunya cara adalah menjalankan Python-nya di tempat lain — sebuah server — lalu aplikasi React Native "menghubungi" server itu lewat internet untuk meminta hasil hitungannya. Bayangkan seperti Anda menelepon teman yang jago matematika untuk minta dihitungkan sesuatu, bukan tiba-tiba menjadi jago matematika sendiri.

Diagram Arsitektur: Jembatan React Native ↔ Python

Jalur komunikasi ini disebut HTTP request/response — format pesannya biasanya JSON (glos: JavaScript Object Notation, format teks terstruktur yang bisa dibaca kedua bahasa pemrograman).

Diagram inilah inti dari seluruh pertemuan hari ini, jadi mari kita cermati bersama. Di sisi kiri ada aplikasi React Native yang berjalan di HP pengguna — inilah yang disebut sisi client. Di sisi kanan ada server yang menjalankan Python, dibungkus dengan sebuah kerangka kerja bernama Flask yang akan kita pelajari sebentar lagi — inilah yang disebut sisi server. Ketika pengguna menekan tombol "hitung total" di aplikasi, React Native mengirim permintaan lewat internet ke server, permintaan ini disebut request, isinya misalnya harga barang yang perlu dihitung diskonnya. Server Python menerima permintaan itu, menjalankan fungsi Python untuk menghitung, lalu mengirim balik hasilnya ke aplikasi, ini disebut response. Format pesan yang dikirim bolak-balik ini biasanya berbentuk JSON, sebuah format teks sederhana berisi pasangan kunci dan nilai, mirip kamus, yang bisa dibaca dengan mudah baik oleh Python maupun JavaScript — inilah yang membuat JSON menjadi "bahasa universal" pertukaran data antar dua dunia pemrograman yang berbeda ini.

Tiga Pola Umum Integrasi Python

Ada beberapa cara menjembatani Python dan aplikasi mobile; hari ini kita fokus pada opsi pertama karena paling sederhana untuk pemula.

1. REST API (FLASK)

Python berjalan sebagai server kecil, dipanggil lewat fetch(). Fokus hari ini.

2. CLOUD FUNCTION

Script Python dijalankan otomatis di layanan cloud (mis. Google Cloud Functions) saat dipanggil — tanpa mengelola server sendiri.

3. SCRIPT BATCH

Python berjalan terjadwal di server (mis. hitung laporan tiap malam), hasilnya disimpan ke database untuk dibaca aplikasi.

Ketiganya punya prinsip yang sama: Python tidak pernah berjalan di HP pengguna — ia selalu berjalan di server, dan aplikasi hanya membaca hasilnya.

Meskipun hari ini kita fokus pada satu pola saja, penting bagi Anda mengetahui bahwa ada beberapa cara lain menjembatani Python dan aplikasi mobile, supaya nanti kalau Anda bekerja di industri dan mendengar istilah-istilah ini, Anda sudah punya gambaran. Pola pertama, REST API memakai Flask, adalah yang paling umum dipelajari pemula dan yang akan kita praktikkan hari ini — Python berjalan sebagai server kecil yang selalu siap menjawab permintaan. Pola kedua, cloud function, mirip tapi Anda tidak perlu mengelola server sendiri sama sekali, cukup unggah script Python ke layanan cloud dan mereka yang mengurus sisanya, cocok untuk fungsi yang jarang dipanggil. Pola ketiga, script batch, dipakai kalau perhitungannya berat dan tidak perlu instan, misalnya menghitung laporan penjualan setiap tengah malam lalu hasilnya disimpan, dan aplikasi tinggal membaca hasil yang sudah jadi itu. Yang perlu Anda ingat baik-baik dari ketiga pola ini: di manapun bentuknya, Python tidak pernah dan tidak akan pernah berjalan langsung di dalam HP pengguna.

Membungkus Python Jadi API dengan Flask

Flask (glos: kerangka kerja Python ringan untuk membuat server web) mengubah fungsi Python biasa menjadi alamat yang bisa dipanggil lewat internet.

app.py — SERVER FLASK PALING SEDERHANA

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/sapa")
def sapa():
return jsonify({"pesan": "Halo dari Python!"})

app.run(host="0.0.0.0", port=5000)

Baris @app.route("/sapa") disebut endpoint (glos: alamat spesifik di server yang bisa diakses, di sini alamatnya adalah /sapa) — setiap fungsi Python bisa dibuka jadi satu endpoint.

Sekarang mari kita lihat kode sungguhan. Flask adalah salah satu kerangka kerja Python paling populer untuk membuat server web karena sintaksnya sangat ringkas, cocok untuk pemula. Empat baris pertama menyiapkan aplikasi Flask, lalu baris yang diawali tanda "at" yaitu app.route mendefinisikan sebuah endpoint, artinya alamat spesifik yang bisa diakses dari luar, dalam contoh ini alamatnya adalah garis miring sapa. Setiap kali seseorang mengakses alamat itu lewat internet, fungsi sapa yang ada di bawahnya akan dijalankan, dan hasilnya dikembalikan dalam format JSON memakai fungsi jsonify. Baris terakhir menjalankan servernya di komputer Anda, mendengarkan di port nomor 5000 — port bisa dibayangkan seperti nomor pintu di sebuah gedung, supaya permintaan yang datang tahu harus masuk ke pintu mana. Kalau Anda menjalankan file ini dan membuka alamat itu di browser, Anda akan melihat balasan berupa teks JSON berisi pesan sapaan tadi.

Menulis Logika Bisnis: Fungsi Python Murni

Sebelum dibungkus jadi endpoint, tulis dulu logikanya sebagai fungsi Python biasa — lebih mudah diuji terpisah.

FUNGSI hitung_diskon()

def hitung_diskon(harga, persen_diskon):
    potongan = harga * (persen_diskon / 100)
    harga_akhir = harga - potongan
    return round(harga_akhir)

hitung_diskon(150000, 10)
# 135000

Praktik baik: pisahkan dulu logika hitungan (fungsi Python) dari logika komunikasi (endpoint Flask) — endpoint tinggal memanggil fungsi ini.

Sebelum kita sibuk dengan urusan endpoint dan server, penting untuk membiasakan diri menulis dulu logika hitungan sebagai fungsi Python murni yang berdiri sendiri, persis seperti fungsi-fungsi yang sudah Anda kenal dari mata kuliah pemrograman sebelumnya. Fungsi hitung_diskon ini menerima dua parameter, harga asli dan persentase diskon, lalu mengembalikan harga akhir setelah dipotong. Perhatikan bahwa fungsi ini sama sekali tidak tahu-menahu soal internet, Flask, atau React Native — ia murni logika matematika biasa. Kenapa ini penting? Karena dengan memisahkan logika hitungan dari logika komunikasi, Anda bisa menguji fungsi ini secara terpisah tanpa perlu menjalankan server sama sekali, dan kalau ada bug, Anda tahu persis di bagian mana harus mencari — apakah di hitungannya atau di komunikasinya. Nanti fungsi inilah yang akan kita panggil dari dalam endpoint Flask di slide berikutnya.

Coba Sendiri: Lacak Pemanggilan Fungsi Python

Ubah nilai parameter yang dikirim ke fungsi, lalu amati bagaimana variabel lokal terbentuk dan nilai baliknya dihitung langkah demi langkah.

Bagian 2 dari 3

Menghubungkan React Native ke API Python

Server Python sudah siap menjawab. Sekarang giliran sisi React Native belajar "bertanya" dan menampilkan jawabannya di layar.

fetch(): Cara React Native "Bertanya" ke Server

fetch() adalah fungsi bawaan JavaScript untuk mengirim permintaan ke alamat internet dan menunggu jawabannya.

fetch(alamat_url)

SIFAT ASINKRON

Glos: asinkron — permintaan butuh waktu (mis. menunggu internet), jadi kode tidak "berhenti diam" menunggu, ia lanjut sambil menunggu jawaban datang.

async / await

Kata kunci JavaScript yang membuat kode asinkron terbaca seperti kode biasa dari atas ke bawah — await berarti "tunggu dulu sampai selesai".

Karena butuh internet, alamat server Python (mis. http://192.168.1.5:5000) harus bisa dijangkau HP — saat pengembangan, biasanya memakai alamat IP komputer di jaringan Wi-Fi yang sama.

fetch adalah fungsi bawaan JavaScript yang tugasnya persis seperti namanya, "mengambil" sesuatu dari alamat internet tertentu. Yang membuat fetch sedikit berbeda dari fungsi biasa yang sudah Anda kenal adalah sifatnya yang asinkron, artinya ketika Anda memanggil fetch, jawabannya tidak langsung datang seketika karena butuh waktu untuk mengirim permintaan lewat internet dan menunggu server memprosesnya — bisa perlu waktu sepersekian detik sampai beberapa detik tergantung kecepatan koneksi. Kalau kode Anda "berhenti diam" menunggu jawaban itu datang, aplikasi akan terasa macet atau nge-lag di mata pengguna. Solusinya, JavaScript memakai pola async dan await: kata async menandai bahwa sebuah fungsi mengandung operasi yang butuh menunggu, dan kata await di depan fetch berarti "tunggu dulu hasil ini selesai sebelum lanjut ke baris berikutnya", tapi tanpa membuat seluruh aplikasi macet. Satu hal teknis penting: karena aplikasi React Native berjalan di HP fisik atau emulator terpisah dari komputer Anda, alamat server Python bukan "localhost" melainkan alamat IP komputer Anda di jaringan Wi-Fi yang sama — ini sering jadi sumber kebingungan pemula saat pertama kali mencoba.

Kode Lengkap: Memanggil API dari Komponen React Native

KomponenDiskon.js

import { useState } from "react";
import { View, Button, Text } from "react-native";

function KomponenDiskon() {
  const [hasil, setHasil] = useState(null);

  const ambilDiskon = async () => {
    const respons = await fetch("http://192.168.1.5:5000/diskon?harga=150000");
    const data = await respons.json();
    setHasil(data.harga_akhir);
  };

  return (
    <View>
      <Button title="Hitung Diskon" onPress={ambilDiskon} />
      {hasil && <Text>Total: Rp{hasil}</Text>}
    </View>
  );
}

Kode ini adalah gabungan lengkap dari semua konsep yang sudah kita bahas: useState dari React Native yang sudah Anda kenal di Pertemuan 3 untuk menyimpan data, dan fetch yang baru kita pelajari untuk berkomunikasi dengan server Python. Perhatikan alurnya baris demi baris: kita siapkan state bernama hasil yang awalnya kosong atau null. Ketika pengguna menekan tombol "Hitung Diskon", fungsi ambilDiskon dipanggil, yang di dalamnya memanggil fetch ke alamat server Python lengkap dengan parameter harga di belakang tanda tanya. Kita tunggu responsnya dengan await, lalu ubah jawaban itu dari format JSON mentah menjadi objek JavaScript yang bisa dibaca memakai respons.json(), juga ditunggu dengan await karena proses ini juga butuh waktu. Setelah data didapat, kita simpan bagian harga_akhir-nya ke dalam state hasil memakai setHasil, dan React Native otomatis akan merender ulang tampilan untuk menunjukkan teks "Total: Rp" diikuti angka hasil hitungan. Inilah pola lengkap yang akan Anda pakai berulang-ulang sepanjang semester setiap kali aplikasi Anda perlu data dari server.

Alur Data Ujung-ke-Ujung: Dari Sentuhan Jari ke Layar

Mari telusuri langkah demi langkah apa yang sebenarnya terjadi saat pengguna menekan tombol "Hitung Diskon" pada slide sebelumnya.

Tahap	Apa yang Terjadi	Di Sisi Mana
1. Sentuh tombol	Fungsi `ambilDiskon()` dipanggil	React Native (HP)
2. Kirim request	`fetch()` mengirim harga 150000 lewat internet	React Native → Server
3. Proses hitungan	Flask menjalankan `hitung_diskon(150000, 10)`	Server Python
4. Kirim response	Server balas JSON `{"harga_akhir": 135000}`	Server → React Native
5. Simpan & tampilkan	`setHasil(135000)` memicu tampilan berubah	React Native (HP)

Seluruh alur ini biasanya berlangsung dalam hitungan ratusan milidetik — tetapi tetap butuh async/await supaya aplikasi tidak "macet" saat menunggu.

Sekarang mari kita rekonstruksi ulang seluruh perjalanan datanya dari awal sampai akhir, karena memahami alur ini secara utuh jauh lebih penting daripada menghafal sintaksnya satu per satu. Semuanya berawal dari sentuhan jari pengguna pada tombol di layar HP, yang memicu fungsi JavaScript di sisi React Native. Fungsi itu kemudian mengirim permintaan lewat internet menuju server, membawa data harga yang perlu dihitung. Begitu permintaan sampai di server, Flask menerima dan meneruskannya ke fungsi Python hitung_diskon yang sudah kita tulis sebelumnya, yang melakukan hitungan sesungguhnya. Hasil hitungan itu kemudian dibungkus kembali menjadi format JSON dan dikirim balik lewat internet menuju HP pengguna. Terakhir, aplikasi React Native menerima jawaban itu, menyimpannya ke dalam state, dan secara otomatis memperbarui tampilan di layar supaya pengguna melihat hasilnya. Slide ini saya tampilkan utuh sekaligus supaya Anda bisa melihat keseluruhan alur sebagai satu kesatuan cerita, bukan potongan-potongan terpisah.

Hitung dari Nol: Total Bayar Checkout via API Python

Script Python di server menghitung total bayar keranjang belanja: harga barang Rp150.000, biaya admin API Rp5.000, ditambah PPN 11% (PMK 131/2024).

LANGKAH PERHITUNGAN

Langkah	Perhitungan	Nilai
Harga barang	input dari React Native	Rp150.000
+ Biaya admin API	150.000 + 5.000	Rp155.000
Subtotal (sebelum pajak)	dari langkah sebelumnya	Rp155.000
Hitung PPN 11%	155.000 x 11%	Rp17.050
Total bayar	155.000 + 17.050	Rp172.050

RESPONSE JSON DIKIRIM KE RN

Rp172.050

{"total_bayar": 172050}

React Native tidak perlu tahu cara menghitung PPN sama sekali — ia hanya menampilkan angka jadi yang dikirim Python. Kalau tarif PPN berubah suatu saat, cukup ubah satu fungsi di server.

Mari kita kerjakan bersama-sama, langkah demi langkah, karena pola soal seperti ini sangat mungkin muncul di kuis atau tugas Anda. Bayangkan pengguna aplikasi kasir UMKM memasukkan harga barang seharga seratus lima puluh ribu rupiah. Server Python pertama-tama menambahkan biaya admin API sebesar lima ribu rupiah, sehingga subtotal menjadi seratus lima puluh lima ribu rupiah. Selanjutnya, sesuai ketentuan PMK 131/2024, PPN efektif untuk barang dan jasa umum adalah sebelas persen, jadi kita kalikan subtotal seratus lima puluh lima ribu dengan sebelas persen, hasilnya tujuh belas ribu lima puluh rupiah. Total akhir yang harus dibayar pelanggan adalah subtotal ditambah PPN tadi, yaitu seratus tujuh puluh dua ribu lima puluh rupiah. Perhatikan poin pentingnya: seluruh logika hitungan pajak ini terjadi di server Python, dan aplikasi React Native hanya menerima angka akhir yang sudah jadi lewat JSON, tanpa perlu tahu-menahu rumus PPN-nya sendiri. Inilah keuntungan besar arsitektur client-server yang kita bahas sejak awal: kalau tarif pajak berubah lagi di masa depan, Anda cukup mengubah satu fungsi di server Python, tanpa perlu mengubah dan merilis ulang aplikasi mobile-nya sama sekali.

Coba Sendiri: Hitung Total Bayar dengan PPN 11%

Ubah harga barang dan biaya admin, lalu amati bagaimana PPN efektif 11% dihitung dan total bayar akhirnya.

Bagian 3 dari 3

Studi Kasus & Penanganan Galat

Kita satukan seluruh konsep dalam satu studi kasus baru, lalu belajar apa yang harus dilakukan ketika koneksi ke server Python gagal.

Studi Kasus: Kalkulator Ongkos Kirim

Form React Native meminta pengguna mengisi jarak dan berat paket, lalu server Python menghitung ongkos kirimnya.

FUNGSI PYTHON DI SERVER

def hitung_ongkir(jarak_km, berat_kg):
    tarif_jarak = jarak_km * 5000
    berat_bulat = -(-berat_kg // 1) # bulatkan ke atas
    biaya_berat = berat_bulat * 2000
    return int(tarif_jarak + biaya_berat)

Endpoint /ongkir?jarak=8&berat=2.5 di Flask memanggil fungsi ini, lalu React Native menampilkan hasilnya di layar checkout — pola yang persis sama dengan studi kasus diskon tadi.

Studi kasus kedua ini sengaja memakai pola arsitektur yang sama persis dengan studi kasus diskon sebelumnya, supaya Anda mulai terbiasa mengenali pola berulang ini: fungsi Python murni, dibungkus endpoint Flask, dipanggil lewat fetch dari React Native. Fungsi hitung_ongkir menerima dua parameter, jarak dalam kilometer dan berat dalam kilogram. Tarif jarak dihitung dengan mengalikan jarak dengan lima ribu rupiah per kilometer. Untuk biaya berat, kita bulatkan berat ke atas dulu karena kurir biasanya mengenakan tarif per kilogram penuh meski beratnya pecahan, lalu dikalikan dua ribu rupiah per kilogram. Total ongkos kirim adalah gabungan keduanya. Perhatikan trik pembulatan ke atas yang saya pakai di kode ini, minus dari minus pembagian bulat — ini adalah trik umum di banyak bahasa pemrograman untuk membulatkan ke atas tanpa perlu mengimpor pustaka tambahan, meskipun untuk pemula boleh saja memakai fungsi bawaan yang lebih mudah dibaca seperti fungsi ceil dari modul math Python.

Hitung dari Nol: Ongkos Kirim Paket 8 km, 2,5 kg

Pengguna mengisi form: jarak 8 km, berat 2,5 kg. Tarif jarak Rp5.000/km, tarif berat Rp2.000/kg (dibulatkan ke atas).

LANGKAH PERHITUNGAN

Langkah	Perhitungan	Nilai
Tarif jarak	8 km x Rp5.000/km	Rp40.000
Berat dibulatkan ke atas	2,5 kg → 3 kg	3 kg
Biaya berat	3 kg x Rp2.000/kg	Rp6.000
Total ongkir	40.000 + 6.000	Rp46.000

DITAMPILKAN DI APLIKASI

Rp46.000

hasil hitung_ongkir(8, 2.5)

Sama seperti kasus diskon: React Native cukup memanggil endpoint /ongkir, menampilkan angka Rp46.000 tanpa perlu tahu rumus di baliknya.

Mari kita hitung bersama-sama sekali lagi supaya polanya semakin melekat. Paket yang akan dikirim berjarak delapan kilometer dari toko, dengan tarif lima ribu rupiah per kilometer, jadi tarif jaraknya adalah delapan dikali lima ribu, sama dengan empat puluh ribu rupiah. Untuk beratnya, paket seberat dua koma lima kilogram harus dibulatkan ke atas menjadi tiga kilogram, karena kurir mengenakan tarif per kilogram penuh. Biaya beratnya adalah tiga dikali dua ribu rupiah, sama dengan enam ribu rupiah. Total ongkos kirim adalah gabungan tarif jarak dan biaya berat, empat puluh ribu ditambah enam ribu, hasilnya empat puluh enam ribu rupiah. Sekali lagi perhatikan bahwa seluruh hitungan rumit ini, termasuk aturan pembulatan berat, terjadi sepenuhnya di server Python — aplikasi React Native yang dilihat pengguna hanya menampilkan angka akhir Rp46.000 di layar checkout-nya, tanpa perlu satu baris pun logika hitungan ongkir ditulis dalam JavaScript.

Menangani Galat: Kalau Server Tidak Merespons

Koneksi internet bisa putus, atau server Python bisa sedang mati — aplikasi yang baik harus siap menghadapinya, bukan langsung macet.

SISI PYTHON: try/except

try:
hasil = hitung_diskon(harga, 10)
except Exception as e:
return jsonify({"error": str(e)}), 400

SISI REACT NATIVE: try/catch

try {
  const r = await fetch(url);
  const data = await r.json();
  setHasil(data.total);
} catch (e) {
  setError("Gagal terhubung ke server");
}

Glos: try/except (Python) dan try/catch (JavaScript) — blok kode yang "mencoba" menjalankan sesuatu, dan menangkap kesalahannya kalau gagal, alih-alih membuat program berhenti total.

Dalam dunia nyata, koneksi internet tidak selalu sempurna — sinyal Wi-Fi bisa lemah, server bisa sedang dalam perbaikan, atau data yang dikirim pengguna bisa saja tidak valid. Aplikasi yang baik harus mengantisipasi semua kemungkinan ini alih-alih membiarkan aplikasi tiba-tiba berhenti total atau menampilkan layar putih kosong yang membingungkan pengguna. Di sisi Python, kita membungkus proses hitungan dengan blok try dan except: bagian try berisi kode yang ingin kita coba jalankan, dan kalau terjadi galat di dalamnya, bagian except akan menangkapnya dan mengirim pesan galat yang rapi ke pengguna, bukan membuat server crash. Di sisi React Native, polanya serupa tetapi memakai istilah try dan catch: kalau fetch gagal, misalnya karena tidak ada koneksi internet sama sekali, kode di dalam catch akan dijalankan, dan di sinilah kita simpan pesan galat ke sebuah state baru bernama error, yang bisa kita tampilkan sebagai teks peringatan di layar aplikasi. Kebiasaan menulis penanganan galat seperti ini adalah pembeda antara aplikasi hasil latihan dan aplikasi yang benar-benar siap dipakai pengguna sungguhan.

Latihan Kelas: Coba Sendiri

Kerjakan berpasangan dengan teman sebangku selama 15 menit, lalu kita bahas bersama.

SOAL 1 — SISI PYTHON

Tulis fungsi Python hitung_poin_loyalitas(total_belanja) yang mengembalikan 1 poin untuk setiap kelipatan Rp10.000 belanja. Bungkus jadi endpoint Flask /poin.

SOAL 2 — SISI REACT NATIVE

Tulis komponen React Native dengan tombol "Cek Poin" yang memanggil endpoint /poin memakai fetch(), lalu tampilkan hasilnya dengan <Text>. Tambahkan try/catch.

Petunjuk: gambar dulu diagram arsitekturnya di kertas (seperti Slide 6) sebelum mengetik kode — kebiasaan ini membantu Anda tidak bingung "kode ini jalan di sisi mana".

Sekarang giliran Anda mencoba sendiri, dan latihan ini sengaja dirancang mencakup kedua sisi yang sudah kita pelajari hari ini. Silakan berpasangan dengan teman sebangku. Soal pertama menguji pemahaman Anda tentang sisi Python: menulis fungsi hitungan sederhana lalu membungkusnya jadi endpoint Flask, mengikuti pola persis seperti fungsi hitung_diskon yang sudah kita bahas. Soal kedua menguji sisi React Native: memanggil endpoint itu memakai fetch, menampilkan hasilnya di layar, dan yang tidak kalah penting, menambahkan penanganan galat memakai try dan catch supaya aplikasi tidak macet kalau server tidak bisa dihubungi. Saya sarankan sebelum mulai mengetik kode, gambar dulu diagram sederhana di kertas seperti yang kita lihat di slide arsitektur tadi, supaya Anda benar-benar jelas bagian mana yang jalan di HP dan bagian mana yang jalan di server. Saya beri waktu lima belas menit, setelah itu kita bahas bersama di depan kelas.

Rangkuman & Persiapan Minggu Depan

CHEAT SHEET PERTEMUAN 4

Konsep	Sintaks/Pola
Server Python	`Flask`, `@app.route()`, `jsonify()`
Panggil dari RN	`await fetch(url)`, `r.json()`
Simpan hasil	`useState` + `setHasil()`
Tangani galat	`try/except` (Python), `try/catch` (JS)

MINGGU DEPAN — PERTEMUAN 5

State & Props

Data interaktif dalam React Native

Kita akan memperdalam useState yang baru dikenalkan hari ini, ditambah props untuk berbagi data antar-komponen dalam aplikasi interaktif.

Mari kita rangkum perjalanan kita hari ini. Kita mulai dari memahami bahwa Python dan React Native adalah dua dunia berbeda yang perlu dijembatani lewat arsitektur client-server, dengan Python berjalan di server dan React Native berjalan di HP pengguna. Kita lalu belajar membungkus fungsi Python jadi endpoint memakai Flask, memanggilnya dari React Native dengan fetch memakai pola async dan await, serta menyimpan dan menampilkan hasilnya lewat useState. Kita tutup dengan dua studi kasus nyata bergaya bisnis digital Indonesia, hitungan checkout dengan PPN dan kalkulator ongkos kirim, ditambah cara menangani galat supaya aplikasi Anda tidak mudah macet. Minggu depan kita akan memperdalam useState yang baru saja Anda kenal hari ini, sekaligus mempelajari konsep props untuk berbagi data antar-komponen — dua konsep ini akan menjadi fondasi hampir semua fitur interaktif yang akan Anda bangun sepanjang semester, termasuk halaman login di Pertemuan 6. Sampai jumpa minggu depan, dan jangan lupa berlatih soal tadi di rumah.