Skip to content

Unidad 1: Configuración del Entorno y Fundamentos de JavaScript

1.1 Configuración del Entorno de Desarrollo

Objetivos

  1. Configurar un entorno de desarrollo para escribir y ejecutar código en JavaScript.
  2. Familiarizarse con herramientas clave: Node.js, Visual Studio Code (VSCode) y la consola.
  3. Ejecutar un programa básico en JavaScript para validar la configuración.

1.1.1 Instalación de Node.js y configuración básica

¿Qué es Node.js y por qué lo necesitamos?

Node.js es un entorno de ejecución para JavaScript construido sobre el motor V8 de Google Chrome. Permite ejecutar JavaScript en el lado del servidor, fuera del navegador. Esto lo convierte en una herramienta fundamental para el desarrollo de aplicaciones modernas, como servidores web, herramientas de línea de comandos y aplicaciones de tiempo real.

Historia de Node.js
  • Lanzamiento inicial: Node.js fue creado por Ryan Dahl y lanzado en 2009.
  • Motivación: Ryan Dahl desarrolló Node.js para solucionar problemas comunes en los servidores web tradicionales, como la falta de eficiencia al manejar múltiples conexiones simultáneas.
  • Primera versión estable: La versión 0.10 fue lanzada en marzo de 2013, marcando el inicio de su adopción masiva.
  • Ecosistema en crecimiento: Desde 2015, el desarrollo de Node.js es administrado por la Node.js Foundation, que posteriormente se fusionó con la JS Foundation en 2019 para formar la OpenJS Foundation.
  • Licencia: Node.js está disponible bajo la licencia MIT, lo que permite su uso, modificación y distribución de forma gratuita, incluso en proyectos comerciales.
Modo de Funcionamiento

Modelo de ejecución asíncrono: Node.js utiliza un modelo basado en eventos que permite manejar múltiples solicitudes al mismo tiempo sin bloquear el servidor. Esto lo hace ideal para aplicaciones que requieren un manejo intensivo de entradas y salidas (I/O).

Motor V8: Node.js está construido sobre el motor V8 de Google Chrome, que convierte el código JavaScript en código máquina, asegurando un rendimiento óptimo.

Ejecución concurrente: Aunque utiliza un solo hilo, Node.js puede manejar múltiples conexiones simultáneamente mediante un bucle de eventos (event loop) y callbacks.

Características Clave
  • Modelo No Bloqueante: Las operaciones I/O no bloquean el flujo del programa, lo que permite manejar múltiples tareas de manera eficiente.
  • Compatibilidad Cross-Platform: Funciona en sistemas operativos como Windows, macOS y Linux.
  • Ecosistema de Paquetes (NPM): Node.js incluye el administrador de paquetes más grande del mundo, NPM, que cuenta con más de un millón de paquetes.
  • Aplicaciones en Tiempo Real: Ideal para aplicaciones como chats, juegos en línea y transmisiones en tiempo real.
  • Escalabilidad: Gracias a su arquitectura basada en eventos, Node.js puede manejar un gran número de conexiones simultáneamente.
Ventajas
  • Velocidad: Su motor V8 es altamente eficiente.
  • Ecosistema Extenso: La comunidad de NPM ofrece soluciones para casi cualquier tarea.
  • Reutilización de Conocimientos: Permite usar JavaScript en el frontend y el backend.
  • Ideal para Microservicios: Su arquitectura ligera es adecuada para diseñar aplicaciones modulares.
Limitaciones
  • Operaciones Intensivas en CPU: Node.js no es la mejor opción para tareas que requieren un alto procesamiento, como cálculos complejos.
  • Callback Hell: Aunque mitiga esto con Promises y async/await, el uso intensivo de callbacks puede hacer que el código sea difícil de mantener.
Casos de Uso Reales
  • Netflix: Utiliza Node.js para mejorar la velocidad de carga de su interfaz de usuario.
  • Uber: Emplea Node.js para manejar solicitudes en tiempo real.
  • PayPal: Mejoró el rendimiento de sus aplicaciones migrando a Node.js.
Enlaces a Soluciones con Node.js
  • Express.js: Framework minimalista para construir aplicaciones web y APIs.
  • Socket.io: Biblioteca para crear aplicaciones en tiempo real como chats y juegos.
  • NestJS: Framework para desarrollar aplicaciones backend modulares y escalables.
  • Electron: Herramienta para crear aplicaciones de escritorio multiplataforma con Node.js.
  • Strapi: CMS basado en Node.js para crear APIs rápidas y personalizables.
Recursos Adicionales

Descargar e instalar Node.js

  1. Accede al sitio oficial de Node.js: https://nodejs.org.
  2. Selecciona la versión LTS (Long Term Support).
  3. Descarga y sigue el proceso de instalación según tu sistema operativo.

Descargar e instalar Node.js en Windows

  1. Accede al sitio oficial de Node.js:

    • Ve a https://nodejs.org.

    • Encontrarás dos opciones principales de descarga:

      Versiones de Node.js

      • LTS (Long Term Support): Recomendado para la mayoría de los usuarios, ya que es más estable.
      • Current: Incluye las últimas características, pero podría ser menos estable.

    • Selecciona LTS para garantizar estabilidad en el curso.

  2. Descarga el instalador:

    • Haz clic en el botón de descarga que corresponde a tu sistema operativo (Windows detectará automáticamente la versión adecuada, ya sea de 32 o 64 bits).

  3. Ejecuta el instalador:

    • Busca el archivo descargado (generalmente estará en la carpeta Descargas) y haz doble clic para abrirlo.

  4. Sigue los pasos del asistente de instalación:

    • Pantalla de bienvenida:

      Asistente de instalación de Node.js

      • Haz clic en Next para continuar.

    • Acuerdo de licencia:

      Lee los términos de la licencia

      • Lee los términos de la licencia y haz clic en I accept the terms in the License Agreement, luego en Next.

    • Carpeta de instalación:

      Selecciona la carpeta de instalación

      • Selecciona la carpeta donde deseas instalar Node.js (por defecto es C:\Program Files\nodejs).
      • Se recomienda dejar la ubicación predeterminada y hacer clic en Next.

    • Componentes a instalar:

      Selecciona los componentes

      • Asegúrate de que todas las opciones estén seleccionadas:
      Componentes a instalar
      • Node.js runtime: El núcleo del entorno de ejecución.
      • npm package manager: Administrador de paquetes para instalar bibliotecas.
      • Add to PATH: Agrega Node.js a las variables de entorno del sistema (muy importante).
      • Online documentation shortcuts: Acceso rápido a la documentación en línea.
      • Haz clic en Next.

    • Herramientas adicionales para la compilación nativa (opcional):

      Herramientas adicionales

      • En algunos casos, el instalador puede ofrecer la opción de instalar herramientas adicionales como Python o compiladores de C++ necesarios para algunos paquetes.
      • Si aparece esta opción, selecciona el checkbox y haz clic en Next.

    • Instalación:

      Proceso de instalación

      • Haz clic en Install y espera a que el instalador copie los archivos necesarios.

    • Finalización:

      Finalización de la instalación

      • Una vez terminada la instalación, marca la opción de "Automatically install necessary tools" (si está disponible) y haz clic en Finish.

Validación de la instalación

  1. Abre la terminal o consola de comandos.

  2. Ejecuta los siguientes comandos para verificar que Node.js y npm están instalados correctamente:

    Comandos de verificación
    1
2
    node -v # (1)
npm -v # (2)
    1. Mostrará la versión de Node.js instalada.
    2. Mostrará la versión de npm instalada.

  3. Deberías ver los números de versión correspondientes.

Ejecutar un primer script en Node.js

  1. Crea un archivo hello.js con el siguiente contenido:

    Hola Mundo!
    1
    console.log("¡Hola, mundo!");

  2. En la consola, navega hasta el directorio donde guardaste el archivo y ejecuta:

    Ejecutar programa hello.js
    1
    node hello.js
    La consola debería mostrar: ¡Hola, mundo!

1.1.2 Uso de Visual Studio Code (VSCode) como editor principal

Introducción a VSCode

Visual Studio Code es uno de los editores más populares para desarrollo, con soporte para múltiples lenguajes y extensiones.

Instalación y configuración

  1. Descarga desde el sitio oficial: https://code.visualstudio.com.
  2. Instálalo y abre la aplicación.

Configuración básica

  1. Personaliza el tema visual desde las opciones de configuración.

  2. Instala las siguientes extensiones recomendadas:

    Extensiones Recomendadas

    • Live Server: Permite visualizar páginas web en tiempo real.
    • Prettier: Formateo automático del código.
    • ESLint: Detección de errores y problemas en el código.
    • JavaScript (ES6) Code Snippets: Accesos rápidos para escribir código.

Creación y ejecución de un programa en VSCode

  1. Abre un nuevo proyecto en VSCode.

  2. Crea un archivo app.js con el siguiente contenido:

    Programa de ejemplo
    1
2
    const saludo = "¡Hola desde VSCode!";
console.log(saludo);

  3. Ejecuta el programa desde la terminal integrada de VSCode:

    Ejecutar programa en VSCode

    • Abre la terminal integrada con Ctrl + \.
    • Escribe:
      Ejecutar programa app.js
      1
      node app.js

1.1.3 Introducción al uso de la consola y ejecución de programas

¿Qué es la consola?

La consola es una herramienta para interactuar con el sistema operativo y ejecutar comandos.

Comandos básicos

  1. Navegar entre carpetas:

    cd nombre-de-la-carpeta

  2. Listar archivos:

    Comandos para listar archivos

    • En Windows: dir
    • En macOS/Linux: ls

  3. Crear y eliminar archivos:

    touch archivo.js
rm archivo.js

Uso del REPL de Node.js

  1. Inicia el entorno interactivo ejecutando:

    node

  2. Escribe comandos simples:

    Ejemplo en el REPL
    1
2
    console.log("Hola desde el REPL");
2 + 2;

Actividad Práctica

  1. Configura el entorno completo instalando Node.js y VSCode.
  2. Crea una carpeta llamada proyecto_inicial.

  3. Dentro de la carpeta, crea un archivo index.js con este código:

    Código de ejemplo

    Programa de bienvenida
    1
2
        const nombre = "Estudiante";
    console.log(`¡Bienvenido, ${nombre}, a la programación con JavaScript!`);

  4. Ejecuta el programa en la consola.

    Ejecutar programa index.js
    1
    node index.js

Reto Extra

  1. Investiga cómo instalar un paquete de npm.

  2. Instala chalk y úsalo para cambiar el color del texto en la consola:

    npm install chalk@4

  3. Código de ejemplo:

    Uso de chalk
    1
2
    const chalk = require('chalk');
console.log(chalk.green("¡Texto en color verde!"));

    Version de chalk

    Asegúrate de instalar la versión 4 de chalk para evitar problemas de compatibilidad.

Evaluación

Los estudiantes pueden:

Evaluación
  1. Ejecutar scripts básicos en Node.js.
  2. Crear y ejecutar programas en VSCode.
  3. Usar la consola para navegar y gestionar archivos.

Crear un proyecto con npm

crear un proyecto nuevo

Para crear un proyecto nuevo con npm, se debe seguir los siguientes pasos (desde el terminal), si estamos en VSCode, podemos abrir la terminal integrada y si ya hamos creado la carpeta ir al paso 3:

  1. Crear una carpeta para el proyecto:

    mkdir mi-proyecto

  2. Ingresar a la carpeta del proyecto:

      cd mi-proyecto

  3. Inicializar el proyecto con npm:

    npm init -y

    Este comando creará un archivo package.json con la configuración predeterminada:

    {
   "name": "mi-proyecto",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

  4. Crear un archivo index.js con el siguiente contenido:

    Uso de lodash
    1
    console.log("¡Hola desde el proyecto!");

Como poner en marcha el proyecto

Para ejecutar el proyecto, se debe seguir los siguientes pasos:

  1. Modificar el archivo package.json para agregar un script de inicio:

    Script de inicio
    1
2
3
4
    "scripts": {
  "start": "node index.js"
  "test": "echo \"Error: no test specified\" && exit 1"
}

  2. Ejecutar el script de inicio:

    Ejecutar script de inicio
    1
    npm start

De esta manera nos debe aparecer en la consola el mensaje ¡Hola desde el proyecto!.

Como hacer debug en VSCode

Para hacer debug en VSCode, se debe seguir los siguientes pasos:

  1. Ir a la opción de Run and Debug en la barra lateral izquierda.
  2. Hacer clic en el link create a launch.json file.
  3. Seleccionar Node.js en la lista de entornos de ejecución.

  4. Se creará un archivo launch.json con la configuración de depuración.

    Configuración de depuración
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

    Ahora podemos dar clic en el botón de Run para iniciar la depuración.

Cómo hacer debug si utilizamos la librería prompt-sync

  1. Instalar la librería prompt-sync:

    npm install prompt-sync

  2. Modificar el archivo index.js para utilizar la librería:

    Uso de prompt-sync
    1
2
3
    const prompt = require('prompt-sync')();
const nombre = prompt('¿Cuál es tu nombre? ');
console.log(`¡Hola, ${nombre}!`);

  3. Modificar el fichero launch.json para que se pueda ejecutar el programa:

    Configuración de depuración con prompt-sync
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js",
      "console": "integratedTerminal"
    }
  ]
}

Ahora podemos añadir un punto de interrupción en el código y ejecutar el programa en modo de depuración.

Ejercicio Práctico

Siguiendo los pasos anteriores, crea un proyecto nuevo con npm, agrega un script de inicio y realiza la depuración en VSCode. Asegúrate de que el programa funcione correctamente y que puedas depurarlo.