Frontend - ambientación local
- Eduardo Martinez (Unlicensed)
Bienvenido al proyecto SPINbyOXXO, este pequeño manual servirá como base para que tengas a la mano todo lo necesario para hacer un onboarding más rápido.
Primero que nada el SO recomendado es MAC, sin embargo aquí pondré consideraciones para poder levantar el proyecto en Windows.
Cualquier duda puedes seguir la documentación oficial: Get Started with React Native · React Native
Configuración general
Repositorio: https://github.com/fintechdigitalventure/pagopop-mobile
Para entrar al repositorio se debe acceder mediante la VPN de Oxxo.
VPN: https://ov.spinbyoxxo.com.mx/
Versión de node: 16.x.x
Versión de NPM: 8.x.x
Instalación de Android Studio: Download Android Studio & App Tools - Android Developers
Al momento se recomienda Android 10 (Q)*
MAC OS
Primero que nada se recomienda instalar: Homebrew ingresamos en la terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Lo siguiente es ejecutar:
brew install node
brew install watchman
Instalar el Java Development Kit
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8
Entorno de desarrollo para Android
Instalación de Android Studio
Completar la instalación y asegurarse de seleccionar:
Android SDK
Android SDK Platform
Android Virtual Device
Asegurarse de tener instalado Android SDK 10 (Q) mínimo. Esto se encuentra en:
Appearance & Behavior → System Settings → Android SDK.
Validar que se tenga seleccionado:
Android SDK Platform 29 (o mayor)
Intel x86 Atom_64 System Image o Google APIs Intel x86 Atom System Image
Configuración de variables de entorno.
NOTA: Validar qué terminal se está ejecutando, para esto podemos abrir una terminal local y ver en la parte superior. Para este caso tenemos zsh.
Una vez que identificamos la terminal que estamos ejecutando, modificamos o creamos el archivo .zshrc para añadir las siguientes variables de entorno:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
Estas variables también pueden ser agregadas al archivo .bash_profile
Guardar, despues ejecutar el comando source .bash_profile
NOTA: Puedes crear este archivo desde VS Code o con VIM. En caso de ser creado con VIM se necesita hacer source:
source $HOME/.zprofile
Para validar que esté correctamente configurado podemos ejecutar:
echo $ANDROID_HOME
Verificar que corra correctamente el emulador desde Android Studio.
MICROSOFT WINDOWS
1.Node, JDK
choco install -y nodejs.install openjdk8 (instalar la versión 12.x.x de node js)
2.Instalación de Android Studio
Completar la instalación y asegurarse de seleccionar:
Android SDK
Android SDK Platform
Android Virtual Device
Asegurarse de tener instalado Android SDK 10 (Q) mínimo. Esto se encuentra en:
Appearance & Behavior → System Settings → Android SDK.
Validar que se tenga seleccionado:
Android SDK Platform 29 (o mayor)
Intel x86 Atom_64 System Image o Google APIs Intel x86 Atom System Image
Posterior a la instalación de Android Studio.
Se debe agregar la variable de ambiente para el usuario
También se debe agregar platform-tools al Path
%LOCALAPPDATA%\Android\Sdk\platform-tools
Para validar que esté correcta la variable de entorno abrimos powershell y ejecutamos:
Copia y pega: Get-ChildItem -Path Env:\ en powershell
valida que ANDROID_HOME se muestre
Agrega platform-tools al Path
Abrimos el panel de control de Windows
Hacer clic en User Accounts, Después en: User Accounts
Clic en Cambiar mis variables de entorno
Seleccionamos el PATH.
Clic editar.
Clic nuevo y agregamos el PATH de platform-tools a la lista.
La ubicación default es:
%LOCALAPPDATA%\Android\Sdk\platform-tools
Verificar que corra correctamente el emulador desde Android Studio.
Creando la primer aplicación
Desde la terminal podemos ejecutar: npx react-native init AwesomeProject
Sigamos las instrucciones que van saliendo en la pantalla y si todo funciona correctamente se abrirá la pantalla de React Native con los dispositivos seleccionados en Android y iOS.
Errores comunes
Versión de node y npm no soportadas
Problema con watchman de manera que no se ejecuta metro
Problema con el build de iOS.
Problema con pods en iOS.