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

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.

Seguir leyendo “¿Qué es Stencil (del equipo de Ionic)?”

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 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”

Genericidad en Swift

La genericidad es una de las características más poderosa de Swift, como también lo es en otros lenguajes de programación; nos permite definir estructuras de datos de tipo seguro (type-safe) y funciones sin tener que comprometernos con un tipo de dato en específico, aunque podemos definir algunas reglas.

Este tipo de funcionalidad nos permite reutilizar código, sobre todo, algoritmos relacionados al procesamiento de datos.

¿Para qué la genericidad?

Vamos a ver con un ejemplo, qué tipo de problemas la genericidad nos ayuda a resolver.

Supongamos que queremos desarrollar una estructura de datos Pila (Stack) que podamos utilizar con cualquier tipo de datos, la cual va a tener los métodos clásicos, poner un elemento en la pila (push) y extraer un elemento de la pila (pop). Vamos a asumir que Swift no soporta genericidad.

Seguir leyendo “Genericidad en Swift”

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”

¿Qué pasó con mis “for” estilo C en Swift 3?

Ayer Apple anunció en el WWDC la disponibilidad de Xcode 8 beta para los desarrolladores y con ella Swift 3.

Si has tenido un tiempo de probar algún código escrito con una versión anterior de Swift es probable que hayas encontrado algunos errores inesperados, inesperados si no has estado al tanto de la evolución de Swift por estos meses.

Creo que los errores más comunes que nos vamos a encontrar en código viejo, cuando migremos a Swift 3, son las cosas que iban a marcarse obsoletas para esta versión. Una de ellas es la sintaxis del for estilo C.

for estilo C

Ya desde la versión 2.2 de Swift, Xcode nos venía alertando que esta sintaxis iba a ponerse obsoleta en versiones futuras. Si aún tienes instalado Xcode 7.x puede probarlo en un Playground:

Xcode alertando sobre for estilo C
Xcode alertando sobre for estilo C

Seguir leyendo “¿Qué pasó con mis “for” estilo C en Swift 3?”

Principio Open-Closed en Swift

En este post vamos a ver un ejemplo de diseño que no cumple con el principio Open-Closed y una versión del mismo ejemplo que sí cumple con el principio.

Principio Open-Closed (OCP)

Los principios SOLID son cinco principios básicos del diseño y la programación orientada a objetos, uno de los cuales es el principio Open-Closed

Una descripción más detallada de este principio la pueden encontrar en un artículo de Robert C. Martin “Uncle Bob”, coautor del Manifiesto Ágil, titulado The Open-Closed Principle.

Bertrand Meyer acuñó este principio en 1988 de la siguiente manera:

Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

Y en su artículo, Uncle Bob nos explica que:

Los módulos que cumplen con el principio open-closed tienen dos atributos principales:

  1. Están “abiertos para extensiones” (Open).
    • Esto significa que el comportamiento de un módulo puede ser extendido. Que podemos hacer que un módulo se comporte de nuevas y diferentes maneras a medida en que los requerimientos de la aplicación cambien, o para satisfacer nuevas aplicaciones.
  2. Están “cerrados para modificaciones” (Closed).
    • El código fuente de dicho módulo es inviolable. Nadie está autorizado a cambiar dicho código.

Seguir leyendo “Principio Open-Closed en Swift”