Guia II
Guia II
Guia II
Que el estudiante:
Introducción
¿Que es IONIC?
Ionic Framework es un SDK de frontend de código abierto para desarrollar aplicaciones híbridas
basado en tecnologías web (HTML, CSS y JS). Es decir, un framework que nos permite desarrollar
aplicaciones para iOS nativo, Android y la web, desde una única base de código. Su
compatibilidad y, gracias a la implementación de Cordova e Ionic Native, hacen posible trabajar
con componentes híbridos. Se integra con los principales frameworks de frontend, como
Angular, React y Vue, aunque también se puede usar Vanilla JavaScript. Este framework fue
creado en 2013 por Drifty Co. y hasta la llegada de React Native ha sido una de las tecnologías
líderes para el desarrollo de aplicaciones móviles híbridas.
Instalar NodeJS
En primer lugar tenemos que instalar en gestor de paquetes de NodeJs (npm) para poder
instalar el propio Ionic y algunas otras dependencias que nos harán falta. Para instalarlo
simplemente podemos descargarlo e instalarlo desde su Web:
https://nodejs.org/es/download/
Además también es posible que queráis usar Gulp, Bower o SASS, aunque su
instalación es opcional sí que se recomiendan ya que os ayudarán mucho en el
desarrollo de este tipo de aplicaciones:
npm install -g gulp
npm install -g bower
npm gem install sass
¿Qué es SASS? SASS es un metalenguaje de CSS que nos permite programar hojas de
estilo usando variables, reglas CSS anidadas, mixins (facilitan la definición de estilos
reutilizables), importación de hojas de estilos y muchas otras características. Ionic
incluye los fuentes de sus hojas de estilos en SASS, así que podemos aprovechar para
modificarlas usando este lenguaje. Para mas información consultad: http://sass-
lang.com/
Creando el Proyecto
Para poder crear un nuevo proyecto debemos de tener en cuenta en donde lo queremos
almacenar, para esto es muy importante movernos dentro de nuestra terminal o CMD,
usaremos comandos comandos básicos así que no te preocupes, te dejo algunos comandos
que debes de tener en cuenta.
Comandos Descripción Sistema Operativo
ls Listar Elementos MacOS / Distros GNU/Linux
dir Listar Elementos Windows
cd Cambio de directorio Todos
clear Limpiar terminal MacOS / Distros GNU/Linux
cls Limpiar terminal Windows
pwd Ruta absoluta actual MacOS / Distros GNU/Linux
chdir Ruta absoluta actual Windows
Una vez hayamos pensado en donde queremos almacenar nuestro proyecto, debemos
de saber donde nos encontramos dentro de nuestra terminal, regularmente siempre
nos ubica en nuestra carpeta personal o la del usuario que inició sesión, si queremos
asegurarnos en donde nos encontramos debemos de usar el comando pwd o en su
defecto chdir dependiendo el sistema operativo en donde nos encontremos, si después
de presionar enter nos muestra algunas carpetas conocidas como Escritorio o Desktop
o Documentos o Descargas entonces nos encontramos en nuestra carpera personal, y
ahí quedará de nosotros elegir en donde queremos almacenar el proyecto.
Para este ejemplo elegiré crear mi proyecto en el Escritorio, para esto debo de usar el
comando para cambiar de directorio "cd" seguido del nombre de la carpeta a donde nos
dirigimos "Escritorio" quedaría así:
NOTA: debemos de cuidar que el nombre de la carpeta esté bien escrito, respetando
mayúsculas, o de igual manera podemos apoyarnos del Tabulador para autocompletar
lo que estemos escribiendo.
Si usamos únicamente este comando el CLI nos brindará los pasos que debemos de
seguir, como ingresar el nombre de nuestro proyecto, si queremos usar un template al
momento de iniciar nuestro proyecto, y también el Framework que deseaos usar con
Ionic.
Elegimos el tipo de proyecto que queremos generar (Tbas, Menu, List) en el recuadro
App Name, escribiremos el nombre del proyecto, luego procedemos a dar clic en
continue y nos presentara el login de nuestra cuenta de github para guardar el proyecto
en nuestro repositorio.
Si ya tenemos en mente el nombre de nuestro proyecto podemos hacer la ejecución en
una sola línea simplemente agregando otros parámetros como lo indico a continuación:
Muy bien ya nos encontramos en la carpeta, es momento de crear el proyecto, para esto
usaremos el comando:
Templates Descripción
blank Crea un Proyecto sin Template.
tabs Crea un proyecto con tres vistas donde puedes navegar entre ellas muy fácil.
sidemenu Crea un proyecto con un menú lateral
Crear formulario de login y validación en IONIC
1- Crear un proyecto en blanco con el siguiente comando en IONIC
Ionic start “nombre del proyecto” “tipo de proyecto”
En nuestro caso como crearemos un login este será el nombre del proyecto y el tipo
del proyecto es en blanco
Ionic start login black – presionamos la tecla
Seleccionamos angular
Nos dirigimos a la carpeta de nuestro proyecto:
cd login – presionamos la tecla enter
Dentro del directorio ejecutamos el siguiente comando
• login.module.ts
• login.page.html
• login.page.scss
• login.page.spec.ts
• login.page.ts
Donde solo vamos a trabajar el archivo login.page.html para crear nuestro formulari, pero para
que nuestra aplicación nos muestre la pagina principal nuestro formulario login debemos
realizar el siguiente cambio en le archivo src/app/app-routing.module.ts
Agregando los componentes en la pagina de login crearemos nuestro formulario para iniciar
sesión
<ion-header>
<ion-toolbar>
<ion-title>iniciar Sesión</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="stacked">Dirección de correo:</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item><ion-label position="stacked">Contraseña:</ion-label><ion-input></ion-
input></ion-item>
<ion-button color="light" expand="full">Entrar</ion-button>
</ion-content>
Para iniciar con las validaciones en ionic, necesitamos importar dos librerías de angular form
en nuestro archivo src/app/login/login.page.ts