Como utilizar CocoaPods con React Native en iOS
Con todo este revuelo que esta causando React Native, me di a la tarea de realizar una pequeña guia para jugar un poco con React Native, básicamente realizare una serie de publicaciones donde documentare el proceso de recrear una aplicación que tengo en ambiente nativo de iOS utilizando React Native y de paso resolver algunas dudas.
Instalación de todo lo necesario para tu proyecto
Instalar CocoaPods
$ gem install cocoapods
$ Pod --version
Instalar Brew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew update
$ brew doctor
$ export PATH="/usr/local/bin:$PATH"
$ brew --version
Instalar Node
$ brew install node
$ node --version
Instalar React
$ npm install -g react-native-cli
$ react-native --version
Crear Projecto de React y configurar CocoaPods
$ mkdir EventualReact
$ cd EventualReact
$ react-native init Eventual
$ cd Eventual/ios
$ Pod init
$ nano Podfile
Ahora podrás poner aquí cualquier dependecia que necesites en tu proyecto de iOS, agregare el SDK de Google para poder utilizarlo en la app y crear un login con tu cuenta de Gmail utilizando OAuth2.
# Uncomment this line to define a global platform for your project
# platform :ios, '8.0'
# Uncomment this line if you're using Swift
# use_frameworks!
target 'Eventual' do
pod 'Google'
pod 'GoogleSignIn'
end
target 'EventualTests' do
end
Es momento de crear el workspace con las dependencias necesarias.
$ pod install
¿Te aparecieron varios warnings? Solución de problemas
$ open Eventual.xcworkspace
CocoaPods y Rect Native generan un conflicto en la configuración del build, se soluciona abriendo tu workspace y agregando $(inherited) en la fase de Debug y Release de tu proyecto.
Deshabilita Dead Code Stripping en las propiedades de tu proyecto para solucionar este issue relacionado con React Native al momento de correr tu aplicación en tu dispositivo.
Deshabilita Enable Bitcode en tu proyecto, esto se necesita para utilizar el SDK de Google
Instalar el componente para Google Sign-In
Para crear las credenciales necesarias para utilizar Google Sign-In es necesario el Bundle de tu app, lo puedes obtener de los settings de tu proyecto:
Ingresa a la siguiente liga para crear tu proyecto en Google ligado a tu aplicación:
Habilita Google Sign-In y descarga el archivo GoogleService-Info.plist
Configurar el proyecto de XCode para utilizar el componente en JS.
Vamos a utilizar el siguiente componente desarrollado por la comunidad https://github.com/apptailor/react-native-google-signin es necesario descargar el codigo utilizando el manejador de paquetes de node, los archivos quedaran guardados en la carpeta:
Eventual/node_modules/react-native-google-signin/RNGoogleSignin
$ npm install react-native-google-signin --save
El componente que descargamos desde el repositorio de Github viene con una version del SDK de Google pero como nosotros estamos usando CocoaPods para usarlo, solo es necesario agregar el código fuente el componente a nuestro proyecto:
.
.
.
.
Selecciona la opción de realizar una copia de los archivos a tu proyecto.
Eventual/node_modules/react-native-google-signin/RNGoogleSignin
.
.
.
.
.
La libreria de Google tiene dependencia a los siguientes frameworks de iOS que necesitas agregar a tu proyecto: AddressBook.framework StoreKit.framework y SystemConfiguration.framework
El proceso de la obtención del token OAuth para la autenticación requiere una configuración de esquemas de URLs para que nuestra aplicación tome los tokens cuando el usuario nos de los permisos, es necesario que utilizes tu archivo GoogleService-Info.plist para tomar los datos:
a) El primes Scheme es el valor de REVERSED_CLIENT_ID, tienes que ponerlo como identificador y como URL Scheme
b) El segundo valor es el identificador de tu aplicación.
Es necesario modificar el archivo AppDelegate.m para que nuestra app maneje los callbacks de las URL de la siguiente manera:
- Importa la libreria #import “RNGoogleSignin.h”
- Agrega este metodo antes del cierre de tu implementacion
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [RNGoogleSignin application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
¿Como ejecuto la aplicación en mi teléfono?
React Native utiliza tu computadora como servidor y poder extraer los cambios en tu código de JS, por lo que es necesario realizar una modificación en tu archivo AppDelegate.m remplazando localhost por la ip de tu maquina, si lo deseas probar en el emulador este cambio no es necesario.
Cuando le des click al icono de correr automáticamente se te abrirá una pantalla de consola esto indica que el servidor para alojar los archivos de JS esta funcionando como debería, espera un poco para que el servicio inicie y poder ver la pantalla de “Welcome to React Native!” en tu teléfono.
Es momento de jugar un poco con React, ya puedes cerrar XCode por ahora.
En la carpeta de tu proyecto abre el archivo de index.ios.js y modifica cualquier leyenda, sacude tu teléfono con la aplicación abierta y te aparecerá el menu de debug para refrescar la vista de tu aplicación para ver los cambios que realizaste en tu JS entre otras cosas.
Google Sign-In con React
Utiliza el siguiente código en tu index.ios.js para realizar el Google Sign-In desde tu programa en React Native:
¿Como instalo mi aplicación sin necesidad de la computadora como servidor?
Hasta el momento estamos usando React Native en modo de desarrollo y es necesario tener el la computadora y el teléfono en la misma red para que los cambios en la vista se reflejen sin estar compilando a cada rato, si tienes tu app lista para correr en el teléfono solamente debes hacer lo siguiente:
Cambiar el scheme a modo Release
Descomentar la linea para que tome el código desde tu teléfono y no desde el tu computadora como servidor.
Si agitas tu teléfono el menu de debug ya no aparece y puedes publicar tu app en Apple Store si así lo deseas, ya no es necesario tener tu computadora como server, obviamente tus cambios en index.io.js ya no se reflejan y necesitas compilar de nuevo, puedes hacer switch entre modo Debug y Release, solo tienes que cambiar el scheme a Debug y comentar la linea que se descomento en el paso anterior.
Ahora un poco de explicación de lo que esta pasando.
Después de configurar todo tu ambiente de trabajo, obtendrás como resultado una carpeta con lo siguiente:
index.android.js: Archivo de JS que React utiliza para android.
index.ios.js: Archivo de JS que React utiliza para iOS.
android: Aquí se encuentra tu proyecto de Java para android puedes importarlo y abrirlo en Android Studio.
iOS: Aquí se encuentra tu proyecto de XCode de la aplicación de iOS.
¿Por que esta separado Android y iOS, que no se supone que React es para generar aplicaciones con un solo código?
….mmm la respuesta es no, esa afirmación no es acertada, React Native es desarrollado para aprender una vez y desarrollar para ambas plataformas, tu código en JS es utilizado por el Bridge de React Native para generar los controles necesarios en tu lienzo de la aplicación nativa en cada una de las plataformas, por eso es que tienes dos carpetas con un proyecto por plataforma.
¿Y entonces para que me sirve React si tengo que codear dos JS para cada plataforma?
Sirve para abstraer mejor el controlador y la vista de tu aplicación con una ventaja considerable, el mismo lenguaje de programación para Android y iOS, así poder reutilizar la mayor cantidad de código en ambas plataformas, de esta manera todos tus procesos dentro de la app los realizas de una forma y solo la manera de presentarlo en el teléfono cambia, dependiendo si es iOS o Android:
¿Por que tengo dos index (index.android.js y index.ios.js)?
Es para poder representar de la mejor manera tu información en cada plataforma, se tiene que tomar en cuenta lo siguiente:
a) Algunos componentes no tienen una contraparte para representar lo mismo entre Android y iOS.
b) React Native no tiene el componente genérico (aun) que maneje ese tipo de elemento en ambas plataformas, aun cuando sea el mismo en Android y iOS o la funcionalidad sea la misma.
c) La funcionalidad del componente genérico no es muy buena; por ejemplo Navigator, lo utilize en iOS y tenia algunos problemas en como se presentaba, como si se mezclaran las vistas entre la navegación, realize el cambio a NavigatorIOS y funciona perfectamente, este elemento no lo podría poner en el archivo index.android.js y Navigator tengo entendido que si (aun no lo he confirmado).
Puedes identificarlos los componentes por que terminan con el nombre de la plataforma por ejemplo: ProgressBarAndroid y NavigatorIOS los genéricos solo tienen el nombre del componente.
Cualquier comentario mandame un Tweet o contactame en Linkedin
