Photo by Michael Browning on Unsplash
El objetivo de esta kata es introducirte en el desarrollo de aplicaciones móviles utilizando React Native.
En este primer ejercicio nos estarémos centrando en funcionalidades básicas para una App y empezar a entender a pensar en componentes al momento de trabajar con React Native
Los siguientes recursos, aunque son de react, te sirven para conocer como es que al momento de trabajar con aplicaciones con React Native debes de estructurar tu pensamiento o forma de trabajo en componentes:
Otro componente que vas a necesitar es React Navigation, antes de iniciar a codificar revisa el siguiente enlace:
También, tendrás que utilizar Hooks, esta es una funcionalidad que recientemente se agregó a React, por lo que también tendrás que estudiar el siguiente enlace:
Finalmente, para poder examinar en detalle la ejecución de tu proyecto, te recomendamos aprender a depurar tu proyecto:
- React Native
- Instalar el entorno de desarrollo
⚠️ utiliza la opción React Native CLI Quickstart NO utilizar Expo
- Instalar el entorno de desarrollo
- Editor de texto
- Elegir un editor para codificar, puede ser Visual Studio Code, o algúno similar.
- Agregar la extensión Prettier para mantener un estilo consistente en tu código
- Instalar ESLint para ayudarte a encontrar y arreglar problemas de tu código
- Agregar la extensión Eslint a tu editor para integrar la funcionalidad de Eslint
- Calidad de código. Para analizar la calidad de tu código necesitarás
- Instalar y configurar CodeClimate para analizar tu codigo y mejorar la calidad atendiendo los resultados del análisis
La empresa Foo Corp necesita una App para poder visualizar las recetas de cocina de sus restaurantes. La App deberá cumplir con los siguientes requerimientos:
- Pantalla principal
- Listado con las recetas que están de moda (trending)
- Listado con las recetas más recientes
- Por cada receta se debe mostrar una foto del platillo de la receta y el nombre de la receta
- Pantalla detalle
- Foto del platillo de la receta
- Categoría de la receta (trending/recent)
- Nombre de la receta
- Porciones por receta (servings)
- Listado de ingredientes con nombre y cantidad
- Botón "me gusta" que servirá para etiquetar a las recetas favoritas
- Base de datos
- Los datos (recetas) se tomarán de un archivo local en formato JSON
- Calidad
- Utilizar un estilo de código estandarizado (revisado por Eslint)
- Puntuación A obtenida en CodeClimate
- Ejecución
- Puede ejecutarse en Android o iOs
- Código fuente
- Orientado a Objetos
- Métodos pequeños
- Aplicar los principios SOLID
En la carpeta img se encuentra el diseño solicitado en formato PNG E Invision.
- Divide tu trabajo en pequeñas tareas
- Para cada pantalla identifica o clasifica los diferentes compones que se presentan
- Inicia programando los componentes individuales procurando que estos sean reutilizables
- Una vez que tienes listos los componentes integra las pantallas.
Por ejemplo la primer pantalla se puede subdividir en los siguientes 3 componentes
- Search Bar. La barra que se encuentra en la parte suberior
- List Item. Cada elemento que se muestra dentro de las listas
- Horizontal List. Lista scrollable horizontal que incluye las recetas dependiendo de la categoría.
Al ser reutilizables List Item y Horizontal Listpueden servir tanto para trending como para recent, simplemente incluyendo propiedades que permitan indicar el alto del componente así como su contenido (lista de recetas).
- Código fuente en Github
- Incluir en el repositorio la puntuación obtenida (badge) en DeepScan
- Incluir en el repositorio la puntuación obtenida (badge) en CodeClimate
- Documentar en este archivo los pasos necesarios para ejecutar la App
- Los commits deben se significativos
- Cumplimiento de requerimientos funcionales
- Cumplimiento de requerimientos no funcionales
- Implementacón del diseño solicitado
Aquí se describen los pasos necesarios para ejecutar y probar este proyecto
Para apoyo de tus actividades utiliza esta lista de recursos recomendados