Mi App Android en el Play Store: Alolan Pokédex

Recientemente he desarrollado y publicado una app muy sencilla, pero práctica para los jugadores de la más reciente entrega de Pokémon:  Sun y Moon. Se trata de una aplicación de referencia, que lista los diferentes Pokemon capturables en ambos juegos, junto con su respectivo Código QR.

Funcionalidad QR en Sun/Moon

El escanear un Código QR con la Cámara del Nintendo 3DS, permite obtener el registro del Pokemon respectivo, sin necesidad de capturarlo. Esto, entre otras cosas permite que se vea la ubicación exacta donde podemos encontrar a esa determinada especie en su forma salvaje, para poder capturar uno propio.

La idea de la aplicación surgió mientras hacia uso de esta misma característica, pero consultando desde el álbum del sitio web ImGur, donde se publicaron originalmente estos códigos. El proceso de buscar el QR deseado usando este sitio, se me apetecía tediosa y complicada: No existe manera de cargar todas las imágenes a la vez en la ventana del navegador, por lo que una búsqueda con CTRL+F no siempre arrojaba el resultado esperado.

El álbum en Imgur

Fué entonces cuando se me ocurrió descargarlas todas. Pero había un problema: Son mas de 400 imágenes y el nombre del archivo es un texto aleatorio que no sirve para identificar al Pokemon. Y el proceso de guardar manualmente 400 imágenes de internet una a una simplemente no era una opción.

Guardar uno por uno? No gracias!

Como todo buen programador, sabía que debía haber una mejor manera de hacer esta tarea, sólo hacía falta encontrar la herramienta. Fue entonces cuando pude darme cuenta de algo muy importante: El atributo ALT (descripción alternativa) de cada una de las imágenes contiene el número, seguido del nombre de cada Pokemon.  Fue entonces que lo tuve claro. Solo necesitaba una herramienta que permitiese descargar todas las imágenes de un sitio web, usando su atributo ALT como nombre de imagen.

Como se puede ver, el SRC de la imagen es un texto al azar. Pero el ALT es justo lo que necesito!

Luego de buscar en la web, me di cuenta que muchas otras personas han tenido esta necesidad en el pasado, pero sin embargo no existe en el mercado una herramienta que lo haga. Debía hacer mi propia herramienta…

Fué en este momento que encontré una extensión del navegador Google Chrome que permite descargar todas las imágenes de una página web. Y lo mejor: Es de código abierto!. Mi misión era sencilla: Modificar la extensión para que al descargar, en vez del nombre original del archivo, use el nombre del atributo ALT de la imagen en cuestión.

«Image Downloader» en la Chrome Web Store

Asi que aquí estaba, con el código fuente del proyecto original , ahora bifurcado a mi repositorio local. Tuve que aprender cómo se desarrolla una extensión para navegador: El acceso al DOM, el uso de la configuración, el manejo de las acciones, la interacción entre módulos y la instalación local en modo desarrollador, entre otros aspectos muy técnicos.

Al final, solo necesité crear un arreglo con el texto ALT de cada imagen al cual el API tiene acceso, para luego pasarlo a la función que genera las descargas automáticas, como parámetro ‘filename'.

La función que captura el atributo ALT en todas las imágenes.

Para quienes están interesados en ver todos los cambios requeridos, o descargar mi versión de esta extensión. (Que he llamado ALT Image Downloader), el código esta en mi GitHub, desde donde también se pueden ver las diferencias con la rama original.

Una vez que tuve las imágenes descargadas justo como las necesitaba, solo bastó editarlas, generar un listado, crear una base de datos, construir un API, subir todos los recursos al hosting y por supuesto: Desarrollar y publicar el App Android!. Sin embargo, esos detalles los comentaré en la entrega número dos de ésta entrada.

Captura del App: Alolan Pokedex

«Gotta catchem alljust not by hand».

GraphQL: La nueva (y mejorada) forma de construir API’s

En la última conferencia de desarrolladores de GitHub, la empresa hizo un gran anuncio: Su nueva API GraphQL, la cual ha sido publicada para su acceso a través del programa de acceso temprano. En este post, hago un esfuerzo por explicar qué es GraphQL y por qué es importante para la comunidad.

"Un lenguaje de consultas para tus API's"
«Un lenguaje de consultas para tus API’s»

Primero, un poco de historia.

GraphQL fue creado en Facebook y liberado como un proyecto Open-Source, de igual manera que React.js. La idea original era permitir que los clientes de los servicios Rest pudieran decidir qué información le interesa en un particular end-point.  Quienes han trabajado desarrollando servicios REST, sabrán que muchas veces la cantidad de información que termina devolviendo un end-point particular es enorme, y no todos los casos de uso la consumen en su totalidad.

¿Por qué importa?

¿Por qué si los servicios REST de GitHub son tan alabados en la industria, ahora se mudan a GraphQL?. Por la misma razón que otros gigantes de la industria han comenzado a adoptarlo. Los detalles están en su anuncio, pero el resumen es el siguiente:

  • REST requiere varias consultas, GraphQL requiere solo una.
  • Con REST, se consulta o mucha o muy poca data. Con GraphQL se consulta exactamente lo que se necesita.
  • REST por lo general se convierte en un laberinto de endpoints mal documentados. GraphQL es altamente tipado y auto-documentado.

En las palabras del equipo responsable de la plataforma en GitHub:

GraphQL representa un masivo salto en el desarrollo de API’s. Tipado seguro, introspección, documentación generada y respuestas predecibles, van a beneficiar tanto a los desarrolladores como a los consumidores de nuestra plataforma. Ansiamos una nueva era de plataformas respaldadas por GraphQL y esperamos que ustedes también.

¿Cómo se ve?

Si se firma el acuerdo de pre-release, tendremos acceso al explorador de API’s. Es básicamente GraphiQL, un IDE para explorar API’s GraphQL.

La primera consulta de prueba.
La primera consulta de prueba.

Después de un par de segundos experimentando, mi primera consulta me devuelve una respuesta –Funciona!. Se puede consultar la documentación del API para saber cuáles mutaciones o consultas se pueden hacer. Es básicamente lo esperado: Se pueden buscar usuarios, organizaciones y obtener información de nuestra propia cuenta GitHub.

Obteniendo información de mis Repos
Obteniendo información de mis Repos…

Y claro, también realicé un comentario desde el API!:

Comentar desde el API? Hell yeah!
Comentar desde el API? Hell yeah!

¿Cómo Aprender?

Si GraphQL te emociona como a mi, entonces probablemente estarás preguntándote la mejor manera de implementarlo en tus proyectos. Acá dejo algunos recursos y tutoriales para comenzar.

Tutoriales:

Recursos:

Herramientas para ahorrar tiempo en el desarrollo.

Les presento una pequeña colección de las herramientas mas útiles para ahorrar tiempo en el desarrollo para diversas tecnologías y lenguajes.  Si tienes un proyecto con tiempos de entrega cortos, te interesará ver que hay en la lista para tu necesidad.

developertools_icon

Prototipado (Mockups)
Marvel – https://marvelapp.com/
Invisionapp – http://invisionapp.com/
Origami (Facebook) – https://facebook.github.io/origami/
Codiqa – https://codiqa.com/
Precursor – https://precursorapp.com/
Flinto – https://www.flinto.com/
Framer – http://framerjs.com/

Móvil
PhoneGap – http://phonegap.com/
Ionic – http://ionicframework.com/

iOS
Framework7 – http://www.idangero.us/framework7/

Front-end
Twitter Bower – http://bower.io/
Twitter Bootstrap – http://twitter.github.com/bootstrap/
HTML5 boilerplate – http://html5boilerplate.com/
ReactJS – http://facebook.github.io/react/
AngularJS – http://angularjs.org/
JQueryUI – http://jqueryui.com/
JQuery – http://jquery.com/
EmberJS – http://emberjs.com/
Backbonejs – http://backbonejs.org/
CanJS – http://canjs.com/
YUI library – http://yuilibrary.com/
Gumby framework – http://gumbyframework.com/
xchema xtyle – http://xtyle.xchema.com
NinjaUI – http://ninjaui.com/
CoffeeScript – http://coffeescript.org/
Less css – http://lesscss.org/
SaSS css – http://sass-lang.com/
Cappuccino – http://cappuccino.org/
Jasmine – http://pivotal.github.com/jasmine/
Mocha – http://visionmedia.github.com/mocha/
QUnit –http://qunitjs.com/
CodeKit – http://incident57.com/codekit/
Grunt – https://github.com/cowboy/grunt
Yeoman – http://yeoman.io/
ComponentJS – http://component.io/
TodoMVC – http://todomvc.com/
SpaceBase – http://spacebase.space150.com/

Servidores y Redes
Vagrant (virtualizacion) – http://vagrantup.com/
Puppet (automatizacion) – http://puppetlabs.com/
ZeroMQ (sockets) – http://www.zeromq.org/
RabbitMQ (mensajes) – http://www.rabbitmq.com/

PHP
Laravel Framework – http://laravel.com/
CodeIgniter Framework – http://codeigniter.com/
Wordpress Framework – http://wordpress.org/
Joomla Framework – http://www.joomla.org/

JavaScript
nodeJS – http://nodejs.org/
Express Framework – http://expressjs.com/
Socket.io – http://socket.io/
Meteor – http://www.meteor.com/
Derby – http://derbyjs.com/
TowerJS – http://towerjs.org/
Geddy – http://geddyjs.org/

Python
Flask – http://flask.pocoo.org/
Django – https://www.djangoproject.com/

Ruby
Rails – http://rubyonrails.org/
Sinatra – http://www.sinatrarb.com/

Java
Hibernate (ORM)- http://www.hibernate.org/
Play framework – http://www.playframework.org/

Angular 2 es oficial!.

Noticias emocionantes para los seguidores del proyecto Angular y los desarrolladores front-end en general: Angular 2 tiene versión oficial!.

Angular 2
The Angular2 Shield

 

Comparto acá algunos excelentes recursos de Angular 2:

 

 

Los pasos de la metodología de desarrollo ‘Agile’ y sus responsables

El método de desarrollo de software ágil intenta reducir la complejidad de los proyectos de software actuales e incrementar su flexibilidad. El desarrollo de software ágil tiene muy en cuenta los cambios solicitados y responde de manera flexible a los nuevos requisitos surgidos durante el transcurso del proyecto.

Los pasos del proceso Agile son los siguientes:

  • Diagnóstico (Product Owner, StakeHolders, Agile Manager):  Incluye el análisis de los requerimientos y la tormenta de ideas.
  • Diseño (Product Owner, StakeHolders, Scrum Master):  Incluye la documentación del diseño y el prototipado.
  • Desarrollo (Scrum Master, Team Members):  Incluye la construcción, las pruebas, la revisión y la clarificación. Es un proceso iterativo.
  • Aseguramiento de Calidad (Scrum Master, Team Members):  Incluye la identificación y la resolución de defectos.
  • Despliegue (Team Members, Product Owner):  Incluye la puesta en producción y el soporte post-venta.
Pasos de Agile
Pasos de la metodología Agile.

 

Generar Servicios RESTful a partir de Modelos de Datos

Al momento de desarrollar aplicaciones, casi siempre el punto de partida es la creacion del modelo de datos (y la base de datos). Una vez que tenemos un hogar para nuestras data, el siguiente paso natural es querer generar servicios RESTful para que sean consumidos por nuestras aplicaciones clientes; bien sea un website o un app móvil.

Es entonces cuando nos encontramos con muchísimas opciones para el desarrollo de nuestros servicios. Plataformas, tecnologías, lenguajes de programación, entre otros. Sin duda alguna, puede ser complicado y tardado el comenzar a desarrollar nuestras API’s. En este post trato de comentar mi experiencia con diferentes servicios de generación automática de servicios REST.

Pero primero un disclaimer: Ningún generador nos va a proveer de servicios perfectamente personalizado y según las necesidades particulares. La idea es darnos un comienzo rápido con las conexiones a la BD, el manejo de rutas y la selección de datos de nuestras tablas. Esto quiere decir que las uniones y transformaciones de datos quedan de nuestra parte.

Sin mas preambulos, les dejo las opciones que he probado:

Apiplug: Apiplug es un SAAS (Software Como Servicio) que ofrece la generacion de API’s partiendo de un esquema definido o una BD existente, por un precio. Las opciones de tecnologías justo ahora varían entre PHP5+Laravel5.1, PHP7+Laravel5.2, NodeJS+Express y Python3+Django. Tambien ofrecen ayuda para desplegar los proyectos y como extra, puedes generar un proyecto Android que haga uso de tu recién generado API.

Dashboard de Apiplug
Dashboard de Apiplug

Apigility: Apigility es un proyecto de Zend Framework que debes correr en una intancia de WAMP/XAMPP antes de que puedas llegar a las pantallas de generacion. Una vez allí, ofrece exactamente lo requerido con muy buenas posibilidades de personalización. EL detalle: Naturalmente, el proyecto generado es exclusivamente en PHP.

En futuras actualizaciones, agregare un par de opciones mas a la lista.

Estructuras de datos, algoritmos y construcciones de código que necesitarás para una entrevista de software.

Si pronto tienes una entrevista o sesión de programación en vivo, aquí hay algunas herramientas básicas que todo programador debe tener en su arsenal a la hora de una entrevista que involucre programación en vivo:

Estructuras de Datos y Tipos de Dato Abstractos

  • Array (Arreglos)
  • Linked Lists: Sencillos y Dobles
  • El ADT ‘List’ (Listas)
  • Árboles: Binarios y BSTs
  • El ADT ‘Set’ (Conjunto)
  • Tries
  • Heaps
  • Los ADT Stack, Queue y Priority Queue
  • Grafos: dirigidos, no dirigidos, diferentes representaciones y sus ventajas
  • Hashtables: estrategias de resolución de colisiones, funciones hash y sus ventajas
  • El ADT ‘Map’
  • Algoritmos

Búsqueda Binaria

  • Algoritmos de Ordenado: Selection Sort, Insertion Sort, Bubble Sort, Quicksort, Mergesort, Heapsort
  • Algoritmos de Busqueda: Depth-first search, Breadth-first search, Dijkstra’s
  • Recorrer Arboles: pre-order, post-order, in-order, level-order (BFS)
  • Tecnicas Algoritmicas: Brute force, Divide and conquer (e.g. Mergesort), Greedy, Dynamic Programming (avanzado)
  • Problemas NP-hard

Elementos Basicos de Programacion en JAVA

  • Los básicos, por supuesto (bucles, condicionales, funciones, etc)
  • Entrada y Salida: desde archivos y desde la línea de comandos
  • Las clases ‘String’ y ‘Character’
  • Convertir entre tipos de datos
  • Diseno orientado a objetos: Herencia y Polimorfismo, Clases y Objetos, static and non static, modificadores de acceso (public, private, protected)
  • La librería java.util (y sus clases contenedoras)
  • El patrón del ‘Iterador’ (intermedio)
  • Generación y manejo de excepciones
  • Programación dirigida por eventos
  • Clases internas y anónimas.
  • Expresiones Lambda(avanzado)

Preguntas comunes en entrevistas de programacion.

  • Diseno orientado a objetos, usando cualquier estructura de datos.
  • Manipulación a nivel de bit para representar enteros.
  • Acertijos de Teoría de Juegos: «muddy children», volcano eruptions.
  • Estimar límites: «Cuántos pollos hay en Chicago?»

Recursos online para prepararnos.

  • HackerRank. Un website con infinidad de retos de programación y algoritmos.
  • PRAMP. Un website que ofrece entrevistas de programación de prueba. Gratis!

Android: Aplicación sencilla con back-end en Firebase.

Firebase es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles adquirida por Google en 2014. En este Post realizaremos algunas un tutorial para hacer uso de los beneficios de FireBase.

Aplicación de registro y lectura de mensajes desde el servidor.

Una aplicación Android puede operar perfectamente sin acceso a información a través de internet. Éste tipo de aplicaciones se conocen como aplicaciones “Autónomas” o “Standalone”. Ejemplos de éste tipo de aplicaciones hay muchos: Calculadoras, Alarmas, Editores, Juegos. Sin embargo, muchas de las aplicaciones requieren de algún tipo de acceso a internet (bien sea para realizar alguna conexión a bases de datos, o consumir un servicio web). En esta guía veremos cómo realizar (y hospedar en la nube) nuestro desarrollo a nivel de servidor (backend) en Firebase.
Firebase Logo

El tutorial completo se encuentra en el documento drive adjunto!.

Compartir consultas de prueba para Servicios REST con Postman

Postman es una excelente aplicación/extensión de navegador gratuita, que permite realizar consultas a servicios REST desde una agradable (y muy personalizable) interfaz gráfica.

Postman Logo

Su headline es:

Postman helps you develop APIs faster.

Postman UI Screenshot
Postman UI

La verdad es invaluable a la hora de desarrollar API’s, pues facilita las actividades de probar endpoints, cambiar parámetros, seleccionar métodos, configurar tipos de contenido (Content-Type's) y realizar pruebas automatizadas en base a la respuesta del backend.

Una funcionalidad que me ha resultado imprescindible al momento de desarrollar API’s en equipos de desarrollo extendidos, es la capacidad de Postman de guardar y compartir las «Colecciones» (Agrupaciones de consultas, incluyendo rutas, métodos y contenido) con nuestros colaboradores. Acá les dejo los pasos para realizarlo:

  1. Iniciar sesión en Postman Web. https://app.getpostman.com/dashboard
  2. Guardar las consultas en colecciones (y opcionalmente, en carpetas)
  3. Ubicar la colección deseada, hacer click en el menú de puntos al lado
  4. En la lista desplegable, seleccionar «Share»
  5. Seleccionar «Run in Postman Button»
  6. Compartir el botón en nuestro site o Wiki corporativo.

El resultado final es algo del estilo:

Botón Postman en Wiki
Botón Postman en Wiki

Espero les sea útil!

Actualizar Android Studio a V2.0

Android Studio 2.0 ya está disponible, y ahora que es estable, se puede actualizar de manera segura a la nueva versión. Tiene algunas características interesantes, pero la más importante es que ahora los emuladores son mucho más rápidos de usar cuando corremos nuestras aplicaciones.

Aquí está el proceso para actualizar:

1. Inicia Android Studio. Debes ver una ventana emergente explicando que existe una versión nueva. Haz click y deberías ver esta pantalla:

1
Selecciona «Actualizar y reiniciar» para comenzar el proceso.

2. Durante la actualización, es posible que veas la siguiente ventana:

2
Si aparece, solo selecciona «Siguiente».

3. Android studio comenzará a Descargarse.

3
Deja que finalice de actualizar.

4. Deberías ver esta ventana emergente la primera vez que abras Android Studio después de actualizar:

4
Elige la primera opción para que tus configuraciones se mantengan.

5. Puede que veas esta pantalla.

5
Te está recomendando que deberías usar la ultima versión del JDK. Sugiero que actualices (es gratis).

Ésta es la última versión del JDK, directo desde Oracle: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

6
Último JDK.

6. También puede que veas esta pantalla:

7
Selecciona «Actualizar».

7. Verás la siguiente ventana:

8
Selecciona el android-sdk-license y deja que la instalación finalice.

8. Por cada proyecto existente que abras luego de actualizar, verás esta ventana emergente aparecer:

9
Selecciona «Actualizar» y deja que haga su trabajo.

9. Eventualmente verás esto en pantalla:

10
Selecciona «Fix Gradle wrapper and re-import project». Una vez finalizado, estás listo para comenzar a desarrollar!.

10. Aunque no es absolutamente necesario, sugiero borrar y crear nuevamente cualquier emulador AVD (Android Virtual Devices) que tengas configurado. De ésta manera nos aseguramos de contar con los beneficios de emulación añadidos.

Listo! A programar…