Como criar e implementar um aplicativo da Web com um banco de dados PostgreSQL?

Neste artigo, você aprenderá a criar e implantar um aplicativo da Web com um banco de dados Postgres usando tecnologias de IA.

Adicionar IA ao seu fluxo de trabalho de desenvolvimento pode ser benéfico para sua produtividade. Você pode reduzir o tempo de desenvolvimento e economizar custos automatizando tarefas repetitivas e usando recursos de IA, como a geração de código.

Vantagens de usar IA no desenvolvimento da Web

Algumas vantagens de integrar a IA em seu desenvolvimento da Web incluem o seguinte.

Automação de tarefas repetitivas

A introdução da IA em seu fluxo de trabalho de desenvolvimento pode ajudá-lo a automatizar tarefas repetitivas, como a geração de dados fictícios e código padrão.

Ele também pode ajudar nos testes para gerar testes unitários e de integração.

No entanto, embora a IA possa automatizar muitas tarefas, é importante observar que ela não é uma solução infalível e ainda requer supervisão humana.

Sempre revise e valide os resultados das ferramentas de IA para garantir que sejam precisos.

Geração de código

As ferramentas de IA podem ajudá-lo a escrever trechos de código ou até mesmo funções inteiras. Essa automação acelera o processo de codificação, permitindo que você se concentre no design de nível superior e na solução de problemas.

No entanto, o código gerado por IA pode ser enganoso e levar a bugs difíceis de encontrar mais adiante no ciclo de vida de desenvolvimento do software; portanto, ele deve ser examinado antes de ser colocado em produção.

Otimização aprimorada do código

As ferramentas de IA podem ajudá-lo a otimizar seu código para aumentar a velocidade, sugerindo partes do código que podem ser reescritas ou refatoradas para produzir soluções mais eficientes e de fácil manutenção.

Isso pode envolver a simplificação de lógicas complexas, a eliminação de códigos redundantes ou o melhor uso dos recursos da linguagem.

As ferramentas de IA também podem ajudá-lo a escolher algoritmos e estruturas de dados mais eficientes para melhorar o desempenho geral do seu código e a eficiência das operações nos dados.

Detecção e correção de bugs

As ferramentas de IA podem ajudá-lo a depurar seu código mais rapidamente, analisando seus erros e fornecendo soluções viáveis para eles.

Por exemplo, quando você implanta um aplicativo usando contêineres do Back4app, a IA do Back4app analisa os erros criados por erros no seu Dockerfile e fornece sugestões que podem resolver os erros e ajudá-lo a implantar o aplicativo com êxito.

Criação de um backend usando o Back4app AI Agent e o PostgreSQL

Para este tutorial, você criará uma API de biblioteca. Você interagirá com um banco de dados PostgreSQL com as seguintes tabelas: Book, Author, BookCheckout e LibraryMember.

Estrutura e design de banco de dados

A tabela Book contém a maior parte das informações sobre um livro, como título, autor, ano_de_publicação, total_copies e available_copies.

A tabela Author tem um relacionamento de um para muitos com a tabela Book, ou seja, um autor pode ter muitos livros, mas cada livro só pode ter um autor. Ela também contém detalhes minuciosos sobre o autor, como o nome completo do autor.

A tabela LibraryMemeber contém informações sobre os membros da biblioteca, como nome, e-mail, phoneNumber.

A tabela BookCheckout atua como uma tabela de junção entre as tabelas Book e LibraryMemeber para estabelecer um relacionamento de muitos para muitos entre elas.

Ou seja, um membro pode pegar vários livros emprestados e vários membros podem pegar um livro emprestado. Ele faz referência ao livro e ao membro que o pegou emprestado, juntamente com as datas de checkout_date, due_date e return_date.

Aqui está um diagrama de modelo de banco de dados para o banco de dados.

Criação do banco de dados no Back4app

Navegue até back4app.com, faça login (crie uma conta se ainda não tiver uma) e clique no botão “New App” (Novo aplicativo ) no canto superior direito da tela.

Selecione a opção Backend as a Service, conforme mostrado na imagem abaixo.

Dê um nome ao seu aplicativo e selecione a opção PostgreSQL, conforme mostrado na imagem abaixo.

Navegue até o Back4app AI Agent e digite o prompt abaixo:

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

Esse agente de IA retornará uma lista de itens necessários para criar as tabelas de banco de dados para você. Isso deve incluir suas chaves de aplicativo e sua definição de esquema.

Com base no design do banco de dados da seção anterior, a definição do seu esquema deve ser semelhante ao bloco de código abaixo:

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)

O bloco de código acima descreve o esquema do banco de dados de forma a permitir que a IA crie o banco de dados com precisão, descrevendo corretamente os tipos de dados e as relações.

Depois de fornecer os detalhes ao agente de IA e o agente confirmar que criou o banco de dados com êxito, você pode verificar o painel do aplicativo para verificar se o banco de dados foi criado.

Em seguida, peça ao agente de IA para preencher seu banco de dados com dados de teste usando o prompt abaixo.

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

Agora, você tem dados de teste em seu banco de dados para trabalhar.

Criação de código de nuvem

Agora que você tem dados de teste para trabalhar, precisará implementar a funcionalidade do seu sistema de gerenciamento de bibliotecas.

Para este tutorial, seu aplicativo terá a seguinte funcionalidade.

• Obtenha todos os livros da biblioteca.
• Visualizar um livro específico na biblioteca.
• Visualizar todos os livros de um autor específico.
• Pegue um livro emprestado na biblioteca.
• Devolver um livro emprestado à biblioteca.

Você pode implementar essa funcionalidade usando as funções de código em nuvem do Back4app, que permitem que seu aplicativo execute funções JavaScript no Back4app em resposta a eventos acionados por solicitações HTTP.

Você pode criar funções personalizadas de código de nuvem usando o agente de IA do Back4app para simplificar seu processo de desenvolvimento.

Dê ao agente de IA da Back4app o prompt abaixo para gerar o código de nuvem para obter todos os livros da biblioteca.

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

Em seguida, forneça ao agente de IA do Back4app o prompt abaixo para gerar o código de nuvem para buscar um livro no 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.

Em seguida, forneça ao agente de IA do Back4app o prompt abaixo para gerar o código de nuvem para obter todos os livros de um determinado autor.

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

Em seguida, forneça ao agente de IA da Back4app o prompt abaixo para gerar o código de nuvem para emprestar um livro da 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.

Por fim, dê ao agente de IA da Back4app o prompt abaixo para gerar o código de nuvem para devolver um livro à 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.

Você pode verificar se o agente de IA criou suas funções de nuvem corretamente revisando-as no painel do Back4app → Cloud Code → Functions & Web Hosting → cloud → main.js.

Agora, você tem um backend funcional criado a partir de alguns prompts. Em seguida, você criará uma interface de usuário que permitirá a interação com o backend.

Criação de um front-end com o Back4app AI Agent

Nesta seção, você criará a interface do usuário do seu aplicativo da Web usando o React.

Primeiro, forneça ao agente de IA o prompt abaixo para obter uma visão geral de alto nível das etapas necessárias para criar uma UI para seu aplicativo.

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

O agente deve responder com algumas etapas, que podem ser diferentes das apresentadas a seguir, mas que, em última análise, levam ao mesmo resultado. Se alguma das etapas descritas pela IA não estiver clara o suficiente, você pode pedir que a IA esclareça em outro prompt.

Etapa 1: Inicializar um novo projeto Vite e instalar dependências

Execute o comando abaixo em seu terminal para criar um novo aplicativo React com o Vite:

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

Navegue até o diretório do projeto e execute a instalação das dependências com o comando abaixo:

cd library-app && npm install

Instale o React Router para roteamento e o Parse SDK para interagir com o Back4app executando o comando abaixo:

npm install react-router-dom parse

Etapa 2: inicializar o SDK do JavaScript Parse

Adicione o bloco de código abaixo ao seu arquivo main.jsx para inicializar o Parse em seu aplicativo.

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;

Lembre-se de substituir “YOUR_APPLICATION_ID” e “YOUR_JAVASCRIPT_KEY” por seus valores reais, que podem ser encontrados no painel do Back4app → App Settings → Security and Keys.

Etapa 3: Configurar o roteamento

Substitua o código em seu arquivo App.jsx pelo bloco de código abaixo:

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;

Etapa 4: Criar e estilizar componentes

De acordo com o agente de IA, seu aplicativo deve ter cinco componentes:

• O componente Livros
• O componente BooksDetails
• O componente BooksByAuthor
• O componente BorrowBook
• O componente ReturnBook

Primeiro, crie uma pasta “components” no diretório do projeto e crie cada um dos arquivos para seus componentes. Em seguida, crie uma pasta CSS em sua pasta “components” e crie arquivos CSS para cada um dos componentes.

Sua pasta de componentes deve se parecer com a imagem abaixo:

Em seguida, dê à IA o prompt abaixo para criar e estilizar seu componente Books:

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

A IA deve responder com uma folha de estilo para seu arquivo Books.css e um trecho de código jsx para seu Books.jsx.

Adicione os blocos de código a seus respectivos arquivos e importe o Books.css para o arquivo main.jsx.

Assim:

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

Observação: Desative o arquivoindex.css para evitar que os estilos substituam seu estilo personalizado.

Dê à IA o prompt abaixo para criar e estilizar seu 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).

A IA deve responder com uma folha de estilo para seu arquivo BookDetails.css e um trecho de código jsx para seu BookDetails.jsx. Adicione os blocos de código a seus respectivos arquivos.

Dê à IA o prompt abaixo para criar seu 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".

Adicione o código gerado aos arquivos apropriados.

Dê à IA o prompt abaixo para criar seu 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.

Adicione o código gerado aos arquivos apropriados.

Dê à IA o prompt abaixo para criar seu 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.

Adicione o código gerado aos arquivos apropriados.

Implantação de seu aplicativo Web nos contêineres do Back4app

Agora que você terminou de criar seu aplicativo, precisará implantá-lo para torná-lo disponível publicamente. Para este tutorial, você implantará seu aplicativo usando contêineres do Back4app.

Dê o prompt abaixo para o agente de IA:

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

A IA deve responder com etapas semelhantes às seguintes:

1. Criar um Dockerfile
2. Envie seu código para um repositório público
3. Conecte seu repositório público ao back4app
4. Implementar

Dê o prompt para o agente de IA:

Generate a dockerfile for my application

Crie um arquivo Dockerfile no diretório raiz do seu aplicativo e adicione o código gerado.

Em seguida, envie seu código para um repositório público e forneça o prompt abaixo ao seu agente de IA:

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

Para que o prompt acima funcione, o aplicativo GitHub do Back4app deve ser integrado adequadamente à sua conta do GitHub. Como alternativa, você pode implantar manualmente seu aplicativo React com contêineres do Back4app.

Conclusão

O Back4app AI Agent simplifica todo o ciclo de vida do desenvolvimento, desde a criação de tabelas de banco de dados até a geração de funções de código em nuvem, passando pela criação de uma interface de usuário de front-end React e até mesmo a implantação do aplicativo.

Essa abordagem permite que você desenvolva o back-end e o front-end do seu aplicativo com o mínimo de esforço manual.

No entanto, é importante revisar os resultados das ferramentas de IA para garantir a precisão e resolver quaisquer problemas potenciais.