Использование ChatGPT для создания полнофункционального веб-приложения на ReactJS

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

В этом уроке мы покажем, как создать простое, но функциональное приложение для создания списков дел с помощью ChatGPT. Мы будем использовать Back4App для бэкенда, React для фронтенда и Material-UI для стилизации. Наша главная цель – помочь людям с минимальными знаниями в области кодинга или вообще без них создать приложения, используя возможности ChatGPT, с помощью ряда подсказок и рекомендаций.

Обзор технологий

  • ChatGPT: ChatGPT – это мощная языковая модель, разработанная OpenAI. Она основана на архитектуре GPT-4 и может использоваться для генерации кода, ответов на вопросы и помощи в решении различных задач.
  • Back4App: Back4App – это полностью управляемая бэкэнд-платформа, которая упрощает процесс создания, размещения и управления веб- и мобильными приложениями. Она построена на базе Parse, фреймворка с открытым исходным кодом, который предлагает различные услуги, такие как хранение данных, аутентификация пользователей и облачные функции.
  • React: React – популярная библиотека JavaScript для создания пользовательских интерфейсов. Она позволяет легко создавать и управлять сложными компонентами пользовательского интерфейса и их состоянием.
  • Material-UI: Material-UI – это популярная библиотека компонентов React, которая реализует принципы Material Design от Google, предоставляя готовые компоненты и тематические возможности для создания красивых и функциональных веб-приложений.

Настройка Back4App

Чтобы начать работу с Back4App, вам нужно создать учетную запись и новое приложение на платформе. Выполните следующие шаги:

  1. Зарегистрируйтесь бесплатно на сайте https://www.back4app.com/.
  2. Войдите в свою учетную запись и создайте новое приложение.
  3. После создания приложения перейдите в “Dashboard” и запишите свой App ID, JavaScript Key и REST API Key, так как они понадобятся вам позже.

Создание модели данных

Я начал составлять для chatGPT представление о том, что я хочу. Я не давал ему слишком много подробностей о модели данных, потому что мне было интересно посмотреть, что он создаст. Моя подсказка чату GPT была следующей:

Спросите ChatGPT: “Мне нужна ваша помощь, чтобы создать полноценное приложение ToDo List App с помощью ChatGPT и Back4app. Давайте начнем с создания модели данных. Не могли бы вы сгенерировать код для создания этой модели данных, используя команды cURL, доступные на Back4app? Используйте первый запрос на создание объекта для создания всего класса.”

Это был OutPut:

curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Sample Task",
        "description": "Это образец описания задачи.",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

После этого я проверил Back4app, и моя модель данных была успешно создана:

Использование cURL для добавления образцов данных

Теперь я попросил chatGPT дать мне примерные данные для заполнения моего класса:

Спросите ChatGPT: “Теперь дайте мне 5 новых задач в качестве образцов данных для заполнения моего класса”.

# Задача 1
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Купить продукты",
        "description": "Закупить продукты на неделю",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Задача 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Полное домашнее задание",
        "description": "Закончить задания по математике и истории",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Задача 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Посетить прием врача",
        "description": "Ежегодный осмотр у семейного врача",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Задача 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Позвоните в банк",
        "description": "Поинтересоваться новыми возможностями сберегательного счета",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Задача 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT"\\
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu"\
  -H "Content-Type: application/json"\
  -d '{
        "title": "Plan a weekend getaway",
        "description": "Поиск и бронирование жилья для короткой поездки",
        "dueDate": {
          "__type": "Дата",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Я выполнил команды в терминале. Теперь мой класс отображается на Back4app:

Создание фронтальной части React

Теперь, когда мы настроили бэкэнд, давайте создадим фронтэнд для нашего приложения ToDo с помощью React. Я не был уверен, какую либу React использовать для создания лучшего пользовательского интерфейса, поэтому я попросил его порекомендовать:

Спросите у ChatGPT: “Теперь давайте создадим фронтенд. Мне нужен красивый и полезный фронтенд на React. Рекомендуете ли вы использовать для этого какую-то конкретную библиотеку компонентов?”

Вот и весь ответ:

Я выбрал использование Material-UI, а затем попросил создать код.

Поскольку на моем компьютере уже был установлен node, было легко выполнить команды и создать проект. Если у вас не установлен node, вы можете скачать и установить его здесь: https://nodejs.org/en/download.

Сначала я создал проект React:

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

а затем установил компоненты, которые он порекомендовал мне, в мой проект:

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

Обратите внимание, что если в какой-то момент chatGPT остановится, чтобы написать ответ, вы можете попросить продолжить, просто набрав: “Вы можете продолжить”.

Теперь, когда проект создан, я заменил код App.js в соответствии с запросом chatGPT, а также обновил ключи: AppID и JavaScript Key.

Это полный код:

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

// Инициализируйте Parse с помощью идентификатора приложения Back4App и ключа Javascript
Parse.initialize('YOUR_APP_ID_HERE', 'YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = 'https://parseapi.back4app.com/';

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

function 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 results = await query.find();
      setTodos(results);
    } catch (error) {
      console.error('Error while fetching todos:', error);
    }
  };

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

    const todoItem = new TodoItem();
    todoItem.set('title', todoInput);
    todoItem.set('completed', false);

    try {
      await todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (error) {
      console.error('Ошибка при создании todo:', error);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('completed', !todo.get('completed'));
    try {
      await todo.save();
      fetchTodos();
    } catch (error) {
      console.error('Ошибка при обновлении todo:', error);
    }
  };

  const deleteTodo = async (todo) => {
    try {
      await todo.destroy();
      fetchTodos();
    } catch (error) {
      console.error('Ошибка при удалении todo:', error);
    }
  };

  return (
   
     
        Список дел
     
       setTodoInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            createTodo();
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             deleteTodo(todo)}>
             
           
         
        ))}
     
   
  );
}

export default App;

Запустив код, я увидел, к своему удивлению, полноценное функциональное приложение, работающее на моей локальной машине и подключенное к Back4app Backend:

Заключение

В этом уроке мы показали, как использовать возможности ChatGPT для создания простого приложения со списком дел с помощью Back4App, React и Material-UI. Мы рассмотрели настройку бэкенда с помощью Back4App, создание модели данных, добавление примеров данных с помощью команд cURL, а также создание красивого и функционального фронтенда с помощью React и Material-UI.

Взаимодействуя с ChatGPT с помощью серии подсказок, мы смогли сгенерировать фрагменты кода, руководство и инструкции для каждого шага, что позволило пользователям с минимальными знаниями кодирования или вообще без них создать веб-приложение.

Этот пример демонстрирует потенциал ChatGPT как инструмента для помощи пользователям в решении различных задач, включая веб-разработку. С дальнейшим развитием технологий искусственного интеллекта мы можем ожидать появления еще более сложных и мощных инструментов, которые помогут пользователям с разным опытом и уровнем подготовки с легкостью создавать и развивать свои собственные проекты.


Alysson Melo

Leave a reply

Your email address will not be published.