Haciendo MotoApp

El año pasado, junto con un colega desarrollador con quien generalmente trabajo en mini proyectos para aprender y descubrir cómo es crear un producto desde 0, nos embarcamos en una nueva aventura.

Esta trataba de crear una aplicación móvil. Como ya lo había contado en el artículo pasado, ya habíamos hecho app móviles usando desde jQuery Mobile, pasando por Ionic y otros frameworks y finalmente llegando a Android nativo. Esta vez optamos por probar una nueva tecnología que parece facilitar aún más las cosas. Se trata de React Native.

Usando React Native, se pueden crear aplicación móviles híbridas pero que al final se exportan a nativo.

A ver. Esto es un poco confuso. Son híbridas porque se escriben usando tecnologías de la web: JavaScript y CSS, principalmente. Por otro lado, exportan a nativo porque, muy similar a lo que hace NativeScript, cuando generan la aplicación, el proceso de compilación termina organizando todos los archivos en los .xml que necesita Android, por ejemplo, para que la app sea reconocida por el sistema.

En realidad lo nuevo que trae este nuevo framework es poder usar React como librería base para escribir las aplicaciones. El hacerlo, permite en muchos casos simplificar crear una app web y una app móvil, ya que se podría reutilizar componentes entre ambas.

MotoApp, le dimos por nombre. No nos complicamos ni le dimos mayor importancia, la idea era aprender. ¿De qué trata la aplicación? Solamente llevar el registro de recorridos en moto. Por ejemplo, hoy fui de X a Y y costó dos mil pesos. Lo anoto y queda el registro para el mes.

¿Sencillo cierto? Pues, en el camino nos dimos cuenta que cosas tan sencillas también presentan sus complicaciones y varias cuando uno menos lo esperaba.

Conozcamos sobre MotoApp.

Organización: Trello e Investigación

En Dev As Pros usamos Trello como herramienta para gestionar nuestras actividades, proyectos y tareas. Personalmente, hago uso intensivo de este servicio y para este mini proyecto no fue la excepción.

Tablero terminado. La tarea por hacer es innecesaria.

Todos nuestros proyectos empiezan con una discusión en donde listamos requerimientos de alto nivel, proponemos soluciones, tecnologías y el paso siguiente siempre es armar un tablero en Trello con tareas para empezar y desarrollar.

Si bien ya teníamos una experiencia previa usando React Native, no podíamos decir que teníamos certeza de que todo iba a ir bien al integrar Firebase. Así es, el backend de esta aplicación lo propusimos implementar mediante Firebase.

De ahí partió la necesidad de investigar al respecto. ¿Cómo integrar Firebase con React Native? La respuesta estuvo dada en muchos artículos y varias pruebas en ramas de git.

Firebase + React Native

Si bien encontramos muy buenos tutoriales al respecto, toco ser muy minucioso con lo que se leía y probaba.

Por ejemplo, este tutorial en Medium, sirvió para sentar una base de la organización de las pantallas de la aplicación pero la integración que proponía no nos servía porque el tipo generó la aplicación con el CLI de React Native. Nosotros en cambio lo hicimos con Expo.

Expo es una herramienta y servicio que permite generar la estructura de aplicaciones en React Native para facilitar el desarrollo en la misma. Sin Expo, trabajar una aplicación móvil con RN requeriría instalar Android Studio y hacer mil y una configuración más.

Con Expo también se simplifica la instalación de aplicaciones mediante su propia tienda y también te deja generar el .apk para Android, aunque para esto sí o sí necesitas Android Studio y el SDK de Android.

Al hacerla usando Expo, el módulo react-native-firebase no lo podíamos instalar.

En su momento no se podía por limitantes de React Native como mencionan varias respuestas en este Q&A en Stack Overflow.

Finalmente, encontramos la forma que nos serviría para nuestros propósitos. En este otro tutorial que vimos en Medium, dimos con una forma de integrar Firebase en una aplicación en React Native. Probamos, nos funcionó, nos gustó y la adoptamos.

Usando el modulo firebase que instalamos con yarn add firebase logramos lo siguiente:

import * as firebase from 'firebase'

const config = {
  apiKey: 'APIKEY',
  authDomain: 'SUBDOMINIO.firebaseapp.com',
  databaseURL: 'https://SUBDOMINIO.firebaseio.com',
  projectId: 'PROJECTID',
  storageBucket: 'SUBDOMINIO.appspot.com',
  messagingSenderId: 'SENDERID'
}

firebase.initializeApp(config)

export const database = firebase.database()
export const auth = firebase.auth()
export const storage = firebase.storage()

Y de esa forma lo conseguimos.

Sabemos que había otras formas mejores. A lo mejor más adecuadas o elegantes pero con esta el trabajo se hacía y pudimos avanzar.

Y eso es lo importante cuando se hacen proyectos de aprendizaje, avanzar rápido. Luego se hace una retroalimentación de que pudo ser mejor o qué se puede cambiar.

Primera Parte

Esta es la primera parte de una serie de artículos sobre MotoApp, una aplicación móvil hecha en React Native integrando con Firebase. Aprendimos muchos, nos topamos con muros y al final logramos completar lo que nos propusimos.

En próximos artículos estaremos dando más detalles sobre otros aspectos relacionados a este proceso tan entretenido.

Anuncio publicitario