Crear Apps Multiplataforma con React Native y Exponent
Recientemente comencé a usar Exponent para desarrollo de apps multi-plataforma y la experiencia que he tenido con esta herramienta hasta el momento ha sido bastante agradable, así que me gustaría compartir un poco sobre ello a través de algunos artículos explicando el proceso de desarrollo en esta herramienta.
Exponent es una herramienta que hace (¡aún más!) fácil y rápido desarrollar aplicaciones móviles con React Native. Para facilitar el desarrollo ofrece cosas como:
- Instalación y configuración mucho más simple.
- APIs que simplifican el uso de funciones complejas como acceso a contactos, cámara, login con redes sociales, etc.
- Componentes de interfaz de usuario listos para usar como iconos, visor de imágenes, navegación, etc.
Instalación y Configuración de Exponent
La configuración inicial de Exponent es más accesible que la de React Native normal, ya que no requiere la instalación de los SDKs nativos de Android y iOS (como sí lo hace React Native normal), exponent en cambio realiza una construcción del proyecto en servidores y nos entrega el resultado.
Para comenzar a desarrollar con Exponent necesitamos instalar las siguientes herramientas de desarrollo:
- Exponent Development Enviroment (XDE): Es una herramienta gráfica para el manejo de nuestros proyectos, con ella podemos crear proyectos, ejecutarlos en simuladores o dispositivos y publicarlas en el directorio de apps de Exponent.
- Exponent Mobile App: Es una app que se instala en nuestros dispositivos de desarrollo y a través de la cuál ejecutaremos nuestros proyectos. Descarga para Android o para iOS.
- React Native también requiere que instalemos Node.js y watchman.
Una vez terminada la instalación podemos ejecutar XDE; Al hacerlo se nos solicitará registrarnos o iniciar sesión en la cuenta de Exponent.
Una vez iniciando sesión en XDE podemos comenzar con la creación de un proyecto, XDE nos da la opción de crear un proyecto vacío o un proyecto basado en navegación con pestañas. Para este artículo continuaremos con el proyecto basado en pestañas.
Cuándo la creación del proyecto termine podemos ejecutar el proyecto en nuestro dispositivo o un simulador de Android o iOS. La instalación de el simulador de iOS requiere instalar XCode y para Android se recomienda usar Geny Motion. Para este artículo probaremos las aplicaciones en dispositivos.
Para probar las aplicaciones en dispositivos necesitamos la URL del proyecto de Exponent, la manera más sencilla de hacerla llegar al dispositivo es con el botón de Send Link de la barra de herramientas de XDE.
Al presionar este botón se nos enviará la URL de nuestro proyecto al correo con el que registramos nuestra cuenta, de esta manera sólo necesitamos abrir el correo en nuestro dispositivo y presionar el enlace que incluye para que inicie el proceso de carga de nuestro proyecto.
Al terminar la carga de nuestro proyecto veremos una interfaz como la siguiente.
En la primera pestaña de esta interfaz podemos ver instrucciones sobre como podemos comenzar con la modificación del proyecto. Para abrir el archivo que se indica “screens/HomeScreens.js” usar la opción Open in Editor que se muestra al presionar el botón Project.
Esto abrirá la carpeta del proyecto en nuestro editor configurado en el sistema, una vez abierto, podemos seleccionar el archivo especificado y realizar las modificaciones que queramos como lo haríamos normalmente para cualquier otro proyecto React Native.
En este caso sólo cambiamos el contenido predeterminado por una imagen nuestra centrada en la pantalla. Para ello, agregamos la imagen que queremos mostrar en la ruta “asssets/images” y agregamos el código que aparece resaltado en la imagen anterior.
Es todo por este artículo, los invito a comenzar con Exponent siguiendo esta guía de instalación y a platicarme sobre su experiencia en los comentarios. En otros artículos revisaremos otros componentes de Exponent como ExNavigation o Login Social.
Para cualquier duda pueden contactarme en el grupo de Facebook Developer Circles de Ciudad de México on en Twitter en @mkfnx.
