Programando con Rupert

Cuando la programación es una forma vida...

Month: agosto 2015

Ionic Framework: Primera aplicación

¡Hola de nuevo! En los dos últimos artículos escribí acerca de la instalación de Ionic Framework y pudimos ver la estructura de un proyecto. En este artículo vamos a crear la primera aplicación con Ionic.

Objetivo de la aplicación

La aplicación que vamos a desarrollar pedirá un nombre de usuario mediante una caja de texto. Si el nombre no está vacío y tiene más de cuatro caracteres imprimirá un mensaje en pantalla “El usuario [NombreDeUsuario] se ha registrado correctamente.“.

La aplicación tendrá un Footer que indicará “Primera Aplicación“.

NOTA: Los componentes que se utilizarán en los ejemplos se pueden examinar en la siguiente dirección: http://ionicframework.com/docs/components/

Creación del Proyecto

Para crear el proyecto abrimos la consola de Node.js y escribimos:

ionic start PrimeraAplicacion blank

Y en la carpeta de la aplicación ejecutamos la siguiente instrucción para manejar el archivo scss:

ionic setup sass

El archivo scss/ionic.app.scss

Este archivo indica las variables por defecto aplicadas a los estilos de la aplicación. Existen una serie de clases en Ionic (bar-stable, bar-royal, bar-positive…) que toman sus colores de este fichero. Nosotros, por supuesto, podemos sobrescribirlos.

La variable que indica el “color” de la aplicación es la variable $positive. Voy a establecer el color positivo a #026735.

El archivo www/index.html

En este fichero estableceremos el HTML de la aplicación. Lo primero va a ser añadir la cabecera y el footer a la pantalla. Después incluiremos los elementos de contenido de la pantalla.

Cabecera

Para añadir una cabecera, se ha de añadir una etiqueta ion-header-bar

<ion-header-bar class=”bar-positive”>
<h1 class=”title”>Programando con Rupert</h1>
</ion-header-bar>

Footer

El footer es un div que ha de tener la clase bar-footer junto con la clase de color que nos interese:

<div class=”bar bar-footer bar-dark”>
<div class=”title”>Primera Aplicación</div>
</div>

Contenido

El contenido de la pantalla se ha de establecer dentro de la etiqueta ion-content. A partir de aquí se puede establecer el HTML que queramos. Aunque Ionic ya incluye una serie de estilos que podemos encontrar en la URL mencionada anteriormente.

En este punto ya tenemos el HTML estructurado, es momento de añadirle funcionalidad

El archivo www/js/main.js

En este ejemplo voy a crear un fichero main.js para separar las funcionalidades de mi aplicación, pero se puede trabajar sin problemas sobre el fichero app.js

Por último, añadimos la referencia a main.js desde index.html

<script src=”js/main.js”></script>

Y añadimos el evento onclick al botón

<button class=”button button-positive” onclick=”Registrar()”>
Registrar
</button>

Probar la aplicación

Para probar la aplicación, desde la consola de Node.js, y ubicados en la carpeta del proyecto, ejecutamos:

ionic serve –lab

Con este artículo ya hemos metido un poco el hocico en el modo de trabajo con Ionic. En siguientes artículos nos centraremos en las diferentes características de Ionic Framework y sus componentes.

¡Hasta la próxima!
Rupert.

Ionic Framework: IDE y Estructura de un Proyecto

¡Hola de nuevo! Hace unos días escribí una pequeña introducción a Ionic Framework, explicando el proceso de instalación y cómo probar un proyecto.

En este artículo os voy a hablar de uno de los entornos de desarrollo que se pueden utilizar para trabajar con Ionic y vamos a analizar la estructura de un proyecto.

Entorno de Desarrollo

Realmente se puede utilizar cualquier IDE que permita trabajar con proyectos Cordova. Entre otros, tenemos el Eclipse, el Android Studio, NetBeans, Visual Studio, PHPStorm

Para trabajar con estos artículos yo voy a utilizar el WebStorm, ya que estamos hablando de un IDE bastante robusto, completo e intuitivo.

Plantillas de Proyecto

A la hora de crear un proyecto, se le puede especificar una de las plantillas starter predefinidas que tiene Ionic para empezar a trabajar desde ahí.

ionic start ProgramandoConRupert blank

ionic start ProgramandoConRupert tabs

ionic start ProgramandoConRupert sidemenu

Estructura de un proyecto

A modo de introducción para los proyectos de Ionic Framework, vamos a analizar rápidamente los elementos más importantes que nos encontramos en un proyecto básico (blank)

Ficheros

  • bower.json – Dependencias de Bower
  • config.xml – Configuración de Apache Cordova
  • gulpfile.js – Tareas Gulp
  • ionic.project – Configuración de Ionic
  • package.json – Dependencias de Node.js

Carpetas

  • hooks – Hooks de Cordova para ejecutar comandos personalizados
  • plugins – Carpeta donde se instalarán los plugins de Cordova e Ionic
  • scss – Código scss, cuya salida escribirá en www/css
  • www – Archivos de la aplicación: HTML, Javascript y css

Y con esto que hemos visto ya conocemos un poquito más los proyectos de Ionic y los elementos más importantes que nos vamos a encontrar en los proyectos. En los siguientes artículos comenzaremos a trabajar con estos proyectos para empezar a crear aplicaciones móviles.

¡Hasta la próxima!
Rupert.

Comenzando con Ionic Framework

Bueno, bueno, bueno! Después de unos meses ya era hora de desempolvar el blog y continuar escribiendo, que ya me hacía falta 😉

Esta vez vengo a hablaros de un framework que me está gustando especialmente: Ionic Framework

¿Qué es Ionic?

Ionic es un SDK basado en HTML5 y su objetivo es facilitar el desarrollo y distribución de aplicaciones nativas para dispositivos móviles. ¿Cuál es su característica principal? Que es capaz de trabajar con las funcionalidades específicas de los diferentes sistemas operativos (Android, iOS…) empleando tecnologías intuitivas y amigables como HTML, CSS y Javascript.

A pesar de que se puede trabajar perfectamente sólo con CSS y HTML, Ionic utiliza AngularJS para lograr el máximo rendimiento.

Instalación de Ionic

1. Instalar Node.js

Para gestionar los paquetes necesarios, vamos a utilizar Node.js. Así que si no lo tenemos instalado, lo primero que tenemos que hacer descargarlo e instalarlo desde: https://nodejs.org/

2. Instalar Apache Cordova

Una vez instalado Node.js, es necesario instalar Apache Cordova, que básicamente es un conjunto de APIs que permiten acceder a las funcionalidades nativas (sensores, cámara, teléfono…) desde Javascript.

Para ello, accedemos a la consola (Command Prompt) de Node.js

Cuando estemos en la consola, nos ubicamos en la carpeta de trabajo que queramos:

Y finalmente instalamos Apache Cordova escribiendo la siguiente instrucción:

OS = Windows
npm install -g cordova

OS != Windows
sudo npm install -g cordova

3. Instalar Ionic

Cuando hayamos instalado Apache Cordova, es momento de instalar Ionic Framework. Para ello, desde la misma consola de Node.js, ejecutamos la siguiente instrucción:

OS = Windows
npm install -g ionic

OS != Windows
sudo npm install -g ionic

4. Instalar Gulp

Teniendo ya Ionic instalado, y de cara a trabajar con los archivos .scss, es necesario instalar Gulp y sus dependencias. Para ello, desde la misma consola de Node.js, ejecutamos la siguiente instrucción:

OS = Windows
npm install -g gulp
npm install -g sass
ionic setup sass

OS != Windows
sudo npm install -g gulp
sudo npm install -g sass
ionic setup sass

Creación de un proyecto de prueba

Para crear un proyecto nuevo con Ionic Framework, desde la consola de Node.js ejecutamos la siguiente instrucción (NOTA: Esta instrucción creará la carpeta del proyecto, por lo que es necesario ubicarnos en la carpeta de trabajo)

ionic start programandoConRupert tabs

Al ejecutarlo, nos preguntará si queremos crear una cuenta de ionic.io para enviar notificaciones Push y utilizar la App Ionic View.

Para este ejemplo voy a responder que No. En posteriores artículos trabajaremos con dicha App.

Al terminar la ejecución tendremos ya el proyecto en nuestra carpeta de trabajo.

Por último, para comprobar que nuestro proyecto funciona correctamente, ejecutamos la siguiente instrucción, que creará una URL que servirá de emulador para iOS y Android. Se debe lanzar desde la carpeta del proyecto:

ionic serve –lab

Esto abrirá automáticamente el navegador con la visión de prueba en los dos sistemas operativos:

Con esto ya hemos visto cómo instalar Ionic Framework y cómo crear un proyecto de prueba. En los siguientes artículos explicaremos más a fondo las opciones de proyecto que tenemos y cómo trabajar con ellas.

¡Hasta la próxima!
Rupert.

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑