PostgreSQL veritabanı ile bir web uygulaması nasıl oluşturulur ve dağıtılır?

Bu makalede, AI teknolojilerini kullanarak Postgres veritabanı ile bir web uygulamasının nasıl oluşturulacağını ve dağıtılacağını öğreneceksiniz.

Geliştirme iş akışınıza yapay zeka eklemek üretkenliğiniz için faydalı olabilir. Tekrarlayan görevleri otomatikleştirerek ve kod oluşturma gibi yapay zeka özelliklerini kullanarak geliştirme süresini kısaltabilir ve maliyetlerden tasarruf edebilirsiniz.

Web Geliştirmede Yapay Zeka Kullanmanın Avantajları

Yapay zekayı web geliştirmenize entegre etmenin bazı avantajları şunlardır.

Tekrarlayan Görevlerin Otomasyonu

Yapay zekayı geliştirme iş akışınıza dahil etmek, sahte veri ve şablon kod oluşturma gibi tekrar eden görevleri otomatikleştirmenize yardımcı olabilir.

Ayrıca birim ve entegrasyon testleri oluşturmak için testlere de yardımcı olabilir.

Bununla birlikte, yapay zeka birçok görevi otomatikleştirebilse de, kusursuz bir çözüm olmadığını ve hala insan gözetimi gerektirdiğini unutmamak önemlidir.

Doğru olduklarından emin olmak için yapay zeka araçlarının çıktılarını her zaman gözden geçirin ve doğrulayın.

Kod Üretimi

Yapay zeka araçları kod parçacıkları ve hatta tüm fonksiyonları yazmanıza yardımcı olabilir. Bu otomasyon, kodlama sürecinizi hızlandırarak daha üst düzey tasarım ve problem çözmeye odaklanmanızı sağlar.

Ancak, yapay zeka tarafından üretilen kod yanıltıcı olabilir ve yazılım geliştirme yaşam döngüsünün ilerleyen aşamalarında bulunması zor hatalara yol açabilir; bu nedenle, kod üretime geçmeden önce incelenmelidir.

Geliştirilmiş Kod Optimizasyonu

Yapay zeka araçları, daha verimli ve sürdürülebilir çözümler üretmek için kodunuzun yeniden yazabileceğiniz veya yeniden düzenleyebileceğiniz bölümlerini önererek kodunuzu hız için optimize etmenize yardımcı olabilir.

Bu, karmaşık mantığı basitleştirmeyi, gereksiz kodu ortadan kaldırmayı veya dil özelliklerini daha iyi kullanmayı içerebilir.

Yapay zeka araçları, kodunuzun genel performansını ve veriler üzerindeki işlemlerin verimliliğini artırmak için daha verimli algoritmalar ve veri yapıları seçmenize de yardımcı olabilir.

Hata Tespiti ve Düzeltme

Yapay zeka araçları, hatalarınızı analiz ederek ve hatalarınıza uygulanabilir çözümler sunarak kodunuzda daha hızlı hata ayıklamanıza yardımcı olabilir.

Örneğin, Back4app konteynerlerini kullanarak bir uygulama dağıttığınızda, Back4app AI, Docker dosyanızdaki hatalardan kaynaklanan hataları analiz eder ve hataları çözebilecek ve uygulamanızı başarıyla dağıtmanıza yardımcı olabilecek öneriler sunar.

Back4app AI Agent ve PostgreSQL kullanarak bir Arka Uç Oluşturma

Bu eğitim için bir Kütüphane API’si oluşturacaksınız. Aşağıdaki tabloları içeren bir PostgreSQL veritabanı ile etkileşime gireceksiniz: Book, Author, BookCheckout ve LibraryMember.

Veritabanı Yapısı ve Tasarımı

Kitap tablosu, bir kitap hakkında başlık, yazar, yayın_yılı, toplam_kopi sayısı ve mevcut_kopi sayısı gibi en fazla bilgiyi içerir.

Yazar tablosunun Kitap tablosuyla bire çok ilişkisi vardır, yani bir yazarın birçok kitabı olabilir, ancak her kitabın yalnızca bir yazarı olabilir. Ayrıca yazarın tam adı gibi yazarla ilgili küçük ayrıntıları da içerir.

LibraryMemeber tablosu, kütüphane üyeleri hakkında ad, e-posta, telefon numarası gibi bilgileri içerir.

BookCheckout tablosu, aralarında çoktan çoğa bir ilişki kurmak için Book ve LibraryMemeber tabloları arasında bir bağlantı tablosu görevi görür.

Yani, bir üye birden fazla kitap ödünç alabilir ve birden fazla üye bir kitabı ödünç alabilir. Kitap ve kitabı ödünç alan üye ile birlikte ödünç alma tarihi, son ödeme tarihi ve iade tarihine referans verir.

İşte veritabanı için bir veritabanı modeli diyagramı.

Back4app üzerinde Veritabanı Oluşturma

back4app.com adresine gidin, oturum açın (hesabınız yoksa bir hesap oluşturun) ve ekranınızın sağ üst köşesindeki “Yeni Uygulama” düğmesine tıklayın.

Aşağıdaki resimde gösterildiği gibi Backend as a Service seçeneğini seçin.

Uygulamanızı adlandırın ve aşağıdaki resimde gösterildiği gibi PostgreSQL seçeneğini seçin.

Back4app AI Agent’a gidin ve aşağıdaki komut istemini girin:

"I need you to create database tables in my Back4app app; what do you need me to provide?"

Bu AI aracısı, sizin için veritabanı tablolarını oluşturmak için ihtiyaç duyduğu şeylerin bir listesini döndürecektir. Bunlar uygulama anahtarlarınızı ve şema tanımınızı içermelidir.

Önceki bölümdeki veritabanı tasarımına dayanarak, şema tanımınız aşağıdaki kod bloğuna benzer olmalıdır:

1. **Authors Class:**
    - Class Name: `Authors`
    - Fields:
        - `authorId` (Auto-generated, Primary Key)
        - `authorName` (String, Required)
2. **Books Class:**
    - Class Name: `Books`
    - Fields:
        - `bookId` (Auto-generated, Primary Key)
        - `title` (String, Required)
        - `author` (Pointer to the `Authors` class)
        - `publicationYear` (Number)
        - `availableCopies` (Number)
        - `totalCopies` (Number)
3. **LibraryMembers Class:**
    - Class Name: `LibraryMembers`
    - Fields:
        - `memberId` (Auto-generated, Primary Key)
        - `name` (String, Required)
        - `email` (String, Required)
        - `phoneNumber` (String)
4. **BookCheckouts Class:**
    - Class Name: `BookCheckouts`
    - Fields:
        - `checkoutId` (Auto-generated, Primary Key)
        - `book` (Pointer to the `Books` class)
        - `member` (Pointer to the `LibraryMembers` class)
        - `checkoutDate` (Date)
        - `dueDate` (Date)
        - `returnDate` (Date)

Yukarıdaki kod bloğu, veri türlerini ve ilişkileri doğru bir şekilde tanımlayarak yapay zekanın veritabanınızı doğru bir şekilde oluşturmasını sağlayacak şekilde veritabanı şemanızı tanımlar.

Ayrıntıları AI aracısına sağladıktan ve aracı veritabanınızı başarıyla oluşturduğunu onayladıktan sonra, veritabanının oluşturulduğunu doğrulamak için uygulama kontrol panelinizi kontrol edebilirsiniz.

Ardından, aşağıdaki komut istemini kullanarak AI aracısından veritabanınızı test verileriyle doldurmasını isteyin.

Populate my database with test data for the Authors, their books, 
and some library members who have checked out books from the library.

Artık veritabanınızda üzerinde çalışabileceğiniz test verileriniz var.

Bulut Kodu Oluşturma

Artık üzerinde çalışabileceğiniz test verilerine sahip olduğunuza göre, kütüphane yönetim sisteminiz için işlevsellik uygulamanız gerekecektir.

Bu eğitim için uygulamanız aşağıdaki işlevlere sahip olacaktır.

• Kütüphanedeki tüm kitapları alın.
• Kütüphanedeki belirli bir kitabı görüntüleyin.
• Belirli bir yazara ait tüm kitapları görüntüleyin.
• Kütüphaneden bir kitap ödünç alın.
• Ödünç aldığınız bir kitabı kütüphaneye iade edin.

Bu işlevi, uygulamanızın HTTP istekleri tarafından tetiklenen olaylara yanıt olarak Back4app üzerinde JavaScript işlevleri çalıştırmasına olanak tanıyan Back4app’in bulut kodu işlevlerini kullanarak uygulayabilirsiniz.

Geliştirme sürecinizi basitleştirmek için Back4app AI aracısını kullanarak özel bulut kodu işlevleri oluşturabilirsiniz.

Back4app AI ajanına, kütüphanedeki tüm kitapları almak için bulut kodunu oluşturması için aşağıdaki istemi verin.

Create a cloud code function called `getAllBooks` 
that will return all the books in the database with their respective authors.

Ardından, Back4app AI aracısına, ID’deki bir kitabı almak için bulut kodunu oluşturması için aşağıdaki istemi verin.

Create a cloud code function called `viewBook(bookId)`
that allows me to provide a book ID and return a book with the matching ID.

Ardından, Back4app AI aracısına, belirli bir yazarın tüm kitaplarını almak için bulut kodunu oluşturması için aşağıdaki istemi verin.

Create a cloud code function called `getByAuthor(authorName)` that allows me to provide an author name and return all the books by the author.

Ardından, Back4app AI aracısına kütüphaneden bir kitap ödünç almak için bulut kodu oluşturması için aşağıdaki komutu verin.

Create a cloud code function called `borrowBookFromLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID  and records a book checkout for the member with the due date and return date set to a month from the current date. 

The function should also check if the book is available (ie `availableCopies` != 0). The book should display a proper error message if it is unavailable.

Son olarak, Back4app AI ajanına bir kitabı kütüphaneye iade etmek için bulut kodu oluşturması için aşağıdaki istemi verin.

Create a cloud code function called `returnBookToLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID. 

The function should fetch the BookCheckout record  with the libraryMemberId and bookId provided and update  the return date of the BookCheckout record to the current date. 

The function should also increment the book's `availableCopies` by 1.

AI aracısının bulut işlevlerinizi doğru şekilde oluşturup oluşturmadığını Back4app panonuzda → Bulut Kodu → İşlevler ve Web Barındırma → bulut → main.js üzerinden inceleyerek kontrol edebilirsiniz.

Şimdi, birkaç komutla oluşturulmuş işlevsel bir arka uca sahipsiniz. Daha sonra, arka ucunuzla etkileşime girmenizi sağlayan bir kullanıcı arayüzü oluşturacaksınız.

Back4app AI Agent ile Ön Uç Oluşturma

Bu bölümde, React kullanarak web uygulamanızın kullanıcı arayüzünü oluşturacaksınız.

İlk olarak, uygulamanız için bir kullanıcı arayüzü oluşturmak için gereken adımlara üst düzey bir genel bakış için AI ajanına aşağıdaki istemi verin.

Describe the steps required to build a React Frontend for my backend. I want the app to have the following routes
1. `/books` to display all the books in the library
2. `/books/:bookId` to view a specific book
3. `/books/authors/:authorName` to view all books by a specific author
4. `/books/:bookId/borrow` allows a member to borrow a book
5. `/books/:bookId/return-to-library` allows a member to return a book to the library
I also want the app to be created using vite

Temsilci, aşağıdakilerden farklı olabilen ancak nihayetinde aynı sonuca götüren birkaç adımla yanıt vermelidir. YZ tarafından özetlenen adımlardan herhangi biri yeterince açık değilse, YZ’den başka bir istemde açıklığa kavuşturmasını isteyebilirsiniz.

Adım 1: Yeni Bir Vite Projesi Başlatın ve Bağımlılıkları Yükleyin

Vite ile yeni bir React uygulamasının iskelesini oluşturmak için aşağıdaki komutu terminalinizde çalıştırın:

npm create vite@latest library-app -- --template react

Proje dizinine gidin ve aşağıdaki komutu çalıştırarak bağımlılıkları yükleyin:

cd library-app && npm install

Aşağıdaki komutu çalıştırarak yönlendirme için React Router’ı ve Back4app ile etkileşim için Parse SDK’yı yükleyin:

npm install react-router-dom parse

Adım 2: JavaScript Parse SDK’yı başlatın

Uygulamanızda Parse’ı başlatmak için aşağıdaki kod bloğunu main.jsx dosyanıza ekleyin.

import Parse from "parse";

const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID";
const PARSE_HOST_URL = "<https://parseapi.back4app.com/>";
const PARSE_JAVASCRIPT_KEY = "YOUR_JAVASCRIPT_KEY";

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

“YOUR_APPLICATION_ID” ve “YOUR_JAVASCRIPT_KEY “i Back4app kontrol panelinizde → Uygulama Ayarları → Güvenlik ve Anahtarlar bölümünde bulabileceğiniz gerçek değerleriyle değiştirmeyi unutmayın.

Adım 3: Yönlendirmeyi Kurun

App.jsx dosyanızdaki kodu aşağıdaki kod bloğu ile değiştirin:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './components/Books';
import BookDetails from './components/BookDetails';
import BooksByAuthor from './components/BooksByAuthor';
import BorrowBook from './components/BorrowBook';
import ReturnBook from './components/ReturnBook';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        <Route path="/books/:bookId" element={<BookDetails />} />
        <Route path="/books/authors/:authorName" element={<BooksByAuthor />} />
        <Route path="/books/:bookId/borrow" element={<BorrowBook />} />
        <Route path="/books/:bookId/return-to-library" element={<ReturnBook />} />
      </Routes>
    </Router>
  );
};

export default App;

Adım 4: Bileşenleri Oluşturun ve Stil Verin

Yapay zeka ajanına göre, uygulamanızın beş bileşeni olmalıdır:

• Kitaplar bileşeni
• BooksDetails bileşeni
• BooksByAuthor bileşeni
• BorrowBook bileşeni
• ReturnBook bileşeni

İlk olarak, proje dizininizde bir “components” klasörü oluşturun ve bileşenleriniz için her bir dosyayı oluşturun. Ardından, “components” klasörünüzde bir CSS klasörü oluşturun ve her bir bileşen için CSS dosyaları oluşturun.

Bileşenler klasörünüz aşağıdaki resimdeki gibi görünmelidir:

Ardından, yapay zekaya Books bileşeninizi oluşturması ve şekillendirmesi için aşağıdaki komutu verin:

Create the component for the `books` route. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked. 

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header like "Books".

AI, Books.css dosyanız için bir stil sayfası ve Books.jsx dosyanız için bir jsx kod parçacığı ile yanıt vermelidir.

Kod bloklarını ilgili dosyalarına ekleyin ve Books.css dosyanızı main.jsx dosyanıza aktarın.

Bu şekilde:

//main.jsx
import "./components/css/Books.css";

Not: Stillerin özel stilinizi geçersiz kılmasını önlemek içinindex.css dosyanızı devre dışı bırakın .

Yapay zekaya BookDetails bileşeninizi oluşturması ve şekillendirmesi için aşağıdaki komutu verin.

Create a component for the `books/:bookId` route. The component should have a button that takes you to the `books/:bookId/borrow` route to allow the user to borrow the book. 

The component should also have a button that takes you to the `books/:bookId/return-to-library` route that allows a user to return a book.  

The component should also include a link to the author names of the book that takes the user to the `/books/authors/:authorName` route, allowing them to view books from other authors. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).

AI, BookDetails.css dosyanız için bir stil sayfası ve BookDetails.jsx dosyanız için bir jsx kod parçacığı ile yanıt vermelidir. Kod bloklarını ilgili dosyalarına ekleyin.

BooksByAuthor bileşeninizi oluşturmak için yapay zekaya aşağıdaki komutu verin:

Create a component for the `books/authors/:authorName` route. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).  

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked.

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header, such as `AuthorName's Books` for example "Jane Austen's Books".

Oluşturulan kodu uygun dosyalara ekleyin.

Yapay zekaya BorrowBook bileşeninizi oluşturması için aşağıdaki komutu verin:

Create a component for the `/books/:bookId/borrow`. 

The component should display a form that allows users to enter their `libraryMemberId` and borrow the book. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

For the styling, the elements should be properly spaced and have a proper header like "Borrow <NAME_OF_BOOK>". 
The form should be at the center of the webpage, taking the full width of the browser. 

The component should also display the number of remaining books.

Oluşturulan kodu uygun dosyalara ekleyin.

ReturnBook bileşeninizi oluşturmak için yapay zekaya aşağıdaki komutu verin:

Create a component for the `/books/:bookId/return-to-library`.

The component should display a form that allows users to enter their `libraryMemberId` and `bookId` of the book they want to return. 

For the styling, the elements should be properly spaced and have a proper header like "Return Book". 

The form should be at the center of the webpage, taking the full width of the browser.

Oluşturulan kodu uygun dosyalara ekleyin.

Web uygulamanızı Back4app Konteynerlerine dağıtma

Artık uygulamanızı oluşturmayı tamamladığınıza göre, herkese açık hale getirmek için onu dağıtmanız gerekecek. Bu eğitimde, uygulamanızı Back4app konteynerlerini kullanarak dağıtacaksınız.

Yapay zeka ajanına aşağıdaki komutu verin:

What steps do I need to follow to deploy my app on Back4app containers?

Yapay zeka aşağıdakine benzer adımlarla yanıt vermelidir:

1. Docker dosyası oluşturma
2. Kodunuzu herkese açık bir depoya gönderin
3. Genel deponuzu back4app’e bağlayın
4. Dağıtım

Yapay zeka ajanına komut istemi verin:

Generate a dockerfile for my application

Uygulamanızın kök dizininde bir Dockerfile dosyası oluşturun ve oluşturulan kodu ekleyin.

Ardından, kodunuzu herkese açık bir depoya gönderin ve yapay zeka ajanınıza aşağıdaki komutu verin:

Connect to my "YOUR_REPOSITORY_URL" repository on GitHub and deploy it to Back4app Containers.

Yukarıdaki komut isteminin çalışması için Back4app’in GitHub uygulamasının GitHub hesabınızla uygun şekilde entegre edilmesi gerekir. Alternatif olarak, React uygulamanızı Back4app konteynerleri ile manuel olarak dağıtabilirsiniz.

Sonuç

Back4app AI Agent, veritabanı tabloları oluşturmaktan bulut kodu işlevleri oluşturmaya, bir React ön uç kullanıcı arayüzü oluşturmaya ve hatta uygulamayı dağıtmaya kadar tüm geliştirme yaşam döngüsünü kolaylaştırır.

Bu yaklaşım, uygulamanızın hem arka ucunu hem de ön ucunu minimum manuel çaba ile geliştirmenize olanak tanır.

Bununla birlikte, doğruluğu sağlamak ve olası sorunları ele almak için yapay zeka araçlarının çıktılarını gözden geçirmek önemlidir.