¿Qué aprenderá?

Al desarrollar este tutorial aprenderá a configurar los ambientes de desarrollo para el proyecto del curso.

Backend:

Frontend:

Descargar Visual Studio Code

Visual Studio Code es el editor de código recomendado en el curso, para descargarlo en su máquina realice los siguientes pasos:

  1. Abra el siguiente enlace: https://code.visualstudio.com/download.
  2. Seleccione la opción de descarga de acuerdo con su sistema operativo.

Si le aparece un mensaje de confirmación, haga clic en Descargar para continuar y espere mientras se descarga el instalador.

Instalar Visual Studio Code

Para instalar Visual Studio Code realice los siguientes pasos:

  1. Abra el instalador.
  2. Acepte el Acuerdo de Licencia y haga clic en el botón Siguiente.

  1. Seleccione la ubicación de su preferencia para instalar Visual Studio Code y haga clic en Siguiente.

  1. Seleccione la ubicación del programa en el Menú Inicio o deje la predeterminada y haga clic en Siguiente.

  1. Seleccione las opciones de configuración de su preferencia y haga clic en el botón Siguiente.

  1. Haga clic en el botón Instalar y espere mientras termina.

  1. Por último, haga clic en el botón Finalizar.

Descargar Python

Para descargar Python realice los siguientes pasos:

  1. Abra el siguiente enlace: https://www.python.org/downloads/release/python-3124/.
  2. Haga clic en instalador de acuerdo con su sistema operativo.

  1. Si le aparece un mensaje de confirmación, haga clic en Descargar para continuar y espere mientras se descarga el instalador.

Instalar Python

Para instalar Python realice los siguientes pasos:

  1. Abra el instalador.
  2. Seleccione la opción Add Python 3.12 to PATH y haga clic en la opción Install Now. Espere mientras termina de instalarse.

  1. Finalice haciendo clic en el botón Close.

Configurar Python en Visual Studio Code

  1. Haga clic en la opción Extensions ubicada en el menú izquierdo.

  1. Escriba la palabra python en la barra de búsqueda y haga clic en el botón Install de la primera opción en el listado.

Espere un momento mientras termina de instalarse.

  1. Oprima las teclas Ctrl+Shift+P para abrir la paleta de comandos y escriba la palabra python.
  1. Seleccione la opción Python: Create Terminal para activar la extensión.

  1. Verifique la versión de pip ejecutando el siguiente comando en la terminal de Visual Studio Code.
py -m pip --version
  1. (Opcional) Actualice la versión de pip ejecutando el siguiente comando.
py -m pip install --upgrade pip

Configurar entornos virtuales

Para configurar entornos virtuales en Visual Studio Code ejecute los siguientes comandos en la terminal:

  1. Instalar el entorno virtual.
py -m pip install --user virtualenv
  1. Crear el entorno virtual.
py -m venv venv
  1. Activar el entorno virtual.
.\venv\Scripts\activate

Si le aparece un error como este:

Abra PowerShell como usuario administrador y ejecute el siguiente comando. Confirme con la tecla O:

Set-ExecutionPolicy Unrestricted

Vuelva a ejecutar el comando para activar el ambiente virtual. Al finalizar debe aparecer la ruta del proyecto en la terminal con la palabra (venv).

Instalar librerias

Las librerías necesarias para ejecutar el proyecto base se encuentran en el archivo requirements.txt ubicado en la raíz del proyecto.

Ejecute el siguiente comando en la terminal para instalarlas.

py -m pip install -r requirements.txt

Ejecutar la aplicación

Ejecute el siguiente comando para correr el backend de la aplicación.

flask run

Descargar Node.js

Para descargar Node.js realice los siguientes pasos:

  1. Abra el siguiente enlace: https://nodejs.org/download/release/v18.19.0/.
  2. Haga clic en el instalador de acuerdo con su sistema operativo y características del computador.
  3. Si le aparece un mensaje de confirmación, haga clic en Descargar para continuar y espere mientras se descarga el instalador.

Instalar Node.js

Para instalar Node.js realice los siguientes pasos:

  1. Abra el instalador y haga clic en Next.

  1. Acepte los términos de la licencia y haga clic en Next.

  1. Seleccione el directorio de instalación y haga clic en Next.

  1. Seleccione las opciones de configuración personalizada y/o haga clic en Next.

  1. (Opcional) Seleccione si desea instalar automáticamente las herramientas para módulos nativos y/o haga clic en Next.

  1. Por último haga clic en Install. Espere mientras termina.

Instalar Angular CLI

Para instalar Angular CLI realice los siguientes pasos:

  1. Ejecute el siguiente comando desde la terminal para instalar las dependencias del proyecto.
npm install --force
  1. Ejecute el siguiente comando para instalar Angular
npm install -g @angular/cli@15.0.3

Ejecutar la aplicación

Ejecute el siguiente comando para correr el frontend de la aplicación.

ng serve