DEV Community: Leonardo Castillo Lacruz

Preparando el Ambiente de Desarrollo para Flutter

Leonardo Castillo Lacruz — Wed, 04 Dec 2024 15:00:10 +0000

Comencemos por definir a Flutter, el cual es un framework de desarrollo que permite crear aplicaciones multiplataforma con un único código base, para móvil, web y hasta para desktop.
Para comenzar a trabajar con Flutter debemos ejecutar algunos pasos que nos permitiran compilar y generar aplicaciones. Sigamos con cada paso.

1. Instalación de los Componentes Necesarios

Visual Studio Code

Es el editor de código recomendado por su flexibilidad y compatibilidad con Flutter. Para instalarlo:
Descargue el instalador desde el sitio oficial.
Siga los pasos del asistente, aceptando los términos de la licencia.
Confirme que el editor funcione correctamente tras la instalación.

Git

Es fundamental para la gestión de versiones y la integración con Flutter:
Descargue el instalador desde el sitio oficial de Git.
Mantenga las opciones predeterminadas durante la instalación.
Asegúrese de que Git funcione correctamente en la línea de comandos.

SDK de Flutter

El SDK es esencial para trabajar con Flutter, pero en lugar de instalarlo manualmente, se puede configurar automáticamente al crear un proyecto:
Tras instalar la extensión oficial de Flutter en Visual Studio Code, seleccione Crear nuevo proyecto Flutter desde el menú de comandos.
El sistema detectará si el SDK de Flutter no está instalado y ofrecerá instalarlo automáticamente.
Siga las indicaciones en pantalla para completar el proceso de instalación y configuración.
Verifique la instalación ejecutando flutter doctor.

Android Studio

Es necesario para emular dispositivos Android:
Descargue e instale Android Studio.
Configure el SDK de Android y cree un emulador.
Asegúrese de que el emulador funcione correctamente.

Herramientas de Línea de Comando (Command-Line Tools)

Estas herramientas son necesarias para que Flutter pueda compilar y ejecutar aplicaciones Android:
En Android Studio, abra el menú SDK Manager y seleccione la pestaña SDK Tools.
Active la casilla Android SDK Command-Line Tools.
Instale las herramientas y confirme su configuración.

Aceptación de Licencias de Android Studio

Es un paso crucial para evitar errores de compatibilidad:
Ejecute el comando flutter doctor --android-licenses en la terminal.
Acepte cada licencia siguiendo las indicaciones.
Verifique que no haya errores en la salida del comando.

2. Problemas Comunes y Soluciones

Configuración del PATH

Es común que Flutter no se reconozca debido a una configuración incorrecta del PATH:
Solución: Revise las variables de entorno y asegúrese de incluir la ruta completa al binario de Flutter.

Errores en la instalación de Android Studio

Muchos usuarios encuentran problemas con la instalación de componentes SDK o emuladores:
Solución: Actualice Android Studio a la última versión y descargue los SDK faltantes desde la configuración.

Compatibilidad de extensiones en Visual Studio Code

Algunas extensiones necesarias para Flutter pueden no instalarse automáticamente:
Solución: Instale manualmente las extensiones de Flutter y Dart desde el marketplace de Visual Studio Code.

Problemas con permisos en Git

En sistemas operativos restringidos, Git puede enfrentar problemas de permisos:
Solución: Ejecute Git como administrador o revise las configuraciones de acceso.

3. Creación de un Proyecto "Hola Mundo"

Una vez configurado el ambiente, pruebe la instalación creando un proyecto de Flutter:
Abra Visual Studio Code y seleccione "Crear proyecto Flutter".
Ejecute el comando flutter run para ver la aplicación en el emulador.
Verifique que el proyecto funcione correctamente sin errores.

Configurar un ambiente de desarrollo para Flutter puede ser sencillo si se siguen los pasos correctos. Sin embargo, los problemas técnicos son comunes y pueden retrasar el proceso. Con esta guía y las soluciones a los problemas más frecuentes, estarás listo para desarrollar aplicaciones multiplataforma de manera eficiente.

Paso a paso para instalar el ambiente de Flutter

Conociendo a useContext y useReduce

Leonardo Castillo Lacruz — Sat, 30 Nov 2024 14:11:06 +0000

React ofrece varias herramientas para manejar el estado de las aplicaciones, algunas más simples, otras más complejas, con lo cual tenemos esa gama de opciones que de acuerdo al tamaño de nuestra aplicación, haremos su selección. Entre ellas destacan useContext y useReducer. Estas dos funciones trabajan excepcionalmente bien juntas, especialmente en escenarios donde se necesita compartir estados entre múltiples componentes y manejar estados complejos.

1. ¿Qué es useContext?

Definición

useContext es un hook que permite acceder al valor de un contexto creado con React.createContext desde cualquier componente del árbol de React. Esto elimina la necesidad de pasar datos a través de múltiples niveles de componentes (prop drilling).

¿Cuándo usar useContext?

Cuando varios componentes necesitan acceder al mismo dato.
Para evitar pasar props manualmente entre componentes que no los usan directamente.
En aplicaciones con un estado global compartido, como una lista de favoritos o un carrito de compras.

Cómo funciona

Son 3 pasos, primero, se crea un contexto:
import { createContext } from "react";

const MyContext = createContext();  
export default MyContext;

Luego, un componente proveedor envuelve al árbol de componentes y suministra el valor del contexto, es decir, definimos que vamos a compartir en el estado global:

import MyContext from "./MyContext";

export const MyProvider = ({ children }) => {  
  const sharedState = { user: "Pedro Pérez" };

  return (  
    <MyContext.Provider value={sharedState}>  
      {children}  
    </MyContext.Provider>  
  );  
};

Finalmente, se utiliza useContext para consumir cualquier propiedad o función que hemos compartido anteriormente:

import { useContext } from "react";  
import MyContext from "./MyContext";

const MyComponent = () => {  
  const context = useContext(MyContext);  
  return <div>{`Hello, ${context.user}`}</div>;  
};

2. ¿Qué es useReducer?

Definición

useReducer es un hook que se utiliza para manejar estados más complejos en React. Es una alternativa a useState y sigue un enfoque similar al de Redux, utilizando un patrón de reducer.

¿Cuándo usar useReducer?

Cuando el estado tiene múltiples subvalores o está estructurado en objetos complejos.
Cuando las transiciones de estado están determinadas por tipos de acciones.
En aplicaciones con lógica de actualización de estado centralizada y predecible.

Cómo funciona

Un reducer es una función pura que toma el estado actual y una acción, y devuelve un nuevo estado:

const reducer = (state, action) => {  
  switch (action.type) {  
    case "INCREMENT":  
      return { count: state.count + 1 };  
    case "DECREMENT":  
      return { count: state.count - 1 };  
    default:  
      throw new Error("Unknown action");  
  }  
};

useReducer se utiliza junto con el reducer y un estado inicial:

import { useReducer } from "react";

const initialState = { count: 0 };

const Counter = () => {  
  const [state, dispatch] = useReducer(reducer, initialState);

  return (  
    <div>  
      <p>Count: {state.count}</p>  
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>  
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>  
    </div>  
  );  
};

Interesante destacar, que la anatomia del useReducer, tiene cierta similitud con useState, salvo que hacemos uso del reducer al iniciar el hook.

3. Combinando useContext y useReducer

Por qué combinarlos

useContext facilita compartir el estado global entre componentes.
useReducer organiza y simplifica la lógica de actualización del estado.

Juntos, crean una arquitectura sólida para manejar estados compartidos en aplicaciones React.

Implementación

Primero, definimos el contexto y el reducer:

import { createContext, useReducer } from "react";

const AppContext = createContext();

const initialState = { favorites: [] };

const reducer = (state, action) => {  
  switch (action.type) {  
    case "ADD_FAVORITE":  
      return { ...state, favorites: [...state.favorites, action.payload] };  
    case "REMOVE_FAVORITE":  
      return {  
        ...state,  
        favorites: state.favorites.filter((id) => id !== action.payload),  
      };  
    default:  
      return state;  
  }  
};

export const AppProvider = ({ children }) => {  
  const [state, dispatch] = useReducer(reducer, initialState);

  return (  
    <AppContext.Provider value={{ state, dispatch }}>  
      {children}  
    </AppContext.Provider>  
  );  
};

export default AppContext;

Luego, consumimos el contexto en los componentes:

import { useContext } from "react";  
import AppContext from "./AppContext";

const FavoriteButton = ({ productId }) => {  
  const { state, dispatch } = useContext(AppContext);

  const isFavorite = state.favorites.includes(productId);

  return (  
    <button  
      onClick={() =>  
        dispatch({  
          type: isFavorite ? "REMOVE_FAVORITE" : "ADD_FAVORITE",  
          payload: productId,  
        })  
      }  
    >  
      {isFavorite ? "❤️" : "🤍"}  
    </button>  
  );  
};

4. Ejemplo práctico: Gestión de favoritos en ecommerce

Imaginemos una aplicación donde el usuario puede navegar por productos y marcar sus favoritos.

Estado Global

Definimos el estado inicial y las acciones posibles:

const initialState = { products: [], favorites: [] };

El reducer maneja las actualizaciones:

const reducer = (state, action) => {  
  switch (action.type) {  
    case "SET_PRODUCTS":  
      return { ...state, products: action.payload };  
    case "ADD_FAVORITE":  
      return { ...state, favorites: [...state.favorites, action.payload] };  
    case "REMOVE_FAVORITE":  
      return {  
        ...state,  
        favorites: state.favorites.filter((id) => id !== action.payload),  
      };  
    default:  
      throw new Error("Unknown action type");  
  }  
};

Componentes

Vista principal: Consume productos desde una API.
Botón de favoritos: Permite al usuario marcar o desmarcar productos como favoritos.

Ejemplo del componente Home:

import React, { useEffect } from "react";  
import { useContext } from "react";  
import AppContext from "./AppContext";

const Home = () => {  
  const { state, dispatch } = useContext(AppContext);

  useEffect(() => {  
    fetch("https://fakestoreapi.com/products")  
      .then((res) => res.json())  
      .then((data) => dispatch({ type: "SET_PRODUCTS", payload: data }));  
  }, [dispatch]);

  return (  
    <div>  
      {state.products.map((product) => (  
        <div key={product.id}>  
          <h2>{product.title}</h2>  
          <FavoriteButton productId={product.id} />  
        </div>  
      ))}  
    </div>  
  );  
};

export default Home;

Componente FavoriteButton:

import React from "react";  
import { useContext } from "react";  
import AppContext from "./AppContext";

const FavoriteButton = ({ productId }) => {  
  const { state, dispatch } = useContext(AppContext);  
  const isFavorite = state.favorites.includes(productId);

  return (  
    <button  
      onClick={() =>  
        dispatch({  
          type: isFavorite ? "REMOVE_FAVORITE" : "ADD_FAVORITE",  
          payload: productId,  
        })  
      }  
    >  
      {isFavorite ? "❤️" : "🤍"}  
    </button>  
  );  
};

export default FavoriteButton;

El ejemplo anterior lo puedes ver desarrollado en el siguiente video:

Conclusión

Combinar useContext y useReducer permite manejar estados globales de manera eficiente y organizada. Este enfoque es ideal para aplicaciones complejas, ya que proporciona un flujo claro de datos y acciones, reduciendo el riesgo de errores y mejorando la mantenibilidad del código.

Si te gustó el contenido compartelo con tu red.

Para ver otros contenidos te invito a acceder a mi canal en YouTube:

https://www.youtube.com/leonardocastillo79

Conociendo a React Query

Leonardo Castillo Lacruz — Sun, 18 Feb 2024 20:15:42 +0000

En este material mostramos como es el uso de React Query, un paquete maravilloso que permite simplificar de forma transparente y fácil el consumo de APIs REST en aplicaciones React.

Dejamos de lado useState y useEffect, con React Query la operación de consumir APIs se reduce a definirun QueryClient, un QueryClientProvider y un hook llamado useQuery.

En este video de forma práctica hacemos la demostración.

Manipulando el DOM con Javascript

Leonardo Castillo Lacruz — Mon, 12 Feb 2024 18:52:43 +0000

Javascript como lenguaje para la web es fundamental, porque genera la dinámica necesaria para que la usabilidad de la aplicación sea lo mejor posible.

Crear, actualizar o borrar elementos del HTML es una tarea común, cotidiana y fundamental que todo desarrollador web debe manejar.

En este contenido realizamos un landing page simple, todo construido con Javascript Vanilla a partir del clic en un botón.

Consumo de APIs con hooks de ReactJS

Leonardo Castillo Lacruz — Sat, 10 Feb 2024 13:04:51 +0000

Haciendo uso de los hooks useState y useEffect, funciones maravillosas que nos facilitan la vida en tareas complejas usando ReactJS, realizamos el consumo de una API REST.

Partiendo desde 0 realizamos la aplicación usando ViteJS + TailwindCSS + DaisyUI.

React + Typescript.

Leonardo Castillo Lacruz — Fri, 09 Feb 2024 15:14:30 +0000

React + Typescript. Combinación perfecta para trabajar. En este material mostramos la creación de un app desde 0, implementando su código usando Vite + Tailwind + DaisyUI, todo esto usando Typescript para aprovechar sus ventajas.

Conociendo a BunJS

Leonardo Castillo Lacruz — Thu, 08 Feb 2024 22:39:44 +0000

¿Qué es bun y cómo usarlo para ejecutar javascript del lado del backend?

Bun es un entorno de ejecución de javascript para backend, basado en el motor JavaScriptCore de Apple. Es un nuevo competidor de nuestro querido NodeJS.

En este video, te voy a explicar qué es bun, cómo instalarlo, cómo escribir código javascript para el servidor. Usar bun con ReactJS es posible? Acá lo hacemos.