[Spin+][Mobile] Configuración ambiente de desarrollo

Bienvenidos a esta pequeña guía de instalación de aplicaciones y complementos para el desarrollo de software. En este caso se aplica para las posiciones que giran al entorno de Mobile Developer, pero no se limita a más opciones de desarrollo de software.

Lo primero que tenemos que hacer es validar los permisos de administrador, por lo cual existen tres maneras hasta la actualidad de validar los permisos de administrador, los cuales son:

1. Buscar un encargado de self care para la instalación de aplicaciones mediante Slack o correo electrónico, anexo algunas personas encargadas en este proceso:

   1. Gerardo Lira — kiofs1.ext@digitalfemsa.com

   2. Alejandro Pichardo Gonzalez — alejandro.pichardo@digitalfemsa.com

   3. Pablo Hinojosa — pablo.hinojosa@digitalfemsa.com

2. Solicitar la instalación de las herramientas que necesites en el sitio web de Digital Femsa. Anexo link: https://digitalfemsa.atlassian.net

1. Seleccionar tu opción que necesites.

2. Llenar los datos requeridos y enviar información.

Correr la aplicación de MakeMeAdmin que se encuentra en el Self Service (opción recomendada)

Instalación de aplicaciones para front end.

Las aplicaciones que se instalaron fueron las solicitadas en el proyecto de Spin Plus, las cuales vienen de este link: Software de trabajo A continuación muestro un pequeño tutorial y enlaces de descarga para las aplicaciones necesitadas.

Configuración del ambiente de desarrollo

El stack de tecnología a ocupar será React-Native con React-Native CLI por lo que es necesario tener instalado ambos ambientes de desarrollo (iOS/Xcode, Android/Android Studio)

Open

Disclaimer: La ambientación fue hecha en una MacBook Pro (13-inch, M1, 2020), con chip Apple M1

IDE de desarrollo iOS

Para iOS se esta ocupando Xcode en la version 13.2 el cual se podrá descargar desde el siguiente enlace se deberá hacer scroll hasta encontrar la versión especificada y comenzará la descarga de un archivo .xip posterior a la descarga extraer el contenido del paquete y arrastrar el app a la carpeta de aplicaciones

IDE de desarrollo Android

Para android se está ocupando Android studio en la version Android Studio Bumblebee | 2021.1.1 optimizado para chips M1 el cual se podrá descargar desde el siguiente enlace importante es necesario descargar la versión optimizada para chips Apple

IDE de desarrollo React-Native

Se recomienda el uso de Visual Studio Code sin embargo se podrá usar cualquier otro IDE

Visual studio add ons

Git

Para el uso de Git por favor referirse al siguiente link: [Acuerdos de uso GIT](https://mxce.atlassian.net/wiki/spaces/MXCE/pages/1048583

/Control+de+C+digo+fuente+Source+Control+Management )

TLDR; se ocupará Trunk Based Development. Es indistinto si se usa Git a través de la terminal o de algún cliente gráfico como es SourceTree.

Home brew

Se utilizará home brew como gestor de librerías, para instalarlo será necesario correr el siguiente comando:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Para mayor información consultar el siguiente enlace, brew.sh

React Native

Es necesario descargar Node y Watchman (Herramienta desarrollada por Facebook que detecta cambios en los archivos) con los siguientes comandos:

brew install node brew install watchman

Clonación de repositorios con Github

Antes de poder realizar cualquier movimiento en Github debemos de verificar dos cosas importantes:

1. Creación de cuenta de Github con el correo de la empresa (digitalfemsa), confirmar y validar los repos que nos hayan invitado mediante correo electrónico.

2. Verificar si tienes en tu máquina git, en caso de que no lo tengas lo puedes realizar con el siguiente comando:

Por cuestiones de seguridad debemos de crear un PAT (Personal Access Token) el cual tiene que estar validado con el SSO (Single Sign-On). A continuación se muestra un pequeño tutorial de como crear el PAT y validarlo con el SSO.

Creación de Personal Access Token (PAT)

Open

Lo primero que tenemos que hacer es entrar a nuestra cuenta de Github y seleccionar en la parte de nuestro perfil.

Seleccionaremos la opción de Settings. Bajaremos por la página de Settings hasta llegar a la opción de Developer Settings y entramos a esa opción.

En la parte superior derecha, estará un menú con algunas opciones. Presionamos la opción de Personal access tokens y después Token (classics).

Seleccionaremos la opción de Generate new token en la cual vamos a seleccionar la opción de classic para poder seguir con el desarrollo del token.

Aquí es donde definimos el nombre del token, la duración y los permisos que tendrá ese token los cuales tienen que ser contactados con tu líder técnico. Desplazaremos hasta abajo para poder guardar el token que acabamos de generar.

Configurar SSO (Single Sign-On)

Para poder configurar nuestro token con el SSO lo primero que tenemos que validar es si ya tenemos los permisos de SSO. En caso de que no lo tengas continua con esta sección. Para poder validar eso tienes que entrar a este enlace. https://myapps.microsoft.com/ en el cual entraremos a la aplicación de Github.

Y autorizaremos los permisos de Github para poder vincular el SSO.

Para poder conectar el SSO con el token de Github tenemos que autorizar los permisos desde el apartado del token.

Y presionaremos el botón de Configure SSO y autorizamos la organización que este en ese momento.

Clonar repositorio

Para poder clonar el repositorio en este caso lo haremos mediante HTTPS pero no se limita a usar otras opciones de clonación.

Integración de módulos

Para poder hacer un npm install al proyecto es importante poder realizar lo siguiente, este comando solo se realiza la primera vez que quieres correr el proyecto.

npm login --registry=https://npm.pkg.github.com -- scope=@digitaltitransversal

El cual se va a solicitar 3 datos importantes:

Configurar repositorios y construcción.

Configuración para iOS.

Para poder configurar el ambiente de desarrollo se podrá consultar el siguiente la documentación oficial, sin embargo, aquí se listarán los pasos necesarios.

Será necesario configurar (si es que no se ha hecho) las Command Line tools de Xcode; al abrir Xcode se mostrará el mensaje de que es necesario descargar y configurarlas, se deberá de aceptar el mensaje para posteriormente poder validar en la pantalla de preferencias (cmd + ;) -

> Locations -> Command Line tools, se deberá de seleccionar las de la versión que se esta usando (13.2)

Cocoapods

Para poder compilar el proyecto en simuladores o dispositivos físicos para iOS es necesario instalar CocoaPods con el siguiente comando:

sudo gem install cocoapods

Nota para usuarios con chips M1

Cocoapods aún no soporta esta arquitectura directamente por lo que si existe algún error al instalar cocoapods se podrá correr el siguiente comando:

sudo arch -x86_64 gem install ffi arch -x86_64 pod install

El paquete ffi cargará las librerias enlazadas de manera dinamica y permitirá que el comando pod install corra de manera

correcta

Simulador

Vamos a verificar si tenemos como predeterminado nuestro simulador de “¡Phone 13”, ya que la mayoría de los proyectos se corre en base de este simulador. En caso de que no lo tengas vamos a configurar un simulador de ¡Phone 13 siguiendo los siguientes pasos.

Abriremos la aplicación de Simulator y en la sección superior izquierda accederemos a la opción de File > New Simulator…

Llenaremos los siguientes datos, en el Simulator Name colocaremos lo siguiente: iPhone 13 y en el tipo de equipo escogeremos el iPhone 13, como se muestra en la siguiente imagen

Configuración para Android

Para poder compilar en android se deberá de tener una versión de JDK, por lo cual se recomienda Azul Zulu, se deberá de correr el siguiente comando:

brew tap homebrew/cask-versions brew install --cask zulu11 Variables de entorno

También se deberán de agregar las siguiente variables de ambiente, dentro del .bash_profile/.zprofile/.zshrc export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_SDK_ROOT/emulator export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

Una vez que se agregaron se deberá de correr el siguiente comando dependendiendo config file.

source ~/.bash_profile source ~/.zprofile source ~/.zshrc

Repositorio de tr_spinplus

Para poder empezar con la configuración de este repositorio lo primero que tenemos que hacer es verificar si ya hicimos el git clone. Para evitar posibles o futuros errores en el sistema es importante tener definido la versión de node. En este caso vamos a usar la versión de 16.17.0 te recomendamos descargar e instalar nvm para tener un versionado de versiones de node, te dejamos el enlace de las aplicaciones que tienes que descargar e instalar en tu computadora. Software de trabajo

Comandos generales

Para poder instalar las dependencias del proyecto ejecutaremos

yarn install // instala depencias del proyecto

iOS

Para poder correr el proyecto en iOS debemos de ejecutar los siguientes comandos:

cd ios && pod install // nos sirve para instalar los pods para ios yarn ios:dev // ejecuta el proyecto en modo desarrollador.

En caso de que no se haya configurado correctamente el iPhone 13, podemos correr el proyecto con el uid del dispositivo, para poder hacer esto, ejecutaremos el siguiente comando:

xcrun simctl list devices // muestra todos los simuladores de phone

Escogeremos el uid del ¡Phone 13 y lo ejecutaremos mediante el siguiente comando:

npx react-native run-ios --scheme "CoalicionDev" --udid="/Aqui va el UDID de algún simulador/"

Android

Para poder correr el proyecto debemos de ejecutar el siguiente comando:

yarn android:dev // ejecuta el proyecto en modo desarrollador.

Repositorio de tr_superapp_core y repositorio de tr_spinplus_showcase

Para poder instalar las dependencias del proyecto debemos de ejecutar el comando de:

yarn install // se instalan las dependencias yarn example // se crea el folder de example.

iOS

Para poder ejecutar el proyecto en iOS debemos de ejecutar el siguiente comando dentro de la carpeta de example:

cd ios && pod install // instalar los pods. cd .. && yarn ios // ejecutara el proyecto.

Android

Para poder ejecutar el proyecto en Android, debemos de ejecutar el siguiente comando dentro de la carpeta de example:

yarn android // ejecuta el proyecto

Addendum:

Si se tiene configurada la sincronización de archivos a través de iCloud y se genera el proyecto el directorio Documents o Documentos el proyecto no compilará, mandará un mensaje de error señalando que hay librerías duplicadas. Por lo tanto, es importante generar el proyecto en la carpeta Desktop o Escritorio o bien en cualquier carpeta almacenada de manera local.