Desarrollo fullstack con tecnología Open Source

¡Hola! En esta oportunidad te mostraré cómo crear un ciclo de desarrollo Fullstack con tecnologías Open Source. Como ejemplo, lo haremos con una forma de contacto específica.

Utilizaremos MySQL para la base de datos, Node.js para el web server y JS/JQUERY AJAX para el Frontend.

El ciclo del desarrollo Fullstack constará de los siguiente pasos:

1. Base de datos.
2. Web server.
3. Frontend.
   

Base de datos

Para el desarrollo de la base de datos utilizaremos el sistema de manejo de base de datos relacional MySQL, popular por su interfaz utilizando los comandos o el terminal. Sin embargo, tiene una interfaz más user friendly: MySQL Workbench.

Aunque no es necesario, recomiendo utilizar Workbench para seguir esta publicación.

Bien, el siguiente paso es crear nuestra base de datos y la tabla que alojará cuatro campos de la forma de contacto.

Los cuatro campos serán los siguientes:

1. Nombre.
2. Email.
3. Inquiry Type.
4. Mensaje.
   

Una vez instalado MySQL e integrada la herramienta de base de datos visual MySQL Workbench, crearemos la base de datos a la cual llamaremos Form.

Una vez creada, generaremos la tabla, la cual podemos poner Fo_contact (el “fo” del principio hace referencia al nombre de la base de datos Form), mientras que a los campos le pondremos los siguientes nombres:

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

Es importante recalcar el orden al nombrar las tablas y los campos para mantener una base de datos ordenada y fácil de entender una vez que crezca con más tablas.

Por ejemplo, deseas añadir otra tabla y esta la queremos para guardar imágenes, entonces el nombre sería el siguiente: fo_imágenes.

De igual manera, los campos de esta nueva tabla deben hacer referencia al nombre de la tabla. Otro ejemplo, si deseas añadir un campo para guardar imágenes de perfil, el nombre del campo sería img_perfil. El “img” del principio hace referencia al nombre de la tabla.

Ya con eso planteado, podemos seguir adelante con nuestra forma de contacto Open Source.

Una vez con nuestra tabla lista podemos movernos al siguiente paso: desarrollar nuestro web server.

Aún no hemos terminado con nuestra base de datos. Luego volveremos al Workbench para darle el toque final: Programar nuestro stored procedure para obtener los datos del usuario vía JSON, convertirlos e ingresarlos a nuestra base de datos.

Web server

Empezamos la parte del web server accediendo a nuestro sistema operativo Linux. Luego creamos nuestro web server utilizando Node.js (es necesario tenerlo instalado).

Para crear un proyecto con Node.js sigue estos pasos:

1. Crear una carpeta  donde se alojará el web server.
2. Abrir el terminal y escribir cd change directory a la carpeta que creaste.
3. Correr npm init -y en el terminal para crear el proyecto.
4. Añade el paquete de MySQL mediante npm install mysql en el terminal.
5. Añadir el paquete de Express con npm install express.
   

Recomiendo que para modificar el proyecto utilices Visual Studio Code. Con VS Code instalado en Linux, la manera de abrirlo es vía el terminal.

A continuación, nos dirigimos al directorio de nuestra carpeta del proyecto y ejecutamos Code en el terminal. Ese comando abrirá tu proyecto con Visual Studio Code y permitirá programar el web server de manera más sencilla.

Una vez en Visual Studio, crearemos una carpeta llamada connection. Allí añadimos un archivo llamado app.js, encargado de la conexión con nuestra base de datos MySQL.

La imagen a continuación muestra el código de la conexión con la base de datos.

Luego salimos de la carpeta de connection hacia la principal y creamos dos archivos: uno llamado server.js y otro llamado contact-controller.js.

Server.js

En el archivo server.js especificamos en cuál puerto funcionará nuestro web server.

Nota: El puerto debe abrirse en el portal de tu servidor Linux.

Una vez se abra el puerto en el portal, nos dirigimos al servidor y abrimos el puerto del firewall.

En Ubuntu y Debian el comando para abrir firewall ports es sudo ufw allow port-number/tcp.

Comparto imagen del código de server.js.

Contact_controller.js

Ahora vamos a lo divertido. En el archivo de contact_controller.js es donde se escribirá el código para llamar a nuestro stored procedure con los datos JSON recibidos del usuario e insertarlos en nuestra base de datos.

En el archivo contact_controller.js tendremos nuestro router endpoint con un request tipo POST ya que estaremos insertando en la base de datos.

A nuestro POST request le pondremos el siguiente path /api/insert, éste llamará al stored procedure insert_contact que recibirá como datos el body que responda el request en JSON utilizando JSON.stringify.

A continuación comparto imagen del código de contact_controller.js.

Recomiendo que se hagas pruebas de nuestro API utilizando Postman o Insomnia. Con nuestro web server listo, volvemos a MySQL Workbench para configurar el stored procedure que se encargará de recibir los datos del usuario e insertarlos en la base de datos.

Opcional: Añade el paquete Nodemailer a tu proyecto e inclúyelo en tu contact_controller.js para enviar un email cada vez que se ejecute el API.

Stored Procedure

De vuelta en nuestra base de datos, crearemos nuestro stored procedure. Para hacerlo en MySQL Workbench, simplemente damos clic derecho al archivo Stored Procedure en el SCHEMA de nuestra base de datos, y seleccionamos Create Stored Procedure. Le llamaremos insert_contact.

Este stored procedure tiene el rol de convertir los datos JSON que se reciban del usuario para insertarlos en la base de datos Form y en la tabla fo_contact.

Los datos que se recibirán en el stored procedure serán los campos que especificamos anteriormente:

1. Nombre (first_name).
2. Email (email).
3. Inquiry Type (inquiry_type).
4. Message (message).
   

En nuestro stored procedure, el campo Nombre se definirá como first_name. E-mail lo definimos como email, Inquiry Type como inquiry_type y Message como message.

Estas definiciones son importantes porque las utilizaremos en el Front End de nuestra forma de contacto para hacer la llamada a nuestro web server API.

El gran beneficio de utilizar datos JSON en nuestro stored procedure. Es que tenemos la facilidad de modificarlo sin necesidad de modificar nuestro web server. Esto permite una programación más rápida y eficiente. En el caso de recibir los datos individuales y no un JSON body, debemos modificar nuestro web server cada vez que se realice un cambio en el stored procedure.

A continuación comparto la imagen del código de nuestro stored procedure.

Una vez listo nuestro stored procedure, entramos a la parte final del ciclo de un desarrollo Fullstack con tecnología Open Source.

Publicar un API y conectarlo al Frontend utilizando tecnologías Open Source

Requisitos para implementar esta sección:

1. Dominio.
2. Servidor Linux.
3. Web server configurado.
   

Para publicar nuestro API y que sea accesible en la web hay que utilizar un dominio para proteger nuestro IP de los riesgos en Internet.

Hay veces en que la web pareciera el Viejo Oeste, por lo que es necesario añadir una capa de seguridad y crear un subdominio para utilizarlo con nuestros APIs públicos.

La modalidad de la anatomía de los subdominios utilizados para APIs es utilizar api o ws como el nombre del subdominio.

Nuestro dominio se verá de la siguiente manera: api.dominio.com o ws.dominio.com.

El subdominio lo configuramos en el DNS manager de nuestro domain manager (ejemplo: GoDaddy).

Para crear el subdominio en el DNS manager hay que generar un récord tipo A con nombre api o ws y en el contenido ingresar el IP-Address del servidor.

Ahora podemos publicar nuestro API en nuestro servidor Linux. La tecnología que utilizaremos para publicar nuestro API y website es llamada Nginx.

Nginx

Accede a tu servidor Linux e instala Nginx. Puedes seguir este artículo si tienes dudas.

Importante: Para que tu forma de contacto funcione, el website o Front End donde se alojará la forma de contacto debe estar publicado en el mismo servidor con misma dirección IP que el API.

Con Nginx instalado, podemos publicar nuestro API.

Publicar API en Linux con Nginx

Para publicar nuestro API de modo que pueda accederse desde la web con el dominio, hay que configurar el archivo nginx.conf. Allí debemos añadir la configuración para publicar nuestro API.

Los pasos son los siguientes:

1. Ir al terminal y abrir el directorio sudo nano etc/nginx/nginx.conf.
2. Añadir configuración en nginx.conf.
3. Probar que no hayan errores y hacerle un restart al Nginx.
   

Ir al terminal y abrir el directorio sudo nano etc/nginx/nginx.conf.

Una vez llegas al nginx.conf el sudo nano abre el archivo dentro del terminal.

Dentro del terminal realizamos los cambios y, una vez listos, presionamos CTRL + O para grabar el archivo y CTRL + X para salir del editor.

Añadir configuración en nginx.conf

En esta configuración vas a añadir un nuevo servidor escuchando el puerto 80 y de nombre utilizando el dominio con el subdominio del API. Además, se especificará el puerto donde está corriendo el web server Node JS. Nuestro ejemplo es el puerto 8383.

A continuación, comparto imagen de la configuración del API en el archivo nginx.conf.

Probar que no haya errores y hacerle un restart al Nginx

Luego de cerrar el editor con CTRL + X, es importante verificar que no haya errores mediante el comando sudo nginx -t.

Si todo está correcto, se recibirá test is successful. Con la prueba sin errores podemos hacerle un restart al Nginx para que se efectúen los cambios.

A continuación, ejecuta el comando sudo systemctl restart nginx.

Una vez publicado, vamos a nuestro API platform com Postman para ejecutar y probar nuestro POST request utilizando el dominio. El path sería el siguiente: https://api.dominio.com/api/insert.

Posteriormente, podemos quemar el siguiente JSON body response en Postman para probar que esté insertando en la base de datos.

{

“first_name”: “Guillermo Franco”,

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

“inquiry_type”: “app”,

“message”: “Hello Test”

}

Si el stored procedure y API está programado correctamente, la información del JSON body será insertada en nuestra base de datos.

Entonces lo que nos resta es lo más sencillo: Crear el Front End de la forma de contacto y llamar a nuestro API: https://api.dominio.com/api/insert.

El Frontend lo puedes desarrollar con tu tecnología de preferencia: HTML/CSS, Vue JS, React JS, Flutter, etc

Lo importante es, utilizar JQuery AJAX para hacer nuestro request tipo POST con datatype JSON, donde en el url le pasaremos nuestro dominio del API. Y en la data le pasaremos una variable con el JSON body y variables de datos ingresados por el usuario como el valor.

Todo eso puedes ponerlo dentro una función que se ejecute cuando el usuario presione el botón submit form o send inquiry.

Resumen

Ahí lo tienes, una forma de contacto con tecnologías Open Source. Aunque es una guía extensa, te ofrece una buena idea de un desarrollo Fullstack y un buen cimiento para desarrollar más APIs y más funcionalidades.

Con los conocimientos base, la creatividad es el límite para desarrollar lo que sea.

Si quieres saber más sobre mí, mis proyectos y cómo desarrollar y lanzar apps y websites enfocados en la escalabilidad para negocios, entra en guillefranco.net.

¡Hasta luego!