Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. JavaScript y Angular
  3. Instalación
Extrait - JavaScript y Angular De los fundamentos del lenguaje al desarrollo de una aplicación web
Extractos del libro
JavaScript y Angular De los fundamentos del lenguaje al desarrollo de una aplicación web Volver a la página de compra del libro

Instalación

Introducción

Así como un electricista necesita un destornillador y un amperímetro, un desarrollador de JavaScript o Angular necesita una serie de herramientas. Algunas son opcionales; otras, absolutamente imprescindibles.

Si bien HTML, CSS y JavaScript se pueden escribir en cualquier editor de texto, un entorno de desarrollo permite una escritura más rápida, más optimizada y mejora drásticamente el trabajo de un desarrollador. Existen varios entornos (llamados IDE, de entornos de desarrollo integrados) en el mercado. A título personal, nosotros usamos el conjunto de herramientas JetBrains, pero requiere la compra de una licencia. En este libro, se utilizará el IDE de Visual Studio de Microsoft. Tiene la ventaja de ser gratuito y de disponer de varios módulos útiles para desarrollos de Angular.

Por supuesto, un navegador web es absolutamente obligatorio para ver el resultado de varias horas de trabajo en el IDE. En este libro, se utilizará Google Chrome, ya que tiene varios módulos para corregir errores de una aplicación JavaScript. Idealmente, varios navegadores diferentes le permiten probar la representación de la aplicación en diferentes contextos (consulte el capítulo Test de extremo a extremo).

Para acercarse lo más posible al trabajo de un desarrollador profesional, git permite el trabajo colaborativo...

Visual Studio Code

Visual Studio Code es un entorno de desarrollo escrito por Microsoft durante el año 2015 y completamente gratuito. De apariencia limpia, es compatible de forma nativa con HTML, CSS, TypeScript y JavaScript, lo que lo convierte en una buena opción para cualquier desarrollador web serio.

Su filosofía se basa en un enfoque modular. Desde su tienda es posible agregar los componentes que el desarrollador considere necesarios. También es posible retirarse. Es muy ligero y rápido para aplicaciones sencillas y extremadamente eficiente para aplicaciones más complejas gracias a los módulos adicionales.

Completamente de código abierto, su código se puede ver en GitHub en la dirección: https://github.com/Microsoft/vscode

1. Instalación

Visual Studio es un editor multiplataforma. Se puede utilizar en Windows, Linux o macOS. El procedimiento de instalación es bastante sencillo. Simplemente descargue el ejecutable de la página oficial y siga las instrucciones. 

 Obtenga la versión del instalador de su sistema operativo.

a. Windows

En Windows, existen dos instaladores diferentes. El primero, que permite la instalación a nivel de todo el sistema, requiere derechos de administrador. El segundo, a nivel de usuario, le permite instalar el editor en su directorio personal. ...

Google Chrome

Chrome es un navegador web desarrollado por Google. Lanzado en 2008, es el navegador más utilizado del mundo desde 2012.

Honestamente, en nuestra opinión, no es ni mejor ni peor que cualquier otro. Sin embargo, todos están de acuerdo en que es sencillo y ordenado. Cualquier navegador serio serviría. Sin embargo, se deben evitar Lynx e Internet Explorer.

Dado que este libro está destinado a desarrolladores, el atajo de teclado de Chrome más importante es [Ctrl][Mayús] i. Permite la visualización de herramientas de desarrollo.

images/Image2-3.png

El navegador Chrome y sus herramientas de desarrollo

git

git es un administrador de versiones descentralizado. Es la herramienta más utilizada en el mundo para gestionar un proyecto de desarrollo.

El código de la aplicación en desarrollo se almacena en un servidor remoto y en cada máquina de cada desarrollador.

Imaginen que Lena y Maïwenn, dos desarrolladores experimentados, desean desarrollar una aplicación para administrar figuras de Harry Potter y The Walking Dead. Lena crea el proyecto y «envía» el código fuente a un servidor remoto en Internet. Maïwenn «extrae» el código fuente del servidor remoto a su máquina personal. Entonces, hay tres versiones idénticas del código ubicadas en tres lugares diferentes. La fuerza de git radica en el hecho de que Lena y Maïwenn pueden trabajar, cada una por su cuenta, en el proyecto y «enviar» sus modificaciones al servidor remoto. Tan pronto como trabajan en diferentes archivos, las tres copias se actualizan. Si hay conflictos, git preguntará qué copia es la correcta.

git fue creado por Linus Torvalds, quien no es un desconocido para la comunidad mundial, ya que es el padre del kernel de Linux y el pingüino Tux.

Linus Torvalds creó Linux porque no tenía suficiente dinero para comprar un sistema UNIX, y git porque el administrador de versiones de BitKeeper abandonaba la política de ofertas gratuitas. En el campo...

Node.js

Node.js es un «todo en uno» capaz de renderizar en el lado del servidor. Escrito en JavaScript, permite la ejecución de código JavaScript sin estar dentro de un navegador web. Utilizado por Discord y Slack, permite un desarrollo estable y rápido de aplicaciones con demandas de red muy altas. 

Node.js se puede descargar gratis en: https://nodejs.org/en/download/

Al igual que con git, la instalación es sencilla. Para comprobar que está correctamente instalado, vamos a teclear, en un terminal, el comando:

node --version 

npm

npm es un administrador de paquetes. Enumera, instala y desinstala los paquetes y dependencias necesarios. Viene instalado con Node.js. Si el siguiente comando devuelve la versión de npm instalada, entonces la instalación se puede considerar hecha.

npm --version 

npm usa un archivo llamado package.json ubicado en la raíz del proyecto. Contiene una descripción del proyecto, los paquetes y dependencias necesarios, y la definición de algunos scripts útiles.

Antes de generar este archivo, una configuración mínima puede ser útil para no tener que repetir información innecesariamente en cada nuevo proyecto.

npm propone dos maneras de modificar su configuración.

  • Editar el archivo de configuración con un editor:

npm config edit 
  • Ejecutar las líneas de comando:

npm set init.author.name Caliendo  
npm set init.author.email caliendo@yopmail.es 
npm set init.author.url http://www.caliendo.es 

Para iniciar un nuevo proyecto de JavaScript, crear un archivo package.json es casi esencial:

npm init 

Angular CLI genera automáticamente un archivo package.json al inicializar un nuevo proyecto.

No es necesario reinventar la rueda. npm le permite instalar, en un solo comando,  paquetes desarrollados por terceros.

La página https://www.npmjs.com contiene la lista de paquetes disponibles.

chalk (https://www.npmjs.com/package/chalk) permite, por ejemplo, personalizar...

Angular CLI

Angular CLI se ha convertido en la herramienta de referencia para inicializar y administrar un nuevo proyecto Angular. Es increíblemente simple y completo. Absolutamente ningún desarrollador se molestaría en comenzar un proyecto desde cero. Este paquete se ha vuelto esencial.

Además, al ser un paquete de JavaScript, npm permite instalarlo con rapidez:

npm install -g @angular/cli 

El argumento -g permite la instalación global en el ordenador.

Esta herramienta permite la inicialización de una aplicación Angular, la generación automática de componentes, rutas y servicios, y el lanzamiento de un servidor web para renderizado (ver capítulo Angular CLI - Componentes).

Además, permite la generación y lanzamiento de pruebas unitarias y de extremo a extremo (ver capítulos Test unitarios y Test de extremo a extremo).

Esta herramienta se utilizará ampliamente en este libro una vez que se hayan cubierto los conceptos básicos de JavaScript y TypeScript.

Estructura de este libro

Este trabajo se divide en dos partes muy diferenciadas.

  • JavaScript

  • Angular

Los primeros siete capítulos de este libro están dedicados a JavaScript como lenguaje de programación web. Cada ejemplo o demostración se integra en una página HTML y el renderizado realizado por un navegador.

Los siguientes doce capítulos están dedicados a Angular. Cada demostración es independiente, para ilustrar un punto específico del programa. Una aplicación común desarrollada a medida que avanza el trabajo permite poner en práctica los conceptos.

Cada bloque de código tiene la ubicación del archivo en la primera línea y respeta la siguiente convención tipográfica:

<!-- C:\JavaScript\index.html -->  
<!DOCTYPE html>  
<html lang="es”>  
<head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=<device-width>, 
initial-scale=1.0">  
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>Ediciones ENI</title>  
</head>  
<body>  
   <p>Un trozo de código</p>  
</body>  
</html> 

Todos...