Tag: Ionic

¿Qué es Stencil (del equipo de Ionic)?

geykelLeave a comment

De acuerdo con su sitio web, es un compilador para generar o construir Componentes Web (Web Components), siendo más específicos Custom Elements, combina conceptos de varios frameworks populares como React y Angular.

stencil-logo

Stencil genera componentes web que cumplen con el estándar, los cuales ya contienen caracteristicas como:

  • DOM virtual
  • Async rendering (renderización asincrónica)
  • Reactive data-binding (vinculación reactiva de datos)
  • JSX
  • TypeScript

Estos componentes pueden ser incluidos en frameworks como los que ya mencionamos, o ser utilizados sin framework alguno ya que son sencillamente componentes web, además, Stencil habilita algunas capacidades encima de los componentes como por ejemplo SSR (Server side rendering), objetos como propiedades en lugar de simplemente propiedades de tipo cadenas (strings), pre rendering, etc. Con el uso de JSX, DOM virtual y renderización asincrónica hacen que sea más fácil y rápido utilizar el API de Stencil para escribir componentes web que utilizar directamente Custom Elements.

Continue reading “¿Qué es Stencil (del equipo de Ionic)?” →

Ionic y Google Maps, seleccionar una ubicación

geykelLeave a comment

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.

Continue reading “Ionic y Google Maps, seleccionar una ubicación” →

Autenticación con Facebook en Ionic con Firebase

geykel1 Comment

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.

Continue reading “Autenticación con Facebook en Ionic con Firebase” →

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

geykel4 Comments

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.

Continue reading “Autenticación con correo y contraseña en Ionic con Firebase – Parte 1” →

Generadores de Ionic 2

geykelLeave a comment

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

Continue reading “Generadores de Ionic 2” →

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

geykel4 Comments

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.

Continue reading “Cómo utilizar plugins de Cordova en Ionic 2 con Ionic Native” →

Ionic 2 CLI

geykel2 Comments

Nota: En este post se habla sobre el CLI de Ionic 2, como lo dice el título, ya hay una nueva versión de este CLI, les recomiendo siempre leer la documentación del CLI.

Desde hace un tiempo quería empezar a escribir posts sobre Ionic ya que he empezado a utilizarlo y quería compartir un poco lo que he aprendido y obtener retroalimentación de otros sobre cómo hacer mejor las cosas o quizás algunos tips and tricks.

Ionic es un framework de desarrollo de aplicaciones web progresivas (PWA) e híbridas basadas en Cordova o PhoneGap. En la versión 1 se utilizaba Angular 1 para desarrollar la aplicación y en la recien lanzada versión 2 se utiliza Angular 2. En estos posts vamos a utilizar la versión 2 de Ionic y Angular.

En este primer post, vamos a hacer algo sencillo, crear una nueva aplicación y ver varios comandos del CLI de Ionic 2.

Continue reading “Ionic 2 CLI” →