Preparando el entorno (I)

Iniciamos en este artículo un estudio de Angular JS 5. Todos sabemos, en líneas generales, lo que es Angular JS. Se trata de un framework JavaScript para desarrollo frontend de páginas o aplicaciones web. Y ¿qué es un framework JavaScript? Bien. Por darle una definición informal, pero que se ajuste perfectamente a la realidad, se trata de un entorno de desarrollo para la parte frontend, concebido para facilitarnos el crear nuestras àginas siguiendo buenas prácticas de programación. Si bien hay otros frameworks JS basados en el mismo principio, Angular es, sin duda, el número uno, no sólo por sus prestaciones y fiabilidad, sino también por haber sido desarrollado, y estar respaldado por uno de los gigantes de Internet: nada menos que Google. Cuando abrimos esta serie de artículos, surgen algunas preguntas:

¿Es Angular lo mismo que jQuery? No. Ni remotamente. jQuery es una librería destinada a optimizar código y programación en JavaScript, y podemos incluir código jQuery en nuestros proyectos en Angular. Sin embargo, jQuery no es un framework, y no tiene todas las prestaciones que tiene Angular.

¿Por qué la versión 5? Si bien es cierto que, a día de hoy, ya se encuentra disponible la versión 6, esta es de «nueva hornada», es decir, que algunas de sus prestaciones son todavía versiones beta, o RC’s, y podrían darnos algunos problemas que indujeran a confusión. La versión 5 es un producto maduro y muy estable, muy afianzado en el mercado del desarrollo web, y con el que podremos hacer «casi» todo. Es, en mi opinión, un producto que conviene y debemos conocer.

¿Con Angular se pueden desarrollar SPA’s? Las SPA (Single Page Application, o Aplicación de una Sola Página) constituyen una tecnología cada vez más empleada, ya que ofrecen varias ventajas sobre la forma de desarrollar tradicional. En estos artículos veremos qué es, exactamente, SPA y cómo Angular 5 nos permite desarrollar Aplicativos completos en este formato. De hecho, es uno de sus puntos fuertes.

PREPARANDO EL ENTORNO

Lo primero que debemos hacer, antes de empezar a descubrir qué es y cómo fnciona Angular 5, es preparar nuestro entorno de trabajo. En concreto, en nuestro ordenador, deberemos tener lo siguiente:

  • Un directorio de trabajo como localhost.
  • Un servidor Apache.
  • El Node JS, el NPM y Bower.
  • El propio Angular 5 CLI.
  • Un editor de texto plano o, mejor aún, un IDE.
  • Y, por supuesto un navegador. Yo recomiendo usar Chrome, aunque, una vez hecho y depurado un desarrollo, deberemos probarlo en distintos navegadores, para asegurarnos de que le va a funcionar sin problemas a todo el mundo.

Vamos a dedicar este artículo y el siguiente a configurar nuestro entorno de trabajo.

LOCALHOST Y EL SERVIDOR APACHE

Cualquier desarrollador web tiene que tener, sean cuales sean las tecnologías de desarrollo que emplee, un servidor web montado en modo local (localhost), para su trabajo diario. Si bien es cierto que hay algunos recursos que, por su propia naturaleza, sólo pueden ser probados contra un servidor remoto, en la inmensa mayoría de los casos, los desarrollos y las pruebas preliminares siempre las haremos en local. Dependiendo de tu sistema operativo encontrarás distintas alternativas para instalar Apache. Existen soluciones paquetizadas que te lo instalan junto con PHP y MySQL, y que resultan muy prácticas (wamp o xampp en entornos Windows, mamp en entornos Mac). Lo usuarios de Linux suelen instalar estas herramientas al montar su distro. Nosotros, en estos artículos, trabajaremos sobre un entorno Windows, por ser mayoritario. Para instalar xampp (mi solución favorita), si aún no lo tienes, puedes ver este artículo.

Por supuesto, tu puedes usar la herramienta que desees. No tiene por que ser, necesariamente, xampp. Lo que importa es que sepas lo que tienes, y donde está tu directorio localhost, que será la raíz de todos tus proyectos.

NODE JS, NPM Y BOWER

Para trabajar con Angular necesitamos tener en nuestro ordenador estas tres herreamientas instaladas. Empezaremos por Node JS. Se trata de una herramienta con varios usos. Node JS es, principalmente, una herramienta para desarrollo de programación bakend en JavaScript. Su uso es muy amplio y complejo, y requeríría de muchos artículos para su análisis y aprendizaje. Afortunadamente, para trabajar con Angular 5 no necesitamos dominar Node JS. Lo que sí necesitamos es tenerlo instalado en nuestro ordenador, porque, simultáneamente, instala el NPM. NPM se refiere a Node Package Manager, es decir, el gestor de paquetes de Node. NPM es lo que nos permitirá instalar Angular, y las librerías complementarias que debamos usar en cada caso.

Lo primero que denbemos hacer es verificar si tenemos instalado Node JS y, consecuentemente, NPM. Para ello, abrimos la terminal de comandos en nuestro sistema operativo y tecleamos

npm -v

Si está correctamente instalado, nos devolverá el número de versión de npm que tengamos en nuestro ordenador. Si no, nos devolverá un mensaje de error, indicando que no se reconoce el comando npm. En ese caso, deberemos acudir a la web de Node JS, descargarlo e instalrlo. La web oficial es https://nodejs.org/es/.

ATENCIÓN. En la web oficial vas a encontrar dos botones para la descarga, como se ve en la imagen. El de la izquierda es la versión LTS (Long Term Support). Es la última versión probada, depurada, y asistida por soporte del fabricante. A la derecha encuentras el enlace de la última versión que han publicado. Esta suele ser una beta, o una RC, y podría tener bugs o detalles que necesites configurar de forma manual. Siempre descárgate la versión LTS. De esta forma te ahorrarás problemas. Una vez descargado Node JS, instálalo en tu ordenador de modo global al equipo. Con esto te queda, también, instalado el NPM.

A continuación vamos a comprobar si tenemos instalado bower. Si bien npm es el gestor de paquetes que usaremos en la mayor parte de los casos (es decir, el gestor de dependencias), en algunas ocasiones deberemos recurrir a bower, así que y vamos a dejarlo instalado. En la terminal de tu sistema operativo teclea:

bower -v

Si está instalado, te devolverá el número de versión. Si te da un mensaje de error, tenemos que instalarlo. Para ello, teclea:

npm install -g bower

El propio npm se ocupa de instalar bower. Con el modificador -g te aseguras de instalarlo en modo global al equipo, es decir, que estará disponible desde cualquier directorio que lo necesites.

ANGULAR 5 CLI

Para trabajar con Angular 5 y desarrollar proyectos con esta herramienta necesitamos tener instalado Angular 5 CLI. CLI son las siglas de Command Line Interface (Interface de Línea de Comandos). Es el nombre que los fabricantes le e dan a la herramienta que nos va a permitir trabajar con Angular 5.

Lo primero es saber si lo tenemos o no instalado, y que versión tenemos disponible. En la terminal de mandatos teclea:

ng -v

El comando ng (léase enyi, de la fonética en inglés de ng, por convencionalismo) lo usaremos muchísimo en nuestro trabajo con Angular. Si está instalado te devolverá el número de versión de que dispones. Si no, deberás instalarlo tecleando:

npm install -g @angular/cli

o, abreviadamente,

npm i -g @angular/cli

Cualquiera de los dos, te instalará el CLI de Angular en tu ordenador, de modo global, gracias al modificador -g (es muy importante que lo instales de modo global). Una vez instalado, podrás volver a teclear el comando que te muestra la verrsión, para asegurarte de que haya quedado correctamente.

Sin embargo, debes tener en cuenta una cosa. Actualmente, está liberada la versión 6 de Angular, que se corresponde con el CLI 6.0.0. Como todavía no es estable en algunos aspectos, nosotros trabajaremos sobre la versión 5, con el CLI 1.6.6, así que en lugar del comando anterior, teclea:

npm i -g @angular/cli@1.6.6

CONCLUYENDO

En este artículo hemos aprendido a instalar algunas de las herramientas que emplearemos. Aún nos falta el IDE, donde escribiremos nuestro código, y del que hablaremos en el próximo artículo.

   

Deja un comentario