Come costruire e distribuire un’applicazione web con un database PostgreSQL?

In questo articolo imparerete come costruire e distribuire un’applicazione web con un database Postgres utilizzando le tecnologie AI.

L’aggiunta dell’intelligenza artificiale al vostro flusso di lavoro di sviluppo può essere vantaggiosa per la vostra produttività. È possibile ridurre i tempi di sviluppo e risparmiare sui costi automatizzando le attività ripetitive e utilizzando funzioni di IA come la generazione di codice.

Vantaggi dell’utilizzo dell’intelligenza artificiale nello sviluppo web

Alcuni vantaggi dell’integrazione dell’intelligenza artificiale nello sviluppo web sono i seguenti.

Automazione di attività ripetitive

L’introduzione dell’intelligenza artificiale nel flusso di lavoro dello sviluppo può aiutare ad automatizzare le attività ripetitive, come la generazione di dati fittizi e di codice boilerplate.

Può anche aiutare a generare test unitari e di integrazione.

Tuttavia, anche se l’IA può automatizzare molte attività, è importante notare che non è una soluzione infallibile e richiede comunque la supervisione umana.

Esaminare e convalidare sempre i risultati degli strumenti di IA per garantirne l’accuratezza.

Generazione del codice

Gli strumenti di intelligenza artificiale possono aiutarvi a scrivere frammenti di codice o addirittura intere funzioni. Questa automazione accelera il processo di codifica, consentendo di concentrarsi sulla progettazione e sulla risoluzione di problemi di livello superiore.

Tuttavia, il codice generato dall’intelligenza artificiale può essere fuorviante e portare a bug difficili da trovare più avanti nel ciclo di vita dello sviluppo del software; pertanto, dovrebbe essere controllato prima di portare il codice in produzione.

Miglioramento dell’ottimizzazione del codice

Gli strumenti di intelligenza artificiale possono aiutarvi a ottimizzare il codice per la velocità, suggerendovi parti di codice da riscrivere o rifattorizzare per produrre soluzioni più efficienti e manutenibili.

Ciò può comportare la semplificazione di logiche complesse, l’eliminazione di codice ridondante o un migliore utilizzo delle caratteristiche del linguaggio.

Gli strumenti di intelligenza artificiale possono anche aiutare a scegliere algoritmi e strutture di dati più efficienti per migliorare le prestazioni complessive del codice e l’efficienza delle operazioni sui dati.

Rilevamento e correzione degli errori

Gli strumenti di intelligenza artificiale possono aiutarvi a eseguire il debug del codice in modo più rapido, analizzando gli errori e fornendo soluzioni valide.

Ad esempio, quando si distribuisce un’applicazione utilizzando i container Back4app, l’intelligenza artificiale di Back4app analizza gli errori creati da errori nel file Docker e fornisce suggerimenti che potrebbero risolvere gli errori e aiutare l’utente a distribuire con successo l’applicazione.

Creare un backend utilizzando l’agente AI di Back4app e PostgreSQL

In questa esercitazione si costruirà un’API di libreria. Si interagirà con un database PostgreSQL con le seguenti tabelle: Book, Author, BookCheckout e LibraryMember.

Struttura e progettazione del database

La tabella Libro contiene la maggior parte delle informazioni su un libro, come il titolo, l’autore, l’anno di pubblicazione, le copie totali e le copie disponibili.

La tabella Autore ha una relazione uno-a-molti con la tabella Libro, cioè un autore può avere molti libri, ma ogni libro può avere un solo autore. Contiene anche piccoli dettagli sull’autore, come il nome completo.

La tabella LibraryMemeber contiene informazioni sui membri della biblioteca, come nome, e-mail e numero di telefono.

La tabella BookCheckout funge da tabella di raccordo tra le tabelle Book e LibraryMemeber per stabilire una relazione molti-a-molti tra di esse.

Ad esempio, un membro può prendere in prestito più libri e più membri possono prendere in prestito un libro. Il riferimento è al libro e al membro che l’ha preso in prestito, insieme alla data di acquisto, alla data di scadenza e alla data di restituzione.

Ecco il diagramma del modello del database.

Creare il database su Back4app

Andate su back4app.com, accedete (se non avete ancora un account) e fate clic sul pulsante “New App” nell’angolo in alto a destra dello schermo.

Selezionare l’opzione Backend as a Service, come mostrato nell’immagine seguente.

Assegnate un nome all’applicazione e selezionate l’opzione PostgreSQL, come mostrato nell’immagine seguente.

Accedere all’Agente Back4app AI e inserire la richiesta riportata di seguito:

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

L’agente AI restituirà un elenco di elementi necessari per creare le tabelle del database. Questi dovrebbero includere le chiavi dell’applicazione e la definizione dello schema.

In base al progetto del database della sezione precedente, la definizione dello schema dovrebbe essere simile al blocco di codice seguente:

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)

Il blocco di codice precedente descrive lo schema del database in modo da consentire all’intelligenza artificiale di creare il database in modo accurato, descrivendo correttamente i tipi di dati e le relazioni.

Dopo aver fornito i dettagli all’agente AI e aver ricevuto la conferma che il database è stato creato correttamente, è possibile controllare la dashboard dell’applicazione per verificare che il database sia stato creato.

Successivamente, chiedere all’agente AI di riempire il database con i dati di prova, utilizzando il seguente prompt.

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

Ora si dispone di dati di prova sul database con cui lavorare.

Creazione di codice cloud

Ora che disponete di dati di prova su cui lavorare, dovrete implementare le funzionalità per il vostro sistema di gestione delle biblioteche.

Per questa esercitazione, l’applicazione dovrà avere le seguenti funzionalità.

• Prendete tutti i libri della biblioteca.
• Visualizzare un libro specifico nella biblioteca.
• Visualizza tutti i libri di un autore specifico.
• Prendere in prestito un libro dalla biblioteca.
• Restituire alla biblioteca un libro preso in prestito.

È possibile implementare questa funzionalità utilizzando le funzioni del codice cloud di Back4app, che consentono all’applicazione di eseguire funzioni JavaScript su Back4app in risposta agli eventi attivati dalle richieste HTTP.

È possibile creare funzioni personalizzate di codice cloud utilizzando l’agente AI di Back4app per semplificare il processo di sviluppo.

Dare all’agente AI di Back4app il seguente prompt per generare il codice cloud per ottenere tutti i libri della biblioteca.

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

Quindi, dare all’agente AI di Back4app il seguente prompt per generare il codice cloud per recuperare un libro sull’ID.

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

Quindi, dare all’agente AI di Back4app il seguente prompt per generare il codice cloud per ottenere tutti i libri di un particolare autore.

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

Quindi, dare all’agente AI di Back4app il seguente prompt per generare il codice cloud per il prestito di un libro dalla biblioteca.

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.

Infine, dare all’agente Back4app AI il seguente prompt per generare il codice cloud per la restituzione di un libro alla biblioteca.

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.

È possibile verificare se l’agente AI ha creato correttamente le funzioni cloud esaminandole nella dashboard di Back4app → Codice cloud → Funzioni e hosting web → cloud → main.js.

Ora si dispone di un backend funzionale creato a partire da alcune richieste. Successivamente, si costruirà un’interfaccia utente che permetta di interagire con il backend.

Creare un frontend con l’agente AI di Back4app

In questa sezione si costruisce l’interfaccia utente dell’applicazione web utilizzando React.

Per prima cosa, fornire all’agente AI il seguente prompt per una panoramica di alto livello dei passaggi necessari per creare un’interfaccia utente per l’applicazione.

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

L’agente dovrebbe rispondere con alcuni passaggi, che possono essere diversi da quelli indicati di seguito, ma che alla fine portano allo stesso risultato. Se uno dei passaggi delineati dall’IA non è abbastanza chiaro, si può chiedere all’IA di chiarirlo in un altro messaggio.

Passo 1: inizializzare un nuovo progetto Vite e installare le dipendenze

Eseguite il comando seguente nel vostro terminale per creare una nuova applicazione React con Vite:

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

Navigare nella cartella del progetto ed eseguire l’installazione delle dipendenze con il comando seguente:

cd library-app && npm install

Installare React Router per il routing e il Parse SDK per interagire con Back4app eseguendo il comando seguente:

npm install react-router-dom parse

Passo 2: inizializzare l’SDK JavaScript Parse

Aggiungete il blocco di codice sottostante al file main.jsx per inizializzare Parse nella vostra applicazione.

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;

Ricordate di sostituire “YOUR_APPLICATION_ID” e “YOUR_JAVASCRIPT_KEY” con i loro valori effettivi, che potete trovare nella dashboard di Back4app → Impostazioni app → Sicurezza e chiavi.

Passo 3: Impostazione dell’instradamento

Sostituire il codice nel file App.jsx con il blocco di codice sottostante:

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;

Fase 4: costruzione e stile dei componenti

Secondo l’agente AI, la vostra applicazione dovrebbe avere cinque componenti:

• Il componente Libri
• Il componente BooksDetails
• Il componente BooksByAuthor
• Il componente BorrowBook
• Il componente ReturnBook

Per prima cosa, creare una cartella “components” nella cartella del progetto e creare tutti i file per i componenti. Quindi, creare una cartella CSS nella cartella “components” e creare i file CSS per ogni componente.

La cartella dei componenti dovrebbe assomigliare all’immagine seguente:

Quindi, dare all’IA la richiesta qui sotto per creare e modellare il componente Libri:

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".

L’intelligenza artificiale dovrebbe rispondere con un foglio di stile per il file Books.css e un frammento di codice jsx per il file Books.jsx.

Aggiungere i blocchi di codice ai rispettivi file e importare Books.css nel file main.jsx.

Così:

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

Nota: disattivare il fileindex.css per evitare che gli stili sovrascrivano lo stile personalizzato.

Date all’IA il seguente suggerimento per creare e modellare il componente BookDetails.

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).

L’intelligenza artificiale dovrebbe rispondere con un foglio di stile per il file BookDetails.css e un frammento di codice jsx per BookDetails.jsx. Aggiungere i blocchi di codice ai rispettivi file.

Dare all’intelligenza artificiale il seguente prompt per creare il componente BooksByAuthor:

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".

Aggiungere il codice generato ai file appropriati.

Dare all’IA il seguente prompt per creare il componente BorrowBook:

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.

Aggiungere il codice generato ai file appropriati.

Dare all’IA il seguente prompt per creare il componente ReturnBook:

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.

Aggiungere il codice generato ai file appropriati.

Distribuzione dell’applicazione web su Back4app Containers

Ora che avete finito di costruire la vostra applicazione, dovrete distribuirla per renderla disponibile al pubblico. Per questa esercitazione, si distribuirà l’applicazione utilizzando i contenitori Back4app.

Date la seguente richiesta all’agente AI:

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

L’IA deve rispondere con passi simili ai seguenti:

1. Creare un file Docker
2. Spingere il codice in un repository pubblico
3. Collegare il repository pubblico a back4app
4. Distribuire

Dare la richiesta all’agente AI:

Generate a dockerfile for my application

Creare un file Dockerfile nella cartella principale dell’applicazione e aggiungere il codice generato.

Successivamente, si invia il codice a un repository pubblico e si dà il seguente prompt all’agente AI:

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

Affinché il suggerimento di cui sopra funzioni, l’applicazione GitHub di Back4app deve essere integrata in modo appropriato con il vostro account GitHub. In alternativa, è possibile distribuire manualmente l’applicazione React con i contenitori Back4app.

Conclusione

L’agente AI di Back4app semplifica l’intero ciclo di vita dello sviluppo, dalla creazione di tabelle di database alla generazione di funzioni di codice cloud, alla creazione di un’interfaccia utente frontend React e persino alla distribuzione dell’applicazione.

Questo approccio consente di sviluppare sia il back end che il front end dell’applicazione con il minimo sforzo manuale.

Tuttavia, è importante rivedere i risultati degli strumenti di IA per garantire l’accuratezza e risolvere eventuali problemi.