Menggunakan ChatGPT untuk membuat aplikasi web full-stack di ReactJS

Using ChatGPT to create a full-stack web application in ReactJS

Dalam tutorial ini, kami akan mendemonstrasikan cara membuat aplikasi daftar tugas yang sederhana namun fungsional dengan bantuan ChatGPT. Kita akan menggunakan Back4App untuk backend, React untuk frontend, dan Material-UI untuk penataan. Tujuan utama kami adalah untuk membantu orang-orang yang memiliki sedikit atau tanpa pengetahuan coding untuk membuat aplikasi menggunakan kekuatan ChatGPT melalui serangkaian petunjuk dan panduan.

Gambaran Umum Teknologi

  • ChatGPT: ChatGPT adalah model bahasa yang kuat yang dikembangkan oleh OpenAI. Model ini didasarkan pada arsitektur GPT-4 dan dapat digunakan untuk menghasilkan kode, menjawab pertanyaan, dan memberikan bantuan dalam berbagai tugas.
  • Back4App: Back4App adalah platform backend yang dikelola sepenuhnya yang menyederhanakan proses pembuatan, hosting, dan pengelolaan aplikasi web dan seluler. Platform ini dibangun di atas Parse, sebuah kerangka kerja sumber terbuka yang menawarkan berbagai layanan seperti penyimpanan data, otentikasi pengguna, dan fungsi cloud.
  • React: React adalah library JavaScript yang populer untuk membangun antarmuka pengguna. React memudahkan untuk membuat dan mengelola komponen UI yang kompleks dan state-nya.
  • Material-UI: Material-UI adalah pustaka komponen React yang populer yang mengimplementasikan prinsip-prinsip Desain Material Google, menyediakan komponen yang sudah dibuat sebelumnya dan kemampuan templat untuk membangun aplikasi web yang indah dan fungsional.

Menyiapkan Back4App

Untuk memulai dengan Back4App, Anda perlu membuat akun dan aplikasi baru di platform ini. Ikuti langkah-langkah berikut ini:

  1. Daftar untuk mendapatkan akun gratis di https://www.back4app.com/.
  2. Masuk ke akun Anda dan buat aplikasi baru.
  3. Setelah membuat aplikasi, buka “Dasbor” dan catat ID Aplikasi, Kunci JavaScript, dan Kunci REST API Anda, karena Anda akan membutuhkannya nanti.

Membuat Model Data

Saya sudah mulai memperkenalkan apa yang saya inginkan kepada chatGPT. Saya tidak memberinya terlalu banyak detail tentang model data karena saya penasaran dengan apa yang akan dia hasilkan. Permintaan saya kepada chatGPT adalah:

Tanyakan kepada ChatGPT: “Saya membutuhkan bantuan Anda untuk membuat Aplikasi Daftar Tugas lengkap dengan ChatGPT dan Back4app. Mari kita mulai dengan membuat model data. Dapatkah Anda membuat kode untuk membuat model data ini menggunakan perintah cURL yang tersedia di Back4app? Gunakan permintaan pembuatan objek pertama untuk membuat seluruh kelas.”

Itulah hasil akhirnya:

curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "judul": "Contoh Tugas",
        "deskripsi": "Ini adalah contoh deskripsi tugas.",
        "dueDate": {
          "__type": "Tanggal",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task

Setelah itu saya memeriksa Back4app dan model data saya berhasil dibuat:

Menggunakan cURL untuk Menambahkan Data Sampel

Sekarang saya meminta chatGPT untuk memberikan beberapa contoh data untuk mengisi Class saya:

Tanya ChatGPT: “Sekarang beri saya 5 tugas baru sebagai data sampel untuk mengisi kelas saya.”

# Tugas 1
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "judul": "Beli bahan makanan",
        "deskripsi": "Beli bahan makanan untuk minggu ini",
        "dueDate": {
          "__jenis": "Tanggal",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tugas 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "judul": "Selesaikan pekerjaan rumah",
        "deskripsi": "Selesaikan tugas matematika dan sejarah",
        "dueDate": {
          "__jenis": "Tanggal",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Tugas 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "judul": "Menghadiri janji dengan dokter",
        "deskripsi": "Pemeriksaan tahunan di dokter keluarga",
        "dueDate": {
          "__jenis": "Tanggal",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tugas 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "judul": "Hubungi bank",
        "deskripsi": "Tanyakan tentang opsi rekening tabungan baru",
        "dueDate": {
          "__jenis": "Tanggal",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tugas 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Rencanakan liburan akhir pekan",
        "deskripsi": "Cari dan pesan akomodasi untuk perjalanan singkat",
        "dueDate": {
          "__type": "Tanggal",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "selesai": false
      }' \
  https://parseapi.back4app.com/classes/Task

Saya telah menjalankan perintah pada Terminal saya. Sekarang kelas saya sudah terisi di Back4app:

Membangun Front-End React

Sekarang setelah kita menyiapkan backend, mari kita membuat front-end untuk aplikasi ToDo kita menggunakan React. Saya tidak yakin lib React apa yang harus digunakan untuk membantu saya membuat UI yang lebih baik, jadi saya meminta rekomendasinya:

Tanya ChatGPT: “Sekarang mari kita membangun front-end. Saya membutuhkan front-end yang indah dan berguna di React. Apakah Anda merekomendasikan untuk menggunakan library komponen tertentu untuk itu?”

Itulah jawabannya:

Saya memilih untuk menggunakan Material-UI kemudian diminta untuk membuat kode.

Karena saya sudah menginstal node di komputer saya, maka mudah untuk menjalankan perintah dan membuat proyek. Jika Anda belum menginstal node, Anda bisa mengunduh dan menginstalnya di sini: https://nodejs.org/en/download

Pertama, saya membuat proyek React:

npx create-react-app todo-app
cd todo-app

dan kemudian memasang komponen yang ia rekomendasikan untuk proyek saya:

npm install @mui/materi @emotion/react @emotion/styled parse

Perhatikan bahwa jika suatu saat chatGPT berhenti untuk menulis jawaban, Anda dapat meminta untuk melanjutkan dengan mengetik: “Anda dapat melanjutkan”.

Sekarang dengan proyek yang telah dibuat, saya telah mengganti kode App.js sesuai permintaan chatGPT dan juga memperbarui kuncinya: AppID dan Kunci JavaScript.

Ini adalah kode lengkapnya:

import React, { useState, useEffect } from 'react';
import Parse dari 'parse';
import { Container, Typography, TextField, Button, List, ListItem, ListItemText, Checkbox, IconButton } dari '@mui/material';
import { Delete as DeleteIcon } dari '@mui/icons-material';

// Inisialisasi Parse dengan ID Aplikasi Back4App dan Javascript Key Anda
Parse.inisialisasi('YOUR_APP_ID_HERE', 'YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = 'https://parseapi.back4app.com/';

const TodoItem = Parse.Object.extend('TodoItem');

fungsi App() {
  const [todoInput, setTodoInput] = useState('');
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const query = new Parse.Query(TodoItem);
    query.descending('createdAt');
    try {
      const hasil = await query.find();
      setTodos(hasil);
    } catch (error) {
      console.error('Kesalahan saat mengambil todos:', error);
    }
  };

  const createTodo = async () => { 
    if (todoInput === '') return;

    const todoItem = new TodoItem();
    todoItem.set('judul', todoInput);
    todoItem.set('selesai', false);

    mencoba {
      menunggu todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (error) {
      console.error('Kesalahan saat membuat todo:', error);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('selesai', !todo.get('selesai'));
    try {
      menunggu todo.save();
      fetchTodos();
    } catch (error) {
      console.error('Kesalahan saat memperbarui todo:', error);
    }
  };

  const deleteTodo = async (todo) => {
    try {
      menunggu todo.destroy();
      fetchTodos();
    } catch (error) {
      console.error('Kesalahan saat menghapus todo:', error);
    }
  };

  return (
   
     
        Daftar Tugas
     
       setTodoInput(e.target.value)}
        onKeyDown = {(e) => {
          if (e.key === 'Enter') {
            createTodo();
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             deleteTodo(todo)}>
             
           
         
        ))}
     
   
  );
}

mengekspor Aplikasi default;

Menjalankan kode tersebut, saya bisa melihat, yang mengejutkan saya, sebuah Aplikasi fungsional yang lengkap berjalan di mesin lokal saya dan terhubung ke Back4app Backend:

Kesimpulan

Dalam tutorial ini, kami mendemonstrasikan cara memanfaatkan kekuatan ChatGPT untuk membuat aplikasi daftar tugas sederhana menggunakan Back4App, React, dan Material-UI. Kita telah membahas pengaturan backend dengan Back4App, membuat model data, menambahkan contoh data dengan perintah cURL, dan membangun front-end yang indah dan fungsional menggunakan React dan Material-UI.

Dengan berinteraksi dengan ChatGPT melalui serangkaian petunjuk, kami dapat menghasilkan potongan kode, panduan, dan instruksi untuk setiap langkah, sehingga memungkinkan pengguna dengan sedikit atau tanpa pengetahuan pengkodean untuk membangun aplikasi web.

Contoh ini menunjukkan potensi ChatGPT sebagai alat untuk membantu pengguna dalam berbagai tugas, termasuk pengembangan web. Dengan kemajuan teknologi AI yang terus berlanjut, kita dapat mengharapkan alat yang lebih canggih dan kuat yang dapat membantu pengguna dari berbagai latar belakang dan tingkat keahlian untuk membuat dan mengembangkan proyek mereka sendiri dengan mudah.


Alysson Melo

Leave a reply

Your email address will not be published.