Daftar Barang ReactJS, FakeStoreAPI, dan MySQL

Samuel Thomas Latekay

Sosial Media


1 orang menyukai ini
Suka

Summary

Proyek ini dikembangkan dengan tujuan untuk memberikan kemudahan dalam mengelola informasi serta memeriksa berbagai barang dengan lebih efisien, sekaligus sebagai kesempatan berharga untuk memperdalam keterampilan dalam pengembangan aplikasi web modern. Dalam proyek ini, teknologi ReactJS digunakan untuk membangun antarmuka interaktif yang responsif dan intuitif, memudahkan pengguna dalam menavigasi dan mencari data produk secara langsung. Untuk sumber data produk, aplikasi ini mengandalkan FakeStore API, yang menyajikan data produk secara lengkap dan relevan, sehingga pengguna dapat memperoleh gambaran yang nyata mengenai berbagai barang yang tersedia. Tidak hanya itu, proyek ini juga mencakup pengembangan API sendiri yang dibangun dengan framework Python Flask. Dengan adanya API kustom ini, aplikasi memiliki fleksibilitas lebih dalam pengelolaan data, memungkinkan pengembang untuk menambahkan, memodifikasi, atau menghapus data produk sesuai kebutuhan. Hal ini juga memberikan kontrol yang lebih besar atas alur data, sekaligus memperkuat pemahaman dalam pembuatan dan integrasi API. Secara keseluruhan, proyek ini bukan hanya alat yang fungsional untuk pengelolaan barang, tetapi juga merupakan langkah signifikan dalam perjalanan menguasai pengembangan aplikasi berbasis teknologi modern.

Description

  1. FrontEnd

Pada bagian ini saya menggunakan Reactjs untuk projek ini karena dangat lengkap untuk pengembangan aplikasi 

Dengan antarmuka ini, pengguna dapat dengan mudah mencari, menambakan, dan edit daftar barang  yang diinginkan melalui UI yang sederhana dan intuitif. Selain itu, pengguna juga dapat menambahkan nama barang serta keterangan lengkap tentang barang tersebut. Aplikasi ini memanfaatkan FakeStoreAPI untuk menyediakan data produk, dan dilengkapi dengan API buatan sendiri agar lebih fleksibel dan dapat disesuaikan dengan kebutuhan.

A screen shot of a computer program Description automatically generated

Ini adalah sekilas tampilan dari kode frontend aplikasi daftar barang yang dibangun menggunakan ReactJS. Saya mendapatkan berbagai kemudahan dibandingkan dengan framework lain, yang membuat pengembangan aplikasi ini menjadi lebih cepat dan efisien.

  1. BackEnd

Untuk backend saya menggunakan python flask untuk memudakan dalam pengembangan apliaksi tesebut kenapa saya menggunakan python flask karena muda di pelajari dan gampang di pasang dan di jalankan 

A screenshot of a computer Description automatically generated

Metode yang saya gunakan dalam backend ini ada 3 yaitu

  1. GET
A screenshot of a computer Description automatically generated

Get adalah metode untuk menpilkan data dari dari server

 

  1. POST
A screenshot of a computer Description automatically generated

Post di gunakan untuk menambakan data data barang yang ada dalam basis data

  1. PUT

Put di hunakan untuk engedit data yang ada lama basis data 

Selain itu, saya juga menggunakan API eksternal, yaitu FakeStore API, karena mereka memiliki basis data produk yang lengkap, termasuk barang-barang seperti baju, celana, dan lainny

Ini adalah API ekternal yang di ambild dari FakeStore API “https://fakestoreapi.com/products“

 

  1. Hasil

Dengan kombinasi antara backend dan frontend, kita dapat menciptakan aplikasi yang interaktif dan bermanfaat untuk memudahkan kehidupan manusia.

Dalam aplikasi ini kita dapat meyimpan data dan mengedit data 

  1. Tamabah data
A screenshot of a computer Description automatically generated

Dengan ini, pengguna dapat menambahkan data baru ke dalam basis data yang telah dibuat.

  1. Edit data
A screenshot of a computer Description automatically generated

Ketika pengguna mendapati data yang dimasukkan salah, data tersebut dapat diedit dan disimpan dalam basis data yang telah dibuat.

Informasi Course Terkait
  Kategori: Web Programming
  Course: Dasar - Dasar ReactJS