Sistema-Observatorios-Regionales

Código del sistema de los observatorios regionales en framework Laravel.

Descarga de elementos a utilizar

COMANDOS

Para todos los pasos, siempre verificar que se haya instalado todo correctamente con los siguientes comandos:

Comandos y pasos para poder correr un proyecyo de Laravel

MIGRACIONES

Antes de empezar, hay que saber sobre migraciones en Laravel

Las Migraciones se les conoce como el control de versiones de tu base de datos; de esta forma se puede crear la base de datos y compartir el diseño con el equipo de trabajo. Si deseas agregar nuevas tablas o columnas a una tabla existente, puedes hacerlo con una nueva migración; si el resultado no fue el deseado, puedes revertir esa migración.

CREACIÓN DEL PROYECTO

1. Crear una carpeta en donde estará el proyecto nuevo, en nuestro caso será tener un lugar o carpeta en donde se clonará este repositorio, ya que aqui va el proyecto.

2. Verificar las versiones de PHP, Composer, Node y NPM en POWERSHELL o CMD

• COMPOSER: composer -v VERSION DEL PROYECTO: Composer version 2.4.1

• PHP: php -v VERSION DEL PROYECTO: PHP 8.1.10 (cli), Zend Engine v4.1.10

• NODE: node -v VERSION DEL PROYECTO: v16.15.1

• NPM: npm -v VERSION DEL PROYECTO: 8.11.0

3. Instalar TailwindCSS en POWERSHELL o CMD

• Posicionarse en la carpeta del proyecto de laravel
• npm install -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p -> (crea el archivo de configuracion)

CORRER EL PROYECTO

1. Arrancar un proyecto de laravel en POWERSHELL o CMD:

• php artisan serve

2. Instalar Node en el proyecto (SOLO LA PRIMERA VEZ)

• npm install

3. Instalar TailwindCSS al proyecto y creacipon de archivo de configuracion (SOLO LA PRIMERA VEZ)

• Posicionarse en la carpeta del proyecto de laravel
• npm install -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p

4. Despues de haber instalado TailwindCSS, se debe de tener otro POWERSHELL o CMD corriendo con este comando:

• npm run dev

5. Creacion de tablas o bases de datos por medio de migraciones de Laravel y MySQL Workbench 5.1. Migraciones

• php artisan migrate
• artisan migrate:rollback (Revierte la conección con la tabla)
• sail artisan migrate:rollback --step=5 (ejemplo de un rollback por pasos)

5.2. Make, comando para creación

• artisan make:migration (les da un nombre a las migraciones, este nombre sale en el proyecto de laravel en la parte de migraciones)

DESCARGA E INSTALACION

Para VisualStudioCode:

https://code.visualstudio.com/download

Se escoje la arquitectura de la computadora y se instala.

Github Desktop:

https://desktop.github.com/

Pasos de uso:

1. Descargar la aplicación a la computadora.
2. Localizar una carpeta en donde se guardaran el o los repositorios en nuestra computadora.
3. Iniciar sesión de github en la aplicación.
4. Seleccionar un repositorio para clonar en la carpeta del paso 2.

Cuando ya hay un repositorio clonado en nuestra computadora:

1. Presionar fetch origin para verificar cambios en el repositorio de git.
2. En caso de haber, presionar el mismo boton, el mismo dirá "Pull request" con un numero de la cantidad de cambios.

En caso de hacer un cambio:

1. Verificar los cambios del git.
2. Verificar los cambios por hacer en la aplicación (parte izquierda, sale todos los archivos y lineas modificadas por usted).
3. Darle nombre y descripción al commit, abajo a la izquierda.
4. Presionar Commit to main.
5. Volver a presionar el mismo boton.

Para MySQL:

https://dev.mysql.com/downloads/installer/

Para PHP:

NOTA: Si usan XAMPP, ya el por defecto trae una ruta de PHP, en mi caso yo la elimne por completo de las variables de entorno pues la version que iba a usar fue esta que vamos a instalar, en mi caso tiraba un error con ambos PHP en el PATH, asi que si les funciona el proyecto de Laravel con el php de xampp, CREO que podrian hacer caso omiso, solo recordar que esta version de PHP es la siguiente: VERSION DEL PROYECTO: PHP 8.1.10 (cli), Zend Engine v4.1.10

https://windows.php.net/download#php-8.1

Selecciona el cuadro que dice THREAD SAFE, luego la arquitectura de su computadora. Al darle descargar, es un .zip

Lo que se hace es darle click derecho y darle en "Extraer todo" y la carpeta extraída la vamos a poner en la unidad C:

Ahora, hay que agregarlo a las variables de entorno del sistema En busqueda de windows buscamos "Editar as variables del sistema", en ingles "Edit the system ebviroment variables"

Luego en el boton:

Vamos a las variables del sistema y seleccionamos el que dice PATH

Le damos en el boton de edit

Luego, en el boton de New

Y colocamos donde se tiene guardado PHP, en este caso lo guardamos en C:, y lo ponemos abajo

Le damos en OK y luego en Aplicar.

Para Composer:

https://getcomposer.org/download/

Al descargar el archivo .exe le damos permiso a todos los usuarios, luego aparece una pantalla con una cajita de Developer Mode, NO la marcamos y le damos siguiente

En la ruta, debemos de ir a la ruta donde tenemos PHP, de nuevo, si tienen XAMPP, puede ser que ya traigan composer, sino se pone en la ruta del PHP de XAMPP, pero si no lo tienen y lo van instalando a como yo en C:, se ponen sobre la ruta C:\php\php.exe

El proxy no se toca y terminan de instalar.

Para Node y NPM:

Presionamos el que diga RECOMENDADO PARA LA MAYORIA DE LOS USUARIOS https://nodejs.org/en/download/

Es un archivo.msi Solo se aceptan los terminos y se de la Next hasta este punto, en donde si le clickeamos el check a esta opcion

Despues next e instalar.

Ahora, un CMD se va a abrir automaticamente, en donde solo le damos cualquier tecla para continuar con la instalacion de paquetes

Despues, abrira powershell u otro cmd donde instalaran paquetes y dependencias de Chocolatery y Phyton, esto se hace automaticamente, sabremos que todo termino correctamente cuando nos salga un mensaje de que presionemos ENTER para salir

Luego, nos fijamos en las versiones con los comandos de arriba del documento, especificamente node y npm.

Para TailwindCSS y Vite:

Se abre el Powershell o CMD, se posiciona sobre el proyecto con cd "ruta del proyecto", y luego ejecuta el siguiente comando: npm install -D tailwindcss postcss autoprefixer

###IMPORTANTE: El proyecto ya trae Vite y Tailwindcss por defecto, ESTOS PASOS DE AQUI EN ADELANTE NO HAY QUE HACERLOS EN ESTE PROYECTO ya que ya viene por defecto, pero si algun dia hacen otro proyecto de laravel con tailwindcss, si abria que hacerlo.

Luego, el siguiente comando nos creara el archivo de configuracion de tailwind npx tailwindcss init -p Esto crea un archivo llamado tailwind.config.js, en donde le pondremos las siguientes lineas:

Luego, nos metemos a la carpeta de resources -> css -> app.css, ahi pondremos las sigueintes lineas de codigo:

Una vez que se tiene instalado tailwindcss

Una vez listo, o cada vez que queramos ejecutar el proyecto, abrimos un powershell o cmd que correra siempre en el background, este powershell es aparte del php artisan serve, con el comando:

• npm run dev

Para añadirlo a las vistas, se incluye la linea de Vite:

Listo.

ESTRUCTURA DEL PROYECTO

Objetos

Vistas

Lo principal que debe de saber es.. ¿en dónde van las vistas de la página web? Se pueden reconocer facil porque usan ".blade"

En Laravel, la manera que una vista se conecta con otra, ya sea por medio de botones o formularios, etc, es por medio de enrutamiento, un file llamado web.php

Controladoras de las vistas

Migraciones

Public -> lo que el usuario ve (Imagenes, archivos JS o hasta hojas de estilo, por ejemplo)

Archivos que el usuario sube

Pruebas, de features o unitarias

Creacion de pruebas unitarias

Librerias y dependencias del proyecto (no se toca, normalmente se llenan por medio de comandos)

Variables de entorno / Conexion a base de datos y servicios AWS o AZURE

Paquete de configuraciones

Aqui lo que se hace es configurar o hacer palabras para la compilacion mas facil por medio de cmd o pwershell

Configuracion de Vite / Tailwindcss

vite.conf.js