Como usar a IA para desenvolvimento web?

Português

Desde o lançamento do ChatGPT, as ferramentas de IA têm atraído atenção significativa, levando muitos desenvolvedores web a incorporar algum nível de IA em seu fluxo de trabalho.

Neste artigo, explicaremos como o uso de IA no desenvolvimento web pode beneficiar você. Além disso, veremos um exemplo prático de uso da automação do desenvolvimento web com tecnologias de IA.

Em nosso exemplo, usaremos o Back4app Agent — um assistente DevOps com tecnologia de IA, para criar e implantar um aplicativo da web para o Back4app.

Vantagens de usar a IA no desenvolvimento web

Existem muitas vantagens de usar a IA no desenvolvimento web. Vejamos algumas delas.

Geração automatizada de código

Ferramentas baseadas em IA como ChatGPT, GitHub Copilot, e o Back4app Agent pode te ajudar a acelerar significativamente seu processo de desenvolvimento.

Elas podem fornecer trechos de código úteis, conclusão de código, análise de código, automatização de DevOps e mais.

A principal desvantagem dessas ferramentas são as alucinações. Além disso, elas podem introduzir código defeituoso ou abaixo do ideal. Certifique-se de analisar minuciosamente todo o código gerado pelas ferramentas de IA.

Teste de código aprimorado

Escrever código é divertido, mas escrever testes nem tanto. O teste é a segunda vantagem do desenvolvimento de aplicativos web de IA.

Ao utilizar a IA, você pode gerar testes automaticamente com base em seu código-fonte. Isso pode te ajudar a validar seu código e torná-lo menos sujeito a erros e mais confiável.

Otimização SEO

As ferramentas de IA são excelentes na análise e otimização de conteúdo da web para mecanismos de pesquisa. Elas podem gerar palavras-chave, metadados e tags eficazes para aumentar a visibilidade online.

Além disso, essas ferramentas podem se adaptar às tendências e algoritmos de SEO em evolução, garantindo que um site permaneça altamente classificado nos resultados de pesquisas.

Geração e curadoria de conteúdo

A IA pode ser usada para gerar conteúdo relevante e envolvente automaticamente. Isso pode ser extremamente útil para manter um blog ou uma estratégia de marketing semelhante.

Além disso, essas ferramentas podem criar conteúdo que fale com seus leitores, tornando-os mais interessados e propensos a agir, como comprar um produto ou inscrever-se.

Como usar a IA para implantar uma aplicação web?

Nesta seção, explicaremos como integrar ferramentas de IA no processo de desenvolvimento. Nós utilizaremos o Back4app Agent para construir e implantar uma aplicação web full-stack.

Tentaremos fazer tudo com o poder da conversação e escrevendo uma quantidade mínima de código.

Pré-requisitos

Compreensão básica do Back4app
Experiência com JavaScript ES6, React, e Docker
Uma conta Back4app e acesso ao Back4app Agent
Uma conta GitHub

O que é o Back4app Agent?

O Back4app Agent é o AutoGPT para desenvolvedores. Ele integra ferramentas de desenvolvimento orientadas por IA com execução na nuvem, permitindo que você execute tarefas na nuvem com o poder da conversação.

O Back4app Agent foi projetado para interagir automaticamente com o Back4app BaaS e Back4app Containers.

O melhor de tudo é que o Back4app Agent pode aprender em tempo real e se otimizar por meio da interação direta com ambientes de nuvem. Está disponível na Plataforma Back4app e como um Plug-in do ChatGPT.

Tenha em mente que o Back4app Agent não é uma ferramenta mágica. Pode cometer erros. Se isso acontecer, caberá a você consertá-los. Além disso, enviar os mesmos prompts ao Back4app Agent pode produzir resultados diferentes.

Se você deseja melhorar suas instruções de LLM, confira como criar um aplicativo usando o ChatGPT?

Visão geral do projeto

Ao longo do artigo, trabalharemos em uma aplicação web de gerenciamento de eventos e usaremos a IA para implantação eficiente da aplicação web. O aplicativo nos permitirá gerenciar locais e eventos. Cada evento acontecerá em um local específico.

Construiremos o back-end usando Back4app e depois passaremos para o front-end. O front-end será feito com React, dockerizado e posteriormente implantado em Back4app Containers. Finalmente, para conectar o front-end com o back-end, utilizaremos o Parse SDK.

Recomendo que você siga junto com a aplicação web de gerenciamento de eventos. O aplicativo foi projetado para fornecer uma compreensão sólida da plataforma Back4app e como o Back4app Agent funciona na prática.

Backend

Nesta seção do artigo, construiremos o back-end de nossa aplicação web.

Back4app App

Em primeiro lugar, abra seu navegador favorito e navegue até a página do Back4app Agent. Crie um novo agente clicando no botão “New Agent”.

Para implantar um back-end no Back4app, você deve primeiro criar um aplicativo Back4app.

Solicite ao agente que crie um novo aplicativo Back4app. Vou nomear o meu “back4app-ai-agent”:

Create a new Back4app app named "back4app-ai-agent".

Como você pode ver, o agente criou com sucesso um aplicativo Back4app. Ele nos forneceu o “ID do aplicativo”, “URL do painel” e todas as outras informações úteis de que possamos precisar.

Ideia de aplicativo e banco de dados

Para melhorar as respostas do agente, precisamos dar-lhe mais contexto sobre o que estamos construindo. Vá em frente e explique a ideia do aplicativo e a estrutura do banco de dados ao agente.

We're building a backend for an event management app. The app will allow us to manage venues and events. Each event will happen in a specific venue. Please create the following database classes:

1. `Venue`: `name`, `location`, `capacity`
2. `Event`: `name`, `description`, `date`, `venue`

O agente criou com êxito as classes de banco de dados solicitadas. Ele determinou automaticamente a relação entre eventos e locais e nos forneceu um resumo dos campos de cada classe de banco de dados.

Em seguida, solicite ao agente que preencha o banco de dados para obter alguns dados de teste para trabalhar mais tarde:

Please populate my database with 5 venues and 10 events. Some of the events should be music events.

Certifique-se de que tudo funcionou verificando manualmente a estrutura do banco de dados e seu conteúdo. Para fazer isso, abra o painel do Back4app, selecione seu aplicativo e clique em “Database > Browser” na barra lateral.

As classes Event e Venue devem estar em seu banco de dados e cada uma deve ter algumas linhas de amostra.

Cloud Code

O Back4app Agent também é ótimo para escrever Funções do Cloud Code customizadas. Suponha que quiséssemos um endpoint de API que retornasse todos os eventos em um local específico.

Peça ao agente para criar e implantar a função mencionada:

Create a Cloud Code function called `eventsByVenue(venueId)` that will allow me to provide a venue ID, and it'll return all the events happening in that venue.

Para testá-lo, solicite ao agente que gere um comando cURL que atinja o endpoint da API:

Write me a cURL command that hits `eventsByVenue(venueId)` to get all the events of some venue in my database.

Copie o comando, substitua os espaços reservados e execute-o em seu console:

$ curl -X POST \
    -H "X-Parse-Application-Id: <Your-App-Id>" \
    -H "X-Parse-REST-API-Key: <Your-REST-API-Key>" \
    -H "Content-Type: application/json" \
    -d '{"venueId":"<Venue-Object-Id>"}' \
    https://<Your-Parse-Server-Url>/functions/eventsByVenue

Você deve obter uma resposta semelhante:

{
   "result": [
      {
         "id": "peae9x7MAH",
         "name": "Classical Evening",
         "description": "...",
         "date": "2023-07-15T19:30:00.000Z"
      },
      {
         "id": "uIeSmK0KJj",
         "name": "Symphonic Extravaganza",
         "description": "...",
         "date": "2023-12-25T19:30:00.000Z"
      }
   ]
}

Se você estiver curioso sobre o código gerado em segundo plano, navegue até o painel do Back4app, selecione seu aplicativo e clique em “Cloud Code > Functions & Web Hosting” na barra lateral.

Ótimo, é isso!

Criamos com sucesso um back-end completo com zero código. Tudo o que tivemos que fazer foi enviar algumas solicitações ao agente de IA. Não dá pra ficar mais fácil do que isso.

Frontend

Nesta seção do artigo, construiremos e implantaremos o front-end de nossa aplicação web.

Inicialização do projeto

Ao trabalhar com LLM, é aconselhável perguntar primeiro sobre as etapas gerais. Depois de conhecer as etapas, você poderá solicitar mais esclarecimentos. Vamos experimentar.

Explique a ideia do front-end ao agente e peça um guia passo a passo:

Describe the steps of building a React application for my backend. I want my app to have three endpoints:

1. `/` displays all the events
2. `/<objectId>/` displays the specific event's details
3. `/venue/<objectId>/` displays all the events in a specific venue 

Please use Vite to generate a React application.

O agente respondeu com uma breve lista de etapas. Vamos realizá-las.

Bootstrap um novo projeto React usando Vite:

$ npm create vite@latest my-app -- --template react 
$ cd my-app

Instale as dependências:

$ npm install

Inicie o servidor de desenvolvimento:

$ npm run dev

Abra seu navegador favorito e navegue até http://localhost:5173/. Você deverá conseguir ver a página inicial padrão do Vite.

Rotas

Conforme sugerido pelo agente de IA, usaremos react-router-dom para lidar com o roteamento. React Router DOM é um pacote excelente para lidar com roteamento em aplicativos React sem atualizar a página.

Primeiro, peça esclarecimentos sobre como configurar e usar o react-router-dom:

How to install and use `react-router-dom` to implement the previously-mentioned routes?

O agente forneceu o código com sucesso com um roteador que atendeu aos nossos requisitos. Cada rota renderiza um componente React diferente da pasta de componentes (que criaremos na próxima etapa).

Instale o pacote via NPM:

$ npm install react-router-dom

Em seguida, substitua o conteúdo do seu App.jsx pelo seguinte:

// src/App.jsx

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import './index.css';

import EventsList from './components/EventList';
import EventDetails from './components/EventDetails';
import EventsByVenue from './components/EventsByVenue';

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path='/' element={<EventsList/>}/>
        <Route path='/:objectId' element={<EventDetails/>}/>
        <Route path="/venue/:venueId" element={<EventsByVenue/>}/>
      </Routes>
    </Router>
  );
}

export default App;

Em seguida, crie a seguinte estrutura de arquivos na sua pasta src:

src/
└── components/
    ├── EventDetails.jsx
    ├── EventList.jsx
    └── EventsByVenue.jsx

Em seguida, coloque o seguinte no arquivo EventsList.jsx:

// src/components/EventsList.jsx

import React from 'react';

const EventsList = () => {
  // fetch the events from the backend

  return (
    <div>
      {/* Map through the events data and display them */}
    </div>
  );
};

export default EventsList;

Em seguida, o arquivo EventDetails.jsx:

// src/components/EventDetails.jsx

import React from 'react';
import {useParams} from 'react-router-dom';

const EventDetails = () => {
  let {objectId} = useParams();

  // use objectId to fetch data from the backend

  return (
    <div>
      {/* render the specific event details using objectId */}
    </div>
  );
};

export default EventDetail;

E finalmente o arquivo VenueEventsList.jsx:

// src/components/VenueEventsList.jsx

import React from 'react';
import {useParams} from 'react-router-dom';

const VenueEventsList = () => {
  let {objectId} = useParams();

  // use objectId to fetch data from the backend

  return (
    <div>
      {/* render the events for a specific venue using objectId */}
    </div>
  );
};

export default VenueEventsList;

Inicie o servidor de desenvolvimento e teste se as rotas funcionam conforme o esperado.

Parse SDK

A maneira mais fácil de conectar o front-end a um back-end baseado em Back4app é por meio do Parse SDK.

Vamos pedir ao agente que esclareça melhor como isso é feito:

How to install and use Parse SDK to connect my frontend with the backend?

A resposta contém um pequeno erro. Em vez de index.jsx deveria dizer main.jsx, porque estamos usando um projeto Vite. Mesmo assim, vamos executar os passos.

Instale o pacote:

$ npm install parse

A seguir, modifique ligeiramente main.jsx para inicializar a instância do Parse:

// src/main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import Parse from 'parse';

Parse.initialize(
  '<parse-application-id>',  // replace me with your actual app id
  '<parse-javascript-key>',  // replace me with your actual js key
);
Parse.serverURL = 'https://parseapi.back4app.com/';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
);

Reinicie o servidor de desenvolvimento e navegue até sua aplicação web. Abra o console e verifique se há algum erro. Nenhum erro indica que a conexão com o back-end foi bem-sucedida.

Lógica do aplicativo

Seguindo em frente, solicite ao agente que gere a lógica real do aplicativo:

Write me the code for `EventList.jsx`, `EventDetails.jsx`, and `EventsByVenue.jsx`. 
Use Parse to fetch the required information. I want each page to have a `loading`
and `error` state.

O agente AI fornecerá o código para cada uma das rotas. Aqui está um exemplo:

// src/components/EventList.jsx

import {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import Parse from 'parse';

const EventsList = () => {

  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const eventObject = Parse.Object.extend('Event');
    const query = new Parse.Query(eventObject);

    query.find().then((results) => {
      const eventsData = results.map((event) => ({
        id: event.id,
        ...event.attributes,
      }));
      setEvents(eventsData);
      setLoading(false);
    }, (error) => {
      console.error('Error while fetching events', error);
      setError(error);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Event List</h1>
      <p>Here is a list of all the events.</p>
      <ul>
        {events.map((event) => (
          <li key={event.id}>
            <Link to={`/${event.id}`}>
              {event.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default EventsList;

Copie o código e cole-o em EventsList.jsx. Em seguida, altere os outros dois arquivos de acordo:

$ npm run dev

Abra seu navegador favorito e navegue até http://localhost:5173/. Você verá que os dados agora são obtidos do back-end. Experimente clicar para ver se tudo funciona.

Dockerização

Usaremos Back4pp Containers, uma plataforma CaaS gratuita, para implantar nosso front-end. Como o nome sugere, a plataforma é usada para implantação de containers; portanto, para implantar nosso front-end, devemos primeiro dockerizá-lo.

Crie um arquivo Dockerfile na raiz do projeto assim:

# Dockerfile

FROM node:18-alpine3.17 as build

WORKDIR /app
COPY . /app

RUN npm install
RUN npm run build

FROM ubuntu

RUN apt-get update
RUN apt-get install nginx -y

COPY --from=build /app/dist /var/www/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Este Dockerfile faz uso de compilações de vários estágios. É composto por duas etapas, a etapada build e a runner.

A etapa build copia o projeto, instala as dependências e constrói o projeto. A runner, por outro lado, serve de saída da build com Nginx.

Para reduzir o tamanho da imagem, também podemos definir um arquivo . dockerignore:

# .dockerignore

.idea/

node_modules/
out/
build/

Certifique-se de adaptar o arquivo .dockerignore de acordo.

Antes de implantar uma imagem Docker, é aconselhável testá-la localmente.

Construa a imagem do Docker:

$ docker build -t back4app-events:1.0 .

Execute um container usando a imagem recém-criada:

$ docker run -it -p 80:80 back4app-events:1.0

Sua aplicação web deve estar acessível em http://localhost/.

Código Push

Back4app Containers está totalmente integrado ao GitHub. Para implantar seu código nele, você deve primeiro enviá-lo para um repositório GitHub remoto.

Primeiramente, navegue até GitHub e crie um novo repositório. Anote o URL remoto, por exemplo:

[email protected]:<username>/<repository-name>.git

Example:
[email protected]:duplxey/back4app-ai-agent.git

Em seguida, inicialize o Git, faça o VCS de todos os arquivos e faça commit deles:

$ git init
$ git add .
$ git commit -m "project init"

Use o controle remoto da etapa anterior para o push do código:

$ git remote add origin <your_remote_url>
$ git push origin master

Seus arquivos deverão ser exibidos no repositório GitHub se você tiver feito tudo corretamente.

Implantar código

Assim que o código estiver no GitHub, podemos implantá-lo rapidamente solicitando ao agente de IA:

Connect to my "<username>/<repository-name>" repository on GitHub and deploy it to Back4app Containers.

Aguarde alguns minutos para que o projeto seja implantado.

Quando estiver pronto, clique na URL do aplicativo e verifique se tudo funciona testando o aplicativo.

Conclusão

Concluindo, construímos e implantamos com sucesso uma aplicação web full-stack na plataforma Back4app e explicamos como incorporar IA em um fluxo de trabalho de desenvolvimento web.

Embora não tenhamos escrito muito código de forma independente, ainda era necessário muito conhecimento técnico.

O Back4app Agent, em combinação com outras ferramentas baseadas em IA, como GitHub Copilot, pode acelerar significativamente o seu processo de desenvolvimento.

Utilizá-los permite automatizar tarefas mundanas e repetitivas e focar nas coisas mais interessantes.

Pegue o código-fonte final no repositório GitHub do back4app-ai-agent.