Comment construire et déployer une application web avec une base de données PostgreSQL ?

Dans cet article, vous apprendrez à construire et à déployer une application web avec une base de données Postgres en utilisant les technologies de l’IA.

L’ajout de l’IA à votre flux de travail de développement peut être bénéfique pour votre productivité. Vous pouvez réduire le temps de développement et les coûts en automatisant les tâches répétitives et en utilisant des fonctions d’IA telles que la génération de code.

Avantages de l’utilisation de l’IA dans le développement Web

Voici quelques avantages de l’intégration de l’IA dans votre développement web.

Automatisation des tâches répétitives

L’introduction de l’IA dans votre flux de développement peut vous aider à automatiser les tâches répétitives, telles que la génération de données factices et de code passe-partout.

Il peut également contribuer aux tests en générant des tests unitaires et des tests d’intégration.

Cependant, si l’IA peut automatiser de nombreuses tâches, il est important de noter qu’elle n’est pas une solution infaillible et qu’elle nécessite toujours une supervision humaine.

Il faut toujours examiner et valider les résultats des outils d’intelligence artificielle pour s’assurer qu’ils sont exacts.

Génération de codes

Les outils d’IA peuvent vous aider à écrire des extraits de code ou même des fonctions entières. Cette automatisation accélère le processus de codage, ce qui vous permet de vous concentrer sur la conception de haut niveau et la résolution de problèmes.

Toutefois, le code généré par l’IA peut être trompeur et entraîner des bogues difficiles à trouver à un stade ultérieur du cycle de développement du logiciel ; c’est pourquoi il doit être vérifié avant d’être mis en production.

Amélioration de l’optimisation du code

Les outils d’IA peuvent vous aider à optimiser la vitesse de votre code en vous suggérant des parties de votre code que vous pouvez réécrire ou remanier pour produire des solutions plus efficaces et plus faciles à maintenir.

Il peut s’agir de simplifier une logique complexe, d’éliminer le code redondant ou de mieux utiliser les caractéristiques du langage.

Les outils d’IA peuvent également vous aider à choisir des algorithmes et des structures de données plus efficaces afin d’améliorer les performances globales de votre code et l’efficacité des opérations sur les données.

Détection et correction des bogues

Les outils d’IA peuvent vous aider à déboguer votre code plus rapidement en analysant vos erreurs et en vous proposant des solutions viables.

Par exemple, lorsque vous déployez une application en utilisant les conteneurs Back4app, l’IA Back4app analyse les erreurs créées par des erreurs dans votre Dockerfile et fournit des suggestions qui pourraient résoudre les erreurs et vous aider à déployer votre application avec succès.

Construire un backend en utilisant l’agent d’intelligence artificielle Back4app et PostgreSQL

Pour ce tutoriel, vous allez construire une bibliothèque API. Vous interagirez avec une base de données PostgreSQL contenant les tables suivantes : Book, Author, BookCheckout et LibraryMember.

Structure et conception des bases de données

La table Livre contient la plupart des informations relatives à un livre, telles que le titre, l’auteur, l’année de publication, le nombre total d'exemplaires et le nombre d'exemplaires disponibles.

La table Auteur est liée à la table Livre par une relation de type “un à plusieurs”, c’est-à-dire qu’un auteur peut avoir plusieurs livres, mais que chaque livre ne peut avoir qu’un seul auteur. Elle contient également des informations détaillées sur l’auteur, telles que son nom complet.

La table LibraryMemeber contient des informations sur les membres de la bibliothèque, telles que le nom, l’adresse électronique et le numéro de téléphone.

La table BookCheckout fait office de table de jonction entre les tables Book et LibraryMemeber afin d’établir une relation de plusieurs à plusieurs.

Par exemple, un membre peut emprunter plusieurs livres et plusieurs membres peuvent emprunter un même livre. Il référence le livre et le membre qui l’a emprunté, ainsi que la date d'achat, la date d'échéance et la date de retour.

Voici un diagramme de modèle de base de données pour la base de données.

Création de la base de données sur Back4app

Rendez-vous sur back4app.com, connectez-vous (créez un compte si vous n’en avez pas), et cliquez sur le bouton “New App” en haut à droite de votre écran.

Sélectionnez l’option Backend as a Service, comme le montre l’image ci-dessous.

Nommez votre application et sélectionnez l’option PostgreSQL, comme le montre l’image ci-dessous.

Naviguez jusqu’à l’agent Back4app AI et entrez dans l’invite ci-dessous :

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

Cet agent IA renverra une liste des éléments dont il a besoin pour créer les tables de la base de données pour vous. Il s’agit notamment de vos clés d’application et de la définition de votre schéma.

Sur la base de la conception de la base de données présentée dans la section précédente, votre définition du schéma doit être similaire au bloc de code ci-dessous :

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)

Le bloc de code ci-dessus décrit le schéma de votre base de données de manière à permettre à l’IA de créer votre base de données avec précision en décrivant correctement les types de données et les relations.

Après avoir fourni les détails à l’agent AI et que celui-ci a confirmé qu’il avait créé votre base de données avec succès, vous pouvez consulter le tableau de bord de votre application pour vérifier que la base de données a bien été créée.

Ensuite, demandez à l’agent IA d’alimenter votre base de données avec des données de test à l’aide de l’invite ci-dessous.

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

Vous disposez à présent de données de test dans votre base de données.

Création d’un code cloud

Maintenant que vous disposez de données de test, vous devez mettre en œuvre les fonctionnalités de votre système de gestion de bibliothèque.

Pour ce tutoriel, votre application aura les fonctionnalités suivantes.

• Obtenez tous les livres de la bibliothèque.
• Consulter un livre spécifique dans la bibliothèque.
• Voir tous les livres d’un auteur spécifique.
• Empruntez un livre à la bibliothèque.
• Retourner un livre emprunté à la bibliothèque.

Vous pouvez mettre en œuvre cette fonctionnalité en utilisant les fonctions de code cloud de Back4app, qui permettent à votre application d’exécuter des fonctions JavaScript sur Back4app en réponse à des événements déclenchés par des requêtes HTTP.

Vous pouvez créer des fonctions de code cloud personnalisées en utilisant l’agent AI de Back4app pour simplifier votre processus de développement.

Donnez à l’agent IA de Back4app l’invite ci-dessous pour générer le code cloud permettant d’obtenir tous les livres de la bibliothèque.

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

Ensuite, donnez à l’agent AI de Back4app l’invite ci-dessous pour générer le code cloud permettant d’aller chercher un livre sur l’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.

Ensuite, donnez à l’agent AI de Back4app l’invite ci-dessous pour générer le code cloud permettant d’obtenir tous les livres d’un auteur particulier.

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

Ensuite, donnez à l’agent AI de Back4app l’invite ci-dessous pour générer le code cloud permettant d’emprunter un livre à la bibliothèque.

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.

Enfin, donnez à l’agent AI de Back4app l’invite ci-dessous pour générer le code cloud permettant de rendre un livre à la bibliothèque.

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.

Vous pouvez vérifier si l’agent IA a créé vos fonctions cloud correctement en les examinant sur votre tableau de bord Back4app → Code cloud → Fonctions et hébergement web → cloud → main.js.

Vous disposez maintenant d’un backend fonctionnel créé à partir de quelques invites. Ensuite, vous allez construire une interface utilisateur qui vous permettra d’interagir avec votre backend.

Construire un Frontend avec l’agent AI de Back4app

Dans cette section, vous allez construire l’interface utilisateur de votre application web en utilisant React.

Tout d’abord, donnez à l’agent AI l’invite ci-dessous pour obtenir une vue d’ensemble des étapes nécessaires à la création d’une interface utilisateur pour votre application.

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’agent doit répondre par quelques étapes, qui peuvent différer de celles décrites ci-dessous, mais qui aboutissent au même résultat. Si l’une des étapes décrites par l’IA n’est pas suffisamment claire, vous pouvez demander à l’IA de la clarifier dans une autre invite.

Étape 1 : Initialiser un nouveau projet Vite et installer les dépendances

Exécutez la commande ci-dessous dans votre terminal pour créer une nouvelle application React avec Vite :

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

Naviguez jusqu’au répertoire du projet et installez les dépendances en exécutant la commande ci-dessous :

cd library-app && npm install

Installez React Router pour le routage et le SDK Parse pour interagir avec Back4app en exécutant la commande ci-dessous :

npm install react-router-dom parse

Étape 2 : Initialisation du JavaScript Parse SDK

Ajoutez le bloc de code ci-dessous à votre fichier main.jsx pour initialiser Parse dans votre application.

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;

N’oubliez pas de remplacer “YOUR_APPLICATION_ID” et “YOUR_JAVASCRIPT_KEY” par leurs valeurs réelles, que vous pouvez trouver sur votre tableau de bord Back4app → App Settings → Security and Keys.

Étape 3 : Mise en place du routage

Remplacez le code de votre fichier App.jsx par le bloc de code ci-dessous :

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;

Étape 4 : Construire et styliser les composants

Selon l’agent d’intelligence artificielle, votre application doit comporter cinq éléments :

• La composante Livres
• Le composant BooksDetails
• Le composant BooksByAuthor
• Le composant BorrowBook
• Le composant ReturnBook

Tout d’abord, créez un dossier “composants” dans le répertoire de votre projet et créez chacun des fichiers pour vos composants. Ensuite, créez un dossier CSS dans votre dossier “components” et créez les fichiers CSS pour chacun des composants.

Votre dossier de composants doit ressembler à l’image ci-dessous :

Ensuite, donnez à l’IA l’invite ci-dessous pour qu’elle crée et stylise votre composant Livres:

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’IA devrait répondre avec une feuille de style pour votre fichier Books.css et un extrait de code jsx pour votre Books.jsx.

Ajoutez les blocs de code à leurs fichiers respectifs et importez votre Books.css dans votre fichier main.jsx.

Comme cela :

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

Remarque : désactivez votre fichierindex.css pour éviter que les styles ne remplacent vos propres styles.

Demandez à l’IA de créer et de styliser votre composant BookDetails en répondant à l’invite ci-dessous.

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’IA devrait répondre avec une feuille de style pour votre fichier BookDetails.css et un extrait de code jsx pour votre fichier BookDetails.jsx. Ajoutez les blocs de code à leurs fichiers respectifs.

Donnez à l’IA l’invite ci-dessous pour créer votre composant 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".

Ajoutez le code généré aux fichiers appropriés.

Donnez à l’IA l’invite ci-dessous pour créer votre composant 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.

Ajoutez le code généré aux fichiers appropriés.

Donnez à l’IA l’invite ci-dessous pour créer votre composant 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.

Ajoutez le code généré aux fichiers appropriés.

Déployer votre application Web sur les conteneurs Back4app

Maintenant que vous avez terminé la construction de votre application, vous devez la déployer pour la rendre accessible au public. Pour ce tutoriel, vous allez déployer votre application en utilisant les conteneurs Back4app.

Donnez la consigne ci-dessous à l’agent IA :

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

L’IA doit répondre par des mesures similaires à celles qui suivent :

1. Créer un fichier Docker
2. Publier votre code dans un dépôt public
3. Connectez votre dépôt public à back4app
4. Déployer

Donnez l’instruction à l’agent de l’IA :

Generate a dockerfile for my application

Créez un fichier Dockerfile dans le répertoire racine de votre application et ajoutez le code généré.

Ensuite, insérez votre code dans un dépôt public et envoyez l’invite ci-dessous à votre agent d’intelligence artificielle :

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

Pour que l’invite ci-dessus fonctionne, l’application GitHub de Back4app doit être intégrée de manière appropriée avec votre compte GitHub. Vous pouvez également déployer manuellement votre application React avec les conteneurs Back4app.

Conclusion

L’agent AI de Back4app rationalise l’ensemble du cycle de développement, de la création de tables de base de données à la génération de fonctions de code cloud, en passant par la construction d’une interface utilisateur frontale React et même le déploiement de l’application.

Cette approche vous permet de développer à la fois le back-end et le front-end de votre application avec un minimum d’efforts manuels.

Toutefois, il est important d’examiner les résultats des outils d’IA pour s’assurer de leur exactitude et résoudre tout problème potentiel.