Ionic y Google Maps, seleccionar una ubicación

En este post vamos crear una aplicación con Ionic donde vamos a poder seleccionar una ubicación en Google Maps, por defecto el mapa lo vamos a ubicar en la posición en la que nos encontremos a la hora de abrir la aplicación, para ello vamos a utilizar Ionic Native con el plugin de Cordova llamado Geolocation.

Antes de seguir con este post les recomiendo ver un post anterior sobre cómo utilizar plugins de Cordova con Ionic Native.

Seguir leyendo “Ionic y Google Maps, seleccionar una ubicación”

Ionic 3, plugins de Cordova y Ionic Native

El objetivo de este post es un poco brindar una actualización al post anterios sobre cómo utilizar plugins de Cordova en Ionic 2 con Ionic Native pues algunas cosas han cambiando en la nueva versión y no quería eliminar el post anterior pues todavía hay desarrolladores a los cuales les pueda ser útil si sus proyectos utilizan la versión 2 de Ionic.

En el post sobre la versión anterior mencionamos los beneficios de utilizar los plugins de Cordova para acceder a funcionalidades nativas cuando desarrollamos aplicaciones híbridas con Ionic y qué es Ionic Native, en este no nos vamos a enfocar en los conceptos sino en las actualizaciones relacionadas a Ionic Native en la versión 3.x, en fin, vamos a enfocarnos más en la práctica.

Seguir leyendo “Ionic 3, plugins de Cordova y Ionic Native”

Autenticación con Facebook en Ionic con Firebase

En posts anteriores vimos cómo utilizar Firebase con Ionic para autenticar usuarios registrar y autenticar usuarios utilizando correo y contraseña; en esta ocasión vamos a ver cómo utilizar el proveedor de Facebook de Firebase para autenticar nuestros usuarios con su cuenta de Facebook.

firebase-ionic-facebook

Prerrequisitos

Por comodidad vamos a adicionar esta funcionalidad a la aplicación que ya empezamos a implementar en los posts anteriores por lo que les recomiendo que lean esos posts primeramente y luego regresen a este.

Seguir leyendo “Autenticación con Facebook en Ionic con Firebase”

Autenticación con correo y contraseña en Ionic con Firebase – Parte 2

En el primera parte pudimos crear las pantallas que vamos a necesitar en esta aplicación y también configuramos el proyecto en Firebase. Ahora vamos a empezar a integrar Firebase en la aplicación.

AngularFire2

Como ya sabemos, Ionic utiliza Angular como framework de desarrollo, entonces vamos a utilizar AngularFire, librería oficial de Angular para Firebase, para integrarnos con Firebase.

Primero necesitamos instalar los paquetes de firebase y angularfire2 en nuestro proyecto, para ello, utilizando la consola, nos ponemos dentro de la carpeta del proyecto y ejecutamos:

npm install firebase --save
npm install angularfire2 --save

Seguir leyendo “Autenticación con correo y contraseña en Ionic con Firebase – Parte 2”

Autenticación con correo y contraseña en Ionic con Firebase – Parte 1

Firebase contiene un conjunto de productos, tanto herramientas como infraestructura, que nos permiten desarrollar rápidamente el backend de nuestra aplicación, en otras palabras, es un BaaS (Backend as a Service) construido sobre la infraestructura de Google Cloud. Entre los productos que nos brinda tenemos base de datos de tiempo real, almacenamiento de archivos en la nube, mensajería, reporte de errores, hosting, configuración remota, autenticación, entre otras.

firebase-ionic

Hoy vamos a ver cómo crear una aplicación con Ionic, que utilice el servicio de autenticación de Firebase. Este servicio de autenticación nos brinda varios métodos de autenticación, hoy sólo vamos a utilizar correo electrónico y contraseña.

Seguir leyendo “Autenticación con correo y contraseña en Ionic con Firebase – Parte 1”

Generadores de Ionic 2

Otro comando importante del CLI de Ionic, que no vimos en el primer post, es generate, el cual nos ayuda a crear páginas y servicios para la aplicación.

En este post vamos a utilizar generate para crear un ejemplo de página de inicio de sesión. Para crear el proyecto vamos a utilizar el comando start como vimos en posts anteriores, para ello ejecutamos en la consola:

ionic start --v2 ejemplo tabs

En la consola, entramos en la carpeta “ejemplo”, recien creada por el comando start, y crearemos la página donde vamos a colocar el formulario para iniciar sesión. Vamos a utilizar generate para crear la página, de la siguiente manera:

ionic generate page login

Seguir leyendo “Generadores de Ionic 2”

Cómo utilizar plugins de Cordova en Ionic 2 con Ionic Native

Nota: He publicado una versión más actualizada de este post para la versión 3 de Ionic.

En este post vamos a ver cómo podemos utilizar los plugins de Cordova con Ionic 2. Hemos mencionado varias veces Cordova y que Ionic depende de Cordova para desplegarse de forma nativa, ¿qué quiere decir esto exactamente?

Una de las desventajas de crear aplicaciones web para dispositivos móviles es que, al contrario de las aplicaciones nativas, no tienen acceso a funcionalidades nativas de los dispositivos como por ejemplo, la cámara, el GPS, la galería de fotos, funcionalidades de redes sociales de forma nativa y muchas otras.

Es aquí cuando Cordova viene al rescate. Cordova agarra todo el HTML, CSS, recursos y JavaScript de tu aplicación (en el caso de Ionic 2 sería tu aplicación basada en Angular 2) y lo coloca en un contenedor nativo, dependiendo de la plataforma, este puede ser iOS o Android, y provee un API de JavaScript, con el cual, desde nuestro código de la aplicación podemos acceder a las funcionalidades nativas del dispositivo.

Seguir leyendo “Cómo utilizar plugins de Cordova en Ionic 2 con Ionic Native”