fcbk
Conéctate con TwitterConéctate con Facebook
3

Cómo publicar tu aplicación de React Native en App Store

233Puntos

hace 7 meses

Durante todo el proceso de desarrollo de una aplicación móvil desde cero hasta publicarla en los stores, no quedan dudas que los tramos más difíciles son el comienzo y el final. Curiosamente las cosas están repartidas entre plataformas:
  • En iOS empezar es muy sencillo, pero llegar a publicarla en el App Store es una verdadera hazaña.
  • En Android vamos a sufrir un poco al comienzo, pero llevarla a Google Play es bastante simple.
En este artículo haremos un repaso sobre estas etapas para cada plataforma y luego nos enfocaremos en lo que es -a mi parecer- la parte más difícil: publicar una aplicación iOS en el App Store.

Primeros pasos en React Native

Recomendación: si es tu primer proyecto en React Native deberías empezar leyendo esta guía (en inglés). Es muy completa, paso a paso y bien organizada. Como ya mencionamos antes, en iOS empezar es bastante sencillo: el Xcode (que podemos instalar sin costo desde el App Store), incluye los SDKs necesarios para construir nuestras aplicaciones, así como también un muy buen emulador. Por otra parte, en Android las cosas no son tan fáciles: vamos a tener que instalar los SDKs y build tools de Android, idealmente algún IDE (como Android Studio) y algún emulador de dispositivos Android si no queremos depender de un dispositivo físico -recomiendo Genymotion-.

Publicando en los stores

Después de haber desarrollado nuestra aplicación solamente resta publicarla en los stores. En el caso de Android alcanza con generar un certificado localmente y configurar nuestro proyecto para que la aplicación sea firmada con ese certificado cuando la construyamos en modo release. Estos pasos se encuentran en la documentación de React Native. Una vez que tenemos nuestra aplicación firmada ya podemos subirla a nuestra cuenta de Google Play. Pero las cosas cambian cuando se trata de iOS… Para poder subir una aplicación al App Store, primero hay que construirla y para esto es requisito tener una computadora Mac a disposición. Luego, para poder subir una aplicación al App Store sólo tenemos que:
  1. Tener una cuenta en Apple Developer
  2. Tener una cuenta en iTunes Connect
  3. Crear una aplicación en iTunes Connect
  4. Crear un certificado en la cuenta de iTunes Connect
  5. Crear un Distribution Provisioning Profile para esa nueva aplicación
  6. (Opcional) Crear un Development Provisioning Profile si queremos probar la aplicación en un dispositivo mientras la desarrollamos
  7. Construir, firmar y empaquetar la aplicación desde Xcode
  8. Subir al App Store el archivo .ipa obtenido en el paso anterior

¿Tengo que hacer todo esto?

Lamentablemente sí, es lo que Apple requiere para poder subir una aplicación al App Store.

Todavía no te vayas… ¡Hay una buena noticia!

Alguien (Felix Krause) se encargó de hacer una herramienta que nos va a ayudar con los puntos más difíciles. Más allá de los 2 primeros pasos que necesitamos hacer manualmente (y por única vez), vamos a poder automatizar el resto.

Nuestra salvación: fastlane

Esta asombrosa herramienta, fastlane, nos va a ayudar en un montón de tareas tediosas como generar certificados y provisioning profiles, construir y firmar nuestra aplicación, además de subirla al store. Lo mejor de todo es que es gratis y open source, por lo que está en constante mejora. De todo lo que fastlane ofrece, en este caso vamos a usar:
  • produce: para dar de alta nuestra aplicación en iTunes Connect.
  • match: para generar los certificados y provisioning profiles, y mantenerlos actualizados en un repositorio Git privado.
  • gym: para construir nuestra aplicación y luego firmarla con nuestro certificado.
  • deliver: para subir nuestra aplicación al App Store o TestFlight.
Ya estamos convencidos de usarlo (si no, te sugiero que busques cómo hacer todo esto manualmente), así que basta de introducción y manos a la obra.

Instalando fastlane

Lo primero que necesitamos es instalar fastlane. Es una ruby gem que podemos instalar de distintas maneras, la más simple es usando brew. brew cask install fastlane

Integrando fastlane en nuestro proyecto

Una vez finalizada la instalación, ya podemos integrar fastlane. Para eso, desde nuestra consola (parados en la carpeta de nuestro proyecto) corremos el siguiente comando fastlane init Durante su ejecución tendremos que ingresar ciertos datos que fastlane necesita para poder automatizar todos los procesos. En la siguiente imagen podemos ver cuáles son esos datos.
Este es el resultado de correr fastlane init y completar los datos requeridos durante su ejecución
Vayamos paso a paso, viendo qué debemos responder en cada caso.
  1. Primero nos pregunta si es un proyecto iOS, contestamos que sí: y
  2. Luego nos pide que le indiquemos donde se encuentra el project file ya que no puede detectarlo automáticamente. En React Native ese archivo está dentro de la carpeta ios y tiene extensión .xcodeproj(podés verlo entrando en esa carpeta). En nuestro caso respondemos: ./ios/PlatziMusic.xcodeproj
  3. Lo siguiente que nos pregunta es nuestro Apple ID, que no es más que la cuenta de email con que nos registramos en Apple. En mi caso es: aguirre.gonzalo@gmail.com
  4. A continuación nos pregunta si queremos crear la aplicación en iTunes Connect y Apple Developer Portal. Vamos a evitar esto por el momento, por lo que contestamos que no: n
  5. Lo próximo que debemos decidir es el id de nuestra aplicación. Por lo general la primer parte determina un dominio y el resto la aplicación. En este caso vamos a ingresar: com.platzi.music
  6. Vuelve a preguntarnos si queremos crear la aplicación en iTunes Connect y Apple Developer Portal. Contestamos nuevamente que no: n
  7. Finalmente nos pide el nombre del schema de nuestra aplicación, pero podemos simplemente presionar Enter si no lo necesitamos. Presionar Enter
¡Ya dimos el primer paso! Configuramos fastlane en nuestra aplicación y como resultado obtenemos una carpeta fastlane con dos archivos: Appfile y Fastfile. Más adelante veremos qué son y para qué nos sirven.

Dando de alta nuestra aplicación con “produce”

Para poder subir una aplicación al App Store es necesario primero darla de alta en iTunes Connect y Apple Developer Portal. Para esto fastlane nos provee el siguiente comando. fastlane produce
fastlane produce
Lo único que debemos ingresar es el nombre que queremos para nuestra aplicación. Si es la primera aplicación que creamos para esa cuenta de iTunes Connect obtendremos un error y tendremos que agregar el Company name como parámetro al comando, de la siguiente manera: fastlane produce --company_name UnderscopeIMPORTANTE: Este nombre es el que se verá luego en el App Store, por lo que debes elegirlo con cuidado. Ya dimos de alta nuestra aplicación en iTunes Connect y Apple Developer Portal! Pero por el momento solamente está registrado el nombre y el ID. Ahora nos queda construir nuestra aplicación, firmarla y subirla al store.

Generando certificados con match

Para que el App Store verifique que una aplicación es creada efectivamente por nosotros, hace falta firmarla con un certificado. Con match podemos generarlos con una línea de comando y además guardarlos en un repositorio Git para poder compartirlo con otros desarrolladores. No sólo eso, sino que también creará los provisioning profiles para nuestra aplicación. Primero debemos integrarmatch en nuestro proyecto ejecutando match init Nos va a pedir que ingresemos un repositorio Git privado donde guardará los certificados. (Bitbucket provee repositorios privados sin costo). Luego, como se puede ver en la imagen, podemos crear tres tipos de certificados según el entorno:
match init.png
  • development para poder instalar una aplicación en un dispositivo mientras la desarrollamos.
  • adhoc para crear un .ipa instalable en un dispositivo en particular.
  • appstore para crear un .ipa que pueda distribuirse por el App Store.
En este caso generaremos el de appstore pero podemos tener los tres en simultáneo. match appstore
match appstore.png
Este comando se encargará de:
  • Crear un nuevo certificado, importarlo e instalarlo localmente.
  • Crear un provisioning profile, importarlo e instalarlo localmente.
  • Encriptar y subir el certificado y el provisioning profile al repositorio Git.
Lo único que debemos hacer es elegir una clave que se usará para encriptar y desencriptar nuestros certificados.

Automatizando nuestro flujo

Hasta ahora todo lo que hicimos son cosas que debemos hacer una vez por aplicación, pero hay cosas que luego haremos repetidamente y por lo tanto conviene automatizar. El flujo que vamos a definir en este caso va a encargarse de construir, firmar y subir nuestra aplicación a TestFlight.

¿Qué es TestFlight?

Es un servicio de Apple que nos permite probar aplicaciones antes de publicarlas en el App Store y así evitar que llegue a los usuarios una versión defectuosa. Funciona como un App Store para usuarios invitados por nosotros.

¿Y cómo funciona?

Desde el lado del desarrollador hay que invitar desde la web de iTunes Connect a los usuarios testers y subir una aplicación a TestFlight. Desde el lado del usuario tester (que podemos ser nosotros mismos) hay que instalar en el dispositivo la aplicación TestFlight y luego, dentro de TestFlight, elegir la aplicación que queremos probar. Veamos entonces cómo automatizar este flujo… Al ejecutar fastlane init se habían generado dos archivos. Uno de ellos era Fastfile que contiene una serie de flujos (llamados lanes) ya pre-definidos. De todos estos flujos hay uno que se parece bastante a lo que buscamos: ... lane :betado gym pilot end ... Lo que define este lane es que al ejecutar desde consola fastlane beta se ejecutarán las instrucciones gym para construir y firmar nuestra aplicación y pilot para subir la aplicación a TestFlight. Vamos a modificar ciertas cosas de este lane:
  • Agregar ciertos parámetros a gym para que sepa qué proyecto construir.
  • Agregar un comando para poder incrementar el build_number automáticamente (necesario para subir nuevas versiones a TestFlight).
lane :beta do increment_build_number( xcodeproj: './ios/PlatziMusic.xcodeproj', build_number: latest_testflight_build_number + 1, ) gym( project: './ios/PlatziMusic.xcodeproj', scheme: 'PlatziMusic' ) pilot end Luego, si ejecutamos fastlane beta desde nuestra consola debería construirse, firmarse y subirse nuestra aplicación a TestFlight. Es probable que recibas el siguiente error:
error
Para poder solucionarlo vamos a tener que abrir nuestro proyecto en Xcode. Podemos hacerlo desde consola open ./ios/PlatziMusic.xcodeproj o bien abriendo el Xcode, Open Project. Dentro del Xcode seleccionamos nuestro proyecto, el target PlatziMusic y en la solapa de General debemos asegurarnos de 3 cosas:
  1. Que el campo Bundle Identifier coincida con el que habíamos usado para crear nuestra aplicación (en este caso com.platzi.music).
  2. Que la opción Automatically manage signing esté destildada.
  3. Que dentro de Signing (Release) esté seleccionado el Provisioning Profile que corresponde al App Store (match AppStore com.platzi.music en este caso).
bundle release.png
Una vez configurado esto dentro de Xcode, volvemos a nuestra consola y volvemos a ejecutar fastlane beta. Si todo sale bien la aplicación se va a construir (gracias a gym) y luego la instrucción pilot se encargará de conectarse a iTunes Connect para subir nuestra aplicación a TestFlight. Todo este proceso completo puede llevar algunos minutos y puede que nos pida alguna autorización (para permitir usar el certificado por ejemplo) en el transcurso. Es probable que la aplicación se suba con éxito pero aún así recibamos el siguiente error.
fastlane error.png
Solamente nos faltan dos cosas:
  1. Agregar un tester para nuestra aplicación desde iTunes Connect.
  2. Modificar (como sugiere el error) el archivo ./ios/PlatziMusic/Info.plist para que quede como el siguiente:
<plist> ... <dict><key>ITSAppUsesNonExemptEncryption</key><false/> ... </dict></plist>

¡Terminamos!

Con todo esto pudimos subir la primera versión de nuestra aplicación a TestFlight. No es nada sencillo y lleva tiempo, pero la buena noticia es que para generar y subir una próxima versión solo necesitaremos correr fastlane beta y en minutos tendremos una nueva versión de nuestra aplicación lista para probar en TestFlight.

Publicando en el App Store

Una vez probada la aplicación en TestFlight y seguros de que es la versión que queremos publicar, solamente resta promover esa versión de TestFlight al App Store. Si bien esto también puede automatizarse, mi consejo es hacerlo manualmente desde iTunes Connect asegurándose de elegir la versión que corresponda.

Conclusión

Publicar una aplicación en el App Store no es nada fácil. Hay una serie de requisitos y tareas tediosas que no podemos evitar. Por suerte existe fastlane.
Gonzalo
Gonzalo