ReactJS’de tam yığın web uygulaması oluşturmak için ChatGPT’yi kullanma

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

Bu eğitimde, ChatGPT yardımıyla basit ama işlevsel bir Yapılacaklar listesi uygulamasının nasıl oluşturulacağını göstereceğiz. Arka uç için Back4App, ön uç için React ve stil için Material-UI kullanacağız. Ana hedefimiz, kodlama bilgisi çok az olan veya hiç olmayan kişilerin bir dizi yönlendirme ve rehberlik aracılığıyla ChatGPT’nin gücünü kullanarak uygulamalar oluşturmalarına yardımcı olmaktır.

Teknolojilere Genel Bakış

  • ChatGPT: ChatGPT, OpenAI tarafından geliştirilen güçlü bir dil modelidir. GPT-4 mimarisine dayanır ve kod oluşturmak, soruları yanıtlamak ve çeşitli görevlerde yardım sağlamak için kullanılabilir.
  • Back4App Back4App, web ve mobil uygulamaları oluşturma, barındırma ve yönetme sürecini basitleştiren, tam olarak yönetilen bir arka uç platformudur. Veri depolama, kullanıcı kimlik doğrulaması ve bulut işlevleri gibi çeşitli hizmetler sunan açık kaynaklı bir çerçeve olan Parse üzerine inşa edilmiştir.
  • React React, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Karmaşık kullanıcı arayüzü bileşenleri ve bunların durumlarını oluşturmayı ve yönetmeyi kolaylaştırır.
  • Material-UI: Material-UI, Google’ın Materyal Tasarım ilkelerini uygulayan, güzel ve işlevsel web uygulamaları oluşturmak için önceden oluşturulmuş bileşenler ve tema yetenekleri sağlayan popüler bir React bileşen kütüphanesidir.

Back4App’in Kurulumu

Back4App’i kullanmaya başlamak için platformda bir hesap ve yeni bir uygulama oluşturmanız gerekir. Bu adımları takip edin:

  1. https://www.back4app.com/ adresinden ücretsiz bir hesap oluşturun .
  2. Hesabınıza giriş yapın ve yeni bir uygulama oluşturun.
  3. Uygulamayı oluşturduktan sonra “Dashboard “a gidin ve daha sonra ihtiyaç duyacağınız için Uygulama Kimliğinizi, JavaScript Anahtarınızı ve REST API Anahtarınızı not edin.

Veri Modelinin Oluşturulması

chatGPT’ye ne istediğime dair bir giriş yapmaya başladım. Ona veri modeli hakkında çok fazla ayrıntı vermedim çünkü ne üreteceğini merak ediyordum. Chat GPT’ye yönelttiğim soru şuydu:

ChatGPT’ye sorun: “ChatGPT ve Back4app ile eksiksiz bir Yapılacaklar Listesi Uygulaması oluşturmak için yardımınıza ihtiyacım var. Veri modelini oluşturarak başlayalım. Lütfen Back4app’ta bulunan cURL komutlarını kullanarak bu veri modelini oluşturmak için kod oluşturabilir misiniz? Tüm sınıfı oluşturmak için ilk nesne oluşturma isteğini kullanın.”

Bu OutPut’tı:

curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Örnek Görev",
        "Açıklama": "Bu örnek bir görev açıklamasıdır.",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Bundan sonra Back4app’i kontrol ettim ve veri modelim başarıyla oluşturuldu:

Örnek Veri Eklemek için cURL Kullanma

Şimdi bir chatGPT’den Sınıfımı doldurmak için bazı örnek veriler vermesini istedim:

ChatGPT’ye sorun: “Şimdi bana sınıfımı doldurmak için örnek veri olarak 5 yeni görev verin.”

# Görev 1
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Yiyecek al",
        "Açıklama": "Hafta için yiyecek satın alın",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Görev 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Ev ödevini tamamla",
        "Açıklama": "Matematik ve tarih ödevlerini bitir",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Görev 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Bir doktor randevusuna katılın",
        "Açıklama": "Aile hekiminde yıllık check-up",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Görev 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Bankayı ara",
        "Açıklama": "Yeni tasarruf hesabı seçenekleri hakkında bilgi alın",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Görev 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "başlık": "Bir hafta sonu kaçamağı planlayın",
        "Açıklama": "Kısa bir seyahat için konaklama yerlerini araştırın ve rezervasyon yapın",
        "dueDate": {
          "__type": "Tarih",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Terminalimdeki komutları çalıştırdım. Şimdi sınıfım Back4app üzerinde dolduruldu:

React Ön Ucu Oluşturma

Artık arka ucumuzu kurduğumuza göre, React kullanarak ToDo uygulamamız için bir ön uç oluşturalım. Daha iyi bir kullanıcı arayüzü oluşturmama yardımcı olması için hangi React kütüphanesini kullanmam gerektiğinden emin değildim, bu yüzden onun tavsiyesini istedim:

ChatGPT’ye sorun: “Şimdi ön ucu oluşturalım. React’te güzel ve kullanışlı bir ön yüze ihtiyacım var. Bunun için belirli bir bileşen kütüphanesi kullanmamı önerir misiniz?”

Cevap bu:

Material-UI kullanmayı tercih ettim ve ardından kodu oluşturmam istendi.

Bilgisayarımda zaten node kurulu olduğu için komutları çalıştırmak ve projeyi oluşturmak kolay oldu. Eğer node kurulu değilse, buradan indirip kurabilirsiniz: https://nodejs.org/en/download

İlk olarak React projesini oluşturdum:

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

ve sonra bana önerdiği bileşenleri projeme kurdum:

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

Eğer chatGPT herhangi bir anda cevabı yazmayı durdurursa, sadece yazarak devam etmeyi isteyebileceğinize dikkat edin: “devam edebilirsiniz”.

Şimdi oluşturulan proje ile App.js kodunu chatGPT isteğine göre değiştirdim ve anahtarları da güncelledim: AppID ve JavaScript Anahtarı.

Kodun tamamı bu:

import React, { useState, useEffect } from '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 Uygulama Kimliğiniz ve Javascript Anahtarınız ile başlatın
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 sorgu = new Parse.Query(TodoItem);
    query.descending('createdAt');
    try {
      const results = await query.find();
      setTodos(sonuçlar);
    } catch (hata) {
      console.error('Todos getirilirken hata oluştu:', hata);
    }
  };

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

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

    dene {
      await todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (hata) {
      console.error('Yapılacaklar oluşturulurken hata oluştu:', hata);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('completed', !todo.get('completed'));
    try {
      await todo.save();
      fetchTodos();
    } catch (hata) {
      console.error('Yapılacaklar güncellenirken hata oluştu:', hata);
    }
  };

  const deleteTodo = async (todo) => {
    dene {
      await todo.destroy();
      fetchTodos();
    } catch (hata) {
      console.error('Yapılacaklar silinirken hata oluştu:', hata);
    }
  };

  dönüş (
   
     
        Yapılacaklar Listesi
     
       setTodoInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            createTodo();
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             deleteTodo(todo)}>
             
           
         
        ))}
     
   
  );
}

varsayılan Uygulamayı dışa aktar;

Kodu çalıştırdığımda, sürpriz bir şekilde, yerel makinemde çalışan ve Back4app Backend’e bağlı tam işlevsel bir Uygulama görebildim:

Sonuç

Bu eğitimde, Back4App, React ve Material-UI kullanarak basit bir Yapılacaklar listesi uygulaması oluşturmak için ChatGPT’nin gücünden nasıl yararlanılacağını gösterdik. Back4App ile arka ucu kurmayı, bir veri modeli oluşturmayı, cURL komutlarıyla örnek veriler eklemeyi ve React ve Material-UI kullanarak güzel ve işlevsel bir ön uç oluşturmayı ele aldık.

ChatGPT ile bir dizi istem aracılığıyla etkileşime girerek, her adım için kod parçacıkları, rehberlik ve talimatlar oluşturabildik ve kodlama bilgisi çok az olan veya hiç olmayan kullanıcıların bir web uygulaması oluşturmasını mümkün hale getirdik.

Bu örnek, ChatGPT’nin web geliştirme de dahil olmak üzere çeşitli görevlerde kullanıcılara yardımcı olacak bir araç olarak potansiyelini göstermektedir. Yapay zeka teknolojilerinin sürekli ilerlemesiyle birlikte, farklı geçmişlere ve beceri düzeylerine sahip kullanıcıların kendi projelerini kolaylıkla oluşturmalarına ve geliştirmelerine yardımcı olabilecek daha da sofistike ve güçlü araçlar bekleyebiliriz.


Alysson Melo

Leave a reply

Your email address will not be published.