Documentación del proyecto Angular con Wordpress

Introducción

Esta es la documentación del proyecto Dashboard | Practicas II Semestre UNAB, realizado en la empresa A&A Soluciones TIC, utilizando MKDOCS para publicarlo en ReadTheDocs. En este proyecto se utilizó Angular para el Frontend, en la parte del backend se utilizó NodeJS, TypeORM con base de datos MySQL. También se hizo uso de la API REST de los departamentos y municipios de Colombia y la API REST de WordPres.

Contenido

• Frontend

  • Introducción
  • Versión de Angular
    • Versión de los paquetes
  • Páginas publicas
    • Registrarse
      • Código utilizado para crear un usuario
    • Iniciar sesión
      • Inicio de sesión por medio de la aplicación
      • Inicio de sesión con redes sociales
      • Inicio de sesión con Facebook o Google
    • Interfaces Involucradas
  • Páginas privadas
    • Inicio
    • Perfil
    • Registros
    • Video
    • Blog
      • Todas las entradas
      • Ver entrada específica
      • Iniciar sesión en WordPress
      • Crear entrada
      • Editar entrada
      • Administrar categorías
    • Interfaces Involucradas
  • Menús
    • Menú Publico
    • Menú de Dashboard
    • Menú de WordPress
      • Menú Sin Iniciar Sesión
      • Menú de Administrador
      • Menú Cliente
    • Interfaces Involucradas
  • Guards
    • Token aplicación
      • Validar token creado por la aplicación
      • Validar token creado por Google o Facebook
    • Token enviado por WordPress

• Backend

  • Introducción
  • Versión de Node
  • Archivo index.ts
  • Controladores
  • Entidades
    • Entidad de los usuarios creados por medio de la aplicación
    • Entidad de los usuarios creados por medio de Google o Facebook
    • Entidad del perfil de los usuarios
  • Helpers
    • Borrar imagen de perfil del usuario
    • Generar JWT
    • Información del usuario
  • Middlewares
    • Subir imagén de perfil
    • Validar campos de los formularios de inicio de sesión y registro
    • Validar JWT
  • Carpeta Public
  • Rutas
  • Carpeta de imágenes de los perfiles

Repositorio

Para el manejo de las versiones del proyecto se utilizó Git y GitHub, puedes ver el repositorio haciendo click aquí

Servidor de desarrollo Frontend

Pasos para levantar el servidor de desarrollo de Angular:

1. git clone https://github.com/dev36aiatic/primerosPasosAngular.git
2. Abrir consola de comandos sobre la carpeta del proyecto clonado en el paso anterior
3. npm install - Instala las dependecias del proyecto de Angular
4. ng serve -o - Abre el proyecto una vez esté listo

Build de producción

Para generar la build de producción debes abrir la consola de comandos sobre la carpeta del proyecto de angular y ejecutar el comando ng build --configuration production. Esto creará los archivos en la siguiente ruta.

Angular                     # La carpeta que contiene del proyecto de Angular clonado
    dist/                   
        Angular/
                index.html  # El index.html del proyecto
                ...         # Otros archivos del proyecto como el script, estilos css y fuentes.

Una vez creados estos archivos puedes utilizarlos de la forma que desees.

Servidor de desarrollo Backend

1. git clone https://github.com/dev36aiatic/primerosPasosAngular.git
2. Abrir consola de comandos sobre la carpeta backend que está dentro del proyecto clonado en el paso anterior
3. npm install - Instala las dependecias del proyecto de NodeJS
4. Configurar la conexión a la base de datos en el archivo ormconfig.json
5. Configurar las variables de entorno en el archivo .env
6. npm run dev - Corre el servidor del backend