Web-Dev-For-Beginners/translations/id/7-bank-project/4-state-management

Membangun Aplikasi Perbankan Bagian 4: Konsep Manajemen State

Kuis Pra-Pelajaran

Kuis pra-pelajaran

Pendahuluan

Manajemen state dalam pengembangan web mirip dengan sistem navigasi di pesawat ruang angkasa Voyager – ketika semuanya berjalan lancar, Anda hampir tidak menyadari keberadaannya. Namun, ketika terjadi masalah, itu menjadi pembeda antara mencapai ruang antar bintang dan tersesat di kekosongan kosmik. Dalam pengembangan web, state mewakili segala sesuatu yang perlu diingat oleh aplikasi Anda: status login pengguna, data formulir, riwayat navigasi, dan state antarmuka sementara.

Seiring perkembangan aplikasi perbankan Anda dari formulir login sederhana menjadi aplikasi yang lebih canggih, Anda mungkin telah menghadapi beberapa tantangan umum. Refresh halaman dan pengguna tiba-tiba keluar. Tutup browser dan semua progres hilang. Debug masalah dan Anda harus mencari melalui banyak fungsi yang semuanya memodifikasi data yang sama dengan cara berbeda.

Ini bukan tanda pengkodean yang buruk – ini adalah tantangan alami yang terjadi ketika aplikasi mencapai ambang kompleksitas tertentu. Setiap pengembang menghadapi tantangan ini saat aplikasi mereka beralih dari "bukti konsep" menjadi "siap produksi."

Dalam pelajaran ini, kita akan menerapkan sistem manajemen state terpusat yang mengubah aplikasi perbankan Anda menjadi aplikasi yang andal dan profesional. Anda akan belajar mengelola aliran data secara prediktif, mempertahankan sesi pengguna dengan tepat, dan menciptakan pengalaman pengguna yang mulus yang dibutuhkan oleh aplikasi web modern.

Prasyarat

Sebelum mendalami konsep manajemen state, Anda perlu memastikan lingkungan pengembangan Anda telah diatur dengan benar dan fondasi aplikasi perbankan Anda sudah siap. Pelajaran ini langsung membangun konsep dan kode dari bagian sebelumnya dalam seri ini.

Pastikan Anda memiliki komponen berikut sebelum melanjutkan:

Pengaturan yang Dibutuhkan:

• Selesaikan pelajaran pengambilan data - aplikasi Anda harus berhasil memuat dan menampilkan data akun
• Instal Node.js di sistem Anda untuk menjalankan API backend
• Jalankan server API secara lokal untuk menangani operasi data akun

Pengujian Lingkungan Anda:

Verifikasi bahwa server API Anda berjalan dengan benar dengan menjalankan perintah ini di terminal:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

Apa yang dilakukan perintah ini:

• Mengirimkan permintaan GET ke server API lokal Anda
• Menguji koneksi dan memverifikasi bahwa server merespons
• Mengembalikan informasi versi API jika semuanya berfungsi dengan baik

---

Mendiagnosis Masalah State Saat Ini

Seperti Sherlock Holmes yang memeriksa tempat kejadian perkara, kita perlu memahami dengan tepat apa yang terjadi dalam implementasi saat ini sebelum kita dapat memecahkan misteri sesi pengguna yang hilang.

Mari lakukan eksperimen sederhana yang mengungkap tantangan manajemen state yang mendasarinya:

🧪 Coba Tes Diagnostik Ini:

1. Masuk ke aplikasi perbankan Anda dan navigasikan ke dashboard
2. Refresh halaman browser
3. Perhatikan apa yang terjadi pada status login Anda

Jika Anda diarahkan kembali ke layar login, Anda telah menemukan masalah klasik dalam persistensi state. Perilaku ini terjadi karena implementasi saat ini menyimpan data pengguna dalam variabel JavaScript yang direset setiap kali halaman dimuat ulang.

Masalah Implementasi Saat Ini:

Variabel account sederhana dari pelajaran sebelumnya menciptakan tiga masalah signifikan yang memengaruhi pengalaman pengguna dan pemeliharaan kode:

Masalah	Penyebab Teknis	Dampak pada Pengguna
Kehilangan Sesi	Refresh halaman menghapus variabel JavaScript	Pengguna harus sering masuk kembali
Pembaruan Tersebar	Banyak fungsi memodifikasi state secara langsung	Debugging menjadi semakin sulit
Pembersihan Tidak Lengkap	Logout tidak menghapus semua referensi state	Potensi masalah keamanan dan privasi

Tantangan Arsitektur:

Seperti desain kompartemen Titanic yang tampak kokoh hingga beberapa kompartemen terisi air secara bersamaan, memperbaiki masalah ini secara individual tidak akan mengatasi masalah arsitektur yang mendasarinya. Kita membutuhkan solusi manajemen state yang komprehensif.

💡 Apa yang sebenarnya ingin kita capai di sini?

Manajemen state sebenarnya tentang memecahkan dua teka-teki mendasar:

1. Di mana data saya?: Melacak informasi apa yang kita miliki dan dari mana asalnya
2. Apakah semua orang berada di halaman yang sama?: Memastikan apa yang dilihat pengguna sesuai dengan apa yang sebenarnya terjadi

Rencana Kita:

Alih-alih berputar-putar, kita akan membuat sistem manajemen state terpusat. Anggap saja seperti memiliki satu orang yang sangat terorganisir yang bertanggung jawab atas semua hal penting:

Memahami aliran data ini:

• Memusatkan semua state aplikasi di satu lokasi
• Mengalurkan semua perubahan state melalui fungsi yang terkontrol
• Memastikan UI tetap sinkron dengan state saat ini
• Memberikan pola yang jelas dan prediktif untuk manajemen data

💡 Wawasan Profesional: Pelajaran ini berfokus pada konsep dasar. Untuk aplikasi yang kompleks, pustaka seperti Redux menyediakan fitur manajemen state yang lebih canggih. Memahami prinsip-prinsip inti ini akan membantu Anda menguasai pustaka manajemen state apa pun.

⚠️ Topik Lanjutan: Kami tidak akan membahas pembaruan UI otomatis yang dipicu oleh perubahan state, karena ini melibatkan konsep Pemrograman Reaktif. Anggap ini sebagai langkah berikutnya yang sangat baik untuk perjalanan belajar Anda!

Tugas: Memusatkan Struktur State

Mari mulai mengubah manajemen state yang tersebar menjadi sistem terpusat. Langkah pertama ini menetapkan fondasi untuk semua perbaikan yang akan datang.

Langkah 1: Buat Objek State Terpusat

Ganti deklarasi account sederhana:

let account = null;

Dengan objek state yang terstruktur:

let state = {
  account: null
};

Mengapa perubahan ini penting:

• Memusatkan semua data aplikasi di satu lokasi
• Mempersiapkan struktur untuk menambahkan properti state lebih banyak di kemudian hari
• Menciptakan batas yang jelas antara state dan variabel lainnya
• Menetapkan pola yang dapat diskalakan seiring pertumbuhan aplikasi Anda

Langkah 2: Perbarui Pola Akses State

Perbarui fungsi Anda untuk menggunakan struktur state yang baru:

Dalam fungsi register() dan login(), ganti:

account = ...

Dengan:

state.account = ...

Dalam fungsi updateDashboard(), tambahkan baris ini di bagian atas:

const account = state.account;

Apa yang dicapai oleh pembaruan ini:

• Mempertahankan fungsionalitas yang ada sambil meningkatkan struktur
• Mempersiapkan kode Anda untuk manajemen state yang lebih canggih
• Menciptakan pola yang konsisten untuk mengakses data state
• Menetapkan fondasi untuk pembaruan state terpusat

💡 Catatan: Refactoring ini tidak langsung menyelesaikan masalah kita, tetapi menciptakan fondasi penting untuk perbaikan yang lebih kuat di masa depan!

Menerapkan Pembaruan State yang Terkontrol

Dengan state kita yang terpusat, langkah berikutnya melibatkan pembentukan mekanisme terkontrol untuk modifikasi data. Pendekatan ini memastikan perubahan state yang prediktif dan debugging yang lebih mudah.

Prinsip intinya mirip dengan kontrol lalu lintas udara: alih-alih membiarkan banyak fungsi memodifikasi state secara independen, kita akan menyalurkan semua perubahan melalui satu fungsi yang terkontrol. Pola ini memberikan pengawasan yang jelas tentang kapan dan bagaimana perubahan data terjadi.

Manajemen State yang Tidak Dapat Diubah:

Kita akan memperlakukan objek state kita sebagai tidak dapat diubah, artinya kita tidak pernah memodifikasinya secara langsung. Sebaliknya, setiap perubahan menciptakan objek state baru dengan data yang diperbarui.

Meskipun pendekatan ini awalnya tampak tidak efisien dibandingkan dengan modifikasi langsung, ini memberikan keuntungan signifikan untuk debugging, pengujian, dan menjaga prediktabilitas aplikasi.

Keuntungan manajemen state yang tidak dapat diubah:

Keuntungan	Deskripsi	Dampak
Prediktabilitas	Perubahan hanya terjadi melalui fungsi yang terkontrol	Lebih mudah untuk debug dan uji
Pelacakan Riwayat	Setiap perubahan state menciptakan objek baru	Memungkinkan fungsi undo/redo
Pencegahan Efek Samping	Tidak ada modifikasi yang tidak disengaja	Mencegah bug misterius
Optimasi Performa	Mudah mendeteksi kapan state benar-benar berubah	Memungkinkan pembaruan UI yang efisien

Immutabilitas JavaScript dengan Object.freeze():

JavaScript menyediakan Object.freeze() untuk mencegah modifikasi objek:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

Penjelasan apa yang terjadi di sini:

• Mencegah penugasan atau penghapusan properti secara langsung
• Melemparkan pengecualian jika ada upaya modifikasi
• Memastikan perubahan state harus melalui fungsi yang terkontrol
• Menciptakan kontrak yang jelas tentang bagaimana state dapat diperbarui

💡 Pendalaman: Pelajari perbedaan antara objek shallow dan deep yang tidak dapat diubah dalam dokumentasi MDN. Memahami perbedaan ini sangat penting untuk struktur state yang kompleks.

Tugas

Mari buat fungsi updateState() baru:

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

Dalam fungsi ini, kita membuat objek state baru dan menyalin data dari state sebelumnya menggunakan operator spread (...). Kemudian kita menimpa properti tertentu dari objek state dengan data baru menggunakan notasi bracket [property] untuk penugasan. Akhirnya, kita mengunci objek untuk mencegah modifikasi menggunakan Object.freeze(). Saat ini kita hanya memiliki properti account yang disimpan dalam state, tetapi dengan pendekatan ini Anda dapat menambahkan sebanyak mungkin properti yang Anda butuhkan dalam state.

Kita juga akan memperbarui inisialisasi state untuk memastikan state awal juga dibekukan:

let state = Object.freeze({
  account: null
});

Setelah itu, perbarui fungsi register dengan mengganti penugasan state.account = result; dengan:

updateState('account', result);

Lakukan hal yang sama dengan fungsi login, mengganti state.account = data; dengan:

updateState('account', data);

Sekarang kita akan memperbaiki masalah data akun yang tidak dihapus saat pengguna mengklik Logout.

Buat fungsi baru logout():

function logout() {
  updateState('account', null);
  navigate('/login');
}

Dalam updateDashboard(), ganti pengalihan return navigate('/login'); dengan return logout();

Coba daftarkan akun baru, logout, dan login kembali untuk memeriksa apakah semuanya masih berfungsi dengan benar.

Tip: Anda dapat melihat semua perubahan state dengan menambahkan console.log(state) di bagian bawah updateState() dan membuka konsol di alat pengembangan browser Anda.

Menerapkan Persistensi Data

Masalah kehilangan sesi yang kita identifikasi sebelumnya membutuhkan solusi persistensi yang mempertahankan state pengguna di seluruh sesi browser. Ini mengubah aplikasi kita dari pengalaman sementara menjadi alat yang andal dan profesional.

Pertimbangkan bagaimana jam atom menjaga waktu yang tepat bahkan saat terjadi pemadaman listrik dengan menyimpan state penting dalam memori non-volatil. Demikian pula, aplikasi web membutuhkan mekanisme penyimpanan yang persisten untuk mempertahankan data pengguna penting di seluruh sesi browser dan refresh halaman.

Pertanyaan Strategis untuk Persistensi Data:

Sebelum menerapkan persistensi, pertimbangkan faktor-faktor penting berikut:

Pertanyaan	Konteks Aplikasi Perbankan	Dampak Keputusan
Apakah datanya sensitif?	Saldo akun, riwayat transaksi	Pilih metode penyimpanan yang aman
Berapa lama harus bertahan?	State login vs. preferensi UI sementara	Pilih durasi penyimpanan yang sesuai
Apakah server membutuhkannya?	Token autentikasi vs. pengaturan UI	Tentukan persyaratan berbagi

Opsi Penyimpanan Browser:

Browser modern menyediakan beberapa mekanisme penyimpanan, masing-masing dirancang untuk kasus penggunaan yang berbeda:

API Penyimpanan Utama:

1. localStorage: Penyimpanan Key/Value yang persisten

   • Mempertahankan data di seluruh sesi browser tanpa batas waktu
   • Bertahan setelah restart browser dan komputer
   • Berlaku untuk domain situs web tertentu
   • Sempurna untuk preferensi pengguna dan state login

2. sessionStorage: Penyimpanan sesi sementara

   • Berfungsi identik dengan localStorage selama sesi aktif
   • Menghapus secara otomatis saat tab browser ditutup
   • Ideal untuk data sementara yang tidak perlu bertahan

3. HTTP Cookies: Penyimpanan yang dibagikan dengan server

   • Secara otomatis dikirim dengan setiap permintaan server
   • Sempurna untuk token autentikasi
   • Terbatas dalam ukuran dan dapat memengaruhi performa

Persyaratan Serialisasi Data:

Baik localStorage maupun sessionStorage hanya menyimpan string:

// Convert objects to JSON strings for storage
const accountData = { user: 'john', balance: 150 };
localStorage.setItem('account', JSON.stringify(accountData));

// Parse JSON strings back to objects when retrieving
const savedAccount = JSON.parse(localStorage.getItem('account'));

Memahami serialisasi:

• Mengonversi objek JavaScript menjadi string JSON menggunakan JSON.stringify()
• Membangun kembali objek dari JSON menggunakan JSON.parse()
• Menangani objek bersarang dan array yang kompleks secara otomatis
• Gagal pada fungsi, nilai undefined, dan referensi melingkar

💡 Opsi Lanjutan: Untuk aplikasi offline yang kompleks dengan dataset besar, pertimbangkan menggunakan IndexedDB API. API ini menyediakan basis data sisi klien yang lengkap, tetapi membutuhkan implementasi yang lebih kompleks.

Tugas: Implementasi Penyimpanan dengan localStorage

Mari kita implementasikan penyimpanan yang persisten agar pengguna tetap masuk hingga mereka secara eksplisit keluar. Kita akan menggunakan localStorage untuk menyimpan data akun di antara sesi browser.

Langkah 1: Tentukan Konfigurasi Penyimpanan

const storageKey = 'savedAccount';

Apa yang disediakan oleh konstanta ini:

• Menciptakan pengidentifikasi yang konsisten untuk data yang disimpan
• Mencegah kesalahan pengetikan dalam referensi kunci penyimpanan
• Mempermudah perubahan kunci penyimpanan jika diperlukan
• Mengikuti praktik terbaik untuk kode yang mudah dikelola

Langkah 2: Tambahkan Persistensi Otomatis

Tambahkan baris ini di akhir fungsi updateState():

localStorage.setItem(storageKey, JSON.stringify(state.account));

Penjelasan tentang apa yang terjadi di sini:

• Mengonversi objek akun menjadi string JSON untuk disimpan
• Menyimpan data menggunakan kunci penyimpanan yang konsisten
• Dieksekusi secara otomatis setiap kali terjadi perubahan status
• Memastikan data yang disimpan selalu sinkron dengan status saat ini

💡 Manfaat Arsitektur: Karena kita telah memusatkan semua pembaruan status melalui updateState(), menambahkan persistensi hanya membutuhkan satu baris kode. Ini menunjukkan kekuatan keputusan arsitektur yang baik!

Langkah 3: Pulihkan Status saat Aplikasi Dimuat

Buat fungsi inisialisasi untuk memulihkan data yang disimpan:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Memahami proses inisialisasi:

• Mengambil data akun yang sebelumnya disimpan dari localStorage
• Mengurai string JSON kembali menjadi objek JavaScript
• Memperbarui status menggunakan fungsi pembaruan yang terkontrol
• Memulihkan sesi pengguna secara otomatis saat halaman dimuat
• Dieksekusi sebelum pembaruan rute untuk memastikan status tersedia

Langkah 4: Optimalkan Rute Default

Perbarui rute default untuk memanfaatkan sistem persistensi:

Dalam updateRoute(), ganti:

// Replace: return navigate('/login');
return navigate('/dashboard');

Mengapa perubahan ini masuk akal:

• Memanfaatkan sistem persistensi baru secara efektif
• Memungkinkan dashboard menangani pemeriksaan autentikasi
• Mengalihkan ke login secara otomatis jika tidak ada sesi yang tersimpan
• Menciptakan pengalaman pengguna yang lebih mulus

Pengujian Implementasi Anda:

1. Masuk ke aplikasi perbankan Anda
2. Segarkan halaman browser
3. Verifikasi bahwa Anda tetap masuk dan berada di dashboard
4. Tutup dan buka kembali browser Anda
5. Kembali ke aplikasi Anda dan pastikan Anda masih masuk

🎉 Pencapaian Terkunci: Anda telah berhasil mengimplementasikan manajemen status yang persisten! Aplikasi Anda sekarang berperilaku seperti aplikasi web profesional.

Menyeimbangkan Persistensi dengan Kesegaran Data

Sistem persistensi kita berhasil mempertahankan sesi pengguna, tetapi memperkenalkan tantangan baru: data yang tidak segar. Ketika beberapa pengguna atau aplikasi memodifikasi data server yang sama, informasi yang disimpan secara lokal menjadi usang.

Situasi ini mirip dengan navigator Viking yang mengandalkan peta bintang yang disimpan dan pengamatan langit saat ini. Peta memberikan konsistensi, tetapi navigator membutuhkan pengamatan baru untuk memperhitungkan kondisi yang berubah. Demikian pula, aplikasi kita membutuhkan status pengguna yang persisten dan data server yang terkini.

🧪 Menemukan Masalah Kesegaran Data:

1. Masuk ke dashboard menggunakan akun test
2. Jalankan perintah ini di terminal untuk mensimulasikan transaksi dari sumber lain:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

3. Segarkan halaman dashboard Anda di browser
4. Perhatikan apakah Anda melihat transaksi baru

Apa yang ditunjukkan oleh pengujian ini:

• Menunjukkan bagaimana local storage dapat menjadi "usang" (tidak terkini)
• Mensimulasikan skenario dunia nyata di mana perubahan data terjadi di luar aplikasi Anda
• Mengungkap ketegangan antara persistensi dan kesegaran data

Tantangan Data yang Tidak Segar:

Masalah	Penyebab	Dampak pada Pengguna
Data Usang	localStorage tidak pernah kadaluarsa secara otomatis	Pengguna melihat informasi yang tidak terkini
Perubahan Server	Aplikasi/pengguna lain memodifikasi data yang sama	Tampilan tidak konsisten di berbagai platform
Cache vs. Realitas	Cache lokal tidak sesuai dengan status server	Pengalaman pengguna buruk dan membingungkan

Strategi Solusi:

Kita akan mengimplementasikan pola "refresh on load" yang menyeimbangkan manfaat persistensi dengan kebutuhan akan data yang segar. Pendekatan ini mempertahankan pengalaman pengguna yang mulus sambil memastikan akurasi data.

Tugas: Implementasi Sistem Penyegaran Data

Kita akan membuat sistem yang secara otomatis mengambil data segar dari server sambil mempertahankan manfaat manajemen status yang persisten.

Langkah 1: Buat Pengupdate Data Akun

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

Memahami logika fungsi ini:

• Memeriksa apakah pengguna saat ini sudah masuk (state.account ada)
• Mengalihkan ke logout jika tidak ditemukan sesi yang valid
• Mengambil data akun segar dari server menggunakan fungsi getAccount() yang ada
• Menangani kesalahan server dengan baik dengan keluar dari sesi yang tidak valid
• Memperbarui status dengan data segar menggunakan sistem pembaruan yang terkontrol
• Memicu persistensi localStorage otomatis melalui fungsi updateState()

Langkah 2: Buat Handler Penyegaran Dashboard

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

Apa yang dicapai oleh fungsi penyegaran ini:

• Mengkoordinasikan proses penyegaran data dan pembaruan UI
• Menunggu data segar dimuat sebelum memperbarui tampilan
• Memastikan dashboard menampilkan informasi yang paling terkini
• Mempertahankan pemisahan yang jelas antara manajemen data dan pembaruan UI

Langkah 3: Integrasi dengan Sistem Rute

Perbarui konfigurasi rute Anda untuk memicu penyegaran secara otomatis:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

Bagaimana integrasi ini bekerja:

• Menjalankan fungsi penyegaran setiap kali rute dashboard dimuat
• Memastikan data segar selalu ditampilkan saat pengguna menavigasi ke dashboard
• Mempertahankan struktur rute yang ada sambil menambahkan kesegaran data
• Memberikan pola yang konsisten untuk inisialisasi spesifik rute

Pengujian Sistem Penyegaran Data Anda:

1. Masuk ke aplikasi perbankan Anda
2. Jalankan perintah curl dari sebelumnya untuk membuat transaksi baru
3. Segarkan halaman dashboard Anda atau navigasikan ke halaman lain dan kembali
4. Verifikasi bahwa transaksi baru muncul segera

🎉 Keseimbangan Sempurna Tercapai: Aplikasi Anda sekarang menggabungkan pengalaman mulus dari status persisten dengan akurasi data server yang segar!

Tantangan Agen GitHub Copilot 🚀

Gunakan mode Agen untuk menyelesaikan tantangan berikut:

Deskripsi: Implementasikan sistem manajemen status yang komprehensif dengan fungsi undo/redo untuk aplikasi perbankan. Tantangan ini akan membantu Anda mempraktikkan konsep manajemen status tingkat lanjut termasuk pelacakan riwayat status, pembaruan yang tidak dapat diubah, dan sinkronisasi antarmuka pengguna.

Prompt: Buat sistem manajemen status yang ditingkatkan yang mencakup: 1) Array riwayat status yang melacak semua status sebelumnya, 2) Fungsi undo dan redo yang dapat kembali ke status sebelumnya, 3) Tombol UI untuk operasi undo/redo di dashboard, 4) Batas riwayat maksimum 10 status untuk mencegah masalah memori, dan 5) Pembersihan riwayat yang tepat saat pengguna keluar. Pastikan fungsi undo/redo bekerja dengan perubahan saldo akun dan tetap persisten di antara penyegaran browser.

Pelajari lebih lanjut tentang mode agen di sini.

🚀 Tantangan: Optimasi Penyimpanan

Implementasi Anda sekarang menangani sesi pengguna, penyegaran data, dan manajemen status dengan efektif. Namun, pertimbangkan apakah pendekatan saat ini secara optimal menyeimbangkan efisiensi penyimpanan dengan fungsionalitas.

Seperti master catur yang membedakan antara bidak penting dan yang dapat dikorbankan, manajemen status yang efektif membutuhkan identifikasi data mana yang harus persisten versus yang harus selalu segar dari server.

Analisis Optimasi:

Evaluasi implementasi localStorage Anda saat ini dan pertimbangkan pertanyaan strategis berikut:

• Apa informasi minimum yang diperlukan untuk mempertahankan autentikasi pengguna?
• Data mana yang cukup sering berubah sehingga caching lokal memberikan sedikit manfaat?
• Bagaimana optimasi penyimpanan dapat meningkatkan kinerja tanpa mengurangi pengalaman pengguna?

Strategi Implementasi:

• Identifikasi data penting yang harus persisten (kemungkinan hanya identifikasi pengguna)
• Modifikasi implementasi localStorage Anda untuk hanya menyimpan data sesi yang penting
• Pastikan data segar selalu dimuat dari server saat mengunjungi dashboard
• Uji bahwa pendekatan yang dioptimalkan mempertahankan pengalaman pengguna yang sama

Pertimbangan Lanjutan:

• Bandingkan trade-off antara menyimpan data akun lengkap vs. hanya token autentikasi
• Dokumentasikan keputusan dan alasan Anda untuk anggota tim di masa depan

Tantangan ini akan membantu Anda berpikir seperti pengembang profesional yang mempertimbangkan baik pengalaman pengguna maupun efisiensi aplikasi. Luangkan waktu Anda untuk bereksperimen dengan berbagai pendekatan!

Kuis Pasca-Kuliah

Kuis pasca-kuliah

Tugas

Implementasikan dialog "Tambah transaksi"

Berikut adalah contoh hasil setelah menyelesaikan tugas:

---

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.