Tutorial de IONIC 4/5:Mini Juego de acertar números (actualizado)

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Después de ver en el post anterior como modificar la plantilla de una página para simplemente mostrar el texto “Hola Mundo”, vamos a avanzar un poco más en nuestro aprendizaje y vamos a programar nuestra primera aplicación interactiva.

Se trata de un simple juego de acertar el número secreto. La aplicación creará un número aleatorio que nosotros debemos adivinar.

Por primera vez vamos a programar con Ionic. Por el camino aprenderemos conceptos como Data Binding, que nos permite actualizar valores entre el html y el controlador y recoger las acciones del usuario como  pulsar un botón.

Bien, sin más preámbulos  vamos a empezar:

Vamos a crear un nuevo proyecto Ionic que en este caso le vamos a llamar adivina: Abrimos el terminal o consola de comandos y situándonos en la carpeta donde queremos crear nuestro proyecto escribimos:

ionic start adivina blank --type=ionic-angular

 

Nos situamos dentro de la carpeta del proyecto de acabamos de crear y una vez dentro ejecutamos ionic serve para ver en el navegador los cambios que vayamos haciendo en nuestra aplicación:

 ionic serve -l

 

Recuerda que si utilizas la opción -l con ionic serve puedes visualizar como queda la app en todas las plataformas, la primera vez que ejecutes el comando en un proyecto nuevo te pedirá que instales @ionic/lab.

Ahora abrimos la carpeta del proyecto que acabamos de crear en el editor, entramos en src/app/home y abrimos el archivo home.page.html.

Editamos su contenido para que quede de la siguiente manera:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Adivina el número secreto
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    <ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>
    <p>El número secreto es {{ mayorMenor }} {{ num }}</p>
    <ion-button expand="block" (click)="compruebaNumero()">Adivina</ion-button>     
  </div>
</ion-content>

 

Si nunca antes has programado en angular ni en ionic es posible que el código te resulte extraño, no te preocupes, ahora vamos a ver lo que es cada cosa, si por el contrario ya has programado en angular o en versiones anteriores de ionic es probable este código te resulte familiar.

Tenemos una plantilla básica de una página con ion-header, ion-navbar y ion-title donde hemos puesto el título de nuestra aplicación “Adivina el número secreto”. Hasta aquí ninguna novedad con lo que ya habíamos visto en el capítulo anterior.

Dentro de ion-content que como sabemos es donde va el contenido de la página tenemos un div al que le aplicamos la clase ion-padding que deja un espacio entre el borde de la pantalla y el contenido dentro de este div es donde está lo interesante:

<ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>


Primero tenemos un
ion-input que es muy parecido a un input de html, le decimos que sea de tipo number, le ponemos un rango mínimo a 1 y máximo a 100.

El siguiente parámetro [(ngModel)] es el encargado de hacer el Data Binding entre el valor del input y una variable llamada num que estará definida como luego veremos en el controlador de la página. Este es un Data Binding bidireccional ya que si se introduce un valor en el input automáticamente este será reflejado en la variable del controlador, del mismo modo si algún proceso cambia el valor de esta variable en el controlador éste automáticamente aparecerá reflejado como valor del input. 

Por último el input tiene un placeholder indicando que se introduzca un valor entre 1 y 100.

La siguiente línea es un párrafo que contiene lo siguiente:

 <p>El número secreto es {{ mayorMenor }} {{ num }}</p>

Si ya conoces ionic o angular sabes de qué se trata. En este caso con las dobles llaves “{{ }}”  hacemos un Data Binding unidireccional, mayorMenor es una variable que estará definida en el controlador y con las dobles llaves muestra su valor. 

La variable contendrá el texto “mayor que” en caso de que el número secreto sea mayor al introducido, “menor que” en caso de ser menor e “igual a” en caso de ser igual.

En las últimas llaves mostramos el valor de la variable num, veremos cómo al introducir un número este se actualiza automáticamente.

Por último tenemos un botón para comprobar si el número introducido coincide con el número secreto:

<ion-button expand=”block” (click)=”compruebaNumero()”>Adivina</ion-button>

En la documentación oficial de ionic podéis ver más sobre cómo crear distintos tipos de botones con ionic:https://ionicframework.com/docs/api/button

De momento esto es todo lo que necesitamos en la plantilla de nuestro juego.

Ahora necesitamos programar el comportamiento en el controlador de la página.

Si abrimos el archivo home.page.ts que se genera automáticamente al crear un proyecto en blanco veremos el siguiente código:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

}

 

Este código esta es typeScript. Como ya hemos comentado TypeScript permite utilizar elementos de las últimas versiones del estándar ECMAscript aunque todavía no estén implementadas en el navegador que estemos utilizando. También nos permite utilizar variables tipadas.

Como hemos comentado anteriormente con Ionic vamos a utilizar Angular que a su vez utiliza TypeScript, así que es muy beneficioso conocer Angular y typescript.

Aquí vamos a explicar a groso modo las cuestiones más importantes para poder desenvolvernos con ionic pero para saber más sobre Angular y sacarle el máximo podéis encontrar en la red muchos recursos para aprender Angular.

Analicemos el código de home.page.ts:

Lo primero que vemos es una línea import:

import { Component } from ‘@angular/core’;

Import se utiliza para importar módulos que contienen librerías y clases para poder utilizarlas en nuestro proyecto. Podemos importar módulos propios de Ionic que ya se incorporan al crear un proyecto, librerías de Angular, librerías de terceros que podemos instalar o nuestras propias  librerías.

En este caso se importa el elemento Component de @angular/core. 

Las páginas son componentes de Angular, por eso necesitamos importar Component.

Después vemos el siguiente código:

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
}) 

 

@Component es un decorador de Angular. Angular usa los decoradores para registrar un componente.

Los decoradores empiezan con @.

Los decoradores se colocan antes de la clase y definen cómo se va a comportar esta.

Existen los siguientes  decoradores:

  • @Component
  • @Injectable
  • @Pipe
  • @Directive

De momento nos interesa @Component.

En el código vemos que @Component contiene un objeto con dos atributos, selector:’app-home’, que es el selector que se va a aplicar a la página,  templateUrl:’home.page.html’ que es la plantilla html que va a renderizar la página y styleUrls: [‘home.page.scss’] donde se indica dónde se encuentran los estilos que se van a aplicar al componente, es decir,  en este caso a la página.

Por último se exporta una clase llamada HomePage:

export class HomePage {

  constructor() {}

}

 

Podemos añadir a la clase un constructor en caso de que necesitemos iniciar atributos de la clase, inyectar dependencias o realizar alguna operación en el momento de crear la clase, en este ejemplo no lo vamos a necesitar, lo veremos más adelante en otros ejemplos.

En TypeScript la creación de clases es muy similar a cómo sería en otros lenguajes de programación orientado a objetos como Java.

Todos los datos que se muestran en la plantilla y todas las funciones a las que se llame por ejemplo al hacer clic en un botón deben formar parte de la clase HomePage que es el controlador de la página.

Como ya hemos visto en la plantilla home.page.html utilizamos [(ngModel)]=”num” para recoger en la variable num el valor que se introduzca en el campo input, también mostramos otra variable llamada mayorMenor que indicará  si el número introducido es mayor o menor que el número que hay que adivinar y mostramos la variable num que se actualizará instantáneamente al introducir un número.

<ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>
<p>El número secreto es {{ mayorMenor }} {{ num }}</p>


Por lo tanto estas variables deben de estar definidas en el controlador dentro de la clase
HomePage del archivo home.page.ts:

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage {
 
 num:number;
 mayorMenor = '...';
 
  constructor() {}
 
}

 

Cómo podemos observar para definir una variable ponemos el nombre de la variable y seguido de dos puntos “:” el tipo de valor que va a contener. Si lo deseamos podemos inicializar la variable con un valor en el momento de declararla. 

En este caso num es de tipo number y mayorMenor de tipo string  aunque no es necesario ponerlo ya que al inicializarla con una cadena de texto automáticamente se le asigna el tipo string.

La variable mayorMenor va a contener un texto con la palabra “Mayor”, “Menor” o “Igual” según sea el caso. Inicializamos la variable mayorMenor con tres puntos suspensivos “…”.

Los tipos primitivos  de variable que podemos definir son:

  • number (Numérico).
  • string (cadenas de texto).
  • boolean (Booleano: true o false).
  • any (cualquier tipo).
  • Array.

También vamos a necesitar otra variable que contenga el número secreto que debemos adivinar, le vamos a llamar numSecret y cómo valor le vamos a asignar la respuesta a la llamada a una función llamada numAleatorio que crearemos a continuación.

Vamos a definir la variable numSecret de tipo number debajo de las dos variables anteriores:

numSecret: number = this.numAleatorio(0,100);

 

Hacemos referencia a la  función numAleatorio con this porque va a ser un método de la propia clase.

Ahora vamos a  crear la función numAleatorio que como su nombre indica nos devolverá un número aleatorio entre dos números:

numAleatorio(a,b)
{
    return Math.round(Math.random() * (b - a) + parseInt(a, 10));
}

 

Esta función recibe como parámetros dos valores que serán el rango mínimo y el máximo para el número aleatorio, es este caso le estamos pasando 0 y 100 por lo que obtendremos un número aleatorio entre 0 y 100.

Por último vamos a crear la función compruebaNumero que se llama al pulsar el botón Adivina que en la parte html como recordarás lo hemos definido así:

<ion-button expand="block" (click)="compruebaNumero()">Adivina</ion-button>

 

Y ahora en home.page.ts definimos la función dentro de la clase HomePage:

compruebaNumero(){
    if(this.num)
    {
      if(this.numSecret < this.num)
      {
        this.mayorMenor = 'menor que';
      }
      else if(this.numSecret > this.num)
      {
        this.mayorMenor = 'mayor que';
      }
      else{
        this.mayorMenor = '';
      }
    }
  }

 

Esta función compara el número secreto que está contenido en la variable numSecret con el número introducido por el usuario que se aloja en la variable num y le asigna a la variable mayorMenor el texto “menor que”, “mayor que” o “igual a” en función de si es menor, mayor o igual que esta.

Observa que debemos utilizar this para las variables ya que son atributos de la propia clase.

El código completo de home.page.ts quedará de esta manera:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  num: number;
  mayorMenor = '...';
  numSecret: number = this.numAleatorio(0,100);
 
  constructor() {}
 
  numAleatorio(a, b) {
    return Math.round(Math.random() * (b - a) + parseInt(a, 10));
  }
 
  compruebaNumero(){
    if(this.num)
    {
      if(this.numSecret < this.num)
      {
        this.mayorMenor = 'menor que';
      }
      else if(this.numSecret > this.num)
      {
        this.mayorMenor = 'mayor que';
      }
      else{
        this.mayorMenor = '';
      }
    }
  }
}

 

Ahora si lo ejecutamos en el navegador con ionic serve -l (si no lo tenías ya en marcha), podemos ver un campo para introducir un número, y debajo un texto que dice “el número secreto es … ”, en estos momentos  no hay introducido ningún número por lo que aparecen los puntos suspensivos.

Si introducimos un número vemos que automáticamente en el texto aparece ese número el mismo tiempo que lo escribimos. Eso es porque estamos realizando un Data Binding con la variable num. Al utilizar [(ngModel)]=”num” en el campo input le estamos indicando que la variable coja el valor que introducimos en el input y lo refresque automáticamente en todos los sitios donde se utilice, por ejemplo en el texto de debajo.Lo mismo ocurre si cambiamos el valor de la variable desde el código.

Por últimos si pulsamos el botón adivina obtendremos algo como esto:

Al pulsar el botón se ha ejecutado la función compruebaNumero(), dentro de la función se ha comprobado que el número secreto es mayor a 12 por lo que a la variable mayorMenor se le asigna el texto “mayor que”.

Cuando acertemos el número secreto el texto dirá que el número secreto es el número introducido. Esto es un poco soso, vamos a hacer algunos cambios para que cuando acertemos el número nos muestre un mensaje felicitándonos por haber acertado.

Este mensaje lo ponemos en la plantilla html pero solo se debe mostrar cuando se cumpla una condición y es que la variable mayorMenor no contenga ningún texto, eso ocurre cuando hemos acertado ya que si el número introducido no es ni mayor ni menor, es decir que es es igual al número secreto hacemos la siguiente asignación this.mayorMenor = ”.

Vamos a añadir lo siguiente en home.page.html justo antes del botón “Adivina”:

<ion-card *ngIf="mayorMenor==''">
  <ion-card-header>
  ¡¡¡Enhorabuena!!!
</ion-card-header>
<ion-card-content>
    Has acertado, el número secreto es el {{ num }}
</ion-card-content>
</ion-card>

 

Aprovecho la ocasión para introducir otro componente de ionic: ion-card, las cards o “tarjetas” son componentes que muestran la información en un recuadro. Como vemos dentro contiene otros dos componentes <ion-card-header> y <ion-card-content>, Como habrás adivinado el primero permite mostrar una cabecera dentro de la tarjeta y el segundo el contenido que deseemos.

En la documentación oficial de ionic podéis ver todas las posibilidades que tiene ion-card: https://ionicframework.com/docs/v2/components/#cards

Queremos que está card se muestre solo cuando la variable de nuestro controlador mayorMenor contenga una cadena vacía después de hacer la comprobación.

Aquí entra en juego la directiva condicional *ngIf:

<ion-card *ngIf=“mayorMenor==””>

La directiva *ngIf es una directiva estructural, lo que significa que nos permite alterar el DOM (Document Object Model), estas directivas llevan un asterisco “*” delante.

Con *ngIf le estamos indicando que el elemento donde se encuentra, ion-card en este caso, solo se muestre si se cumple la condición que tiene definida entre las dobles comillas. En este caso le estamos diciendo que solo se muestre el elemento ion-card cuando mayorMenor==’’.

Sabiendo esto vamos a darle otra vuelta de tuerca más y vamos a añadir un botón para volver a jugar una vez que hemos acertado, este botón llamará a una función para volver a generar un nuevo número aleatorio y reiniciará las variables para que se oculte el ion-card. Este botón debe permanecer oculto hasta que hayamos acertado, y cuando se muestra debe ocultarse el botón Adivina para que no podamos pulsarlo después de haber adivinado el número hasta que empecemos una nueva partida.

Editamos home.page.html y añadimos *ngIf al botón Adivina para que solo se  muestre cuando no hemos acertado el número:

<ion-button *ngIf="mayorMenor!=''" expand="block" (click)="compruebaNumero()">Adivina</ion-button>

 

Ahora añadimos el botón “Volver a Jugar” justo después del de Adivina en home.page.html:

<ion-button *ngIf="mayorMenor==''" expand="block" (click)="reinicia()">Volver a Jugar</ion-button>

 

Con *ngIf indicamos que solo se muestre cuando hayamos acertado el número, es decir cuando la variable mayorMenor esté vacía, y en el evento (click) le indicamos que ejecute la función reinicia().

Por lo tanto ahora  vamos a editar nuestro controlador (home.page.ts) y añadimos la función reinicia(), que como hemos dicho debe reiniciar las variables para poder comenzar el juego:

 reinicia(){
   // reiniciamos las variables
   this.num = null;
   this.mayorMenor = '...';
   this.numSecret = this.numAleatorio(0,100);
 }

 

Si acertamos el número veremos algo como esto:

Vista de nuestro juego al acertar.
Vista de nuestro juego al acertar.

Ahora ya podemos volver a jugar una vez de que hemos adivinado el número.

Este juego se podría mejorar añadiendo un contador de intentos. Podríamos limitar el número de intentos y mostrar un mensaje si se han consumido todos los intentos sin acertar el número secreto. Esto lo dejo como deberes para el que quiera practicar más, sin duda experimentar y tratar de modificar el juego es una de las mejores formas de aprender.

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-adivina.git.

  Eso es todo por hoy,  nos vemos en el próximo post :).

Tutorial de IONIC 4/5: Estructura de un proyecto en IONIC

Estructura

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Vamos a ver la estructura de carpetas y archivos que se generan al crear un proyecto ionic.

Al crear un proyecto con ionic se crea una carpeta con el nombre del proyecto y dentro de ella una estructura de archivos y directorios que contiene todos los elementos del proyecto. Vamos a echar un vistazo a la estructura de archivos y carpetas que se ha generado al crear nuestro proyecto hola-mundo:

Veamos qué contiene cada carpeta:

e2e: Aquí se encuentra el código para escribir tests end to end que prueben la aplicación, no nos vamos a preocupar de esta carpeta.


node_modules: La carpeta node_modules se genera automáticamente al instalar las dependencias npm con “npm install”. Este comando explora el archivo package.json para todos los paquetes que necesitan ser instalados. No necesitamos tocar nada en esta carpeta.

src: Esta es la carpeta más importante y donde realizaremos la mayor parte de nuestro trabajo. Aquí es donde están los archivos con el contenido de nuestra aplicación, donde definimos las pantallas, el estilo y el comportamiento que tendrá nuestra aplicación.
Dentro de src tenemos las siguientes subcarpetas: 

La carpeta app, que es donde se ubicará las páginas que creemos para la aplicación, los servicios y toda la lógica de programación.

La carpeta assets donde almacenaremos aquellos recursos que necesitemos para nuestra aplicación, como imágenes etc.

La carpeta environments contiene un archivo llamado environment.prod.ts y un archivo llamado environment.ts. Ambos archivos exportan un objeto llamado environment donde podemos definir variables de entorno, por defecto contienen la variable variable production que podemos utilizar para diferenciar cuando vamos a ejecutar la aplicación en producción en en modo desarrollo. De momento no nos vamos a preocupar por esto.

La carpeta theme contiene el archivo variables.scss donde se definen las variables css de ionic. Por defecto vienen definidos algunos colores que podemos utilizar.

El archivo global.scss: En este archivo podemos colocar css que se utilice globalmente en cualquier sitio de nuestra aplicación.

index.html: Es el punto de entrada de nuestra aplicación, la mayoría de las veces no necesitaremos cambiar nada aquí.

karma.conf.js: Es el archivo de configuración de karma, se utiliza para la realización de test unitarios.

main.ts: Es el punto de entrada del módulo principal de nuestra aplicación. No necesitaremos cambiar nada aquí.

polyfills.ts: Es un archivo de configuración que se genera al crear un proyecto angular, no necesitaremos modificar nada en el.

test.ts: Este archivo es requerido por karma.conf.js que como hemos comentado se utiliza para realizar tests unitarios. 

tsconfig.app.json, tsconfig.spec.json y typings.d.ts:Contienen configuraciones typescript para los tests.

.editorconfig y .gitignore son dos archivos ocultos, así que dependiendo de tu sistema puede que no los veas, están relacionados con la configuración del editor de código y Git, en principio no tenemos que preocuparnos por ellos.

angular.json: Archivo de configuración de la app.

 

Ionic.config.json:  Contiene información básica sobre la configuración nuestro proyecto.

package.json: Contiene paquetes y dependencias de nodeJS.

tsconfig.json y tslint.json: Son archivos que contienen información necesaria a la hora de compilar TypeScript, no necesitamos editar estos archivos.

Aunque pueda parecer complicado en realidad la mayoría de los elementos los gestiona automáticamente Ionic y nosotros solo tenemos que preocuparnos de la carpeta src que es donde se va a situar nuestro código.

Modificando nuestro hola mundo

Ahora que ya hemos visto la estructura de un proyecto en ionic vamos a modificar nuestro hola-mundo para que realmente diga “hola mundo”.

Si desplegamos el directorio src podemos ver la carpeta app, en esta carpeta es donde se van a alojar todas la páginas que contenga nuestra aplicación. Para que nos entendamos una página será como una vista o un pantalla de nuestra aplicación.

Al crear un proyecto con la plantilla blank ionic genera por defecto una página llamada home, que como su propio nombre indica es la página inicial que se va a mostrar al iniciar nuestra aplicación. Esta página la podemos mantener como página principal y modificarla, o podemos eliminarla y crear otra con el nombre que nosotros queramos. De momento vamos a mantener la que nos ha creado por defecto y vamos a modificar su contenido.

Como podemos ver dentro de la carpeta de la página home que nos ha creado hay cinco archivos:

El archivo home.module.ts: En este archivo se importan los módulos y funcionalidades requeridas.

El archivo home.page.html que contiene la plantilla html de la página.

El archivo home.page.scss que contiene el archivo sass donde podremos modificar el estilo de los componentes de la página.

home.page.spec.ts este archivo se utiliza para las pruebas unitarias, no nos vamos a preocupar de él por ahora.

El archivo home.page.ts que es el archivos typescript que contiene el controlador de la página, donde definiremos el comportamiento de la misma, como por ejemplo la función con la lógica a ejecutarse cuando se pulse sobre un botón de la página etc. Veremos más adelante en profundidad cada una de las partes de una página.

Si abrimos el archivo home.page.html veremos que contiene algo como esto:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

 

Las páginas se pueden crear utilizando html puro, sin embargo aquí podemos ver algunas etiquetas que no corresponden con las etiquetas html “estándar”. Lo que vemos aquí son componentes de ionic.

Ionic nos ofrece una amplia gama de componentes listos para utilizar y que nos facilitarán la labor de crear nuestra interfaz de usuario con un estilo atractivo y profesional.

Iremos viendo  diferentes componentes de ionic según los vayamos necesitando a lo largo de este libro. En este enlace podéis consultar en la documentación oficial de ionic los componentes disponibles con pequeños ejemplos de como implementarlos: https://ionicframework.com/docs/components/

Todos los componentes de ionic comienzan con el prefijo “ion-“.

Cómo ionic está basado en Web components si en algún caso no nos es suficiente con los componentes que nos ofrece ionic podríamos crear nuestros propios componentes personalizados, aunque en la mayoría de los casos no será necesario ya que ionic nos ofrece una amplia gama de componentes para poder desarrollar nuestras aplicaciones.

Veremos más sobre componentes en posteriores capítulos.

En la página principal (y única de momento) de nuestro proyecto hola-mundo vemos que tenemos los siguientes componentes:

  • ion-header: Cabecera.
  • ion-navbar: Barra de navegación.
  • ion-title: Título.
  • ion-content: Contenido de la página.

Bien, vamos a cambiar el contenido de ion-title por “Hola Mundo”, también vamos a borrar todo lo que hay dentro de la etiqueta ion-content y vamos a poner orgullosos “<h1>¡¡¡¡Hola mundo!!!!<h1>”, así el código de home.html debería quedar de la siguiente manera:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    <h1>¡¡¡¡Hola mundo!!!!</h1>
  </div>
</ion-content>

 

Si desde el terminal,escribimos ionic serve -l  para ver desde el navegador como queda en las tres plataformas nuestra aplicación veremos algo como esto:

 

Eso es todo por hoy,  en el próximo post crearemos un mini juego para seguir aprendiendo a crear aplicaciones con este potente framework llamado IONIC.

Tutorial de IONIC 4/5: Introducción

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Hola todos:

Hace tiempo escribí en este blog una serie de tutoriales sobre ionic, estos tutoriales estaban basados en ionic 2/3 y se han quedado desactualizados  con las últimas versiones de IONIC, aprovechando que acabo de sacar mi libro actualizado: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero. voy a iniciar una serie de tutoriales sobre IONIC.

He decidido dejar los tutoriales antiguos avisando de que son para versiones antiguas de ionic, por si alguien necesita esa información para mantener alguna aplicación antigua, y porque me es más sencillo volver a escribir desde cero que adaptar los tutoriales que ya existen.

Sin más preámbulos vamos a empezar con una pequeña introducción:

¿Que es ionic?

Ionic es un framework que nos permite crear de una manera rápida y sencilla aplicaciones móviles multiplataforma (Android, IOS, Windows, PWAs…) utilizando tecnologías web (HTML, JAVASCRIPT, CSS).

Para poder utilizar elementos web en una aplicación móvil utiliza lo que se conoce como una  Webview.

A este tipo de aplicaciones se las conoce como aplicaciones híbridas. El resultado final es una app “nativa” que puedes subir a las tiendas de apps.

Ionic nos ofrece un montón de componentes para crear la interfaz de usuario con estilo nativo listos para utilizar por lo que podemos crear aplicaciones con una estética profesional y con muy poco esfuerzo.

La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo código podemos generar apps para Android, IOS y Web e incluso aplicaciones de escritorio utilizando Electron, por lo que el tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente.

Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje será mucho menor.

Además Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran diseñador.

Novedades a partir de la versión 4 de IONIC

Ionic 2/3 estaba basado en Apache Cordova y Angular.

Apache cordova nos permite ejecutar nuestro código escrito con tecnología web (html, css, javascript) encapsulado en una webview y hace de puente entre esta y nos permite hacer uso de las funciones nativas del móvil (cámara, gps, etc) a través de plugins.

Sin embargo a partir de la versión 4 de Ionic se incorpora Capacitor.

Capacitor

Al igual que lo hacía apache cordova, Capacitor hace de puente entre nuestra aplicación web y el dispositivo nativo.

Capacitor además se integra mejor cuando ejecutamos nuestra aplicación en otros entornos que no sean dispositivos móviles como en navegadores de escritorio facilitando el desarrollo de progressive web apps (PWA).

Hasta la versión 4 Ionic utilizaba Angular como framework de desarrollo para crear componentes web basados en angular. 

A partir de la versión 4 Ionic utiliza componentes web genéricos, para crear los Web Components, el equipo de Ionic creó una herramienta llamada Stencil.

Los Web components son un conjunto de web APIs que te permiten crear etiquetas HTML personalizadas que son reutilizables.

Stencil

Stencil es una herramienta que crea componentes web, y el equipo Ionic ha creado un conjunto de componentes web con Stencil que forman parte de Ionic Core

Ionic Core contiene el conjunto de los componentes web que componen la biblioteca de la interfaz de usuario de Ionic (listas, botones, selectores, etc.).

Nosotros no necesitamos utilizar Stencil ni entender cómo funciona para utilizar los componentes que el equipo de ionic a creado para nosotros. 

Angular

Al utilizar componentes web genéricos y no componentes Angular podemos utilizar cualquier framework por lo que no es obligatorio el uso de Angular. Si te sientes más cómodo utilizando otro framework puedes hacerlo.

Sin embargo en este tutorial vamos a utilizar Angular para desarrollar nuestras aplicaciones ya que Angular nos proporciona muchas cosas listas para usar que nos ayudan a construir aplicaciones bien estructuradas. 

Hay una biblioteca llamada @ionic/angular que es la biblioteca de ionic específica de Angular, es la que ya veníamos utilizando antes de la versión 4 de ionic, este paquete ofrece funcionalidades adicionales que solo se pueden utilizar con Angular, sin embargo utiliza los mismos componentes web que pueden ser utilizados con otro framework. 

Angular nos permite aprovechar las ventajas de este framework, además como Angular siempre ha sido el framework por defecto de Ionic hay mucho más soporte y muchas más apps desarrolladas con ionic utilizando Angular.

Además hay muchas librerías y utilidades ya creadas en Angular para utilizar con Ionic.

Angular utiliza TypeScript como lenguaje de programación, si no dominas estas tecnologías mencionadas no te preocupes, trataré de ir explicando las cosas básicas necesarias según las vayamos necesitando en los ejemplos que realizaremos.

La versión 4 de Ionic también trae cambios en la navegación entre páginas utilizando ahora el router de Angular.

También cambian en la versión 4 los ciclos de vida de las páginas, ya no utilizamos por ejemplo ionWillLoad o ionViewDidEnter, en su lugar utilizaremos ngOnInit.

Si vienes de utilizar ionic en versiones anteriores te será útil conocer estas diferencias, si empiezas de cero no te preocupes, veremos todo lo que necesitas saber para desarrollar aplicaciones con Ionic en la versión actual.

Vamos a ver como instalar Ionic y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic.

Instalar Node.js

Para instalar ionic debemos instalar primero Node.js para ello descargamos el paquete con la versión LTS de http://nodejs.org/ y lo instalamos. 

Si estás usando linux y quieres utilizar un gestor de paquete puedes consultar aquí los pasos a seguir para instalar Node.js usando un gestor de paquetes según la distribución que tengas instalada:

https://nodejs.org/es/download/package-manager/

Instalar ionic

Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic con el siguiente comando:

npm install -g ionic

 

Una vez instalado ya podemos crear aplicaciones con ionic y ejecutarlas en el navegador, sin embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las herramientas de desarrollo de Android, así mismo para poder ejecutar la app para IOS necesitaremos instalar Xcode.

Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, para poder compilar las Apps para IOS necesitamos un MAC con Xcode instalado.

Para instalar Android Studio descargalo desde la página oficial y sigue las instruciónes dependiendo de tu sistema operatico: https://developer.android.com/studio/index.html.

Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito.

Por último necesitaremos un editor de código que nos coloree typescript para facilitarnos el trabajo. En realidad podríamos editar el código con cualquier editor de texto plano, pero una buena opción para typescript es utilizar Visual Studio Code de Microsoft que es multiplataforma y podéis descargarlo desde el siguiente enlace:  https://code.visualstudio.com/

Hola Mundo en Ionic

Vamos a crear nuestra primera aplicación con Ionic, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programación o framework.

Para crear nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

Tras un rato descargando los paquetes necesarios para crear nuestra aplicación ya estará listo nuestro proyecto.

El comando start de ionic cli (commandline interface)  se utiliza  para crear (iniciar) un nuevo proyecto, el siguiente parámetro es el nombre del proyecto, en este caso hola-mundo, el siguiente parámetro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vacía.

Existen tres tipos de plantillas:

  • blank : Crea una plantilla vacía.
  • sidemenu: Crea una plantilla con menú lateral.
  • tabs: Crea una plantilla con Tabs (Pestañas). 

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

 

Podemos utilizar simplemente ionic serve, pero con el parámetro -l nos muestra como queda nuestra app en IOS, Android  y Windows.

Para poder ejecutar ionic serve con el parámetro -l tenemos que instalar @ionic/lab, por eso la primera vez que lo ejecutemos nos pedirá que instalemos el paquete @ionic/lab:

Install @ionic/lab? (Y/n)

Le decimos que sí pulsando la tecla ‘Y’.

En la barra superior a la derecha desplegando la opción platforms podemos seleccionar en qué plataformas queremos ver cómo queda nuestra aplicación.Vista de cómo quedaría nuestra primera App con plantilla Blank en el navegador.

Si no utilizamos -l mostrará solo una plataforma a pantalla completa.

Como podemos ver,  sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para añadir lo que necesitemos.

Eso es todo por hoy,  el el próximo post analizaremos la estructura de un proyecto de IONIC y veremos cómo empezar a modificar nuestro Hola Mundo.

Como crear una aplicación de escritorio multiplataforma usando tecnología web con Electron – Hola mundo.

Hola a todos:

Hoy vamos a ver como podemos crear una aplicación de escritorio utilizando tecnología web (HTML, CSS, JAVASCRIPT) con Electron.

Electron es una herramienta creada por Github que nos permite crear aplicaciones de escritorio multiplataforma (Windows/MAC/Linux) utilizando tecnologías web.

Entre otras aplicaciones famosas construidas utilizando electron están las versiones de escritorio de Skype, Visual Studio Code, Slack…etc.

Electron utiliza Node.js como backend y Chromiun como fornt-end para renderizar la aplicación.

Vamos a ver un  ejemplo muy sencillo, el clásico hola mundo, para ver como podemos convertir un desarrollo web en una aplicación de escritorio.

Si no tenemos instalado Node.js en nuestro sistema el primer paso es instalarlo

Para ello descargamos el paquete con la versión LTS de http://nodejs.org/ y lo instalamos.

Si estás usando linux y quieres utilizar un gestor de paquete puedes consultar aquí los pasos a seguir para instalar Node.js usando un gestor de paquetes según la distribución que tengas instalada.

Una vez que tengamos node.js instalado empezamos a crear nuestra aplicación:

Lo primero que vamos ha hacer es crear la carpeta que contendrá nuestro proyecto, por lo tanto vamos a crear donde prefiramos una carpeta llamada holamundo.

Luego desde la consola de comandos tenemos que situarnos dentro de la carpeta que acabamos de crear y escribimos el siguiente comando para iniciar la aplicación:

npm init

Nos va preguntando el nombre del paquete, la versión y otros datos de la aplicación y al final nos genera un archivo llamado package.json

como nombre de paquete por defecto da el nombre de la carpeta que hemos creado, podemos cambiarlo si queremos.


El siguiente paso es instalar la última versión de electrón:

npm i electron@latest

Ahora vamos a crear en nuestra carpeta un archivo llamado index.js que como comentamos anteriormente será el punto de entrada de nuestra aplicación, y otro archivo index.html.

En este momento nuestra carpeta holamundo tienes estos tres archivos:

Editamos index.js y escribimos el siguiente código:

const {app, BrowserWindow} = require('electron');

let win;

function createWindow(){
   win = new BrowserWindow({width : 500, height : 500 });
   win.loadFile("index.html");
}

app.on("ready", createWindow);

Primero hemos importado app y BrowserWindow de electron:

const {app, BrowserWindow} = require('electron');

Después definimos la variable win que contendrá el manejador de la ventana de nuestra aplicación:

let win;

Luego hemos definido una función llamada createWindow donde creamos una ventana de tamaño 500×500 y dentro de ventana cargamos el archivo index.html con loadFile:

function createWindow(){

win = new BrowserWindow({width : 500, height : 500 });
win.loadFile("index.html");

}

Por último le decimos que cuando la aplicación esté lista llame a la función createWindow() que acabamos de crear:

app.on("ready", createWindow);

Perfecto, ahora solo nos queda editar nuestro archivo index.html que va a mostrar nuestra aplicación, que en un alarde de originalidad imprimirá en pantalla un flamante Hola Mundo:

<!DOCTYPE html>
<html>
   <head>
       <title>Hola Mundo</title>
   </head>
   <body>
       <h1>Hola mundo</h1>
   </body>
</html>

Ahora para ver el resultado ejecutamos nuestra aplicación ejecutamos el siguiente comando:

electron .

 Por si no se aprecia bien el comando es electron seguido de un espacio y un punto.

Ya tenemos nuestra aplicación funcionando, ahora solo nos falta empaquetarla para crear el ejecutable.

 

Para empaquetar la aplicación vamos a instalar electron-packager con el siguiente comando:

npm install -g electron-packager

Ahora vamos a ejecutar npm install para instalar los módulos de nodejs y todas las dependencias:

npm install 

Por último para empaquetar ejecutamos:

electron-packager .

Es importante indicar que se tiene que ejecutar en el sistema operativo del cual queremos obtener el ejecutable, si lo estás ejecutando en windows se habrá creado un carpeta llamada holamundo-win32-x64 dentro de nuestro proyecto, dentro de esta carpeta podrás encontrar entre otros archivos necesarios el archivo holamundo.exe que es el archivo ejecutable.

Eso es todo por hoy,  hemos una introducción rápida y sencilla a electrón.

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 6

Hola a todos:

En los post anteriores hemos aprendido a utilizar Git como repositorio local y también GitHub como repositorio remoto.

Tras la compra de GitHub por parte de Microsoft hubo desarrolladores que recelosos del papel que pueda jugar Microsoft  con el futuro de GitHub decidieron migrar sus repositorios a GitLab.

Hoy vamos a iniciarnos en esta plataforma:

Al igual que GitHub, Gitlab es un servicio web de control de versiones y desarrollo de software colaborativo basado en Git.

GitLab nació en 2011 como un proyecto dentro de GitHub convirtiéndose en una alternativa a este.

Fue escrito por los programadores ucranianos Dmitriy Zaporozhets y Valery Sizov en el lenguaje de programación Ruby

GitLab tiene la ventaja que permite tener repositorios privados en la versión gratuita.

Lo primero que tenemos que hacer para utilizar gitLab es crearnos una cuenta, para ello vamos a la página de GitLab: https://gitlab.com   y pinchamos en

Seleccionamos la pestaña Register y rellenamos los campos del formulario antes de pulsar el botón Register:

Una vez enviado el formulario te llegará un email a la cuenta de correo que has indicado para que confirmes tu cuenta pinchando en el enlace.

Una vez confirmada tu cuenta ya podemos empezar.

Al logearte en GitLab la primera vez veremos una pantalla como esta:

Podemos crear un proyecto, explorar proyectos publicos al igual que en GitHub y crear un grupo para gestionar un proyecto colaborativo.

Vamos a crear un nuevo proyecto, por lo tanto seleccionamos Create a proyect:

Al proyecto le vamos a llamar holamundo para no perder las buenas costumbres.

Podemos poner una descripción del proyecto si queremos y seleccionamos el tipo de repositorio que queramos: Private(privado), Internal (interno) o Public (público).

Si queremos que sea un proyecto que solo nosotros podamos ver lo dejamos en Private.

Por último accionamos el botón Create project y ya tendremos nuestro repositorio creado.

Si  nos desplazamos por la página hacia abajo veremos que al igual que en GitHub nos muestra los comandos que tenemos que ejecutar para sincronizar este repositorio con un proyecto en nuestro ordenador.

Primero tenemos que configurar nuestro usuario y nuestro email con git config  si no lo hemos hecho.

Como nosotros ya tenemos nuestro repositorio holamundo en nuestro ordenador ya hemos configurado el usuario.

Tenemos tres posibilidades:

Crear un nuevo repositorio vacío, utilizar una carpeta donde ya tengamos un proyecto pero que no esté gestionado todavía por git, o utilizar un repositorio local que ya esté gestionado por git.

En este caso ya tenemos nuestro proyecto holamundo que ya está siendo gestionado por Git y además lo tenemos asociado remotamente a GitHub.

Tenemos que seguir por lo tanto los pasos que indica en “Existing Git repository“.

Lo primero que tenemos que hacer es situarnos en la consola de comandos dentro de la carpeta de nuestro proyecto.

Ahora renombramos el origin y lo llamamos old-origin, recordad que en origin ahora estaba definido la url de nuestro proyecto en GirHub:

git remote rename origin old-origin

Ahora tenemos que indicar que el origin va a ser la dirección de nuestro proyecto en Gitlab:

git remote add origin https://gitlab.com/tu_usuario/holamundo.git

Recuerda poner la url que indique en tu caso, con tu usuario.

Ahora  nos indica que realicemos un push -u origin –all:

git push -u origin --all

Al ejecutar este comando nos pedirá usuario y contraseña. Debemos poner nuestro usuario y contraseña de GitLab:

Una vez logeados comenzara a subir los archivos de nuestro repositorio.

Por último nos indica que introduzcamos el siguiente comando:

git push -u origin --tags

Con esto ya tendremos todo sincronizado, si refrescamos la página de nuestro repositorio en GitLab vemos que aparecen todos los archivos de nuestro proyecto holamundo:

 

El uso que podemos hacer de GitLab es muy similar al de GitHub.

Si queremos clonar un repositorio de Gitlab en nuestro ordenador solo tenemos que copiar la url de nuestro proyecto y  utilizar el comando git clone como vimos en la parte de GitHub por ejemplo.

Vamos ha hacer una prueba:

Primero vamos a crear una carpeta en nuestro equipo donde clonaremos el repositorio, la llamaremos por ejemplo HolaMundoGitLab:

Ahora copiamos la url de nuestro repositorio en GitLab:

Ahora desde el terminal nos situamos en la carpeta que acabamos de crear y al igual que haríamos con un repositorio de GitHub utilizamos el siguiente comando:

git clone https://gitlab.com/reviblog/holamundo.git

Al hacer esto  dentro de nuestra carpeta se habrá creado la carpeta holamundo con el contenido de nuestro repositorio.

Fork

Al igual que GitHub, GitLab nos permite hacer un fork de un repositorio, como vimos en GitHub, un fork es una copia exacta de un repositorio para poder hacer modificaciones del repositorio original sin afectar a este.

En GitLab tambien puedes encontrar un repositorio público de un proyecto que te resulte interesante y realizar cambios en este si afectar al original.

Cuando accedes a la página principal de GitLab te da la opción de explorar repositorios públicos:

Seleccionamos un proyecto publico que nos interese y para tener una copia en nustra cuenta de GitLab solo tenemos que pulsar el botón fork:

Nos pedirá que seleccionemos el namespace para hacer un fork del proyecto:

Seleccionamos el nuestro y después de unos segundos o algo más de tiempo dependiendo de la envergadura del proyecto tendremos una copia exacta que podemos modificar a nuestro antojo:

Al igual que en GitHub podemos hacer un pull request para solicitar la integración de los cambios que hayamos realizado en el proyecto original, en GiLab debemos solicitar un Merge request.

En el menú lateral izquierdo encontraremos la opción para realizar un Merge Request:

Después debemos seleccionar la rama donde queremos hacer el merge:

Después pulsamos en el botón “Compare branches and continue” y se mostrará un formulario donde podemos describir el merge que vamos a realizar.

Una vez rellenado el formulario pulsamos en el botón “Submit merge request” para enviar la petición.

Wiki

Gitlab nos provee también de una Wiki donde podemos documentar nuestro proyecto y añadir toda la información que consideremos relevante al respecto.
Desde el menú lateral izquierdo podemos acceder a la Wiki y crear nuestra primera página:

Añadir miembros al proyecto

Podemos invitar a otros usuarios a participar en nuestro proyecto, por ejemplo si somos un equipo de varias personas trabajando en un proyecto se puede autorizar a diferentes usuarios para que puedan acceder a el.

Para ello en el menú lateral de la izquierda en la parte de abajo selecionamos Settings -> Members:

Al empezar a escribir el nombre del usuario en el campo Select members to invite aparecerán sugerencias de usuarios que coincidan con lo que estamos escribiendo hasta que veamos en usuario que nos interesa.

Después en  Choose a role permission seleccionamos el tipo de rol que va a tener el usuario, pudiendo elegir entre Guest, Reporter, Developer y Maintainer.

Dependiendo del tipo de rol el usuario tendrá diferentes permisos respecto al repositorio:

Action Guest Reporter Developer Maintainer Owner
Create new issue
Create confidential issue
View confidential issues (✓)
Leave comments
See related issues
See a list of jobs
See a job log
Download and browse job artifacts
View wiki pages
Pull project code
Download project
Assign issues
Assign merge requests
Label issues and merge requests
Create code snippets
Manage issue tracker
Manage labels
See a commit status
See a container registry
See environments
See a list of merge requests
Manage related issues [STARTER]
Lock issue discussions
Lock merge request discussions
Create new environments
Stop environments
Manage/Accept merge requests
Create new merge request
Create new branches
Push to non-protected branches
Force push to non-protected branches
Remove non-protected branches
Add tags
Write a wiki
Cancel and retry jobs
Create or update commit status
Update a container registry
Remove a container registry image
Create/edit/delete project milestones
Use environment terminals
Add new team members
Push to protected branches
Enable/disable branch protection
Turn on/off protected branch push for devs
Enable/disable tag protections
Rewrite/remove Git tags
Edit project
Add deploy keys to project
Configure project hooks
Manage Runners
Manage job triggers
Manage variables
Manage GitLab Pages
Manage GitLab Pages domains and certificates
Remove GitLab Pages
Manage clusters
Edit comments (posted by any user)
Switch visibility level
Transfer project to another namespace
Remove project
Delete issues
Remove pages
Force push to protected branches
Remove protected branches
View project Audit Events

Esta tabla esta sacada de la documentación oficial de gitlab, para saber más sobre los permisos de usuario puedes visitar el siguiente link: https://gitlab.com/help/user/permissions

Eliminar un repositorio

Si queremos eliminar un repositorio debemos acceder en el menú lateral izquierdo y seleccionar Settings – General  y en General project pulsar el botón Expand

En General project nos desplazamos hasta el final de la página y en Advanced pulsamos el botón Expand. Nos desplazamos una vez más hasta el final de la página para encontrar el botón Remove project.

Al pulsar el botón Remove project nos pide introducir el nombre del proyecto para confirmar la eliminación.

Conclusión:

A lo largo de este tutorial hemos aprendido a utilizar Git para crear nuestros repositorios locales y llevar un control de versiones a través de esta potente herramienta. También hemos visto como trabajar con repositorios remotos con una introducción a dos de las plataformas basadas en Git mas utilizadas, GitHub y GitLab.

Espero que os sea de utilidad.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 5

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Hola a todos:

El el post anterior aprendimos lo que era un repositorio remoto y como crear una cuenta de GitHub y alojar nuestro proyecto en GitHub, hoy vamos a seguir aprendiendo un poco más sobre GitHub.

Clonar un repositorio: git clone

Si queremos descargar el código desde github, por ejemplo si borramos nuestro proyecto y queremos volver a descargarlo o queremos instalar nuestro proyecto en otra maquina solo tenemos que copiar la url de nuestro proyecto en github, para ello pulsamos en clone or download y copiamos la url.

Por ejemplo vamos a eliminar la carpeta proyectoGit1 de nuestro proyecto en nuestro ordenador.

Supongamos que la hemos borrado por error y hemos perdido todo nuestro proyecto.

Bien al tener alojado nuestro repositorio en GitHub podemos recuperarlo de la siguiente manera:

Primero vamos a nuestro repositorio en GitHub y pulsamos en el botón “Clone or download” y copiamos la url de nuestro repositorio:

Luego desde el bash navegamos hasta el lugar donde queremos clonar el proyecto y escribimos git clone y la url de nuestro proyecto, por ejemplo:

git clone https://github.com/Reviblog/holamundo.git

Ahora tendremos una copia exacta de nuestro repositorio en GitHub.

Como GitHub es una plataforma donde hay miles de proyectos de código abierto podemos clonar cualquier repositorio público, puedes descubrir proyectos muy interesantes en GitHub y clonarlos para estudiar su código y/o adaptarlo a tus necesidades.

Actualizar los cambios del repositorio remoto a nuestro repositorio local – fetch y pull

Imaginemos que se han realizado cambios en el repositorio remoto, por ejemplo que otro usuario ha añadido cambios y queremos actualizar estos cambios en nuestro repositorio local.

Para verlo con un ejemplo vamos a añadir un archivo desde GitHub a nuestro repositorio:

Para ello pulsamos en el botón Create new file:

Y editamos un archivo al que le podemos llamar por ejemplo productos.html y si queremos podemos poner unas líneas de código html dentro:

Para que la creación del nuevo archivo se haga efectiva tenemos que hacer un commit, debajo del editor veremos que hay un formulario para hacer commit, escribimos una descripción para el commit y pulsamos el botón Commit new file.

Ahora tenemos el archivo productos.html en el repositorio remoto de GitHub, sin embargo en nuestro repositorio local no lo tenemos, vamos a ver como actualizar nuestro repositorio local para que los cambios que se han producido en el repositorio remoto se sincronicen.

fetch

Siempre en un repositorio tienes una rama oculta, que puedes ver al usar git branch -a.

Esa rama oculta es origin/master.

Al usar git fetch origin, bajamos los cambios del repositorio remoto a la rama origin/master:

git fetch origin

Ahora ya tienes los cambios en origin/master, aparente no ha pasado nada, seguimos sin tener el archivo productos.html, para que los cambios se hagan efectivos tenemos que pasarlos a la rama master, para eso usamos el siguiente comando:

git merge origin/master

Ahora ya tenemos el archivo productos.html en nuestro repositorio local.

pull

Al usar el comando git pull estamos combinando git fetch + git merge.

Vamos a seguir los mismos pasos que dimos para crear el archivo productos.html y vamos a crear en GitHub un archivo que se llame por ejemplo vendedores.html.

Una vez que lo tengas creado y hayas hecho el commit vamos a actualizar este cambio del repositorio remoto a nuestro repositorio local, pero esta vez en lugar de utilizar el comando git fetch vamos a utilizar el siguiente comando:

git pull origin master

Ahora ya tenemos el archivo vendedores.html que acabamos de crear en GitHub en nuestro repositorio local.

Con git pull  nos ahorramos el usar un comando más, pero no conviene utilizar git pull si no estamos seguros de que cambios se pueda traer del repositorio remoto.

Fork

GitHub nos permite hacer una copia exacta de un repositorio para poder hacer modificaciones del repositorio original sin afectar a este, a esto se le llama fork.

Puedes encontrar un repositorio público de un proyecto que te resulte interesante y realizar cambios en este si afectar al original.

Cuando accedes a la página principal de GitHub te da la opción de explorar repositorios públicos:

Cuando entramos en un repositorio en la parte de arriba a la derecha tenemos un botón “Fork” donde se indica además el número de forks que se han realizado de este repositorio.

Al pulsar en el botón automáticamente se creará una copia exacta del repositorio en tu cuenta de github.

Los cambios que realicemos en este repositorio no van a modificar el repositorio original sino nuestra copia.

Una vez que hemos hecho el fork del repositorio para traerlo a nuestro ordenador solo tenemos que crear una carpeta, situarnos dentro de ella desde el terminal y utilizar el comando git clone ruta_del_repositorio.

Por ejemplo: 

git clone https://github.com/Reviblog/holamundo.git

pull request

Cuando varias personas colaboran en un mismo proyecto es común que cada colaborador haga un fork del proyecto original para poder realizar cambios sin afectar al proyecto original, una vez hechos los cambios el colaborador debe solicitar al administrador del proyecto original para que integre esos cambios en la rama original.

Vamos a ver con un ejemplo práctico cómo funciona:

Imaginemos que hemos hecho un fork de un repositorio,  para verlo con más claridad vamos a simular que somos otro usuario, para ello podemos hacer la prueba creando otra cuenta de GitHub con otra cuenta de correo que tengamos y haciendo un fork del repositorio holamundo  que tenemos en nuestra primera cuenta.

Para poder estar logeado con las dos cuentas puedes utilizar dos navegadores (Firefox y Chrome… o los que tengas instalados), si solo tienes un navegador deberás cerrar sesión antes de iniciar con la otra cuenta.

Para hacer un fork iniciamos sesión en GitHub con la segunda cuenta que hemos creado y en el buscador de la cabecera ponemos el nombre de nuestro usuario de la primera cuenta y  el nombre del repositorio, después pulsamos el botón “All GitHub” para que busque en todo GitHub.

Una vez localizado nuestro repositorio entramos en él y hacemos un fork desde nuestra segunda cuenta de GitHub pulsando en el botón fork:

Tras unos segundos tendremos una copia del proyecto holamundo en nuestra segunda cuenta de GitHub.

Entramos en la copia del proyecto  que se ha creado en nuestra segunda cuenta de usuario y copiamos la url del proyecto para hacer un clone:

Creamos una carpeta que podemos llamar prueba_pull_request y situándonos en ella desde la consola hacemos un clone:

git clone https://github.com/edurevilla/holamundo.git

Esto habrá creado una carpeta holamundo dentro de la carpeta con el contenido del proyecto.

Desde consola entramos en la carpeta holamundo que se acaba de crear:

cd holamundo

Ahora vamos a editar el archivo productos.html y añadimos algunas lineas de código:

<html>
  <head></head>
  <body>
<h1>Listado de productos</h1>
    <ul>
	<li>Producto 1</li>
	<li>Producto 2</li>
	<li>Producto 3</li>
	<li>Producto 4</li>
    </ul>
  </body>
</html>

Una vez modificado el archivo añadimos los cambios al stage:

git add .

Y hacemos un commit:

git commit -m "Hemos modificado productos.html"

Por último subimos los cambios al repositorio de github:

git push -u origin master

Nos pedirá que introduzcamos el usuario y contraseña de nuestra cuenta de GitHub, en este caso el de la segunda cuenta que hemos creado de prueba.

Bien, ahora tenemos dos versiones diferentes del proyecto holamundo, la original y la del fork que hemos realizado con nuestra segunda cuenta de usuario.

Queremos que los cambios que hemos realizado en nuestro fork del proyecto se integren en el repositorio original, para ello tenemos que hacer una petición “pull request“.

Para ello tenemos que seleccionar el botón “New pull request“:

A continuación se mostrará un resumen de los cambios con respecto a la rama original, una vez revisados los cambios pulsamos el botón “Create pull request“.

Podemos poner un comentario para explicar los cambios que hemos realizado:

Por último pulsamos en el Botón “Create pull request” para mandar la solicitud.

Si ahora accedemos a nuestra primera cuenta de GitHub donde tenemos el proyecto holamundo original podemos ver en la pestaña Pull requests que tenemos una solicitud:

Seleccionamos la pestaña Pull request y vemos que tenemos una solicitud que pone “Hemos modificado productos.html”, si seleccionamos la solicitud nos da la opción de  integrar los cambios pulsando el botón “Merge pull request“, también podemos dejar un comentario, por ejemplo si consideramos que algo está mal y queremos solicitar un cambio en el código antes de hacer el merge.

En este caso podemos poner que todo está correcto y pulsar el botón “Comment“, y después pulsar el botón “Merge pull request” para incorporar los cambios al repositorio original.

Nos pide que confirmemos el merge así que pulsamos el botón “Confirm merge” y ya tenemos los cambios hechos por el segundo colaborador en el repositorio original.

Como puedes ver se puede mantener una conversación entre los colaboradores del proyecto para comentar los cambios que se hacen.

El administrador del proyecto original es el que decidirá qué cambios se incorporan al repositorio.

Si revisamos ahora el contenido del archivo productos.html  en el repositorio original de GitHub veremos que ahora ya contiene los cambios que le hemos añadido desde el fork.

GitHub es una herramienta muy potente para el desarrollo colaborativo de código abierto. Tiene muchas funciones avanzadas que se escapan al propósito de este tutorial de iniciación, pero con lo que has aprendido ya puedes empezar a alojar tus proyectos en GitHub y/o colaborar en proyectos existentes.

Eso es todo por hoy, en el próximo post veremos uno de los mayores competidores de GitHub, me estoy refiriendo como no a GitLab.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 4

En el siguiente enlace tienes el indice para acceder al resto de entradas de este tutorial:

Hola a todos, hasta ahora hemos estado trabajando con un repositorio local, es decir todo el código de nuestro proyecto se encontraba en nuestro ordenador y solo nosotros accedemos a él.

Repositorios remotos

Lo normal en proyectos colaborativos o en los que trabajan más de una persona es tener un repositorio remoto alojado bien en algún servidor de la red interna, o directamente en internet.

Nosotros trabajaremos en nuestro repositorio local y después subiremos los cambios al repositorio remoto.

Aunque existen más, en este tutorial nos vamos a centrar en dos de las plataformas Git para alojar nuestro proyectos mas conocidas: GitHub y GitLab.

GitHub

GitHub es una plataforma de desarrollo colaborativo para alojar proyectos utilizando el sistema de control de versiones Git

En GitHub puedes almacenar tus proyectos de forma pública gratuitamente. Esto significa que tus proyectos están accesibles a cualquier persona. Por eso GitHub es muy utilizado en proyecto open source donde cualquiera puede tener acceso al código de un proyecto para poder hacer cambios o añadir funcionalidades.

Si necesitas tener  proyectos privados GitHub dispone de una opción de pago para almacenar proyectos de forma privada.

Microsoft acaba de comprar GitHub, habrá que estar atentos a la evolución que tenga la plataforma bajo la tutela de Microsoft.

Lo primero que necesitamos hacer es crear una cuenta en GitHub, para ello vamos a su página accediendo a la siguiente url:  https://github.com/

Creamos una cuenta rellenando los campos del formulario Username (nombre de usuario), Email y Password (contraseña).

Una vez registrados nos mostrará una pantalla similar a esta:

En este paso nos pide que seleccionemos el plan que queremos, por defecto marca repositorios públicos ilimitados gratis con la opción de seleccionar repositorios privados ilimitados con un coste en el momento de escribir estas líneas de 7 dólares.

Si seleccionamos la opción de pago nos pedirá los datos de facturación.

Si no tienes muy claro que plan necesitas no te preocupes, puedes empezar con la opción gratuita y más adelante si quieres puedes actualizar al plan de pago.

Una vez seleccionado el plan que queramos pulsamos en botón continuar .

En el último paso nos muestra una pequeña encuesta donde nos preguntan cual es nuestro nivel de experiencia como programadores, para qué tipo de proyectos vamos a utilizar GitHub, cual es tu perfil …

Este paso es opcional,  después de rellenar la encuesta  (o no) tras pulsar el botón continuar ya has completado la inscripción en GitHub.

Te enviarán un correo para verificar tu email, debes acceder al link que te indican en el correo para verificar la dirección de correo (Verify email address).

Al acceder al link se activará la cuenta y nos mostrará un formulario de login.

Accedes con el usuario y contraseña de la cuenta de GitHub que acabas de crear y listo.

En este punto ya podemos crear nuestro primer repositorio en GitHub:

Pulsamos el botón Start a project y accedemos al formulario para crear nuestro primer repositorio en GitHub:

Lo primero que tenemos que hacer es dar un nombre al repositorio, como no podía ser de otra manera para este primer ejemplo le vamos a  vamos a poner holamundo.

En la descripción ponemos la descripción de nuestro proyecto.

Después seleccionamos si nuestro proyecto va a ser público o privado,  recuerda que para poder tener repositorios privados debemos tener el plan de pago.

De momento no vamos a marcar la casilla Initialize this repository with a README, Este archivo lo crearemos más tarde y aprenderemos cómo se edita.

También nos da la opción de añadir un archivo .gitignore y una licencia, para este ejemplo lo dejamos en none.

Pulsamos en el botón Create repository y ya tenemos listo nuestro primer repositorio en GitHub.

Importar un proyecto desde un repositorio local – push

Lo primero que aparece al crear el repositorio es la url para acceder al mismo, tendrá el siguiente formato:

https://github.com/tu_usuario/tu_proyecto.git

Debajo nos muestra tres opciones, la primera es para crear un proyecto local desde cero, añadirle el archivo README.md y subirlo al repositorio que acabamos de crear.

La segunda opción es para subir un repositorio que ya tengamos creado en local.

Por último nos da la opción de importar un repositorio desde otro sistema de control de versiones como Subversion o Mercurial.

Como nosotros ya tenemos creado nuestro proyecto en local vamos a usar la segunda opción, entonces no tenemos más que seguir los pasos indicados:

Desde consola (Git bash o el terminal ) nos situamos en la carpeta de nuestro proyecto proyectoGit1 y añadimos el origen de nuestro repositorio remoto:

git remote add origin https://github.com/Reviblog/holamundo.git

Ahora para subir el contenido de nuestro proyecto utilizamos el siguiente comando:

git push -u origin master

Al ejecutar este comando nos pedirá que introduzcamos el usuario o el correo electrónico de nuestro usuario en GitHub y la contraseña:

Una vez logeado correctamente los archivos de nuestro repositorio local se subirán al repositorio remoto en GitHub.

Si refrescamos ahora la página en Github veremos que aparecen los archivos de nuestro repositorio local.

Ahora cada vez que hagamos cambios en nuestro repositorio local después de hacer el commit debemos utilizar el comando git push -u origin master para que los cambios se sincronicen con nuestro repositorio remoto en GitHub.

Vemos en que en la cabecera nos indica el número de commits que se han realizado, si pulsamos sobre  la palabra commits podemos ver los commits que se han realizado en nuestro proyecto, el decir, no solo se ha subido el código a nuestro repositorio si no que tenemos toda la información de los commits que tenemos en el repositorio local lo que nos permite hacer un seguimiento y volver a un punto anterior de nuestro proyecto en cualquier momento.

El archivo README.md

El archivo README.md  es un archivo de descripción de nuestro proyecto y suele contener una descripción del proyecto, modo de instalación, forma de utilización , tipo de licencia y cualquier otra información relevante sobre el proyecto.

Este archivo tiene un formato especial para representar su contenido, vamos a ver a continuación cómo se edita y como se da formato al texto contenido en el.

Si volvemos a la página inicial de nuestro proyecto  (podemos pinchar en el enlace holamundo en la parte superior de la pantalla) vemos que después del listado de los archivos  de nuestro proyecto hay un botón con el texto “Add a README“, si hacemos click sobre él nos abre un editor para editar el archivo README.md:

Tenemos dos pestañas,  “Edit files” y “Preview”.

README.md utiliza un formato Markdown.

Vamos a ver brevemente cómo utilizar el formato Markdown para nuestro archivo README.md:

Encabezados

Podemos observar que hola-mundo tiene el carácter  almohadilla “#” por delante, esto hace que se vea como un encabezado.

Una almohadilla antes del texto corresponde con un encabezado h1 de html, dos almohadillas sería igual a un h2, tres almohadillas sería igual a un h3 y así sucesivamente:

# Encabezado h1 
## Encabezado h2
### Encabezado h3
#### Encabezado h4

Citas

Para resaltar una cita usamos el símbolo  mayor que “>” antes del texto:

> "If it compiles, it is good, if it boots up it is perfect". - Linus Linus Torvalds

Cursiva y negrita

Agregamos un asterisco  “*” antes y después de la palabra o frase que queremos resaltar para cursiva y dos para negrita “**”:

*Cursiva* 

**Negrita**

Código

Se utiliza el acento grave para identificar código, y corchetes para identificar el lenguaje de programación:

 `Código`
 ``` [language]
 Código en 
 varias líneas
 ```

Listas

Para los elementos de listas no ordenadas utilizamos  el asterisco “*“:

* Primer elemento
* Segundo elemento
* Tercer elemento

Para las listar ordenadas indicamos el número del elemento con un punto:

1. Primer elemento de la lista
2. Segundo elemento de la lista
3. Tercer elemento de la lista

Enlaces

Para añadir un enlace a nuestro documento ponemos el texto del enlace entre corchetes y la url del enlace entre paréntesis:

 [Reviblog](www.reviblog.net)

Imágenes

Para incluir imágenes utilizamos el símbolo de exclamación “!” y entre corchetes el texto alternativo de la imagen seguido entre paréntesis de la url de la imagen:

![Un gato](https://reviblog.net/wp-content/uploads/2018/06/IMG_20180608_104752.jpg)

Vamos a ver como quedaría todo los que hemos visto, dejamos el archivo README.md de la siguiente manera:

# hola-mundo
Este es mi primer repositorio en GitHub

Encabezados:

# Encabezado h1
## Encabezado h2
### Encabezado h3
#### Encabezado h4

Citas:

> "If it compiles, it is good, if it boots up it is perfect". - Linus Linus Torvalds

Cursiva:

*Cursiva*

Negrita:

**Negrita**

Código:

``` [language]
Código en
varias líneas
```
Listas:

* Primer elemento
* Segundo elemento
* Tercer elemento

1. Primer elemento de la lista
2. Segundo elemento de la lista
3. Tercer elemento de la lista

Link:
[Reviblog](www.reviblog.net)

Imagen:

![Un gato](https://reviblog.net/wp-content/uploads/2018/06/IMG_20180608_104752.jpg)

Si seleccionamos la pestaña Preview changes obtendremos algo como esto:

 

Por último para que  los cambios en README.md  se hagan efectivos tenemos que hacer un commit,  podemos añadir una descripción al commit o dejar por defecto en cuyo caso la descripción del commit será “Create README.md” , después pulsamos en el Botón Commit  new File.

Por hoy lo dejamos aquí, ya hemos aprendido a crear un repositorio en GitHub y a importar nuestro proyecto local, también hemos aprendido a editar el archivo README.md.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

En el siguiente post seguiremos aprendiendo un poco más sobre GitHub.

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 3

En el siguiente enlace tienes el indice para acceder al resto de entradas de este tutorial:

Hola a todos, hoy vamos a continuar con el  tutorial de iniciación a Git, en el post anterior conocimos nuevos comandos de git, hoy vamos a seguir aprendiendo a utilizar esta herramienta:

Gitignore

Si tenemos archivos o carpetas dentro de la carpeta de nuestro proyecto que no queremos que sean gestionadas por git, como por ejemplo archivos que genera el propio IDE o editor que estamos utilizando, archivos compilados, o cualquier archivo que no necesitamos sincronizar tenemos que crear un archivo llamado .gitignore y dentro indicaremos los archivos y/o carpetas que no queremos que git procese.

Podemos utilizar * como comodín el el nombre de los archivos por ejemplo si queremos excluir todos los archivos que empiecen por config podemos utilizar config*.

A continuación vemos un ejemplo de un archivo .gitignore para un proyecto en java:

# Compiled class file
*.class

# Log file
*.log

# BlueJ files
*.ctxt

# Mobile Tools for Java (J2ME)
.mtj.tmp/

# Package Files #
*.jar
*.war
*.nar
*.ear
*.zip
*.tar.gz
*.rar

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*

Este ejemplo está sacado de la siguiente página de github donde podemos ver ejemplos de diferentes archivos .gitignore según el lenguaje de programación:

https://github.com/github/gitignore

Ramas: git branch

Una rama es una bifurcación o división dentro de tu proyecto donde puedes hacer cambios sin modificar la rama principal, esto nos permite por ejemplo probar cambios sin afectar al proyecto y después una vez comprobado que esos cambios funcionan correctamente  si queremos podemos incorporarlos a la rama principal.

Para crear una nueva rama utilizamos el siguiente comando:

git branch nombre_rama

nombre_rama es el nombre que le queremos dar a la nueva rama, por ejemplo si queremos desarrollar una nueva funcionalidad para nuestro proyecto le podemos dar el nombre de esa funcionalidad para identificarlo mejor.

Para probarlo vamos crear una nueva funcionalidad en nuestro proyecto que consiste en un archivo que muestre un listado de usuarios.

Para no alterar la rama principal y preservar esta tal y como está vamos a crear una nueva rama a la que vamos a llamar listado:

git branch listado

Con git log  a secas no vemos la creación de la nueva rama, para verlo podemos utilizar git log –oneline:

Vemos que en la primera linea nos muestra (Head -> master, listado).

Head -> master nos indica que la rama activa en estos momentos es la rama master, y separado por una coma nos indica que tenemos también la rama listado que acabamos de crear.

Si ejecutamos el comando git branch sin parámetros nos muestra las ramas que tenemos en nuestro proyecto y marca con color la rama activa en este momento:

Para cambiar a la rama que acabamos de crear utilizamos el comando git checkout:

git checkout listado

También podemos crear una nueva rama y hacer un checkout a la rama que acabamos de crear con una única sentencia:

git checkout -b nueva_rama ← esto crea la rama y cambia el control de git a la rama recién creada.

Ahora que la rama activa es listado para nuestra prueba vamos a crear un archivo al que vamos a llamar listado.html, de momento para este ejemplo no nos importa el contenido del archivo, podemos dejarlo en blanco.

Una vez creado el archivo lo añadimos:

git add .

Y  por ultimo hacemos el commit:

git commit -m "se ha anadido listado.html"

Si ejecutamos git status nos indica que estamos en la rama listado.

Como hemos comentado todos los cambios que realicemos en esta rama no afectarán a la rama principal.

Para volver a la rama principal solo tenemos que escribir:

git checkout master

Si hemos creado archivos en la rama que hemos creado al cambiar a la rama principal veremos que esos archivos desaparecen de la carpeta ya que todas las modificaciones que hagamos en una rama solo afectan a esa rama, de la misma manera los cambios que hemos realizado en la rama vuelven a aparecer cuando cambiamos a dicha rama.

Podemos crear tantas ramas como necesitemos en un proyecto.

Uniones: git merge

Si queremos unir los cambios de la rama secundaria que hemos creado con la rama principal tenemos que hacer un merge.

Primero nos situamos en la rama principal:

git checkout master

Ahora para unir las dos ramas utilizamos en comando merge de la siguiente manera:

git merge listado

Ahora todos los cambios que hayamos realizado en la rama listado estarán también en la rama principal (master), en este caso vemos que ahora tenemos el archivo listado.html también en la rama master.

Una vez hecho el merge podemos eliminar la rama listado con el siguiente comando:

git branch -d listado

Resolver conflictos al hacer Merge

Si creamos una rama y modificamos un archivo en esa rama, luego volvemos a la rama principal y modificamos ese mismo archivo, al tratar de hacer un merge git no nos dejará y nos informará de que hay un conflicto.

Vamos a verlo con un ejemplo:

Primero vamos a crear una nueva rama a la que vamos a llamar holamundo2:

git branch holamundo2

Situamos el control en la rama que acabamos de crear:

git checkout holamundo2

Ahora vamos a modificar el archivo holamundo.html, lo editamos y lo dejamos de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo de nuevo...</h1>
        <h2>Hoy es un buen dia para aprender Git</h2>
    </body>
</html>

Lo añadimos al stage:

git add .

Y hacemos el commit:

git commit -m "Hemos vuelto a modificar holamundo.html"

Ahora vamos a volver a la rama principal:

git checkout master

Y vamos a modificar holamundo.html desde la rama principal, por ejemplo lo dejamos de esta manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
        <h2>Hoy no me apetece aprender Git</h2>
    </body>
</html>

Una vez más lo añadimos al stage:

git add .

Y hacemos el commit:

git commit -m "Hemos vuelto a modificar holamundo.html"

Ahora tenemos el archivo holamundo.html con dos modificaciones diferentes en la rama master y en la rama holamundo2, vamos a ver que pasa si intentamos hacer un merge:

git merge holamundo2

Vemos que nos muestra un mensaje indicando que hay conflictos al hacer el Merge:

Si editamos el archivo holamundo.html vemos que nos ha añadido código indicando las lineas donde hay conflicto:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
<<<<<<< HEAD
        <h1>Hola mundo</h1>
        <h2>Hoy no me apetece aprender Git</h2>
=======
        <h1>Hola mundo de nuevo...</h1>
        <h2>Hoy es un buen día para aprender Git</h2>
>>>>>>> holamundo2
    </body>
</html>

Debemos resolver los conflictos antes de poder hacer el merge,  por ejemplo podemos dejar el archivo holamundo.html  de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
        <h2>Hoy es un buen día para aprender Git</h2>
    </body>
</html>

Ahora lo añadimos al stage:

git add .

Y hacemos el commit:

git commit -m "Hemos resuelto el conflicto con holamundo.html"

Ahora si hacemos un git merge holamundo2 nos muestra en mensaje “Already up to date.”, esto es porque ya hemos hecho la modificación manualmente.

Con git log –graph podemos ver gráficamente como se bifurcan y se vuelven a unir las ramas:

Tags

Los Tags o etiquetas los utilizamos para nombrar a los commits que realizamos. Por ejemplo lo podemos utilizar para nombrar las diferententes versiones del proyecto y así saber en que punto comienza una versión en concreto.

Para crear una etiqueta escribimos git tag nombre_tag.

Tenemos que saber que no nos permite utilizar espacios en blanco en el nombre que le damos a la etiqueta, podemos utilizar un guión “-” o una barra baja  “_” para separar las palabras.

Por ejemplo, vamos a realizar un último cambio a nuestro archivo holamundo.html, editamos su código y lo dejamos de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
        <h2>Hoy es un buen dia para aprender Git</h2>
        <p>Con este ejemplo tenemos lista la version 1.0</p>
    </body>
</html>

Supongamos que ya tenemos una versión de nuestro proyecto preparada, por ejemplo la versión 1.0. Podemos realizar un commit y etiquetarlo para saber que en este punto esta la versión 1.0 de nuestro proyecto.

Una vez más añadimos los cambios al stage:

git add .

Y hacemos el commit:

git commit -m "Hemos añadido un párrafo a holamundo.html"

Ahora vamos a añadir una etiqueta indicando que en este punto tenemos la versión 1.0 de nuestro proyecto:

git tag version_1.0

Si lo deseamos podemos poner varias etiquetas.

Si escribimos git tag nos  muestra todas las etiquetas que hemos utilizado.

Cuando hacemos un git log vemos la etiqueta o etiquetas que hemos añadido en el ultimo commit.

Podemos utilizar el tag para identificar el commit por ejemplo si queremos volver al estado de una versión anterior en lugar de utilizar su identificador podemos utilizar su tag.

Por ejemplo vamos a añadir una linea más a nuestro código en el archivo holamundo.html:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
        <h2>Hoy es un buen día para aprender Git</h2>
        <p>Con este ejemplo tenemos lista la versión 1.0</p>
        <p>Otra línea de código</p>
    </body>
</html>

Añadimos los cambios al stage:

git add .

Y hacemos el commit:

git commit -m "Hemos añadido otra línea a holamundo.html"

Ahora podemos volver al punto en que lo teníamos en la versión 1.0 utilizando su etiqueta en lugar del identificador:

git reset --hard version_1.0

Para eliminar un tag utilizamos git tag -d nombre_de_la_etiqueta

Con git show nombre_de_etiqueta podemos ver en detalle el contenido de ese commit y la diferencia con la versión actual.

Por ejemplo en este caso si ponemos:

git show version_1.0

Obtendremos algo como esto:

Podemos etiquetar un commit anterior utilizando su identificador.

Hacemos un git log –oneline y copiamos el identificador del commit que queremos etiquetar y utilizamos el siguiente comando:

git tag nombre_tag identificador

Por ejemplo:

git tag v.0.0.1 ba94ee2

Esto es todo por hoy, con los comandos que hemos aprendido hasta ahora ya podemos manejar un repositorio en git y aprovechar las ventajas que nos ofrece esta herramienta.

En el próximo post aprenderemos a utilizar un repositorio remoto para poder tener nuestros proyectos en Github y Gitlab

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 2

En el siguiente enlace tienes el indice para acceder al resto de entradas de este tutorial:

Hola a todos, hoy vamos a continuar con el  tutorial de iniciación a Git, en el post anterior vimos como instalar Git, como crear un repositorio local, como añadir archivos al stage, como confirmar los cambios haciendo un commit y como volver a un estado anterior.

Vamos a seguir aprendiendo a utilizar git:

Obtener información sobre un comando: git help

Con git help obtenemos información sobre un comando por ejemplo si queremos obtener información sobre el comando commit escribimos lo siguiente:

git help commit

Al escribir este comando se abrirá en nuestro navegador un documento con la documentación sobre el comando que queremos consultar:

Mostrar diferencias  entre los últimos cambios del archivo sin confirmar y la última versión del archivo que hicimos commit: git diff

Vamos a volver a editar nuestro archivo holamundo.html y vamos a realizar algún cambio, por ejemplo vamos volver a poner “Adiós mundo cruel…” en el h1 y a añadir una etiqueta h2 quedando de esta manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Adios mundo cruel...</h1>
        <h2>Era broma... ¡¡¡mucho mejor hola mundo!!!</h2>
    </body>
</html>

 

Ahora si ejecutamos el comando git status veremos que nos indica que se ha modificado el archivo holamundo.html.

Si ejecutamos git diff nos muestra la diferencia del archivo actual con el contenido de ese archivo en el último commit que hemos realizado:

Añadir un único archivo

En el post anterior vimos que con git add .  añadíamos todos los archivos que habíamos modificado o se habían creado nuevos al stage a la espera de hacer un commit para confirmar el paso definitivo al repositorio, sin embargo podemos indicar a Git que pase al stage solo cierto tipo de archivos:

Si solo queremos añadir un único archivo para hacer commit en lugar de git add . utilizamos git add nombre_archivo

Por ejemplo vamos a crear un archivo nuevo en nuestro proyecto llamado holamundo.js, de momento lo dejamos en blanco, para probar nos es suficiente, y también vamos a crear otro archivo que vamos a llamar holamundo.css, de momento lo dejamos en blanco también, en este momento en la carpeta de nuestro proyecto tendremos los siguiente archivos:

Si realizamos un git status nos indicara que holamundo.html  tiene cambios  y que holamundo.css y holamundo.js no estan siendo controlados pos Git todavía.

Con git add . pasaríamos todos los archivos al stage, pero si solo queremos pasar los cambios que hemos hecho en holamundo.html  utilizaremos el siguiente comando:

git add holamundo.html

Si ahora utilizamos el comando git status veremos que holamundo.html aparece en verde y esta listo para hacer un commit, sin embargo holamundo.js y holamundo.css siguen pendientes de ser pasados al stage:

Añadir al stage una carpeta

Para añadir al stage una carpeta simplemente utilizamos git add nombre_carpeta/

Por ejemplo vamos a crear una carpeta llamada assets en nuestro proyecto:

Si ejecutamos el comando git status vemos que no aparece la  nueva carpeta que hemos creado, esto es porque git ignora las carpetas vacías, si dentro creamos un archivo que se llame por ejemplo datos.txt y después volvemos a ejecutar git status veremos que ahora si muestra la carpeta assets:

Bien, ahora mismos tenemos pendientes de pasar al stage la carpeta assets y los archivos holamundo.css y holamundo.js.

Si solo queremos pasar la carpeta assets ejecutaremos el siguiente comando:

git add assets

Añadir al stage los archivos que tengan una cierta extensión

Si solo quieres confirmar los archivos que tengan una cierta extensión por ejemplo todos los .css podemos utilizar el asterisco  “*” como comodín de la siguiente manera: 

git add *.css

En este momento falta por pasar al stage holamundo.js y el resto esta pendiente de hacer un commit para confirmar el paso:

Quitar archivos que hemos añadido al stage:

Si hemos añadido un archivo (o varios) al stage se puede indicar que se retiren del stage con git reset nombre_del_archivo.

Por ejemplo, vamos a retirar del stage el archivo holamundo.css:

git reset holamundo.css

Si ahora volvemos a ejecutar git status vemos que holamundo.css ya no esta en el stage y ahora esta pendiente de ser añadido:

Al igual que con git add, con el comando git reset también podemos indicarle carpetas o la extensión del archivo/archivos que deseamos retirar del stage.

Agregar todos los archivos al stage

Para agregar todos los archivos al stage podemos utilizar git add .,  git add -A o también git add –all

Por ejemplo si queremos añadir todos los archivos que tenemos ahora pendientes podemos escribir el siguiente comando:

git add -A

Al volver a realizar un git status podemos ver que se han añadido todos al stage y están listos para hacer un commit:

Ver el histórico de todos los commit que hemos hecho: git log

Vamos a realizar un commit de los  archivos que tenemos ahora mismo en el stage, para ello escribimos como ya sabemos el comando git commit y le ponemos un mensaje para explicar los cambios que se han hecho.

git commit -m "Hemos realizado cambios en datos.txt, holamundo.css, holamundo.html, y holamundo.js"

Con git log vemos el histórico de todos los commit que hemos hecho, te los muestra en orden inverso, es decir el último commit aparece primero.

De momento tenemos solo dos commits así que nos los mostrará todos de una vez:

Si tenemos muchos commits y no caben todos en la pantalla te muestra solo los últimos y si pulsamos  la tecla enter vamos viendo los commits anteriores, cuando llegamos al primero pone (end). Para salir antes de llegar al primero tenemos que pulsar la letra Q.

Alias

Podemos crear alias para los comandos para acortarlos.

Por ejemplo podemos hacer que en lugar de escribir git status podamos escribir git s de la siguiente manera:

git config --global alias.s "status"

Recuerda que con –global le decimos que se aplique a todos los repositorios git que tengamos.

Ahora si escribimos git s obtendremos el mismo resultado que con git status.

Renombrar un archivo: git mv

Podemos renombrar un archivo directamente desde el navegador de archivos o desde nuestro editor de código, sin embargo está bien conocer que también podemos renombrar un archivo con el comando git mv.

Vamos a renombrar el archivo holamundo.js y lo vamos a llamar adiosmundo.js:

git mv holamundo.js adiosmundo.js

Podemos observar en la carpeta de nuestro proyecto que el archivo ha cambiado de nombre:

Si ejecutamos git status obtenemos lo siguiente:

Para que el cambio se haga efectivo tenemos que ejecutar un commit:

git commit -m "Hemos renombrado el archivo holamundo.js para llamarlo adiosmundo.js"

Borrar un archivo: git rm

Para eliminar un archivo podemos utilizar el comando git rm.

Por ejemplo vamos a eliminar el archivo holamundo.css:

git rm holamundo.css

Con esto habrá desaparecido nuestro archivo.

Para hacer efectiva la eliminación volvemos a hacer un commit.

git commit -m "Hemos eliminado holamundo.css"

Todo esto está muy bien, pero ¿que pasa si nos arrepentimos de de haber eliminado el archivo?

No te preocupes, en el siguiente punto vamos a ver como volver a un estado anterior.

Volver a un estado anterior: git reset

Si ejecutamos git log vemos que después de cada commit viene un id o identificativo con una serie de números y letras, algo parecido a esto:

commit 27b6e605decfd194e4f4ec627381156e9bbadf27

Este código nos sirve para identificar el commit.

Con git log –oneline vemos los comits de una forma simplificada, el código es más corto pero también nos vale para hacer un reset, podemos utilizar cualquiera de las dos formas.

Si por ejemplo hemos eliminado un archivo y queremos volver al punto anterior a eliminarlo buscamos en el log el código identificador del commit y utilizamos git reset –soft codigo_comit  o git reset –hard codigo_commit

Con –soft no recuperamos el archivo, solamente se sitúa en el stage en el momento en que eliminamos el archivo.

Con –hard volvemos al punto anterior a eliminar el archivo y el archivo vuelve a aparecer en el lugar en el que estaba antes de ser eliminado.

Por ejemplo vamos a recuperar el archivo holamundo.css que hemos eliminado situándonos en el commit anterior a borrarlo, esto sería en el commit donde hemos renombrado  holamundo.js como adiosmundo.js, copiamos el código identificador del commit  y escribimos:

git reset --hard 6cf7d1a76c51a2875e14d19ce1ecb78017b4fd94

Recuerda que tu tendrás que poner el código correspondiente al commit donde has renombrado el archivo que será diferente al que muestro.

Una vez realizado el reset podemos ver como por arte de magia ha vuelto a aparecer el archivo holamundo.css:

Al hacer un hard reset si posteriormente ejecutamos git log vemos que en el historial de cambios ya no aparece cuando borramos el archivo:

Si ejecutamos git reflog podemos ver el historial completo de cambios incluido aquellos que hayamos revertido con reset.

Por hoy lo vamos a dejar aquí, en el siguiente post seguiremos viendo conociendo más sobre git.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 1

En el siguiente enlace tienes el indice para acceder al resto de entradas de este tutorial:

Hola a todos, hoy os traigo un tutorial de iniciación a Git, donde vamos a aprender como empezar a utilizar Git y también GitHub y GitLab (Hay otros pero nosotros vamos a ver estás dos) intentando que la curva de aprendizaje sea lo más suave posible y tardes el menor tiempo posible en aprender.

 

Git

 

Introducción

Hoy en día para cualquier puesto de trabajo como desarrollador te van a pedir que sepas utilizar Git. Si eres freelance también es muy importante conocer Git para llevar el control de versiones de nuestros desarrollos.

¿Que es Git?

Git, es un sistema de control de versiones creado por Linus Torvalds, conocido por iniciar y mantener el desarrollo del kernel de Linux.
Al igual que Linux, Git es  software libre.

¿Que es un sistema de control de versiones?

Un sistema de control de versiones es una herramienta utilizada para gestionar ágilmente los cambios en el código fuente de los programas y poder revertirlos.
Su propósito es llevar registro de los cambios en archivos de computadora y coordinar el trabajo que varias personas realizan sobre archivos compartidos.

Es muy común si no utilizas un sistema de control de versiones el ir guardando las diferentes versiones de nuestros proyectos en carpetas diferentes tal vez con la fecha y hora  a modo de backup.

Esto puede ser válido para proyectos pequeños que no van a tener cambios importantes, pero a la larga resulta engorroso y es fácil cometer errores y sobrescribir carpetas por error… etc,  además es mucho más complicado cuando queremos volver a un estado concreto del proyecto.

Con un sistema de control de versiones si detectamos que un cambio que hemos realizado anteriormente está generando un error podemos revertir ese cambio y volver a un estado anterior. Además podemos crear ramas para probar cosas y si funcionan estos cambios como deseamos entonces volver a fusionarlas con la rama principal.

Veremos todo esto con ejemplos prácticos.

Existen otras herramientas para el control de versiones como Mercurial, CVS,  Subversion, etc, pero sin duda la mas popular a día de hoy es Git.

Instalando Git

Lo primero que necesitamos hacer es instalar Git en nuestra computadora.

Instalar Git en Windows

Vamos a https://git-scm.com/download y descargamos la versión para nuestro sistema operativo, en este caso Windows:

Descargar Git para Windows

Una vez descargado el instalador lo ejecutamos e instalamos Git seleccionando todos los valores por defecto,  ya sabes siguiente…siguiente…, no olvides que hay que leer lo que pone antes de darle a siguiente por si acaso ;-).

Al terminar le marcamos la casilla launch git bash para que nos abra el terminal de git.

Podemos utilizar git bash o el propio cmd del sistema.

Tambien se instala una aplicación llamada git GUI que nos ofrece una interface gráfica.

Cada vez que queramos abrir el terminal de git solo tenemos que ir al  menú de inicio de Windowa  y buscar Git, entre otras aplicaciones nos aparecerá Git Bash, esa es la consola de comandos de Git y es la que vamos a utilizar.

Una vez que hemos abierto  Git Bash, para comprobar que versión de Git tenemos instalada escribimos el siguiente comando:

git --version

Si todo esta instalado correctamente veremos algo como esto:

Instalar Git en Mac

Aunque existén varias formas de instalar git en mac, mismamente desde el terminal, para hacerlo sencillo y asegurarnos de que tenemos la ultima versión estable vamos a descargar el instalador de git para mac de su página oficial. Para ello visitamos  https://git-scm.com/download y descargamos la versión para Mac OS X:

Una vez descargado damos doble click sobre el archivo y nos mostrará el instalador, pinchamos con el botón derecho sobre el archivo .pkg y le decimos que lo abra con el instalador y le damos a instalar. Nos pedirá la contraseña de usuario para poder instalarlo.

Una vez instalado desde el terminal escribimos git –version para comprobar la versión instalada.

Instalar Git en Ubuntu y derivados

Para instalar Git en ubuntu es muy sencillo, solo tenemos que seguir los siguientes pasos:

Primero actualizamos los repositorios, para ello abrimos un terminal y escribimos el siguiente comando:

sudo apt-get update

Una vez se han actualizado los repositorios instalamos git con el siguiente comando:

sudo apt-get install git

En ubuntu utilizaremos el propio terminal del sistema para trabajar con git.

Si utilizas otra distribución de linux puedes consultar como instalar git en la sección de descargas linux de la propia web de git.

Para comprobar que se ha instalado correctamente escribimos en el terminal git –version y nos mostrará la versión de git instalada.

Configurando un usuario

Una vez que tenemos instalado git lo primero que tenemos que configurar es el usuario que va a utilizar el repositorio en esta máquina, para ello debemos le vamos a indicar un nombre y una dirección de correo, esto lo hacemos con el siguiente comando desde consola:

git config --global user.name "nombre_usuario"
git config --global user.email "email_usuario"

Por ejemplo:

git config --global user.name "EduRevilla"
git config --global user.email "edu.revilla.vaquero@gmail.com"

Con git config –global -l podemos ver estos valores:

Estos datos se pueden sobrescribir volviendo a ejecutar los comandos anteriores.

El parámetro –global  indica que vamos a utilizar este usuario en todos los repositorios que utilicemos, es decir si tenemos varios proyectos gestionados por Git en nuestro ordenador estos usarán este usuario.

Si queremos utilizar otro nombre de usuario y otro email en un directorio concreto utilizaremos el comando git config pero usando el parámetro –local en lugar de –global.

Creando un repositorio en Git

Un repositorio es un sitio centralizado donde se almacena y mantiene información digital, por ejemplo todos los archivos y carpetas que componen un proyecto, y que puede estar almacenado localmente, es decir en tu propio equipo o remotamente.

Un repositorio remoto es una versión de tu proyecto que se encuentra alojado en Internet o en algún punto de la red.

Vamos a ver como crear un repositorio local con un ejemplo básico.

Vamos a crear un proyecto web, para ello creamos una carpeta en el lugar que prefiramos dentro en nuestro equipo y le llamamos por ejemplo proyectoGit1:

Entramos dentro de la carpeta que acabamos de crear y creamos un archivo que en un alarde de originalidad le vamos a llamar holamundo.html :

Editamos nuestro archivo holamundo.html y le añadimos un poco de html básico:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
    </body>
</html>

Bien, este va a ser nuestro punto de partida.

Ahora vamos a la consola de comandos y navegamos hasta la carpeta proyectoGit1 que acabamos de crear.

Una vez dentro de la carpeta proyectoGit1 vamos a crear un repositorio local con el siguiente comando:

git init

Nos mostrará un mensaje parecido a este: “Initialized empty Git repository in…” y la ruta del proyecto.

Esto creará una carpeta oculta llamada .git dentro de nuestro proyecto y es la carpeta que utilizará git para gestionar nuestro repositorio.

Las carpetas que empiezan por un punto se consideran ocultas y algunos sistemas operativos no las muestran.

Desde consola podemos ver los archivos y carpetas ocultos con el comando ls -a.

Si queremos dejar de utilizar git en nuestro proyecto solamente tenemos que eliminar la carpeta .git.

Para volver a utilizar git tendríamos que volver a ejecutar git init.

Estado de los archivos: git status

Para conocer el estado de nuestros archivos utilizamos el siguiente comando:

git status

Si ejecutamos este comando en estos momentos obtendremos lo siguiente:

Lo primero que vemos es “On branch master” esto significa que estamos en la rama principal, es la rama por defecto cuando creamos un repositorio.

Vemos en rojo holamundo.html nos avisa de que no hemos añadido ningún archivo para ser gestionado por git.

Git tiene dos procesos para gestionar nuestros archivos. Primero los tenemos que añadir a una zona intermedia conocida como stage y después tenemos que confirmar el paso  definitivo de los archivos al repositorio.

Añadir archivos: git add

Para añadir los archivos de nuestro proyecto utilizamos el siguiente comando:

git add .

“Hay que dejar un espacio entre add y el punto”

Con este comando le decimos a git que pase todos los archivos que estén sin pasar al stage.

Si ahora volvemos ejecutar el comando git status obtendremos algo como esto:

Nos informa de que no hay “commits todavía” y vemos que holamundo.html ahora aparece en verde, esto significa que holamundo.html ya se encuentra en el stage y debemos confirmarlo para que pase definitivamente al repositorio.

Confirmar los archivos: git commit

Para confirmar estos archivos y que pasen al repositorio final utilizamos en siguiente comando:

git commit -m "Commit Inicial"

Utilizamos el parámetro -m para indicarle una descripción del commit que vamos a hacer, en este caso le decimos que es el commit inicial.

Si no indicamos el parámetro -m se abrirá un editor de código de terminal (vim).
Para guardar el mensaje que escribamos pulsamos la tecla escape y escribimos :wq

Si volvemos a ejecutar el comando git status obtendremos este mensaje:

Esto significa que no hay nada para confirmar, es decir que todos los archivos se encuentran ya en el repositorio.

Ver los cambios realizados: git log

Para ver los las operaciones que hemos realizado utilizamos el siguiente comando:

git log --oneline

En estos momentos esto nos mostrará lo siguiente:

El primer conjunto de letras y números que vemos a la izquierda es el id del commit, utilizaremos este identificativo más adelante para poder volver a un estado anterior.

Después entre paréntesis nos indica que nos encontramos en la rama principal(master).

Por último nos muestra el mensaje que le pusimos al commit.

Rectificar commit: git commit –amend

Si nos hemos equivocado al escribir el mensaje al hacer el commit podemos rectificar utilizando el parametro –amend de la siguiente manera:

git commit --amend -m "Nuevo mensaje corregido para el commit"

Volver al un commit anterior: git checkout id_commit

Una de las grandes ventajas de utilizar git es que podemos volver a un estado anterior. Imaginemos que hemos realizado cambios en nuestro proyecto y nos da un error que hace que nada funcione,  no conseguimos saber que es lo que falla y queremos volver al estado anterior donde todo funcionaba, es una situación terrorífica pero bastante común. con el comando git checkout podemos volver a un estado anterior.

Para probarlo vamos a realizar cambios en nuestro archivo  holamundo.html, vamos a editarlo y a dejarlo de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Adiós mundo cruel...</h1>
    </body>
</html>

Bien, ahora en lugar de “Hola mundo” tenemos una etiqueta <h1> que dice “Adios mundo cruel…”.

Si ahora ejecutamos el comando git status nos avisa de que ha habido cambios en holamundo.html, por lo tanto debemos pasarlo al stage y hacer un commit, para ello tal y como hemos visto antes ejecutamos los siguientes comandos, primero lo añadimos al stage:

git add .

Y después hacemos el commit:

git commit -m "Hemos modificado holamundo.html"

Ahora si ejecutamos git log –oneline obtenemos lo siguiente:

Tenemos dos commits, el inicial y la última modificación.

Si nos hemos hemos arrepentido del último cambio que  hemos realizado podemos volver al estado anterior con el siguiente comando:

git checkout ffd325d

El valor Hexadecimal que va después de checkout es el identificador del commit al que queremos regresar, en este caso el del commit inicial.

Al ejecutar el checkout comprobaremos como nuestro archivo holamundo.html ha regresado al estado inicial, ahora vuelve a decir “Hola mundo” en lugar de “Adiós mundo cruel…”.

Si he han eliminado archivos de nuestro proyecto al volver a un commit anterior estos volverán a aparecer, al mismo tiempo si se han añadido archivos nuevos, al volver a un estado anterior estos desaparecerán. Es decir volveremos a tener una copia exacta de lo que teníamos en el momento de realizar el commit al que vamos a regresar.

Por no hacer este post demasiado largo por hoy lo dejamos aquí, en el siguiente post seguiremos aprendiendo más sobre esta maravillosa herramienta.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial: