DIA 16 / 2016

Creando nuestra primera app nativa usando React Native

La presencia en el mundo mobile de cualquier proyecto es tan importante como tener una web. Gracias a React Native podremos crear apps nativas para iOS y Android fácilmente y es por esto que en este artículo haremos una pequeña introducción, explicando qué es y como se estructura un proyecto con este framework.


El auge del mobile en el mundo de las nuevas tecnologías

Si hay algo que no podemos negar hoy en día es que el mobile cada vez va tomando más protagonismo en el mundo de las nuevas tecnologías y más en Internet. Haciendo una simple búsqueda en Google veremos como hay millares de gráficas con muchos números indicando que el uso del móvil por parte de los usuarios es cada vez mayor haciendo que estar preparados para este hecho tome importancia en nuestros negocios. Esto lleva a que la tecnología también se adapte a ello produciendo que salgan nuevas soluciones o herramientas como La Web Reponsive. Yendo más allá a nivel tecnológico podemos observar el nacimiento de nuevos frameworks orientados al mundo móvil, como Ionic Framework, Titanium o React Native.

React Native: desarrollando apps nativas usando Javascript

React Native es un framework desarrollado por Facebook que permite desarrollar apps nativas iOS y Android usando Javascript. Sí, has leído bien, apps nativas usando Javascript, sin Objective-C o Java de por medio. ¿Pero dónde está el truco? React Native lleva como un “puente” donde su función es la de traducir el código React Native en Objective-C, para el caso de iOS, y Java en Android. Es algo mágico que permite a los programadores web poder desarrollar apps nativas sin tener que aprender nuevos lenguajes de programación muy específicos para cada una de las plataformas. A parte que la sintaxis de React Native es bastante clara y sencilla, además de heredar el mismo diseño que React, aportando flexibilidad y reaprovechamiento en el código. Faltaría añadir por último que el código fuente que desarrollemos, en nuestra primera app, será un 100% compartido con iOS y Android. Esto quiere decir que el código Javascript que hagamos nos servirá tanto para la app en iOS como en Android.

Primeros pasos

Antes de picar cualquier tecla tendremos que preparar el entorno para poder hacer nuestra primera app (en esta guía trabajaremos el ejemplo con la app iOS en Mac):

Instalar Xcode

Para poder simular la app iOS necesitaremos el software de desarrollo de Apple, Xcode. Solamente vamos a usar el simulador iOS que lleva integrado para poder abrir y trastear con nuestra app.

Instalar node

En Mac se puede instarlo sin problemas usando Homebrew sin tener que bajarlo manualmente y instalarlo, ya que este último procedimiento normalmente da problemas. El comando para instalar node sería:

bew install node

Instalar React Native

Una vez tengamos node instalado en nuestro ordenador podremos instalar React Native lanzando el siguiente comando el la terminal:

npm install -g react-native-cli

Inicializar la app en React Native

Ahora que ya tenemos todo el entorno preparado para poder empezar a programar nuestra primera app con React Native, iremos otra vez a la terminal y nos situaremos en una carpeta donde queramos color el código fuente del proyecto y ejecutaremos el siguiente comando, donde le decimos a React Native que inicie un nuevo proyecto con el nombre de octuweb:

react-native init octuweb
react-native-init
reac-native-init-2

Estructura de ficheros y carpetas del código de nuestra app

Después de esperar un buen rato y de ver unos cuantos mensajes en la terminal podemos observar que React Native ha creado una carpeta llamada octuweb que contiene todos los ficheros necesarios para desarrollar la app. También vemos que los últimos dos mensajes que ha dejado React Native en la terminal ya nos dice como abrir nuestra app con el simulador pero esto lo veremos más adelante. Centrémonos en la estructura de los ficheros del proyecto:

react-native-estructura-proyecto

Como podemos observar, tenemos cuatro carpetas y varios ficheros. Claramente, la primera carpeta __test__ son para temas de testing. Las dos siguientes carpetas, android y ios, son las carpetas que contienen los ficheros “nativos” de nuestra app en cada una de las plataformas. No nos harán falta para nada. El último directorio, node_modules, es donde se guardan las diferentes librerías necesarias que usa nuestra app.

¿Y dónde está el código fuente (en Javascript) de nuestra app? Pues en index.ios.js y en index.android.js. Estos dos ficheros contienen el código fuente de nuestra app, uno para iOS y otro para Android. Y lo bueno de React Native es que si no se usan módulos específicos de cada plataforma (por ejemplo el DatePicker de iOS) el código fuente de los dos ficheros puede ser el mismo sin problema.

Entendiendo el esqueleto de index.ios.js

Iremos destripando poco a poco el fichero de la app hasta entender los diferentes bloques que la componen:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

Este primer bloque de código que encontramos simplemente importa el componente principal, React, y luego los diferentes componentes que se van a usar en la app: AppRegistry, para registrar la app en el proyecto; StyleSheet, para dar estilos a las vistas usando pseudocss; Text, es la etiqueta para insertar texto; View, para declarar una vista.

export default class octuweb extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

En este bloque de código se define el componente principal de la app, octuweb. El método principal es render() en el cual se usa para renderizar el código en la app. En este método encontramos la etiqueta <View> que se encarga de agrupar las diferentes etiquetas de texto <Text>. Ambas etiquetas aceptan el atributo style en el cual podemos pasar la referencia de los estilos escritos en pseudocss que veremos a continuación:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Se declara una variable styles del tipo un objeto StyleSheet (recordemos que lo hemos importado el principio del fichero) y en este se va definiendo cada una de las propiedades deseadas. En este caso, tres: container, welcome y instructions. Luego en las etiquetas de más arriba se hace referencia a cada una de ellas usando la notación {styles.container} por ejemplo.

AppRegistry.registerComponent('octuweb', () =&gt; octuweb);

Finalmente se registra la app para que React Native sepa que “octuweb” es la componente principal.

Arrancando nuestra app en el simulador

Ya vista la estructura básica de una app en React Native iremos a la terminal y ejecutaremos el siguiente comando:

react-native run-ios

A partir de este momento React Native empezará a compilar la app para iOS pasando por diferentes procesos que podremos ver por la terminal. Una vez termine todo este largo proceso se nos abrirá la app en el simulador iOS de Xcode:

welcome react native

Os animo a ir cambiando el código fuente de la app para poder ir jugando con ella y veréis que programar con React Native no es muy complicado gracias a que la documentación está bastante bien.

Joan Artés
Joan Artés

Organizador de Meetups y WordCamps de la comunidad WordPress en Barcelona. Trabaja en Artesans by Omitsis como WordPress Captain desarrollando grandes proyectos web usando WordPress. A veces dice algo interesante en su blog joanartes.com y los días impares que hace sol twittea.