Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Crear una aplicación web desde cero en AngularJS

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

En un tutorial anterior de AngularJS cubrí todos los aspectos básicos de cómo comenzar a trabajar con Angular en aproximadamente 30 minutos. Este tutorial se expandirá en lo que se cubrió allí mediante la creación de una aplicación web simple en el mundo real.

Esta sencilla aplicación web permitirá a sus usuarios ver, buscar y filtrar estrenos de televisión durante los próximos 30 días. Como un gran espectador de series, siempre estoy buscando algo nuevo para ver cuando mis programas favoritos están fuera del aire, así que pensé en crear una aplicación que me ayudara a encontrar lo que estoy buscando.

Antes de comenzar, es posible que desees echar un vistazo a la demostración desde arriba, para ver lo que vamos a crear en este tutorial.


Empezando

Para empezar, necesitamos una aplicación esquemática de AngularJS que ya tenga todo el JavaScript y CSS necesarios para crear la aplicación TV Show Premieres. Continúa y descarga este esqueleto desde el botón "descargar los archivos fuente" de arriba.

Una vez que hayas descargado los archivos, debes tener una estructura de directorios como se muestra a continuación:

figure1-skeleton-directory-structure

Si observamos la estructura del directorio y los archivos incluidos, veremos que usaremos Twitter Bootstrap para hacer que nuestra aplicación web sea un poco más bonita, pero este tutorial no analizará en detalle el Bootstrap de Twitter (obtén más información sobre Twitter Bootstrap). Además, este tutorial no cubrirá cómo configurar una nueva aplicación AngularJS ya que el tutorial AngularJS anteriormente mencionado cubre esto en detalle.

Al abrir index.html, con tu navegador de elección, deberías ver una página web muy simple con solo un título y algunos formatos básicos como se ve a continuación:

figure2-basic-web-page

Cargando nuestros datos

Lo primero que necesitaremos para crear nuestra aplicación de TV Show es información sobre programas de TV. Vamos a usar una API proporcionada por Trakt.tv. Antes de que podamos comenzar, necesitarás una clave API, puedes registrarte para una en su sitio web.

¿Por qué usar esta API? ¿Realmente tengo que registrarme? Estamos utilizando esta API para que nuestra aplicación utilice datos reales y, de hecho, proporcione algún uso una vez que se haya completado. Además, al usar esta API no es necesario que revisemos ninguna implementación del lado del servidor dentro de este tutorial y podemos enfocarnos completamente en AngularJS. Un par de minutos extra para registrarte por la API valdrá la pena.

Ahora que tienes tu propia clave API, podemos utilizar la API de Trakt para obtener información sobre programas de TV. Vamos a utilizar una de las llamadas API disponibles para este tutorial, más información sobre esto está disponible en la documentación de la api. Esta llamada API nos proporcionará todos los estrenos de la serie de TV dentro de un marco de tiempo específico.

Abre mainController.js y modifícalo para que coincida con el siguiente código:

Si miras dentro del archivo index.html, para la siguiente línea:

Verás que el método ng-init está llamando a la función init, esto significa que se llamará a la función init() dentro de nuestro mainController después de que la página se haya cargado.

Si lees la documentación de la API para el método calendario / estrenos, habrás visto que se necesitan tres parámetros, tu clave API, la fecha de inicio (por ejemplo, 20130616) y la cantidad de días.

Para proporcionar los tres parámetros, primero necesitamos obtener la fecha de hoy usando el método Date() de JavaScript y especificar el formato de fecha por la API para crear la cadena apiDate. Ahora que tenemos todo lo que necesitamos, podemos crear una llamada $http.jsonp al método API. Esto permitirá que nuestra aplicación web llame a una URL que no esté dentro de nuestro dominio y reciba algunos datos de JSON. Asegúrate de que  ?callback=JSON_CALLBACK se antepone al URI de solicitud para que se llame a nuestra función de devolución de llamada .success en respuesta.

Dentro de nuestra función .success, simplemente enviamos los datos recibidos a la consola. Abre index.html en tu navegador y abre la consola JavaScript, deberías ver algo como lo siguiente:

figure3-javascript-console

Esto demuestra que estamos realizando una llamada a la API de Trakt con éxito, autenticando con nuestra clave de API y recibiendo algunos datos JSON. Ahora que tenemos nuestros datos de programas de televisión, podemos pasar a lo que sigue.


Mostrando nuestros datos

Procesando los objetos JSON

Antes de que podamos mostrar nuestros datos, debemos procesarlos y almacenarlos. A medida que la API devuelve los episodios de estreno agrupados por fecha, queremos eliminar esta agrupación y simplemente crear una única matriz con todos los episodios de estreno y sus datos asociados. Modifica mainController.js para que sea el siguiente:

El código anterior está bien comentado y debería ser fácil de seguir, echemos un vistazo a estos cambios. Primero, declaramos una variable de ámbito $scope.results como una matriz que contendrá nuestros resultados procesados. Luego usamos angular.forEach (que es similar al método de $.each de jQuery para aquellos que lo conocen) para recorrer cada grupo de fechas y almacenar la fecha en una variable de fecha local como la de date.

Luego creamos otro bucle que recorre cada uno de los programas de TV dentro de ese grupo de fechas, agrega la fecha almacenada localmente al objeto tvshow y finalmente agrega cada objeto tvshow a la matriz $scope.results. Una vez hecho todo esto, nuestra matriz $scope.results tendrá el siguiente aspecto:

figure4-formatted-tvshow-json-objects

Creando la lista HTML

Ahora tenemos algunos datos que deseamos mostrar dentro de una lista, en nuestra página. Podemos crear algo de HTML con ng-repeat para crear dinámicamente los elementos de la lista basados en los datos dentro de $scope.results. Agrega el siguiente código HTML dentro de la lista desordenada que tiene la clase episode-list en index.html:

Este HTML simplemente crea un solo elemento de lista con ng-repeat. ng-repeat="tvshow in results" indica a angular que repita este elemento de lista para cada objeto dentro de la matriz $scope.results. Recuerda que no es necesario que incluyas $scope, ya que estamos dentro de un elemento con un controlador específico (consulta el tutorial anterior para obtener más información al respecto).

Dentro del elemento li, podemos hacer referencia a tvshow como una variable que contendrá todos los datos de los objetos para cada uno de los programas de TV dentro de $scope.results. A continuación se muestra un ejemplo de uno de los objetos dentro de $scope.results para que puedas ver fácilmente cómo hacer referencia a cada segmento de datos:

Como ejemplo, dentro del elemento li, podemos obtener el título del espectáculo haciendo referencia a tvshow.show.title y envolviéndolo en llaves dobles: {{ }}. Con este entendimiento, debería ser fácil ver qué información se mostrará para cada elemento de la lista. Gracias al CSS incluido con la estructura básica, si guardas estos cambios y abres index.html en tu navegador, deberías ver una lista de programas de TV con el formato y la información asociada. Esto se muestra en la figura a continuación:

figure5-formatted-show-list

Clases condicionales

Puedes haber notado o no:

...que se adjunta a uno de los elementos span, dentro de la sección de calificaciones, en el HTML anterior. ng-class nos permite aplicar clases de forma condicional a elementos HTML. Esto es particularmente útil aquí, ya que podemos aplicar un estilo diferente al elemento de porcentaje span dependiendo de si el porcentaje de calificación del programa de televisión es alto o no.

En el ejemplo HTML anterior, queremos aplicar la clase label-success, que es una clase Twitter Bootstrap, que dará estilo al tramo para que tenga un fondo verde y texto blanco. Solo queremos aplicar esta clase al elemento si el porcentaje de calificación es mayor o igual a 50. Podemos hacer esto tan simple como tvshow.episode.ratings.percentage >= 50. Echa un vistazo a la lista de programas de TV formateados en tu navegador. Si alguno de los porcentajes cumple esta condición, se debe mostrar en verde.


Crear un filtro de búsqueda

Ahora tenemos una lista de los próximos estrenos de programas de televisión, que es genial, pero no ofrece mucho en cuanto a funcionalidad. Ahora vamos a agregar una búsqueda de texto simple que filtrará todos los objetos dentro de la matriz de resultados.

Enlace de elementos HTML a las variables de alcance

En primer lugar, debemos declarar una variable $scope.filterText dentro de mainController.js  de la siguiente manera:

Ahora necesitamos agregar un input de tipo texto para que el usuario pueda ingresar un término de búsqueda. Luego debemos unir este input a la variable recién declarada. Agrega el siguiente código HTML dentro del div que tiene la clase search-box en index.html.

Aquí hemos usado ng-model para vincular este input a la variable $scope.filterText que declaramos dentro de nuestro alcance. Ahora esta variable siempre será igual a lo que se ingresa en esta entrada de búsqueda.

Aplicación de filtrado en ng-repeat para la salida

Ahora que tenemos el texto para filtrar, necesitamos agregar la funcionalidad de filtrado a ng-repeat. Gracias a la funcionalidad de filtro incorporada de AngularJS, no necesitamos escribir ningún JavaScript para hacer esto, simplemente modifica tu ng-repeat de la siguiente manera:

¡Es tan simple como eso! Le estamos diciendo a AngularJS: antes de generar los datos usando ng-repeat, necesitamos aplicar el filtro basado en la variable filterText. Abre index.html en un navegador y realiza una búsqueda. Suponiendo que buscaste algo que existe, deberías ver una selección de los resultados.


Crear un filtro de género personalizado

Entonces, nuestros usuarios ahora pueden buscar lo que quieran ver, que es mejor que solo una lista estática de programas de TV. Pero podemos llevar nuestra funcionalidad de filtro un poco más allá y crear un filtro personalizado que permita al usuario seleccionar un género específico. Una vez que se ha seleccionado un género específico, ng-repeat solo debería mostrar programas de TV con el género elegido adjunto.

Antes que nada, agrega el siguiente código HTML debajo de la entrada filterText en index.html que agregamos previamente.

Puedes ver en el HTML anterior que hemos creado una entrada de selección vinculada a una variable de modelo llamada genreFilter. Usando ng-options, podemos llenar dinámicamente esta entrada de selección usando una matriz llamada availableGenres.

Antes que nada, necesitamos declarar estas variables de alcance. Actualiza tu archivo mainController.js para que sea el siguiente:

Es obvio que ahora hemos declarado tanto genreFilter como AvailableGenres que vimos referenciados en nuestro HTML. También hemos agregado un poco de JavaScript que poblará nuestra matriz availableGenres. Dentro de la función init(), mientras procesamos los datos JSON devueltos por la API, ahora estamos realizando un procesamiento adicional y agregando cualquier género que no esté ya dentro de la matriz availableGenres a esta matriz. Esto completará la entrada de selección con cualquier género disponible.

Si abres index.html dentro de tu navegador, deberías ver el menú desplegable de selección de género como se ilustra a continuación:

figure6-genre-select-drop-down

Cuando el usuario elige un género, la variable $scope.genreFilter se actualizará para igualar el valor seleccionado.

Creando el filtro personalizado

Como queremos filtrar una parte específica de los objetos del programa de televisión, vamos a crear una función de filtro personalizada y aplicarla junto con el filtro AngularJS dentro de ng-repeat.

En la parte inferior de mainController.js, después de todo el otro código, agrega el siguiente JavaScript:

El JavaScript anterior declara un filtro personalizado para nuestra aplicación llamado isGenre. La función dentro del filtro toma dos parámetros, input y genre. El input se proporciona por defecto (que veremos en un momento) y son todos los datos que procesa ng-repeat. genre es un valor que tenemos que pasar Todo lo que hace este filtro, es tomar el género especificado y verifica si cada uno de los objetos del programa de TV dentro del input tiene el género especificado adjunto. Si un objeto tiene el género especificado, lo agrega a la matriz de salida que es out, que luego se devolverá a ng-repeat. Si esto no tiene mucho sentido, ¡no te preocupes! Debería hacerlo en breve.

Aplicando el filtro personalizado

Ahora que tenemos nuestro filtro de clientes disponible, podemos agregar este filtro adicional a nuestra ng-repeat. Modifica tu ng-repeat en index.html de la siguiente manera:

Esto simplemente encadena otro filtro en la salida ng-repeat. Ahora la salida será procesada por ambos filtros antes de que se muestre en la pantalla. Como puedes ver, hemos especificado nuestro filtro personalizado como isGenre: y luego estamos pasando la variable de ámbito genreFilter como parámetro, que es como proporcionamos a nuestro filtro de cliente la variable genre de la que hablamos anteriormente. Recuerda que AngularJS también proporciona a nuestro filtro los datos que ng-repeat está procesando como la variable input.

De acuerdo, nuestro filtro de género personalizado está completo. Abre index.html en un navegador y prueba la nueva funcionalidad. Con este filtro en su lugar, un usuario puede filtrar fácilmente géneros que no le interesan.


Llamar a las funciones de alcance o de tipo Scope

Es posible que hayas notado que cada lista de programa de TV también muestra el género en sí. Para algunas funcionalidades adicionales, vamos a permitir que el usuario haga clic en estos géneros, que luego aplicarán automáticamente el filtro de género para el género en el que hicieron clic. Primero que nada, necesitamos crear una función scope o de alcance que el ng-click pueda llamar. Agrega el siguiente código dentro de mainController en mainController.js:

En el código anterior, esta función toma un valor de género y luego establece $scope.genreFilter en el valor especificado. Cuando esto sucede, el valor del cuadro de selección del filtro de género se actualizará y el filtro se aplicará a la salida ng-repeat. Para activar esta función cuando se hace clic en los elementos span de género, agrega un ng-click a los elementos dentro de index.html de la siguiente manera:

El ng-click llama a nuestra función setGenreFilter creada previamente y especifica un género. Abre index.html y ¡pruébelo!


Orden personalizado con AngularJS

Nuestra aplicación premiere de TV se ve bastante bien, los usuarios pueden refinar fácilmente los resultados mostrados mediante una serie de filtros intuitivos. Para mejorar esta experiencia vamos a agregar algunas funcionalidades para ordenar de manera personalizada y así hacer que nuestros usuarios puedan elegir una gama de opciones.

Agrega el siguiente código HTML en el menú desplegable de selección de género:

Con este código agregado, tenemos dos menús desplegables más. Uno para seleccionar cómo ordenar los datos y otro para elegir la dirección en la que ordenar los datos. Ahora necesitamos crear una función dentro de nuestro controlador para hacer la comparación de pedidos. Agrega el siguiente código JavaScript en nuestra función setGenreFilter:

También necesitamos declarar algunas variables de alcance adicionales:

Si ahora abres index.html en tu navegador, deberías ver los menús desplegables agregados rellenos con Air Date ya seleccionada como el campo de orden predeterminado. Esto se muestra en la figura a continuación:

figure7-order-drop-downs

Finalmente, como hemos hecho con nuestros otros filtros, vamos a necesitar agregar esto a nuestra ng-repeat, actualiza esto de la siguiente manera:

Ahora estamos aplicando un orden por filtro en nuestros datos además de los otros filtros. Le estamos diciendo a la orden que use nuestra función customOrder y también estamos pasando nuestra variable de alcance orderReverse. Abre index.html en un navegador y mira el orden en acción.


Conclusión

AngularJS nos ha permitido crear rápidamente una aplicación web detallada y funcional con el mínimo esfuerzo. Utilizando las funciones de filtro integradas de AngularJS, junto con algunos de nuestros códigos personalizados, nuestra aplicación web permite a nuestros usuarios filtrar y buscar fácilmente a través de los estrenos de los programas de TV.

Después de leer este tutorial, ahora deberías ser capaz de comprender y utilizar los siguientes principios:

  • Usa ng-repeat para mostrar información en la pantalla.
  • Enlaza las entradas, lo que permite a los usuarios buscar y filtrar salidas en ng-repeat.
  • Encadena filtros en ng-repeat para realizar múltiples funciones de filtrado.
  • Ordena de manera personalizada los datos.
  • Usa eventos como ng-click para responder a la interacción del usuario.
  • Usa ng-class para aplicar condicionalmente el estilo a los elementos de la página.

En conclusión, los temas tratados en este tutorial deberían brindarte una base sólida y una comprensión de lo que puedes lograr al crear aplicaciones web enriquecidas en AngularJS.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.