17 KiB
Siga esta guía para establecer la aplicación móvil FreeCodeCamp en su sistema. Es altamente recomentado si se quiere contribuir regularmente.
Algunos de los flujos de trabajo de contribución – como corregir errores en el código base – necesitan que ejecutes la app de freeCodeCamp localmente en tu ordenador.
Cómo preparar tu máquina local
Empezar instalando el software requerido previamente para su sistema operativo.
Requisitos previos:
Requisito | Versión | Notas |
---|---|---|
Flutter | 3.x |
- |
Dart (viene junto con Flutter) | 2.x |
Usamos la versión que viene con Flutter. |
[ATENCIÓN!] Si hay una versión diferente, por favor instalar la versión recomendada. Solo daremos soporte a problemas de instalación de versiones recomendadas.
Si Flutter ya está instalado en su equipo, ejecute los siguientes comandos para verificar la versión:
flutter --version
dart --version
[!TIP] Pedimos encarecidamente actualizar a la última version "stable" del siguiente software.
Una vez que estén instalados los requisitos previos, hay que preparar el entorno de desarrollo. Es muy común para muchos equipos de trabajo, y solo hace falta hacerlo una vez.
Seguir estos pasos para tener listo el entorno de desrrollo:
-
Instalar Git u otro cliente Git, si todavía no hay ningumo. Acualizar a la versión más reciente. La que viene con el sistema operativo puede estar desactualizada.
-
Configurar Android Studio y Android Emulators con la última versión liberada de Android. Recomendamos usar Pixel 3a XL y Nexus One(para emular pantallas más pequeñas).
-
(Opcional para MacOS) Configurar Xcode e iOS Simulator con la última versión liberada de iOS.
-
(Opcional pero recomendado) Configurar una clave SSH para GitHub.
-
Instala un editor de código de tu elección.
Recomendamos utilizar Visual Studio Code o Android Studio. También recomendamos instalar las extensiones oficiales.
Fork del repositorio en GitHub
Fork es un paso donde consigues tu propia copia del repositorio (conocido como repo) en GitHub.
Esto es esencial, te permite trabajar en tu propia copia de la app móvil de freeCodeCamp en GitHub, o descargar (clonar) tu repositorio para trabajar localmente. Más adelant, podrás solicitar cambios para que se muestren en el repositorio principal de tu "fork" (bifurcación) a través de una "pull request" (PR).
[!TIP] El repositorio principal en
https://github.com/freeCodeCamp/mobile
es frecuentemente conocido como el repositorioupstream
.Tu fork en
https://github.com/YOUR_USER_NAME/mobile
suele referirse como el repositorioorigin
.YOUR_USER_NAME
será remplazado con tu nombre de usuario de GitHub.
Sigue estos pasos para hacer un for del repositorio https://github.com/freeCodeCamp/mobile
:
-
Ve al repositorio freeCodeCamp móvil en GitHub: https://github.com/freeCodeCamp/mobile
-
Haz clic en el botón "Fork" en la esquina superior derecha de la interfaz (Más detalles aquí)
-
Después de haber hecho fork al repositorio, serás llevado a tu copia del repositorio en
https://github. om/NOMBRE_DE_USUARIO/mobile
(OMBRE_DE_USUARIO
sería reemplazado con tu nombre de usuario de GitHub.)
Clonar tu fork desde GitHub
"Clonar" es donde tú "descargas" una copia de un repositorio desde una localización "remota
" que es propiedad tuya o de alguien más. En tu caso, esta localización remota es tu "fork
" del repositorio de freeCodeCamp que debería estar disponible en https://github.com/TU_NOMBRE_DE_USUARIO/mobile
. (TU_NOMBRE_DE_USUARIO
debería ser reemplazado con tu nombre de usuario de GitHub.)
Ejecuta estos comandos en tu máquina local:
-
Abre una Terminal / Símbolo del sistema / Shell en el directorio de proyectos
ejemplo:
/directoriodetusproyectos/
-
Clona tu fork de freeCodeCamp, reemplazando
TU_NOMBRE_DE_USUARIO
por tu nombre de usuario de GitHubgit clon --depth=1 https://github.com/TU_NOMBRE_DE_USUARIO/mobile.git
Esto descargará el repositorio entero de freeCodeCamp móvil en tu directorio de proyectos.
Nota: --depth=1
crea un clon superficial de tu fork con solo la historia/commit más reciente.
Configurar sincronización desde el padre
Ahora que has descargado una copia de tu fork, necesitarás configurar un upstream
remoto en el repositorio padre.
Como se mencionó anteriormente, el repositorio principal es referido repositorio upstream
. Tu fork conocido como el repositorio de origen
.
Necesitas una referencia de tu clon local al repositorio upstream
además del repositorio origin
. Esto es para que puedas sincronizar los cambios desde el repositorio principal sin el requisito de hacer fork y clonar repetidamente.
-
Cambiar el directorio al nuevo directorio
móvil
:cd mobile
-
Añadir una referencia remota al repositorio principal de freeCodeCamp móvil:
git remote add upstream https://github.com/freeCodeCamp/mobile.git
-
Asegúrate de que la configuración se vea correcta:
git remote -v
La salida debería verse parecida a como se muestra debajo (remplazando
TU_NOMBRE_DE_USUARIO
con tu usuario de GitHub):origin https://github.com/YOUR_USER_NAME/mobile.git (fetch) origin https://github.com/YOUR_USER_NAME/mobile.git (push) upstream https://github.com/freeCodeCamp/mobile.git (fetch) upstream https://github.com/freeCodeCamp/mobile.git (push)
Ejecutar la app móvil de freeCodeCamp localmente
Ahora que tienes una copia local de la app móvil de freeCodeCamp, puedes seguir estas instrucciones para ejecutarla localmente.
Si tienes problemas, primero realiza una búsqueda web para tu problema y comprueba si ya ha sido respondida. Si no encuentras una solución, por favor busca en nuestra página GitHub issues para una solución y reporta el problema si aún no ha sido reportado.
Y como siempre, siéntete libre de preguntar en la categoría 'Contribuyentes' en nuestro foro o nuestro servidor de chat.
[!NOTE] El directorio
móvil
contiene dos carpetas, por ejemplo:mobile-api
ymobile-app
.mobile-api
contiene el código API utilizado para ejecutar los podcasts.mobile-app
contiene la aplicación Flutter que es donde deberías estar cuando siga los pasos siguientes.
Configurar dependencias
Paso 1: Configurar el archivo de variable de entorno
Las claves de la API por defecto y las variables de entorno se almacenan en el archivo sample.env
. El contenido de este archivo necesita ser copiado a un nuevo archivo llamado .env
para que se acceda dinámicamente durante el paso de la instalación. Recuerda cambiar el directorio a mobile-app
antes de ejecutar los siguientes comandos.
# Crear una copia del "sample.env" y nombrarla ".env".
# Llenarlo con las keys y secrets de la API necesarios:
macOS/Linux
cp sample.env .env
Windows
copy sample.env .env
Las claves dentro del archivo .env
no requieren ser cambiadas para correr la aplicación de forma local. Puedes dejar los valores por defecto copiados desde sample.env
.
Paso 2: Instalar dependencias
Este paso instalará las dependencias necesarias para que la aplicación se ejecute:
flutter pub get
Paso 3: Iniciar la app móvil de freeCodeCamp
Inicia el emulador de tu elección (Android o iOS) y espera a que se complete el proceso de arranque.
Ahora puedes iniciar la aplicación ejecutando el siguiente comando:
flutter run
[!TIP] Si estás utilizando VSCode o Android Studio entonces puedes iniciar fácilmente la aplicación sin tener que ejecutar ningún comando en la terminal. Más información aquí.
Hacer cambios localmente
Ahora puedes hacer cambios en archivos y hacer commit de los cambios en tu clon local de tu fork.
Sigue estos pasos:
-
Valida que estás en la rama
main
:git status
Deberías obtener una salida como esta:
On branch main Your branch is up-to-date with 'origin/main'. nothing to commit, working directory clean
Si no estás en main o tu directorio de trabajo no está limpio, resuelve cualquier archivos/commits pendientes y comprueba
main
:git checkout main
-
Sincroniza los últimos cambios desde la rama principal
main
a tu rama local main:[!WARNING] Si tienes algún pull request pendiente que hayas hecho desde la rama
main
de tu fork, los perderás al final de este paso.Deberías asegurarte de que tu pull request esté hecho merge por un moderador antes de realizar este proceso. Para evitar este escenario, deberías siempre trabajar en una rama que no sea
main
.Este paso sincronizará los últimos cambios desde el repositorio móvil de freeCodeCamp. Es importante que hagas rebase de tu rama sobre la última
principal/main
tan a menudo como sea posible para evitar conflictos más tarde.Actualiza tu copia local del repositorio de freeCodeCamp móvil:
git fetch upstream
Restablece tu rama main con el main de freeCodeCamp móvil:
git reset --hard upstream/main
Has push de tu rama main a tu origen para tener un historial limpio en tu fork en GitHub:
git push origin main --force
Puedes validar que tu main actual concuerda con el upstream/main realizando un diff:
git diff upstream/main
La salida resultante debería estar vacía.
-
Crear una nueva rama:
Trabajar en una rama separada para cada asunto te ayuda a mantener limpia tu copia de trabajo local. Nunca deberías trabajar en
main
. Esto sumergirá tu copia de freeCodeCamp móvil y puede que tengas que empezar otra vez con un clon o un fork nuevo.Comprueba que estás en
main
como se explicó anteriormente, y ramifica desde ahí:git checkout -b fix/update-guide-for-xyz
Tu nombre de rama debería comenzar con
fix/
,feat/
,docs/
, etc. Evita el uso de números de incidencia en las ramas. Manténlos cortos, significativos y únicos.Algunos ejemplos de buenos nombres de ramas son:
fix/update-challenges-for-react fix/update-guide-for-html-css fix/platform-bug-sign-in-issues feat/add-guide-article-for-javascript translate/add-spanish-basic-html
-
Edita páginas y trabaja en el código en tu editor de texto favorito.
-
Una vez que estés contento con los cambios, deberías ejecutar la aplicación móvil localmente para previsualizar los cambios (opcional).
-
Asegúrate de corregir los errores y comprobar el formato de tus cambios.
-
Comprueba y confirma los archivos que estás actualizando:
git status
Esto debería mostrar una lista de archivos
unstaged
que has editado.On branch feat/documentation Your branch is up to date with 'upstream/feat/documentation'. Changes were not staged for commit: (use "git add/rm <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in the working directory) modified: README.md modified: mobile-app/lib/main.dart ...
-
Organizar los cambios y hacer un commit:
En este paso, sólo deberías marcar los archivos que has editado o añadido tu mismo. Puede realizar un reset y resolver archivos que no tenías intención de cambiar si es necesario.
git add ruta/al/archivo/editado.ext
O puedes añadir todos los archivos que no estén
organizados
al área de staging:git add .
Sólo los archivos que fueron movidos al área de staging serán añadidos cuando hagas un commit.
git status
Salida:
On branch feat/documentation Your branch is up to date with 'upstream/feat/documentation'. Changes to be committed: (use "git reset HEAD <file>..." to unstage) modified: README.md modified: mobile-app/lib/main.dart
Ahora, puedes hace commit de tus cambios con un mensaje corto, así:
git commit -m "fix: mensaje corto"
Algunos ejemplos:
fix: update guide article for Java - for loop feat: add guide article for alexa skills
Opcional:
Recomendamos encarecidamente hacer un mensaje de commit convencional. Esta es una buena práctica que verás en algunos de los repositorios de Código Abierto populares. Como desarrollador, esto te anima a seguir las prácticas estándar.
Algunos ejemplos de mensajes de commits convencionales son:
fix: update HTML guide article fix: update build scripts for Travis-CI feat: add article for JavaScript hoisting docs: update contributing guidelines
Manténlos cortos, no más de 50 caracteres. Siempre puedes añadir información adicional en la descripción del mensaje del commit.
Esto no toma más tiempo que un mensaje no convencional como 'actualizar archivo' o 'añadir index.md'
Puedes aprender más sobre por qué debes usar commits convencionales aquí.
-
Si te das cuenta de que necesitas editar un archivo o actualizar el mensaje de confirmación después de hacer un commit puedes hacerlo después de editar los archivos con:
git commit --amend
Esto abrirá un editor de texto predeterminado como
nano
ovi
donde puedes editar el título del mensaje de commit y añadir/editar la descripción. -
A continuación, puedes enviar tus cambios a tu fork:
git push origin nombre/rama-aqui
Proponer una Pull Request (PR)
Después de que hayas hecho commit de tus cambios, consulta aquí cómo abrir una Pull Request.
Solución de problemas
Problemas con la instalación de los prerrequisitos recomendados
Regularmente desarrollamos en los últimos o sistemas operativos más populares como macOS 10.15 o posterior, Ubuntu 18.04 o posterior y Windows 10 (con WSL2).
Se recomienda buscar tu problema específico en recursos como Google, Stack Overflow y Stack Exchange. Existe la posibilidad de que alguien haya tenido el mismo problema y ya exista una respuesta a tu pregunta específica.
Si estás en un sistema operativo diferente y/o todavía tienes problemas, consulta obtener ayuda.
Problemas con la interfaz de usuario, fuentes, errores de compilación, etc.
Si tienes problemas con la interfaz de usuario, o errores de compilación, una limpieza puede ser útil:
flutter clean
Problemas al instalar dependencias
Si obtienes errores al instalar las dependencias, por favor asegúrate de que no estés en una red restringida o que tu configuración de firewall no te impida acceder a los recursos.
Se paciente ya que la primera configuración puede tomar un tiempo dependiendo del ancho de banda de tu red.
Obtener ayuda
Si estás atascado y necesitas ayuda, siéntete libre de hacer preguntas en la categoría de 'Contribuyentes' en nuestro foro o en la sala de chat de contribuyentes.
Puede haber un error en la consola de tu navegador o en Bash / Terminal / Línea de comandos que te ayudará a identificar el problema. Proporciona este mensaje de error en la descripción de tu problema para que otros puedan identificar el problema más fácilmente y ayudarte a encontrar una solución.