El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrollo web: Control de calidad automatizado

Configuración del entorno de trabajo

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para trabajar con las pruebas que vamos a realizar en este curso, vas a necesitar realizar unos pasos extra para configurar tu sistema operativo. En esta lección te voy a mostrar cómo hacer tanto en Windows como en Mac OS.
10:22

Transcripción

Durante este curso vamos a realizar una gran cantidad de pruebas a un sitio web, así que para hacer las cosas más sencillas, yo voy a trabajar con un servidor local. El servidor local lo voy a trabajar utilizando Gulp, así que durante esta lección te voy a mostrar cómo montar un servidor local para que podamos utilizar Gulp y de paso, más adelante, podamos integrar el proceso de pruebas dentro de este servidor. Acá yo tengo una carpeta llamada "app" donde tengo almacenado lo que va a ser la página, donde voy a realizar las pruebas. Acá puedes, tanto descargar la información que se encuentra en el repositorio, instalarla dentro de esta carpeta, como incluir tu propio código. El nombre de la carpeta no tiene que ser un nombre específico, tal como yo lo estoy utilizando acá, simplemente estoy utilizando este nombre porque me parece un poco más ordenado. También he creado un archivo "gulpfile.js", tiene que tener exactamente este mismo nombre con las mayúsculas y minúsculas, --dentro de un momento vamos a hablar de este archivo--. Antes de eso, vamos a inicializar esta carpeta en el formato de npm o el administrador de paquetes de Node. Para eso, yo voy a abrir la terminal del sistema, en este caso estoy trabajando dentro de Visual Studio Code, y voy a inicializar mi repositorio, incluyendo el comando "npm init", y acá me va a aparecer una información donde me va a pedir los datos de este repositorio. En este momento solamente voy a presionar "Enter", nada más voy a dejar la información que viene por defecto, para todas las preguntas que me hace voy a presionar "Enter", y ya he inicializado el archivo para poder trabajar dentro de npm. Vemos que tenemos un archivo llamado "package.json"; por ahora, acá aparece la información genérica que aparece por defecto, pero podemos incluir información como el nombre del proyecto en el que estamos trabajando, una descripción, y el nombre del autor. Por ahora, vamos a dejar este archivo así y lo que vamos a hacer es que vamos a instalar algunos paquetes necesarios para poder instalar nuestro servidor. Para eso yo voy a escribir también el comando "npm install --save", esto va a guardar la información dentro de "package.json" y voy a instalar tres paquetes. Así que lo voy a hacer todo en una sola línea, voy a instalar "gulp", voy a poner un espacio para incluir el siguiente paquete que deseo instalar, en este caso va a ser "gulp-webserver", y finalmente voy a instalar el paquete "opn"; cada uno de estos paquetes me va a servir para diferentes usos. Voy a presionar "Enter" y esto va a tardar un momento en instalarse, mientras esto sucede, vamos a ir al archivo "gulpfile.js". Gulp es un administrador de tareas de código abierto que nos va a servir a nosotros para automatizar diferentes elementos, en este caso, yo le voy a automatizar algunas tareas que se ejecuten de manera regular cada vez que yo quiera que funcione mi servidor. Así que voy a incluir tres diferentes variables para poder inicializar este proyecto. Primero, voy a crear una variable llamada "gulp", de donde voy a invocar el paquete "gulp" que acabo de instalar. Voy a hacer lo mismo con la variable "webserver" donde instalo el paquete "gulp-webserver", y finalmente una variable "opn" donde hago exactamente lo mismo para el paquete "opn". "gulp" me va a servir para administrar tareas, "gulp-webserver" para administrar el servidor web que voy a levantar, y "opn" me va a servir para abrir el navegador cada vez que activemos nuestro servidor. Luego, voy a crear también una variable donde voy a definir las propiedades que va a tener mi servidor, en este caso, he creado una variable llamada "server" donde le pongo dos propiedades, pongo "host" y se va a llamar "localhost", y defino el puerto que va a ser "8001". La elección de puerto puede ser cualquiera que tu desees, puede ser el 3030 o cualquier puerto que no esté ocupado, simplemente recuerda utilizar un puerto que no esté en uso porque si no vas a tener un error. En caso de que tengas un error, a la hora de arrancar el servidor, recuerda nada más cambiar el número de puerto y con eso posiblemente funcione todo correctamente. Ahora vamos a generar una tarea dentro de "gulp". Gulp funciona por tareas. Así que, vamos a comenzar definiendo la tarea del servidor, vamos a poner "gulp.task" y acá vamos a definir la tarea que le vamos a asignar a "gulp" para que se ejecute cada vez que nosotros lo necesitemos, en este caso, va a ser la tarea "webserver" y cada vez que llamemos a "webserver" vamos a ejecutar esta función, en la cual vamos a incluir, en caso de "gulp", vamos a llamar cual va a ser la fuente de nuestro servidor. Vamos a definir como "gulp.src()" de donde vamos a obtener los archivos, en este caso, donde nuestro servidor, vamos a sacarlo de la carpeta "app", tal como la he definido yo acá --y recuerda que podemos poner cualquier nombre de carpeta--, en este caso "app". Y, una vez que ya tenemos acceso a los archivos, vamos a definir un "pipe" que básicamente va a ser la tarea que nosotros vamos a definirle a nuestro servidor. Y acá yo voy a copiar rápidamente, para hacer más rápida la selección, la información de mi servidor. En este caso, estoy definiendo también dentro de llaves las diferentes propiedades que va a tener mi servidor. Vamos a definir cuál va a ser el "host" o el servidor, el puerto, definimos que tenga la propiedad "livereload" como "true", y definimos que el "directoryListing" sea "false". Esto nos va a permitir a nosotros cargar el servidor y que se actualice cada vez que nosotros hagamos cambios. Vamos a definir nuevas tareas que nos van a permitir a nosotros trabajar con nuestro servidor, por ejemplo, vamos a crear otra tarea en la misma forma que creé la anterior. En este caso, vamos a utilizar también el comando "gulp.task" y vamos a crear otra tarea que se va a llamar "openbrowser". Esto básicamente va a abrir nuestro navegador en la dirección que nosotros hemos definido como el "host", recordemos que en este caso va a ser "localhost" y define también el puerto, que en este caso, va a ser el "8001". Cada vez que se ejecute nuestro servidor se va a abrir en el navegador dentro de la dirección en la que estamos trabajando. Finalmente, vamos a agregar otra tarea en la cual nosotros vamos a observar cada uno de los cambios que se realicen dentro de nuestra aplicación y vamos a cargar o refrescar nuestro servidor para que se muestren los datos de manera inmediata. En este caso he definido una tarea llamada "watch" donde vamos a observar, definiendo el comando "gulp.watch" y defino que dentro de la carpeta "app" utilizo asterisco como un comodín, definiendo que todos los archivos de HTML, en este caso con extensión ".html", sin importar el nombre, cada vez que se actualicen, tanto esos archivos en HTML como los archivos CSS, que se encuentra en "app" en la carpeta "css". Cada vez que haya un cambio en ellos se va a recargar mi servidor y se va a mostrar los cambios de manera inmediata. Ahora me falta definir la tarea final en la cual yo voy a trabajar dentro de "gulp". Para eso voy a escribir "gulp.task", voy a definir una última tarea, donde voy a escribir acá que va a ser la tarea por "default" o por defecto. En todos los casos, puedes definir cualquier nombre de la tarea, salvo esta, porque en este caso estamos definiendo la tarea que se va a trabajar por defecto. Y, vamos a incluir acá, que cada vez que alguien llame la tarea por defecto, o que llame únicamente el comando "gulp", se va a ejecutar esta tarea y vamos a definir qué tareas se van a ejecutar utilizando este paréntesis cuadrado. En este caso, yo voy a llamar a las tres tareas que he creado y vamos a decir que en el momento que alguien llame a "gulp" vamos a activar el "webserver", vamos a observar los cambios, y vamos a abrir el navegador, en caso de que no esté abierto. Vamos a guardar este archivo. Vemos que ya se instalaron todos los paquetes que yo definí previamente en la consola y también podemos notar que, además de la carpeta "app", tenemos otra carpeta llamada "note_modules". Acá se están cargando todos los paquetes que yo acabo de instalar y eso me va a permitir a mí tener acceso a estos módulos que yo estoy invocando al inicio. Ya tenemos todo listo para poder trabajar, y vamos a llamar el comando "gulp", vemos que ya se está activando una serie de tareas, vamos a... desactivar la pantalla completa y vamos a ver que acá tengo mi navegador funcionando en el puerto 8001, y tenemos ya una página funcionando. Si yo hago algún cambio, por ejemplo, volvemos acá y yo entro a "app", entro al archivo "index.html", y vamos a modificar, por ejemplo, el título acá, en vez de "Nico's Café" vamos a poner "XXXXX", voy a guardar; y esto va a activar mi servidor, vemos que inmediatamente se muestran los cambios dentro del navegador. Así vamos a poder trabajar muy rápidamente, modificar cualquier cambio, y también vamos a tener un servidor local trabajando para poder hacer las pruebas dentro del curso.

Desarrollo web: Control de calidad automatizado

Aprende a emplear herramientas para controlar la calidad en tus desarrollos web de forma automática y anticiparte a las posibles incidencias del código que puedan surgir.

2:53 horas (21 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:16/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.