Comenzando Con una Plantilla de React Native

() translation by (you can also view the original English article)

Diseñar una aplicación de React Native desde cero es regularmente un proceso incómodo--especialmente la parte de diseño, porque tienes que planear tanto para dispositivos Android como iOS. No solo eso, sino que también tienes que asegurarte de que tu aplicación se ve bien en diferentes tamaños de pantalla.

Aquí es donde las plantillas son de utilidad. Estas manejan el diseño inicial por ti de manera que tu app de vea bien con mínimo esfuerzo de diseño de tu parte. Hay un puñado de tales plantillas en CodeCanyon, una tienda para plantillas y complementos. Ahí puedes encontrar diferentes tipos de plantillas orientadas al tipo específico de aplicación que quieres crear.

En este tutorial, echaremos un vistazo a cómo usar la plantilla BeoStore. Como su nombre sugiere, BeoStore es una plantilla de aplicaicón e-commerce para React Native.

Obteniendo la Plantilla de la Tienda

Puedes descargar la plantilla yendo a la página de producto de BeoStore en CodeCanyon. Es una plantilla de pago, pero vale la inversión, porque tiene muchas de las características necesarias en una aplicación de e-commerce. Todo lo que necesitas hacer es configurar la plantilla y personalizarla a tu gusto. Para tener otra idea de lo que ofrece de inicio, aquí están algunas de sus características principales:

Integración completa con WooCommerce: Si estás manejando un sitio web WooCommerce, la aplicación puede mostrar los mismos productos que tienes en tu sitio web existente.
Soporte para iOS y Android: la aplicación corre y se ve bien tanto en plataformas Android como iOS.
Inicios de sesión sociales: los clientes pueden iniciar sesión usando sus cuentas de Facebook o Google.
Personalización sencilla: todo está desglosado en componentes. Esto asegura que puedas personalizar fácilmente la plantilla basado en tu marca.
Notificaciones Push: esto alerta automáticamente a tus clientes cuando hay una actualización al estado de su orden. También puedes mandar notificaciones push para promociones de productos. Las notificaciones push son implementadas con Firebase.
Soporte Multi-lenguaje: de entrada obtienes Inglés como el lenguaje principal. Existe Vietnamita como segunda opción, pero puedes agregar tu propio lenguaje.
Integración de pago seguro: los pagos son hechos con PayPal.

Si no tienes una cuenta Envato todavía, puedes registrarte aquí. Una vez realizado, inicia sesión en tu cuenta recién creada. Después regresa a la página de BeoStore y da clic sobre el botón Comprar Ahora.

Configurando el Proyecto

Una vez que haz comprado la plantilla, obtendrás un enlace de descarga para el archivo de la plantilla. Extrae eso y tendrás una carpeta de CodeCanyon que contiene MStore 2.2.

MStore 2.2 es la carpeta para la plantilla del proyecto. Sigue adelante u abre una nueva ventana de terminal dentro de esa carpeta y ejecuta el siguiente comando:

1	npm install

Esto instalará todas las dependencias del proyecto. Esto podría tomar un poco dependiendo de tu velocidad de descarga, debido a que tiene que descargar muchas dependencias. Echa un vistazo al package.json si quieres ver los paquetes que necesita descargar.

Una vez que está hecho, hay un paso adicional si quieres construir para dispositivos iOS. Ve a la carpeta iOS y ejecuta lo siguiente:

1	pod install

Después, para Android, conecta tu dispositivo móvil a tu computadora y ejecuta:

1	adb devices

Esto listará todos los dispositivos Android conectados a tu computadora. Si esta es la primera vez que estás conectando el dispositivo, deberías obtener un diálogo preguntándote si quieres permitir a la computadora la depuración USB. Solo presiona sí una vez que veas el diálogo.

Ahora puedes ejecutar la aplicación en tu dispositivo Android:

1	react-native run-android

Para iOS:

1	react-native run-ios

Si no encontraste ningún error, deberías ser recibido con la siguiente página:

Para darte una idea de las diferentes páginas disponibles en la plantilla, aquí hay algunas cuantas capturas más:

Resolviendo Problemas de la Configuración de Proyecto

En esta sección, he compilado una lista de errores comunes de configuración de proyecto y sus soluciones.

El Servidor de Desarrollo No Comenzó

Si el servidor de desarrollo no comenzó automáticamente cuando ejecutaste react-native run-android o react-native run-ios, puedes ejecutarlo manualmente ejecutando:

1	react-native start

Watch Tomó Demasiado Tiempo para Cargar

Si obtienes un error similar a lo siguiente:

Error building DependencyGraph:
 Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
    at [object Object]._onTimeout (index.js:103:16)
    at Timer.listOnTimeout (timers.js:89:15)

Esto es porque una instancia existente de Watchman está corriendo. Este es un componente del servidor de desarrollo de React Native. También puedes resolver este error y apagar Watchman ejecutando los siguientes comandos:

1	sudo sysctl fs.inotify.max_user_instances=99999
2	sudo sysctl fs.inotify.max_user_watches=99999
3	sudo sysctl fs.inotify.max_queued_events=99999
4	watchman shutdown-server

No pude ejecutar ADB Reverse

Si estás obteniendo el siguiente error:

1	error: closed Could not run adb reverse:
2	Command failed: /path/to/android-sdk-linux/sdk/platform-tools/adb -s
3	300494a80ea22200 reverse tcp:8081 tcp:8081

Significa que tu dispositivo Android se está ejecutando sobre una versión que es más baja que 5.0 (Lollipop). Esto de hecho no es un error. Simplemente significa que tu dispositivo Android no soporta adb reverse, el cuál es usado para conectar el servidor de desarrollo a tu dispositivo vía depuración USB. Si esto no está disponible, React Native regresa a depurar usando Wi-Fi. Puedes encontrar más información sobre esto aquí: Ejecutar en Dispositivo.

Algo más podría estar causando que tu construcción falle. Puedes desplazar hacia arriba la terminal para ver si hay algunos errores que han sucedido anteriormente.

No Se Encuentra la Variable `_fbBatchedBridge`

Si estás obteniendo el siguiente error y el servidor de desarrollo se está ejecutando en modo Wi-Fi, esto significa que no has configurado la IP de tu computadora en tu dispositivo Android. (Esto usualmente solo viene con dispositivos Android anteriores a la versión 5.0.)

1	ReferenceError: Can't find variable: _fbBatchedBridge (line 1 in the generated bundle)

Puedes ejecutar lo siguiente para mostrar las opciones de desarrollador de React Native en tu dispositivo:

1	adb shell input keyevent 82

Selecciona Dev Settings del menú que aparece. Bajo la sección Depuración, presiona Servidor host de depuración y puerto para dispositivo. Ingresa la IP interna asignada por tu router casero junto con el puerto en el cuál el servidor de desarrollo está corriendo y presiona OK:

1	YOUR_INTERNAL_IP:8081

Regresa a la pantalla inicial de la aplicación y ejecuta adb shell input keyevent 82 de nuevo. Esta vez selecciona Recargar para recargar la aplicación.

No Se Pudo Encontrar Firebase, App Compat o GMS Play Services

Si estás obteniendo errores "no se pudo encontrar", esto significa que no has instalado el paquete correspondiente usando el Administrador SDK de Android.

Aquí están los paquetes que necesitan ser instalados:

Android Support Repository
Android Support Library
Google Play Services
Google Repository

Asegúrate de que también actualizar paquetes existentes si hay alguna actualización disponible.

Otros Problemas

Si tu problema no involucra ninguno de los anteriores, puedes intentar lo siguiente:

Revisa la documentación en solución de problemas.
Revisa los comentarios de producto de la plantilla. Puedes buscar el error que estás obteniendo. Intenta generalizar y acortar el mensaje de error sin embargo--no solo busques el mensaje de error entero. Si no puedes encontrar el error, puedes intentar hacer tu pregunta en la sección de comentarios. El equipo de soporte generalmente contesta prontamente.
Intenta buscar el error en Google. Incluso si los resultados que encuentras no involucran el uso de la plantilla, te darán una idea de cómo resolver el problema.
Busca en StackOverflow o haz una nueva pregunta. Asegúrate de incluir todos los detalles necesarios (ej. mensaje de error, pasos que has seguido). Hay un buen artículo sobre cómo hacer preguntas en StackOverflow.

Personalizando la Plantilla

Un buen lugar para comenzar a aprender cómo hacer las cosas en la plantilla es su documentación:

Retícula del Proyecto: muestra en donde encontrar los diferentes archivos en la plantilla y para qué son usados.
Migración WooCommerce: muestra cómo puedes enganchar tu sitio web WooCommerce existente a la aplicación. Enganchando tu aplicación a tu WooCommerce significa que será capaz de traer todas las categorías y productos en tu tienda de WooCommerce.
Servicios de Migración: muestra cómo configurar el nombre de la aplicación, Firebase (para notificaciones push), e inicio de sesión social.
Personalizar: muestra cómo personalizar el lenguaje y temas.

¡Asegúrate de revisar esos! No voy a repetir lo que se mencionó en la documentación. En su lugar, lo que vamos a hacer en esta sección es de hecho personalizar la plantilla para que se vea de la manera que queremos.

La mayoría de los ajustes de configuración del proyecto están almacenados dentro del archivo app/Constants.js. Aquí hay algunos cuantos ejemplos de cosas que puedes cambiar de este archivo:

Integración WooCommerce: La URL de la tienda WooCommerce usada por la aplicación. Por defecto, esto usa mstore.io.

WordPress: {
    Address: 'http://mstore.io/api',
},
WooCommerce: {
    url: 'http://mstore.io',
    consumerKey: '',
    consumerSecret: '',
    wp_api: true,
    version: 'wc/v1',
    timeout: 10, //request timeout
    RootCategoryId: 0,
    Product: {
        Display: {
            ProductThumbnails: {width: 180, height: 216,},
            CatalogImages: {width: 300, height: 360,},
            SingleProductImage: {width: 600, height: 720,}
        }
    },
},

Inicios de sesión sociales: Esto es implementado usando Auth0, una plataforma de autenticación. Por defecto, la plantilla solo soporta inicios de sesión de Google y Facebook. Pero deberías poder agregar cualquier servicio que Auth0 soporte.

1	Auth0: {
2	clientId: '',
3	domain: '',
4	},

Iconos: Puedes usar cualquier icono de Fontawesome, pero deberías prefijar el nombre con ios-.

Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons.
    Menu: 'ios-menu',
    Home: 'ios-home',
    Back: 'ios-arrow-back',
    Forward: 'ios-arrow-forward',
    Config: 'ios-settings',
    More: 'ios-more',
    SignIn: 'ios-log-in',
    SignOut: 'ios-log-out',
    ShoppingCart: 'ios-cart',
    ShoppingCartEmpty: 'ios-cart-outline',
    Sort: 'ios-funnel',
    Filter: 'ios-funnel-outline',
    ShowItem: 'ios-arrow-dropright',
    HideItem: 'ios-arrow-dropup',
    ListMode: 'ios-list-box',
    GridMode: 'ios-grid',
    RatingFull: 'ios-star',
    RatingEmpty: 'ios-star-outline',
    Wishlist: 'ios-heart',
    WishlistEmpty: 'ios-heart-outline',
    Delete: 'ios-trash',
    AddToCart: 'ios-cart',
    MyOrder: 'ios-cube',
    News: 'ios-paper',
    Mail: 'ios-mail',
    RatioOff: 'ios-radio-button-off',
    RatioOn: 'ios-radio-button-on',
    Search: 'ios-search',
    Close: 'ios-close',
    HappyFace:'ios-happy-outline',
    SadFace: 'ios-sad-outline',
},

Tema: Colores para los diferentes componentes que componen cada página también pueden ser actualizados. Por ejemplo, si quieres cambiar el color de fondo del encabezado, puedes actualizar el valor para TopBar:

1	Color: {
2	TopBar: 'white',
3	TopBarIcon: '#283747',
4	}

Imágenes: La pantalla splash y otras imágenes también pueden ser actualizadas especificando una nueva ruta para cada uno de los siguientes:

Image: {
    Logo: require('./images/logo.png'),
    SplashScreen: require('./images/splash_screen.png'),
    CategoryPlaceholder: require('./images/category_placehodler.png'),
    DefaultAvatar: require('./images/default_avatar.jpg'),
    AvatarBackground: require('./images/avatar_background.jpg'),
    CheckoutStep1: require('./images/line-1.png'),
    CheckoutStep2: require('./images/line-2.png'),
    CheckoutStep3: require('./images/line-3.png'),
    Stripe: require('./images/stripe.png'),
    PayPal: require('./images/PayPal.png'),
    CashOnDelivery: require('./images/cash_on_delivery.png'),
    PlaceHolder: require('./images/placeholderImage.png'),
},

Estas imágenes son almacenadas en el directorio app/images, puedes simplemente reemplazarlos si no quieres mantener las viejas imágenes.

También puedes cambiar las opciones PayPal desde este archivo. Asegúrate de crear tu propia Cuenta de Desarrollador PayPal para obtener el clientID y secretkey. No olvides actualizar sandBoxMode a false cuando despliegues tu aplicación a producción, porque por defecto usa el modo sandbox para que no se gaste dinero real en transacciones.

PayPal: {
    clientID: '',
    secretKey: '',
    sandBoxMode: true, //change to false on production
},

Para personalizar páginas individuales, necesitas ir al directorio app/containers. Aquí es donde encontrarás los archivos para cada página. Por ejemplo, si quieres personalizar la página de inicio, navega al folder home y abre el archivo index.js. Una vez abierto, verás que la página usa el componente ><ImageCard> para generar cada categoría de producto. Así que si quieres agregar un estilo general para el componente <ImageCard> , tienes que actualizar el archivo app/Components/ImageCard/index.js. De otro modo, puedes simplemente actualizar los estilos dentro de la página misma:

this.styles = {
    container: {flex: 1},
    imageCard: {
        width: Constants.Dimension.ScreenWidth(1),
        height: 200,
    },
    mainCategoryText: {
        color: 'white', //change the color of the category text
        fontSize: 40 //make the category text bigger
    },
    numberOfProductsText: {
        color: 'white',
        fontSize: 15
    }
}

Conclusión

Este tutorial no es por ningún medio una guía comprensiva sobre cómo usar la plantilla BeoStore. Pero hemos cubierto mucho terreno, especialmente en solución de problemas de instalación, lo que le falta a la documentación oficial.

El siguiente paso es enganchar esta plantilla con tu sitio web WooCommerce o incluso reutilizarlo de manera que pueda ser usado para otro tipo de aplicaciones.

Descarga la plantilla ahora, o si quieres aprender más sobre ella, puedes revisar la documentación aquí. También puedes encontrar muchas más plantillas React Native en CodeCanyon.