💼📚PORTFOLIO WEB👩‍💻💻

Índice

• Sobre Portfolio Web 💼💻🖱️
• Programas necesarios 📝
• Descargar proyecto 📥
• Hacer funcionar el backend ⌨️
• Comprobar si se estableció la conexión a la base de datos correctamente 📉
• Hacer funcionar el frontend
• Insertar roles en la base de datos ⚙️
• Abrir Postman 🟠
  • Crear Usuario
  • Obtener el Token 🔰
  • Pegar Token en Authorization ⚜️
  • Crear persona que corresponde al usuario creado anteriormente 🚻
  • Crear banner 📱
• Ejecutar el sitio web por completo 🚀
• Sitio Web Online :meridians:
• Tecnologías utilizadas ⚒️
• Autor ✒️

Sobre Portfolio Web 💼💻🖱️

Es una aplicación web full stack, que muestra: datos personales, estudios cursados📚, experiencia laboral, hard & soft skills, proyectos, etc. Contiene un diseño de interface (front end) que muestra la información, una base de datos que almacena los datos💾 antes mencionados y posee las APIs necesarias para proveer a través de internet📡 la información (back end).

✅ Programas necesarios📝

• Descargar e Instalar 🔽
  • Visual Studio Code
  • XAMPP
  • Node.js
  • Apache NetBeans IDE
  • Postman
• Instalar la última versión de angular cli dentro del sistema:
  • Ir al buscador de windows y luego escribir CMD
  • Ejecutar CMD como administrador
  • Una vez dentro de la consola escribir el comando:

    npm install -g @angular/cli@latest

✅ Descargar proyecto📥

• Descargar proyecto💢

✅ Hacer funcionar el backend⌨️

• Ejecutar XAMPP
• Iniciar los servidores Apache y MySQL ⚙️
  
• Abrir phpMyAdmin presionando el boton Admin en el servidor MySQL desde XAMPP 💡
• Crear la base de datos y ponerle de nombre " backendaj ". ⚠️ IMPORTANTE NO AGREGARLE TABLAS A LA BD, tiene que estar VACÍA ⚠️
• Ejecutar Apache NetBeans IDE
• Abrir la carpeta " back_local ", que se encuentra en repositorio descargado anteriormente, con NetBeans
• Si aparece aj con un simbolo de advertencia⚠️ hay que resolver problemas 👉 Click derecho al ícono del proyecto☕ 👉 Resolve Projects Problems 👉 luego apretar boton Resolve...

• Desplegar las carpetas del proyecto (" aj ") y buscar la que dice Other Sources
• Desplegar todo hacia abajo hasta encontrar el archivo application.properties:
  
• Donde dice "usuario"🧿 hay que poner el nombre de usuario con el que se conectará a la BD. Si tenemos un usuario con diferente nombre al de root, modificarlo y escribir el nombre que corresponda:bangbang:
• Si tenemos una contraseña🔐 para nuestro usuario hay que escribirla donde dice "clave del usuario", y luego descomentar esa línea de código. Si es que NO tenemos contraseña🔓 hay que dejar comentada la línea de codigo como viene por defecto.

✅ Comprobar si se estableció la conexión a la base de datos correctamente📉

• Abrir xampp y activar los servidores apache y mysql🔌
• Volver al NetBeans con el proyecto abierto y desplegar otra vez las carpetas, buscar la que se llama " com.portfolioweb.aj " dentro tendra un archivo con nombre AjApplication.java 👉 Click derecho y " Run File "
  
• Si todo salió BIEN✔️ en la ventana " Output - Run (AjApplication) " tiene que decir:

  Tomcat started on port(s): 8080 
  Started AjApplication in 12.662 seconds
  

• Se tiene que haber activado el servidor Tomcat y decir que la aplicación inició👌
• Tambien se puede comprobar en el panel de XAMPP que el servidor Tomcat este activo✔️ despues de ejecutar el proyecto:
  

✅ Hacer funcionar el frontend

• Crear una nueva carpeta vacía📁 con un nombre, puede ser "frontend"

• Luego abrir esa carpeta vacía📂 con el Visual Studio Code

• Buscar en el menu de opciones que aparece en la parte superior donde dice " Terminal " --> " New Terminal "

• Luego cambiar a command promt en la parte inferior donde esta el símbolo " + "

• Chequear que la ubicación sea la correcta de la carpeta vacía📁 que se creo anteriormente

  

• Ejecutar el siguiente comando:

    ng new "portfolioweb"

• Elegir la opción (utilizando las flechitas) " css " y luego presioner enter

  

• Cuando realiza la pregunta💬 responder con la la letra (y) y luego presionar enter

  

• Cerrar❌ el Visual Studio Code cuando haya terminado todo el proceso

• Buscar🧐 la carpeta " front_local ", que se encuentra en el repositorio descargado anteriormente

  

• Copiar todos los archivos🗃️ y pegarlos (sobreescribiendo los archivos) en esta nueva carpeta donde se abrió la terminal (en este caso la carpeta se llama " frontend ")

  

• Abrir nuevamente la carpeta, donde se copiaron los archivos anteriores, con el Visual Studio Code

• Abrir otra vez la terminal y ejecutar el siguiente comando:

    npm install

  

• Si lanza la opción de ejecutar " npm audit fix ", ejecutarlo:

    npm audit fix

• Luego ejecutar el siguiente comando:

    npm run build

• Cuando apareza una pregunta💬 responder con la letra (y)

  

✅ Insertar roles en la base de datos⚙️

• Ejecutar XAMPP y activar los servidores MySQL y Apache🖲️
• Abrir phpmyadmin
• En la base de datos (backendaj) abrir una nueva Query y ejecutar lo siguiente:

    INSERT INTO `rol` (`id`,`rol_nombre`) VALUES (null,'ROLE_ADMIN') 
    INSERT INTO `rol` (`id`,`rol_nombre`) VALUES (null,'ROLE_USER')
  

  

✅ Abrir Postman🟠

• Con el XAMPP abierto, más los servidores activos (MySQL y Apache), abrir el NetBeans🔋
• Ejecutar el proyecto (backend) dentro de la carpeta " com.portfolioweb.aj ", click derecho al archivo AjAplication.java 👉 Run File
• Verificar que en la ventana " Output - Run (AjApplication) " se haya activado el servidor Tomcat Port:8080✔️
• Abrir postman🔶 para crear el usuario, logearlo, copiar su token y así poder crear la persona. También habrá que crear el banner.

✔️ Crear Usuario

• Seleccionar POST y al lado escribir lo siguiente:

    localhost:8080/auth/nuevo

• Debajo clickear donde dice Body, luego seleccionar " raw " y despues deplegar los formatos de texto y seleccionar el " JSON(application/json) "
• En la consola escribir:

    {
      "nombre":"admin",
      "nombreUsuario":"admin",
      "email": "[email protected]",
      "password":"admin",
      "roles":["admin"]
    }

  PD: los valores de todos los campos, menos el de "roles", pueden ser diferentes, esto es a modo de ejemplo
  

✔️ Obtener el Token🔰

• Seleccionar POST y al lado escribir lo siguiente:

    localhost:8080/auth/login

• Debajo clickear donde dice Body, luego seleccionar " raw " y despues deplegar los formatos de texto y seleccionar el " JSON(application/json) "
• En la consola escribir:

    {
      "nombreUsuario":"admin",
      "password":"admin"
    }

• Luego de esto copiar el Bearer Token que se generó
  

✔️ Pegar Token en Authorization⚜️

• Buscar en el menu de opciones donde dice Authorization
• Seleccionar Bearer Token --> Token y ahi pegar el Token copiado anteriormente
  

✔️ Crear persona que corresponde al usuario creado anteriormente🚻

• Seleccionar POST y al lado escribir lo siguiente:

    localhost:8080/persona/create

• Debajo clickear donde dice Body, luego seleccionar " raw " y despues deplegar los formatos de texto y seleccionar el " JSON(application/json) "
• En la consola escribir:

    {
      "nombre":"Rigoberto", 
      "apellido": "Cangrejo",
      "img":"https://i.pinimg.com/564x/59/f3/97/59f39763e107715b7af08396c7032a2f.jpg",
      "profesion":"Software Developer",
      "acercaDe": "Soy el mejor programador de la historia"
    }

  PD: los valores de todos los campos pueden ser diferentes, esto es a modo de ejemplo
  

✔️ Crear banner📱

• Seleccionar POST y al lado escribir lo siguiente:

    localhost:8080/banner/create

• Debajo clickear donde dice Body, luego seleccionar " raw " y despues deplegar los formatos de texto y seleccionar el " JSON(application/json) "
• En la consola escribir:

    {
      "titulo":"PORTFOLIO WEB",
      "img":"https://png.pngtree.com/background/20210714/original/pngtree-blue-realistic-carbon-fiber-light-background-banner-streaming-gaming-streamer-picture-image_1234220.jpg"
    }

  PD: los valores de todos los campos pueden ser diferentes, esto es a modo de ejemplo
  

☑️ Ejecutar el sitio web por completo🚀

✔️ Ejecutar BACKEND en NetBeans📊

• Con el XAMPP abierto, más los servidores activos (MySQL y Apache), abrir el NetBeans📍
• Ejecutar el proyecto (backend) dentro de la carpeta " com.portfolioweb.aj ", click derecho al archivo AjAplication.java 👉 Run File
• Verificar que en la ventana " Output - Run (AjApplication) " se haya activado el servidor Tomcat Port:8080✔️

✔️ Ejecutar FRONTEND en Visual Studio Code🖥️

• Ir a la carpeta nueva📁 donde copiamos los archivos del " frontend_local " del repositorio, abrirla con el Visual Studio Code

• Abrir una nueva terminal y ejecutar el siguiente comando:

    ng serve -o

  

• Si todo salió bien🆗 se tiene que abrir una nueva pestaña en su navegador de Internet🌐 con el sitio web corriendo.

  

• Para logearse🕳️ deberá introducir el nombre de usuario y su contraseña que se creo en Potsman anteriormente, para este ejemplo eran:

    "nombreUsuario":admin
    "password":admin

  

• De esta forma podrá editar🖊️, eliminar❌ o agregar➕ información al sitio web

  

Sitio Web Online 🌐

• ⚠️Aclaración⚠️: tarda un par de minutos en levantar la información de la base de datos ya que se encuentra en un hosting gratuito (Render, Clever Cloud y Firebase)

    https://portfoliowebanajuarez.web.app/
  

Tecnologías utilizadas ⚒️

Java	MySQL	Node.js	TypeScript	Angular	HTML	CSS	Bootstrap
Postman	Visual Studio Code	XAMPP	NetBeans	phpMyAdmin	Spring Boot

Autor ✒️

Ana Lucia Juarez