como crear una aplicacion hibrida ionic firebase

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.

Cómo crear una aplicación hibrida con Ionic y Firebase

Para comenzar, tenéis que tener creado vuestro entorno de desarrollo, y para ello lo primero es instalarse el Node.js. Si no lo tienes instalado aquí te explico como instalar el Node.js
Una vez configurado este entorno vamos a seguir estos pasos tras abrir un terminal en modo administrador.

  1. Instalamos Ionic y Cordova

    Abro de nuevo el terminal en modo administrador, y lo instalo con la siguiente instrucción:
    Sitúate en el directorio donde vas a instalar tu aplicación. En mi caso esta en:

    cd C:\git\cookyourweb\ionic-firebase

    Instala el Ionic y el Cordova:

    npm install -g ionic cordova
    Instalamos Ionic y Firebase

    Instalamos Ionic y Firebase

    A continuación comprobamos la versión con las siguientes instrucciones:

    Versiones de Cordova e Ionic instaladas

    Versiones de Cordova e Ionic instaladas

    En mi caso en el momento de éste tutorial es Ionic 2.01 beta y Cordova 6.3.1

  2. Nos damos de alta en Firebase.

    Para darte de alta puedes hacerlo desde aquí https://www.firebase.google/ Al ser de Goolge para darte de alta debes facilitar tu usuario de google.
    Debes de tener en cuenta que esta aplicación tiene su versión gratuita “Spark” que tiene todo lo necesario para tener una aplicación profesional funcionando y solo en función de que tu aplicación tenga mucho éxito ya se empieza a pagar por uso.
    Al ser una aplicación de de google para darte de alta necesitarás una cuenta gmail.

    Regístrate en Firebase.

    Primero regístrate en Firebase

    Primero regístrate en Firebase


    Crea un nuevo proyecto.
    Segundo- Crea un nuevo proyecto

    Segundo.Crea un nuevo proyecto


    Dale nombre al proyecto.
    Dale el nombre a tu proyecto

    Dale el nombre a tu proyecto


    Empieza a utilizarlo.
    Empieza a utilizarlo, selecciona la plataforma, en mi caso es Web

    Empieza a utilizarlo, selecciona la plataforma, en mi caso es Web

    Codigo que vamos a insertar en nuestra aplicación:

    Copia codigo para pegarlo en tu aplicación

    Código que vamos a necesitar para nuestra en aplicación

    Como vamos a crear una aplicación con autenticación a través del correo electrónico, tenemos que habilitarlo, para ello haz clic en el menu izquierdo “Auth:

    Dale permiso

    Menu izquierdo Auth


    Ahora selecciona método de inicio de sesión:

    Selecciona y habilita el correo electrónico

    Selecciona y habilita el correo electrónico

  3. Creamos nuestra aplicación básica Ionic

    Para tus primeros pínitos y pruebas con Ionic, símplemente sigue las instrucciones que te facilita la página de Ionic donde puedes crear tres tipos de aplicaciones, http://ionicframework.com/getting-started La plantilla en blanco, la plantilla con pestañas o la plantilla con menú deslizante.

    Volvemos al directorio donde queremos crear nuestra aplicación con el terminal.
    Sitúate en el directorio donde quieres trabajar.

    cd C:\git\cookyourweb\ionic-firebase

    Vamos a crear una aplicación que voy a llamar myIonicFirebaseApp de tipo Tabs creada con pestañas.

    
    ionic start myIonicFirebaseApp tabs
    Instala la aplicación predefinida con pestañas

    Instala la aplicación predefinida con pestañas

    Una vez instalada vamos a configurar las plataformas Ios y Android

    Ya tienes tu aplicación predefinida. Sigue las instrucciones

    Ya tienes tu aplicación predefinida. Ahora instalaremos las plataformas

    En este punto debes de tener en cuenta que si trabajas en un Windows no podrás visualizar la plataforma Ios.
    Instalamos la plataforma android
    Primero sitúate en el directorio de tu aplicación que en mi caso es myIonicFirebaseApp

    cd  myIonicFirebaseApp

    Añadimos plataforma Android

    ionic platform add android
    Instalando Android

    Instalando Android

    A continuación instalaremos Ios, aunque en mi caso al ser un Windows no voy a poder probarlo.

    ionic platform add ios
    Instalando Ios

    Instalando Ios

    A continuación vamos a simular la aplicación en un dispositivo móvil. Para ello lo podemos hacer a través del navegador web con la siguiente instrucción

    ionic serve --lab

    Con esta instrucción se te abrirá en tu navegador la simualación con la ventaja de ver como queda tanto para Ios, como para Android.

    Emulando tu aplicación en el navegador

    Emulando tu aplicación en el navegador

    Para simular tu aplicación como si fuera un dispositivo real, lo puedes hacer con la siguiente instrucción.
    Sal de tu simulación con la tecla q

    Sal de tu simualacíon con la tecla q

    Sal de tu simualacíon con la tecla q


    Introduce la siguiente instrucción:

    ionic run android

    En éste punto deberás tener configurado tu android-sdk , si no lo tienes en éste artículo te explico cómo hacerlo.

    Dispositivo Android recreado con tu aplicación

    Dispositivo Android recreado con tu aplicación

    Si quisieras hacer lo mismo bajo Ios, tendrías que insertar lo siguiente:

    ionic build ios

    Para simularlo en el dispositivo real:

    ionic emulate ios
  4. Conectamos la aplicación Ionic con Firebase.

    Una vez configurada y creada nuestra aplicación y teniendo nuestra cuenta Firebase, solo nos queda insertar el código generado, en nuestra aplicación para conectarlos.

    Para ello abre la carpeta de la aplicación con un editor de texto. Yo en mi caso voy a utilizar Brackets

    Abre tu proyecto con Brackets

    Abre tu proyecto con Brackets

    A continuación despliega la carpeta www que es la que contiene la aplicación para modificar.

    Abrimos el index.html e insertamos de el código que hemos copiado en nuestro Firebase, solo el que hace referencia al script firebase.

    En el Index, insertamos el código

    Selecciona solo la parte del script de Firebase y pégalo en el Index

     https://www.gstatic.com/firebasejs/3.4.1/firebase.js
    Enlace al Javascript de Firebase

    Enlace al Javascript de Firebase

    A continuación, abre el app.js dentro del directorio js, busca la función run.function y modifícala con el siguiente script:

    
    
     .run(function ($ionicPlatform, FirebaseDB, $rootScope, $state) {
        $ionicPlatform.ready(function () {
          // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
          // for form inputs)
          if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
    
          }
          if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
          }
        });
    
        FirebaseDB.initialize();
    
        // for authentication
        $rootScope.$on('$stateChangeError',
          function (event, toState, toParams, fromState, fromParams, error) {
    
            // if the error is "noUser" the go to login state
            if (error === "NO USER") {
              event.preventDefault();
              console.log("go to login state");
              $state.go('login', {});
            }
          });
    
      })
    
    

    Y busca el state.tab y añade lo siguiente:

    
    resolve: {
              user: ['FirebaseDB', '$q', function (FirebaseDB, $q) {
                var authData = FirebaseDB.currentUser();
                return $q(function (resolve, reject) {
                  authData ? resolve(authData) : reject("NO USER")
                })
              }]
            }
    
    Modificamos el state.tab añadiendo funcionalidad de autenticación

    Modificamos el state.tab añadiendo funcionalidad de autenticación

    Abrimos el fichero services.js e instertamos el siguiente código

    
    
      .factory('FirebaseDB', function ($q, $state, $timeout) {
        var instance, storageInstance, unsubscribe, currentUser = null
        var initialized = false
    
        return {
          initialize: function () {
    
            // Inicializamos el Firebase, cambia el código por el tuyo dentro del var config
            var config = {
           apiKey: "AIzaSyDb_EFfVjCjN7dbAYQlXxcnnu8oHAZnE_c",
        authDomain: "my-app-cookyourweb.firebaseapp.com",
        databaseURL: "https://my-app-cookyourweb.firebaseio.com",
        storageBucket: "my-app-cookyourweb.appspot.com",
        messagingSenderId: "489610286180"
            };
    
            // initialize database and storage
            instance = firebase.initializeApp(config);
            storageInstance = firebase.storage();
    
            // listen for authentication event, dont start app until I 
            // get either true or false
            unsubscribe = firebase.auth().onAuthStateChanged(function (user) {
              currentUser = user
              console.log("got user..", currentUser);
            })
          },
          /**
           * return database instance
           */
          database: function () {
            return instance.database()
          },
          /**
          * return storage instance
          */
          storage: function () {
            return storageInstance
          },
          isAuth: function () {
            return $q(function (resolve, reject) {
              return firebase.auth().currentUser ? resolve(true) : reject("NO USER")
            })
          },
          /**
           * return the currentUser object
           */
          currentUser: function () {
            debugger;
            return firebase.auth().currentUser
          },
    
          /**
           * @param  {any} _credentials
           */
          login: function (_credentials) {
            return firebase.auth().signInWithEmailAndPassword(_credentials.email, _credentials.password)
              .then(function (authData) {
                currentUser = authData
                return authData
              })
          },
          /**
           * @param  {any} _credentials
           */
          createUser: function (_credentials) {
            return firebase.auth().createUserWithEmailAndPassword(_credentials.email, _credentials.password).then(function (authData) {
              currentUser = authData
              return authData
            }).then(function (authData) {
    
              // add the user to a seperate list 
              var ref = instance.database().ref('Trash-Talk/users');
              return ref.child(authData.uid).set({
                "provider": authData.providerData[0],
                "avatar": (authData.profileImageURL || "missing"),
                "displayName": authData.email
              })
    
            })
          }
        }
      })
    
    

    Una vez configurado el servicio para la autenticación, vamos a abrir el fichero controller.js que tiene la funcionalidad de las pestañas y vamos a crear la funcionalidad para el login:

    
    
      .controller('LoginCtrl', [
        '$scope', '$state', '$timeout', 'FirebaseDB',
        function LoginCtrl($scope, $state, $timeout, FirebaseDB) {
          console.log("Login Controller");
    
          /**
           * 
           */
          $scope.doLoginAction = function (_credentials) {
    
            FirebaseDB.login(_credentials).then(function (authData) {
              console.log("Logged in as:", authData.uid);
              $state.go('tab.chats', {})
            }).catch(function (error) {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;
              console.error("Authentication failed:", error);
              // ...
            });
    
          }
    
          /**
          * 
          */
          $scope.doCreateUserAction = function (_credentials) {
    
            FirebaseDB.createUser(_credentials).then(function (authData) {
              console.log("Logged in as:", authData);
              $state.go('tab.chats', {})
            }).catch(function (error) {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;
              console.error("Authentication failed:", error);
              // ...
            });
    
          }
        }])
    

    Vamos a crear la página del login.html en el directorio templates. Para ello botón derecho >nuevo archivo >login.html
    Insertamos el siguiente código con el html:

    Login.html

    Login.html

    Para finalizar la conexión vamos a añadir el siguiente código en la configuración app.js

    
    
    .config(function($stateProvider, $urlRouterProvider) {
    
      
        $stateProvider
          .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: 'LoginCtrl',
            cache: false
          })
          // setup an abstract state for the tabs directive
          .state('tab', {
            url: '/tab',
            abstract: true,
            templateUrl: 'templates/tabs.html',
            resolve: {
              user: ['FirebaseDB', '$q', function (FirebaseDB, $q) {
                var authData = FirebaseDB.currentUser();
                return $q(function (resolve, reject) {
                  authData ? resolve(authData) : reject("NO USER")
                })
              }]
            }
          })
    
    
    Ultima configuración StateProvider

    Ultima configuración StateProvider

    Como podeis ver, hemos configurado nuestro formulario de acceso a nuestra aplicación. Ya solo me queda insertar un nuevo usuario y ver si efectivamente se ha conectado con exito a mi Firebase.

    Inserta un usuario para acceder a tu aplicación

    Inserta un usuario para acceder a tu aplicación

    Perfecto hemos accedido a la aplicación tras crear un nuevo usuario.

    Una vez creado nuestro usuario, accedemos al contenido de la app

    Una vez creado nuestro usuario, accedemos al contenido de la app

    Para terminar, vamos a meter un botón de logout.
    Antes de meter el logout ve a tu cuenta Firebase y podrás ver que efetivemente tenemos un usuario ya dado de alta.

    Nuestro Primer usuario

    Nuestro Primer usuario

    Vuelve al editor y en archivo js/controllers.js busca el controlardo de la pestaña chats, e insterta el siguiente código:

      $scope.doLogout = function () {
          $timeout(function () {
            $state.go('login', {})
          }, 1);
    
          firebase.auth().signOut()
    
        }
    
    Inserta el codigo para hacer un logout

    Inserta el codigo para hacer un logout

    Modifica el código de ChatsCtrl de tal forma que quede así:

    .controller('ChatsCtrl', function($scope, $timeout, Chats, FirebaseDB, $state) {
     
        $scope.doLogout = function () {
          $timeout(function () {
            $state.go('login', {})
          }, 1);
    
          firebase.auth().signOut()
    
        }
    
     
      $scope.chats = Chats.all();
      $scope.remove = function(chat) {
        Chats.remove(chat);
      };
    })

    Perfecto, una vez hecho esto prueba de nuevo en tu terminal:

    ionic serve --lab
    Funcionando mi App con autenticación Ionic Firebase

    Funcionando mi App con autenticación Ionic Firebase

    Ahora solo tendrás que añadir este mismo código en todas las pestañas donde quieras que esté el logout, que debería ser en todas…

    Logout en chats detail

    Logout en chats detail

    Inserta el código del boton en cada pestaña y el código de logout en cada controlador de cada pestaña…

    Logout en chats detail

    Logout en chats detail

    controler-logout

Felicidades, si has seguido todos los pasos deberías tener ya tu aplicación funcionando y enlazada a tu cuenta Firebase.
Te dejo el código en Github por si quieres utilizarlo como comienzo para tu aplicación: https://github.com/cookyourweb/Ionic-Firebase-Starter-App

Eso es todo, ya teneis vuestra primera App construida con Ionic y Firebase como backend. En el siguiente artículo veremos lo fácil que es aplicar unos estilos básicos a tu aplicación

Verónica Serna| Cookyourweb

11 thoughts on “Cómo crear una aplicación híbrida con Ionic y Firebase

  1. Hola, excelente tutorial, he visto muchos donde muestran para realizar login, pero para consumir datos, por ejemplo, necesito hacer que consuma datos de horarios. Entonces que yo pueda mandarle a un label por ejemplo la info de un horario, si el horario cambia, cambiarlo en la base de datos firebase y se cambia en la app… Gracias

  2. Hola victoria como estas? Muchas gracias por el tutorial, me sirvió de mucho, te quiero hacer una consulta, quiero hacer que el login me filtre según el usuario, me gustaria saber como puedo hacer para que según el usuario por ejemplo un admin me muestre una vista y si es un usuario común otro, sabes de un ejemplo?desde ya muchas gracias.

  3. hola hice una app login con firebase y funciona bien local con ionic serve y funciona bien si la subo y pruebo con ionic View, pero cuando lo pruebo en un dispositivo real de android da error en el login no se porque pasa eso. no autentica si esta desde un celular real pero si local y con ionic view

  4. Hola Veronica excelente tutorial, imagino es el mismo principio para una web app, he realizado una utilizando MEAN stack mi pregunta es relacionada con la base de dato pues uso mongodb en esta aplicación , como haría para desplegar esta app en firebase ?

    • Hola Leo,
      Gracias por tu comentario. En respuesta a tu consulta decirte que Mean Stack(cuyas siglas hacen referencia a lo que utilizan : MongoDB, Express, AngularJS y Node) utiliza como bien dices una base de datos MongoDb , por lo que deberías eliminar toda referencia a dicha base de datos en tu aplicación y enlazarlo a Firebase.
      La configuración es diferente, si has utilizado un generador tipo Yeoman o Mean Boilerplate, tendras´que eliminar todas las referencias a MongoDb y Mongoose.
      Espero que te haya ayudado un poco.
      Gracias y un saludo

      • Gracias por la respuesta de hecho si utilice un generador en este caso yeoman, desplegué la aplicación en heroku el primer test, pero de verdad me gustaría probar firebase por todas las herramientas y facilidades que ofrece , ya estoy en ello cuando lo logre te comento gracias

  5. Hola me parece muy interesante tu articulo, Yo por mi parte estoy desarrollando una app hibrida en cordova utilizando angular y firebase, pero me a surgido un problema con la autenticación de google, si lo ejecuto desde el local de mi pc todo anda bien , pero compilar y al ejecutar la app me lanza un error que dice :

    “this operation is not supported in the enviroment this application is running on “local.protocol” must be http or https and web storange must be enable”

    Estoy utilizando la autenticacion de google para web .

    Espero que me puedan ayudar con este problemita que me esta volviendo loco, de ante mano gracias y hasta pronto.

    • Hola Otoniel gracias por tu comentario.
      Por lo que leo en el mensaje no puedes ejecutar la aplicación en localhost, entra en tu cuenta y mira a ver como tienes configurada esta parte y habilitada el inicio de sesión con google claro:
      Firebase, auth
      Por otro lado tienes que habilitar en Firebase el almacenamiento.
      Espero que te sirva,
      Muchas gracias y un saludo.
      Verónica

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *