freeCodeCamp/docs/i18n/espanol/how-to-setup-freecodecamp-m...

17 KiB
Raw Blame History

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:
  1. 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.

  2. 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).

  3. (Opcional para MacOS) Configurar Xcode e iOS Simulator con la última versión liberada de iOS.

  4. (Opcional pero recomendado) Configurar una clave SSH para GitHub.

  5. 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 repositorio upstream.

Tu fork en https://github.com/YOUR_USER_NAME/mobile suele referirse como el repositorio origin. 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:

  1. Ve al repositorio freeCodeCamp móvil en GitHub: https://github.com/freeCodeCamp/mobile

  2. Haz clic en el botón "Fork" en la esquina superior derecha de la interfaz (Más detalles aquí)

  3. 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:

  1. Abre una Terminal / Símbolo del sistema / Shell en el directorio de proyectos

    ejemplo: /directoriodetusproyectos/

  2. Clona tu fork de freeCodeCamp, reemplazando TU_NOMBRE_DE_USUARIO por tu nombre de usuario de GitHub

    git 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.

  1. Cambiar el directorio al nuevo directorio móvil:

    cd mobile
    
  2. Añadir una referencia remota al repositorio principal de freeCodeCamp móvil:

    git remote add upstream https://github.com/freeCodeCamp/mobile.git
    
  3. 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 y mobile-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:

  1. 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
    
  2. 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.

  3. 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
    
  4. Edita páginas y trabaja en el código en tu editor de texto favorito.

  5. Una vez que estés contento con los cambios, deberías ejecutar la aplicación móvil localmente para previsualizar los cambios (opcional).

  6. Asegúrate de corregir los errores y comprobar el formato de tus cambios.

  7. 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
    ...
    
  8. 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í.

  9. 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 o vi donde puedes editar el título del mensaje de commit y añadir/editar la descripción.

  10. 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.