Cabaran Pengekodan React -Pelayar Jualan Bandar/Produk menggunakan React

Tugasan: Pelayar Jualan Bandar/Produk menggunakan React

Nama Syarikat: Cytel

Keputusan - Dipilih untuk Pusingan Seterusnya

Objektif

Bangunkan aplikasi React ringkas yang memaparkan maklumat jualan bandar dan produk dengan penghalaan dan pengambilan data dinamik. Apl harus membenarkan pengguna menavigasi antara halaman yang berbeza dan ia harus menjejaki bilangan bandar dan produk yang telah dilawati. Data hendaklah dimuat semula atas permintaan pengguna.

Keperluan

1. Gambaran Keseluruhan Aplikasi:

   • Paparkan dua pembilang di bahagian atas halaman:
     • Bandar yang Dilawati: 0
     • Produk yang Dilawati: 0
   • Sediakan butang Muat Semula yang menetapkan semula pembilang dan memuatkan semula data.

2. Halaman Utama:

   • URL: /
   • Paparkan dua senarai:
     • Senarai nama bandar yang diambil daripada API.
     • Senarai nama produk yang diambil daripada API.
   • Mulakan Bandar yang Dilawati dan Produk yang Dilawati membilang kepada 0 apabila apl dimulakan.

3. Titik Tamat API:

   • Untuk mengambil semua bandar: https://assessments.reliscore.com/api/cities
   • Untuk mengambil semua produk: https://assessments.reliscore.com/api/sales/products

4. Halaman Butiran Bandar:

   • URL: /api/sales//
   • Mengklik pada nama bandar dari halaman utama menavigasi ke halaman khusus bandar.
   • Ambil dan paparkan senarai nama produk dan kuantiti yang dijual di bandar yang dipilih menggunakan titik akhir berikut: https://assessments.reliscore.com/api/sales// (Ganti dengan nama bandar sebenar.)
   • Naikkan kaunter Bandar Dilawati sebanyak 1 setiap kali halaman bandar dilawati.

5. Halaman Butiran Produk:

   • URL: /sales/product//
   • Mengklik pada nama produk dari mana-mana halaman menavigasi ke halaman khusus produk.
   • Ambil dan paparkan senarai semua nama bandar tempat produk itu telah dijual dan jumlah yang dijual di setiap bandar menggunakan titik akhir berikut: https://assessments.reliscore.com/api/sales/product// (Ganti dengan nama produk sebenar.)
   • Naikkan kaunter Produk yang Dilawati sebanyak 1 setiap kali halaman produk dilawati.

6. Butang Muat Semula:

   • Mengklik butang Muat Semula pada mana-mana halaman hendaklah:
     • Muat semula semua data daripada API masing-masing.
     • Tetapkan semula pembilang Bandar yang Dilawati dan Produk yang Dilawati kepada 0.

7. Aplikasi Halaman Tunggal (SPA) dengan Penghalaan:

   • Laksanakan aplikasi sebagai aplikasi satu halaman (SPA) menggunakan React.
   • Gunakan penghalaan untuk mengendalikan navigasi antara halaman yang berbeza (cth., butiran bandar, butiran produk) sambil memastikan bahawa butang belakang dan hadapan penyemak imbas berfungsi dengan betul.
   • Pastikan pengguna boleh menavigasi terus ke mana-mana halaman menggunakan URL yang sesuai.

8. Kriteria Penilaian:

   • Penggunaan yang sesuai bagi komponen React boleh guna semula.
   • Penggunaan cekap ciri React seperti cangkuk dan pengurusan keadaan.
   • Pelaksanaan penghalaan yang betul untuk mensimulasikan halaman yang berbeza.
   • Pematuhan kepada amalan terbaik dalam struktur kod dan modulariti.

Boleh dihantar

• Aplikasi React berfungsi sepenuhnya memenuhi keperluan yang digariskan di atas.
• Projek hendaklah berstruktur, diulas dengan baik dan mudah dinavigasi.
• Pastikan aplikasi mengendalikan kes tepi, seperti kehilangan data atau URL yang salah.

Nota

• Uji aplikasi anda dengan teliti untuk memastikan semua ciri berfungsi seperti yang diharapkan.
• Pastikan apl responsif dan berfungsi dengan baik pada saiz skrin yang berbeza.

Gambaran Keseluruhan Respons API

1. Respons API Bandar:

   • Titik Akhir: https://assessments.reliscore.com/api/cities
   • Format Jawapan:

     {
       "status": "success",
       "data": [
         "Bombay",
         "Bangalore",
         "Pune",
         "Kolkata",
         "Chennai",
         "New Delhi"
       ]
     }
   

Penerangan: API ini mengembalikan senarai nama bandar tempat data jualan tersedia. Tatasusunan data mengandungi nama bandar ini.

1. Data Jualan untuk Bandar Tertentu:

   • Endpoint: https://assessments.reliscore.com/api/sales/pune (Replace pune with any other city name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns sales data for a specific city. The data object contains key-value pairs where the key is the product name and the value is the number of items sold in that city.

1. Products List API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/products
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns a list of all products with their total sales figures. The data object contains key-value pairs where the key is the product name and the value is the total number of items sold across all cities.

1. Product Detail API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/product/product1 (Replace product1 with any other product name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns the sales data for a specific product across different cities. The data object contains key-value pairs where the key is the city name and the value is the number of items sold for that product in that city.

Note:

Please ensure that you fully understand the requirements before starting the implementation. There’s a minor issue with the API response for the product/ endpoint, but it can be worked around with the provided data. Adding the API responses for reference above.

You are encouraged to implement the solution and make any necessary modifications to the APIs as needed to meet the requirements. If you need more details or are interested in similar assignments, you can refer to my E-Commerce Project.

Atas ialah kandungan terperinci Cabaran Pengekodan React -Pelayar Jualan Bandar/Produk menggunakan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!