4-Preparación de Ambiente de Desarrollo

 Como ya habíamos visto en la introducción del curso, vamos a estar utilizando Laravel para desarrollar nuestra app y nuestro back-end de la aplicación full stack. Nos conectaremos a una base de datos MySQL y Laravel nos ayudará a programar en PHP de una manera muy sencilla, permitiéndonos tener una aplicación robusta en el back-end. A lo largo del curso iremos descubriendo sus bondades.

Sin embargo, quiero comentar que hay dos formas de implementar Laravel:

  1. Utilizando completamente el modelo vista-controlador donde toda la aplicación está en un solo repositorio/proyecto.

  2. Como lo vamos a utilizar nosotros: desarrollando una API REST que puede ser accedida desde cualquier cliente (Angular, Vue, React, etc.).

Instalación de Laravel

En este video vamos a instalar Laravel a través de Composer.

Para Windows:

Es especialmente sencillo:

  1. Descargas el instalador de Composer (composer-setup.exe)

  2. Siguiente → Siguiente → Aceptar → Instalar

  3. Si tenías abierta una terminal, ciérrala y vuélvela a abrir

Recomendación para Windows: Te recomiendo mucho la terminal de Git, que es como tener un pequeño Linux en tu computadora.

Para Mac:

Vamos a hacerlo a través de Homebrew:

  1. Abrimos nuestra terminal

  2. Instalamos Homebrew (si no lo tenemos ya instalado):

bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew es un manejador de paquetes (similar a apt en Linux) que nos permite instalar fácilmente diversos paquetes.

  1. Después de instalar Homebrew, cerramos y abrimos la terminal nuevamente para asegurarnos que todo quedó bien configurado.

  2. Instalamos Composer:

bash
brew install composer

Creación del Proyecto Laravel

  1. Creamos una carpeta para nuestros proyectos (puedes hacerlo desde el navegador de archivos o desde terminal):

bash
mkdir curso-laravel-elemento
cd curso-laravel-elemento

  1. Instalamos Laravel usando Composer:

bash
composer create-project laravel/laravel api-clientes

  1. Accedemos al proyecto creado:

bash
cd api-clientes

  1. Iniciamos el servidor de desarrollo:

bash
php artisan serve

  1. Abrimos en el navegador: http://127.0.0.1:8000 y ¡ya está corriendo Laravel!

Configuración del Entorno de Desarrollo

  1. Abrimos Visual Studio Code (o el IDE que hayas seleccionado)

  2. File → Open → Seleccionamos la carpeta del proyecto (api-clientes)

  3. En la estructura del proyecto, podemos ver todos los archivos de Laravel

Si quieres saber dónde se encuentra la vista que despliega la página inicial:

  • Ve a resources/views/welcome.blade.php

  • Aquí puedes hacer modificaciones y ver los cambios automáticamente reflejados en el navegador gracias al servidor de desarrollo de php artisan serve

En próximos videos trabajaremos principalmente en las carpetas app, routes, y database, y configuraremos el archivo .env para la conexión a la base de datos

Comentarios

Publicar un comentario

Entradas más populares de este blog

Axios para Principiantes - Guía Paso a Paso

  Axios para Principiantes - Guía Paso a Paso 📚  ¿Qué es Axios? Axios  es como un  "mensajero"  entre tu aplicación web y un servidor. Imagina que tu app necesita pedir información (como una lista de películas) a un servidor en internet - Axios se encarga de enviar esa "carta" y traer la "respuesta". 🎯  ¿Por qué usar Axios? (Para principiantes) Sin Axios: text Tu App → "Oye servidor, dame películas" ❌ (no sabe cómo comunicarse) Con Axios: text Tu App → Axios → "GET /películas" → Servidor → ✓ Películas recibidas ✅ Ventajas: Más fácil que el método nativo de JavaScript (fetch) Mejor manejo de errores Funciona en todos los navegadores Soporte para promesas (async/await) 🚀  PASO 1: INSTALACIÓN (La Parte Fácil) ¿Qué es NPM? NPM es como una  "tienda de aplicaciones"  para programadores. En lugar de ir a una tienda, escribes comandos en la terminal. Pasos concretos: Abre la terminal  (Command Prompt, Terminal, o la terminal de VS ...
Leer más

15-Tutorial: Crear Película en React con useState

  Introducción ¡Excelente! Ya tienes todos los métodos configurados para conectar tu aplicación React con el backend. Ahora vamos a implementar la funcionalidad para crear películas, lo que nos permitirá tener una lista inicial de películas al regresar al home. Paso 1: Importaciones necesarias Vamos al componente  AddMovie.js  y realizamos las importaciones: jsx import React , { useState } from 'react' ; import MovieService from '../services/movieService' ; Paso 2: Estado inicial de la película Dentro del componente funcional, antes del return, definimos el estado inicial: jsx const AddMovie = ( ) => { // Estado inicial de la película const initialMovieState = { title : '' , director : '' , genre : '' , synopsis : '' , year : 0 , rating : 0 } ; // Estado para manejar la película actual const [ movie , setMovie ] = useState ( initialMovieState ) ; // Estado par...
Leer más

Tutorial de React para Principiantes

  Tutorial de React para Principiantes 📚 ¿Qué es React? React es una  biblioteca de JavaScript  para construir interfaces de usuario. Piensa en ella como una herramienta que te ayuda a crear páginas web dinámicas de manera organizada. 🧩 Conceptos Básicos de React 1.  Componentes Los componentes son como  bloques de construcción  de tu aplicación. Cada parte de tu página web puede ser un componente: javascript // Un componente básico function Saludo ( ) { return < h1 > ¡Hola Mundo ! < / h1 > ; } 2.  JSX Es una extensión de JavaScript que parece HTML pero se escribe dentro de JavaScript: javascript // Esto es JSX const elemento = < h1 > Hola , mundo ! < / h1 > ; 3.  Props (Propiedades) Son como  parámetros  que le pasas a un componente: javascript function Saludo ( props ) { return < h1 > Hola , { props . nombre } ! < / h1 > ; } // Uso: <Saludo nombre="Juan" /> 4.  Esta...
Leer más