Desenvolvimento fullstack com tecnologia Open Source

Olá! Nesta oportunidade mostrarei como criar um ciclo de desenvolvimento Full Stack com tecnologias Open Source. Como exemplo, faremos isso com um formulário de contato específico.

Usaremos MySQL para o banco de dados, Node.js para o servidor web e JS/JQUERY AJAX para o Frontend.

O ciclo de desenvolvimento Fullstack será composto pelas seguintes etapas:

1. Banco de dados.
2. Web server.
3. Frontend.

Banco de dados

Para o desenvolvimento do banco de dados utilizaremos o sistema gerenciador de banco de dados relacional MySQL, popular por sua interface utilizando os comandos ou o terminal. No entanto, possui uma interface mais amigável: MySQL Workbench.

Embora não seja obrigatório, recomendo usar o Workbench para acompanhar este post.

Pronto, o próximo passo é criar nosso banco de dados e a tabela que vai abrigar os quatro campos do formulário de contato.

Os quatro campos serão os seguintes:

1. Nome.
2. Email.
3. Inquiry Type.
4. Mensagem.

Uma vez instalado o MySQL e integrada a ferramenta de banco de dados visual MySQL Workbench, criaremos o banco de dados que chamaremos de Form.

Uma vez criada, vamos gerar a tabela, que podemos colocar Fo_contact (o "fo" no início refere-se ao nome do banco de dados do Form), enquanto vamos colocar os seguintes nomes nos campos:

1. co_name.
2. co_email.
3. co_type.
4. co_message.

É importante enfatizar a ordem ao nomear tabelas e campos para manter um banco de dados organizado e fácil de entender quando ele cresce com mais tabelas.

Por exemplo, você deseja adicionar outra tabela e queremos que esta armazene imagens, então o nome seria o seguinte: fo_imagenes. Da mesma forma, os campos desta nova tabela devem referir-se ao nome da tabela. Outro exemplo, se você deseja adicionar um campo para armazenar fotos de perfil, o nome do campo seria profile_img. O “img” no início refere-se ao nome da tabela.

Com isso em mente, podemos continuar com nosso formulário de contato Open Source.

Uma vez com nossa tabela pronta, podemos passar para a próxima etapa: desenvolver nosso servidor web.

Ainda não terminamos nosso banco de dados. Em seguida, retornaremos ao Workbench para dar o toque final: Programar nosso stored procedure para obter os dados do usuário via JSON, convertê-los e inseri-los em nosso banco de dados.

Web server

Iniciamos a parte do servidor web acessando nosso sistema operacional Linux. Em seguida, criamos nosso servidor web usando Node.js (é necessário tê-lo instalado).

Para criar um projeto com Node.js siga estes passos:

1. Criar uma pasta onde o web server será hospedado.
2. Abrir o terminal e escrever cd change directory para a pasta que você criou.
3. Executar npm init -y no terminal para criar o projeto.
4. Adicionar o pacote do MySQL através de npm install mysql no terminal.
5. Adicionar o pacote do Express com npm install express.

Recomendo que para modificar o projeto você utilize o Visual Studio Code. Com o VS Code instalado no Linux, a forma de abri-lo é pelo terminal.

Em seguida, vamos ao diretório da pasta do nosso projeto e executamos o Code no terminal. Esse comando abrirá seu projeto com o Visual Studio Code e facilitará a programação do servidor web.

Uma vez no Visual Studio, criaremos uma pasta chamada connection. Nele adicionamos um arquivo chamado app.js, responsável pela conexão com nosso banco de dados MySQL.

A imagem abaixo mostra o código da conexão com o banco de dados.

Então deixamos a pasta de conexão para a principal e criamos dois arquivos: um chamado server.js e outro chamado contact-controller.js.

Server.js

No arquivo server.js, especificamos em qual porta nosso servidor web funcionará.

OBS: O porto deve ser aberto no portal do seu servidor Linux.

Uma vez aberta o porto no portal, vamos ao servidor e abrimos a porta do firewall.

No Ubuntu e no Debian, o comando para abrir as portas do firewall é sudo ufw allow port-number/tcp.

Eu compartilho a imagem do código server.js.

Contact_controller.js

Agora vamos à diversão. O arquivo contact_controller.js é onde será escrito o código para chamar nosso stored procedure com os dados JSON recebidos do usuário e inseri-lo em nosso banco de dados.

No arquivo contact_controller.js teremos nosso roteador de endpoint com uma requisição do tipo POST pois estaremos inserindo no banco de dados.

Colocaremos o seguinte caminho /api/insert em nossa requisição POST, ele irá chamar a stored procedure insert_contact que receberá como dados o body que responde a requisição em JSON utilizando JSON.stringify.

Abaixo compartilho uma imagem do código contact_controller.js.

Recomendo testar nossa API usando Postman ou Insomnia. Com nosso servidor web pronto, voltamos ao MySQL Workbench para configurar o stored procedure que se encarregará de receber os dados do usuário e inseri-los no banco de dados.

Opcional: Adicione o pacote Nodemailer ao seu projeto e inclua-o em seu contact_controller.js para enviar um e-mail toda vez que a API for executada.

Stored Procedure

De volta ao nosso banco de dados, criaremos nosso stored procedure. Para fazer isso no MySQL Workbench, basta clicar com o botão direito do mouse no arquivo Stored Procedure no SCHEMA de nosso banco de dados e selecionar Create Stored Procedure. Vamos chamá-lo de insert_contact.

Este stored procedure tem a função de converter os dados JSON recebidos do usuário para inseri-los no banco de dados Form e na tabela fo_contact.

Os dados que serão recebidos no procedimento armazenado serão os campos que especificamos anteriormente:

1. Nome (first_name).
2. Email (email).
3. Inquiry Type (inquiry_type).
4. Mensagem (message).

Em nosso procedimento armazenado, o campo Nome será definido como first_name. Definimos E-mail como email, Inquiry Type como inquiry_type e Mensagem como message.

Essas definições são importantes porque as usaremos no Front End do nosso formulário de contato para fazer a chamada à API do nosso servidor web.

O grande benefício de usar dados JSON em nosso stored procedure é que temos a facilidade de modificá-lo sem precisar modificar nosso servidor web. Isso permite uma programação mais rápida e eficiente. No caso de receber dados individuais e não um corpo JSON, devemos modificar nosso servidor web sempre que for feita uma alteração no stored procedure.

Abaixo compartilho a imagem do código do nosso stored procedure.

Assim que nosso stored procedure estiver pronto, entramos na parte final do ciclo de desenvolvimento Fullstack com tecnologia Open Source.

Publicar uma API e conecte-a ao Frontend utilizando tecnologia Open Source

Requisitos para implementar esta seção:

1. Domínio.
2. Servidor Linux.
3. Web server configurado.

Para publicar nossa API e torná-la acessível na web, devemos usar um domínio para proteger nosso IP dos riscos da Internet.

Há momentos em que a web parece o Velho Oeste, por isso é necessário adicionar uma camada de segurança e criar um subdomínio para usá-lo com nossas APIs públicas.

A anatomia dos subdomínios usados ​​para APIs é usar api ou ws como o nome do subdomínio.

Nosso domínio ficará assim: api.domain.com ou ws.domain.com.

Configuramos o subdomínio no gerenciador de DNS do nosso gerenciador de domínio (exemplo: GoDaddy).

Para criar o subdomínio no gerenciador de DNS, você deve gerar um registro tipo A com o nome api ou ws e no conteúdo insertar o endereço IP do servidor.

Agora podemos publicar nossa API em nosso servidor Linux. A tecnologia que usaremos para publicar nossa API e site é chamada Nginx.

Nginx

Acesse seu servidor Linux e instale o Nginx. Você pode acompanhar este artigo se tiver dúvidas.

Importante: Para que seu formulário de contato funcione, o site ou Front End onde o formulário de contato será hospedado deve estar publicado no mesmo servidor com o mesmo endereço IP da API.

Com o Nginx instalado, podemos publicar nossa API.

Publicar API no Linux com Nginx

Para publicar nossa API para que ela possa ser acessada da web com o domínio, devemos configurar o arquivo nginx.conf. Lá devemos adicionar a configuração para publicar nossa API.

As etapas são as seguintes:

1. Vá para o terminal e abrir o diretório sudo nano etc/nginx/nginx.conf.
2. Adicionar a configuração em nginx.conf.
3. Verificar se não há erros e reinicie o Nginx.

Vá para o terminal e abra o diretório sudo nano etc/nginx/nginx.conf.

Assim que chegar ao nginx.conf sudo nano abre o arquivo dentro do terminal.

Dentro do terminal fazemos as alterações e, uma vez pronto, pressionamos CTRL + O para salvar o arquivo e CTRL + X para sair do editor.

Adicionar configuração em nginx.conf

Nesta configuração, você adicionará um novo servidor escutando na porta 80 e nomeado usando o domínio com o subdomínio da API. Além disso, será especificada a porta onde o servidor web Node JS está rodando. Nosso exemplo é a porta 8383.

Abaixo, compartilho a imagem da configuração da API no arquivo nginx.conf.

Verificar se não há erros e fazer um restart ao Nginx

Após fechar o editor com CTRL + X, é importante verificar se há erros usando o comando sudo nginx -t.

Se tudo estiver correto, o teste é bem-sucedido será recebido. Com o teste sem erros podemos reiniciar o Nginx para que as alterações tenham efeito.
Em seguida, execute o comando sudo systemctl restart nginx.

Depois de publicado, vamos para nossa plataforma de API com Postman para executar e testar nossa solicitação POST usando o domínio. O caminho seria o seguinte: https://api.domain.com/api/insert.

Posteriormente, podemos gravar a seguinte resposta do corpo JSON no Postman para testar se está inserindo no banco de dados.

{

“first_name”: “Guillermo Franco”,

“email”: “info@guillefranco.net”,

“inquiry_type”: “app”,

“message”: “Hello Test”

}

Se o procedimento armazenado e a API forem programados corretamente, as informações do corpo JSON serão inseridas em nosso banco de dados.

Então o que resta é o mais simples: Crie o Front End do formulário de contato e chame nossa API: https://api.domain.com/api/insert.

Você pode desenvolver o Frontend com sua tecnologia preferida: HTML/CSS, Vue JS, React JS, Flutter, etc.

O importante é usar JQuery AJAX para fazer nossa requisição do tipo POST com datatype JSON, onde na url passaremos nosso domínio da API. E nos dados passaremos uma variável com o corpo JSON e as variáveis ​​de dados inseridas pelo usuário como valor.

Você pode colocar tudo isso dentro de uma função que é executada quando o usuário pressiona o botão submit form ou send inquiry.

Resumo

Aí está, uma forma de contato com as tecnologias Open Source. Apesar de ser um guia extenso, ele te dá uma boa ideia do desenvolvimento Fullstack e uma boa base para desenvolver mais APIs e mais funcionalidades.

Com o conhecimento básico, a criatividade é o limite para desenvolver qualquer coisa.

Se quiser saber mais sobre mim, meus projetos e como desenvolver e lançar apps e sites focados em escalabilidade para negócios, acesse guillefranco.net.

Até logo!