Programando con Rupert

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

Tag: App (page 2 of 2)

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.

Entradas posteriores

© 2020 Programando con Rupert

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