Personalizando mi aplicación Ionic con Sass

Hola a todos.
Con este artículo vamos a terminar con una serie de posts sobre como crear una aplicación híbrida con Ionic y Firebase como tu backend en la que hemos visto cómo configurar nuestra aplicación con servicio de autenticación contra un servidor Firebase, y como personalizarla utilizando los estilos proporcionados por Ionic.

Si has leido mi artículo Personalizando mi aplicación Ionic, en él, comenzamos a modificar el estilo de la aplicación utilizando los estilos proporcionados por Ionic. Pero …

¿Qué pasa si quieres modificar tus propios estilos con tus colores corporativos, fuentes etc…?

Pues bien, si lo que queremos es crear nuestros propios estilos, debemos editarlos con Sass. Te dejo mi artículo sobre Cómo instalar Sass si aún no lo has instalado donde te doy unos primeros pasos para empezara a utilizarlo.

Para comenzar descárgate la aplicación en https://github.com/cookyourweb/Ionic-Firebase-Starter-App-Changed-Styles y sigue las instrucciones de instalación.Leer más

Personalizando mi aplicación Ionic

En éste artículo vamos a ver como empezar a cambiar nuestros estilos de la aplicación Ionic que creamos en el artículo anterior: Cómo crear una aplicación híbrida con Ionic y Firebase

Para comenzar vamos a descargarnos la aplicación. Si no la tienes creada aún.
Esta aplicación es una plantilla básica proporcionada por Ionic que cuenta con un sistema de pestañas y al que le hemos añadido un login que conecta con un servidor Restful Firebase. Puedes descargártela de mi cuenta de Github: https://github.com/cookyourweb/Ionic-Firebase-Starter-App

Sigue las instrucciones para poder instalártela:

Abre un terminal en modo administrador e instala el Ionic si aún no lo tienes instalado con la siguiente instrucción:
Sitúate en el directorio donde quieres instalarlo

npm install -g ionic cordova

ionic start myIonicFirebaseApp tabs

Leer más

Cómo crear una aplicación híbrida con Ionic y Firebase

Hola a todos, para empezar con ésta artículo os voy a decir que es esto de una aplicación híbrida.

Una aplicación híbrida es aquella que puede servir con la misma programación para fabricar aplicaciones con el mismo Look & Feel que una aplicación nativa(Android e Ios) pero que está programada al más estilo web (HTML5, CSS3, Angular).

Vamos a utilizar para este ejemplo dos plataformas muy punteras que están siendo utilizadas para éste fin y que con un poco de conocimientos web, puedes llegar a utilizar sin problemas para tu aplicación.

El Framework Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.Es un Front-end SDK para aplicaciones móviles.

El Firebase es la nueva y mejorada plataforma de desarrollo móvil en la nube de Google. Se trata de una plataforma disponible para diferentes plataformas (Android, iOS, web). Fue comprada por Google en el 2014 y han estado mejorándola desde entonces
firebase-ionic-ios-android
Firebase es una plataforma de backend para construir aplicaciones móviles y web. Entre sus características se incluye base de datos de tiempo real, autenticación de usuarios y almacenamiento (hosting) estático.

Con ésta breve introducción vamos a ponernos manos a la obra, para que podáis apreciar el poder de estas dos herramientas utilizadas juntas y como nos facilitan la vida a los desarrolladores.

¿Qué vamos a hacer en éste artículo? Vamos a crear una aplicación con autenticación

  1. Vamos a instalar el Ionic una vez tenemos configurado nuestro SDK en nuestro equipo.
  2. Nos vamos a dar de alta en Firebase y vamos a configurar nuestro acceso.
  3. Creamos nuestra aplicación con el Ionic.
  4. Conectamos el Ionic con el Firebase.

Leer más

Como instalar Cordova.

Qué es Cordova

Cordova es un conjunto de herramientas que permiten crear aplicaciones nativas mediante HTML5. Es lo que llamamos aplicaciones híbridas.

Requisitos del Cordova

Para instalar Cordova, lo primero que vamos a necesitar es tener intalado Node.js y utilizaremos el gestor de paquetes NPM

Si no lo tienes aún en mi artículo como instalar Node en Mac o cómo instalar Node en Windows
Una vez que ya tienes tu entorno de desarrollo preparado, vamos a a instalarnos el Cordova con linea de comandos.

Con Cordova podras crear una aplicación que se vea en cualquier dispositivo con simplemente saber HTML, Css y Javascript.

Pasos para crear tu primera aplicación movil con Córdova.

  1. Descargamos Cordova con linea de comando

    A continuación nos vamos a descargar Cordova , que no es mas que la versión de desarrollo Opensource de PhoneGap.

    Para ello, abre un terminal en modo administrador.

    En windows cmd en modo administrador.

    A continuación inserta la siguiente instrucción para descargarte el Cordova.

    npm install -g cordova
  2. Leer más