Forem: Derlys

La Aventura de construir Kungu con Solana y IA

Derlys — Sun, 05 Apr 2026 10:47:49 +0000

¡Hola, comunidad! Hoy les traigo un caso de estudio completo sobre la creación de Kungu, una app de directorios de comunidades hispanas sobre Solana. Este no es un tutorial lineal; es una crónica de un proceso de desarrollo real, lleno de prompts de IA, pivotes de diseño y soluciones a errores inesperados.

El objetivo es mostrar cómo, partiendo de un template, se puede llegar a una aplicación con una identidad visual única, usando la IA como un copiloto de desarrollo.

1. El Stack Tecnológico: La Caja de Herramientas

La elección de herramientas fue clave para la agilidad del proyecto:

Base: Solana Mobile Monorepo de Beeman, instalado con bun.
Generación de UI: Prototipado inicial con Magic Patterns.
Asistente de Código: Codex (o un asistente similar) integrado en el editor (WebStorm).
Styling: Una configuración moderna y específica: Uniwind (para usar clases de Tailwind en React Native), tailwind-variants y heroui-native.
Navegación: Expo Router, que permite una navegación basada en la estructura de archivos.
Animación: react-native-reanimated.

2. El Kick-off: Clonar el Monorepo y Preparar la IA

El primer paso fue establecer la base. El monorepo de Solana nos da toda la lógica de conexión de wallets lista para usar.

# 1. Clonar el template
bun x create-seed@latest -t gh:beeman/solana-mobile-monorepo

# 2. Abrir el proyecto en el editor

Lección Clave: Para que la IA (Codex) sea realmente útil, debemos usarla dentro del editor de código. De esta forma, tiene acceso a la estructura de archivos del proyecto, el package.json y el código existente, lo que permite generar respuestas mucho más precisas.

3. Fase 1: Creando el "Community Rolodex"

La idea inicial era mostrar las comunidades en un formato de tarjetas apiladas, como un Rolodex. Para ello, usamos un prompt muy detallado dirigido a la IA.

El Prompt para Crear el Componente

Este prompt se ejecutó en el chat del editor, especificando la ruta exacta (apps/native) y las restricciones para no alterar la lógica de Solana.

"Act as a React Native expert. I want to implement a 'Rolodex' style community directory in this specific project.
Project Context:

Location: apps/native

Routing: Expo Router (file-based)

Target File: apps/native/app/(drawer)/(tabs)/index.tsx Tasks:

Create a Component: Create a new file apps/native/components/CommunityRolodex.tsx.

Component Logic: Define a COMMUNITIES array (name, logoUrl, link). Use a FlatList with a stacked card visual. Ensure it only renders for authenticated users.

Styling: Use the project's existing styling solution (uniwind).

Interaction: Use Linking.openURL for the external links."

El Reto del Estilo: Uniwind vs NativeWind

Pronto descubrimos que el proyecto no usaba NativeWind, sino uniwind. Esto requirió un nuevo prompt enfocado exclusivamente en el estilo, indicándole a la IA que usara className y se basara en los componentes de heroui-native.

4. Fase 2: El Pivote de Diseño hacia el Neo-Brutalismo

El efecto Rolodex se sentía apretado en móvil. En lugar de forzarlo, tomamos una decisión de diseño audaz: adoptar un estilo Neo-Brutalista.

El Neo-Brutalismo en UI se caracteriza por colores de alto contraste, bordes y sombras duras, y una tipografía fuerte. Prioriza la honestidad de los materiales digitales.

Esto implicó unificar toda la UI de la app bajo esta nueva dirección visual, desechando el look & feel inicial del template.

5. Fase 3: Reestructuración de la Navegación y la UI

Con el nuevo estilo definido, la estructura de la app también debía cambiar.

De Drawer a Tab Bar: Reemplazamos el menú lateral (Drawer) por una barra de navegación inferior (Bottom Tab Bar), un estándar de oro en UX móvil.
Home como Wallet: Nos inspiramos en la distribución de la interfaz de Jupiter (Jup.ag) para rediseñar la pantalla de inicio, enfocándonos en la utilidad y la visualización de activos, pero manteniendo nuestra estética Neo-Brutalista.
Ajuste de Iconos y Fuentes: Un reto común fue que los iconos y textos del nuevo Tab Bar eran demasiado grandes. Se necesitó un prompt específico para que la IA ajustara los tamaños y los alineara con el nuevo diseño compacto y minimalista.

6. Troubleshooting: Resolviendo Errores del Mundo Real

Ningún proyecto está exento de errores. Aquí los dos más importantes que surgieron:

Error de Build en Android (Gradle Cache)

Al compilar, apareció un error en la carpeta .../android/app/build/intermediates/.... Esto no tenía que ver con el código de React Native, sino con la caché de Gradle.

Solución rápida desde la terminal:

cd android && ./gradlew clean && cd ..

Inconsistencia en el Modo Oscuro/Claro

Al implementar el cambio de tema, bun run check-types arrojó un error de tipos en TypeScript. El sistema no podía asegurar que el systemColorScheme fuera siempre 'light' o 'dark'.

Solución (Mapeo Seguro):

// Mapeo seguro para que TypeScript no se queje
const themeToSet = (systemColorScheme === 'light' || systemColorScheme === 'dark') 
  ? systemColorScheme 
  : 'dark'; // Default a 'dark' si el valor es inesperado

Conclusión: Un Proceso Orgánico Guiado por la IA

Kungu evolucionó de una simple idea de "tarjetas Rolodex" a una aplicación Web3 con una identidad visual fuerte y una estructura profesional. La lección más importante fue no tener miedo a pivotar. El diseño inicial no funcionó, pero nos llevó a una solución mucho más interesante y única.

Usar la IA como un copiloto nos permitió externalizar la generación de código repetitivo y enfocarnos en las decisiones estratégicas de UX y diseño.

¡Espero que esta crónica detallada te sirva de inspiración para tus propios proyectos! ¿Te animas a probar el Neo-Brutalismo en tus apps? ¡Te leo en los comentarios! 🚀

Onelingo MVP: Lo que aprendí cuando mi app de idiomas no salió como esperaba (Post-Mortem)

Derlys — Tue, 17 Mar 2026 10:43:10 +0000

Onelingo MVP: Lo que aprendí cuando mi app de idiomas no salió como esperaba

¡Hola a todos! Hoy no vengo a traerles el típico tutorial donde todo sale perfecto a la primera. Vengo a contarles la historia de Onelingo, una app de micro-desafíos diarios de idiomas que intenté construir usando Hugging Face Spaces.

Aunque el resultado final no fue exactamente lo que visualicé inicialmente, el proceso me dejó lecciones invaluables sobre despliegue, autenticación y la importancia de una arquitectura limpia. Aquí les comparto mi "Post-Mortem" técnico.

1. El concepto: Onelingo

La idea era crear una alternativa a Duolingo pero sin niveles infinitos: solo 3 micro-desafíos diarios (Reading, Listening y Speaking).

El stack elegido:

Hosting: Hugging Face Spaces (Static SDK).
IA de apoyo: HuggingChat (Llama 3 / Qwen).
Frontend: HTML/JS/CSS con Tailwind vía CDN.

2. El primer obstáculo: El "Rito de Iniciación" de Git

Al intentar mover el código desde el editor web de Hugging Face a mi entorno local (WebStorm), me topé con el error que detiene a muchos principiantes:
remote: Invalid username or password. fatal: Authentication failed.

El aprendizaje:

Hugging Face no usa tu contraseña de usuario para las operaciones de Git. Necesitas un Access Token.

La solución técnica:

Si te sucede esto, debes forzar la URL del remoto para incluir tu token:

git remote set-url origin https://TU_USUARIO:TU_TOKEN_HF@huggingface.co/spaces/TU_USUARIO/onelingo-mvp

Tip: Genera tu token en Settings > Access Tokens con permisos de "Write".

3. El error de lógica: El "Esqueleto" sin cerebro

inicialmente, la app se veía genial con Tailwind, pero al hacer clic en las opciones de respuesta, no pasaba nada. El código generado por la IA era visualmente correcto pero funcionalmente vacío.

El Aprendizaje:

No confíes ciegamente en el primer bloque de código que te da una IA. Siempre verifica que las funciones de validación de estado (como el manejo de respuestas correctas/incorrectas) estén implementadas.

La solución futura:

Para evitar esto, mi recomendación es separar la lógica en archivos distintos desde el principio:

index.html: Estructura.
style.css: Diseño.
app.js: El "cerebro" (validación de desafíos y Web Speech API).

4. Implementando speaking: El reto del Navegador

Intentamos usar la Web Speech API para el reconocimiento de voz. Aunque funciona bien en Chrome de escritorio, puede ser muy inestable en navegadores móviles o integrados (como el de Instagram o Twitter).

Aprendizaje clave:

Si tu app depende del micrófono, asegúrate de manejar los errores de permisos y de informar al usuario si su navegador no es compatible.

5. ¿Qué haría diferente la próxima vez?

Si estás pensando en crear un MVP similar, aquí te dejo mi hoja de ruta mejorada:

Arquitectura modular: No metas todo en un solo index.html. Usa una estructura de carpetas clara para que sea fácil de depurar.
Validación de IA: En lugar de pedir "hazme la app", pide "hazme la lógica de validación para un array de objetos JSON". Es mucho más preciso.
Hugging Face vs Vercel: Hugging Face es increíble para demos de IA, pero si tu app es puramente frontend (Static), Vercel o Netlify ofrecen un flujo de Git mucho más amigable para principiantes.

Conclusión

A veces, el éxito de un proyecto no está en el despliegue final, sino en los bugs que lograste entender. Onelingo me enseñó que la autenticación con tokens y la estructura de archivos son los cimientos de cualquier proyecto serio.

¿Has tenido algún proyecto que no salió como esperabas? ¡Cuéntame tu experiencia en los comentarios y qué aprendiste de ello! 🚀

Nota: Este tutorial es parte de mi serie de aprendizaje continuo como desarrolladora nómada. ¡Sigamos construyendo!

YouCanChef: ¿Cómo creé mi propio asistente de cocina nómada con IA?

Derlys — Sat, 14 Mar 2026 11:53:32 +0000

YouCanChef: ¿Cómo creé mi propio asistente de cocina nómada con IA?

¡Hola, nómadas y amantes de la cocina! Como alguien que viaja constantemente por el mundo, me encanta replicar las recetas que pruebo en los restaurantes locales. Sin embargo, el gran reto es: ¿Cómo encuentro estos ingredientes en un país diferente?

Hoy les comparto cómo construí "YouCanChef", una herramienta que analiza ingredientes y te dice si son fáciles de encontrar en tu ubicación actual o cómo reemplazarlos.

1. El concepto: gastro-mapping e inteligencia de sustitución

La idea es simple pero poderosa:

Input: Nombre del plato o lista de ingredientes + Tu ubicación actual.
Proceso: La IA analiza la "Cultura de Mercado" local.
Output: Un semáforo de disponibilidad (🟢 Fácil, 🟡 Especialidad, 🔴 Inexistente) y sugerencias de sustitutos inteligentes.

2. El stack tecnológico (100% Gratuito)

Para este proyecto, utilicé herramientas que permiten prototipar a velocidad luz sin gastar un centavo:

Componente	Herramienta	¿Por qué?
Cerebro (IA)	Google AI Studio (Gemini)	Capa gratuita generosa y excelente razonamiento.
Prototipado Rápido	Bolt.new	Genera aplicaciones completas a partir de prompts.
Editor de Código	WebStorm / VS Code	Para refinamiento técnico y control de versiones.
Despliegue	Vercel	Hosting rápido y gratuito para proyectos personales.

3. El Plan de acción: Del MVP a Pro

Fase 1: El MVP "Lean"

En lugar de conectar APIs de inventarios de supermercados (que es complejo), usamos la base de conocimiento de la IA para estimar la probabilidad de encontrar un ingrediente.

Ejemplo: "¿Qué tan probable es encontrar Achiote en Madrid?" -> IA: "90% en tiendas latinas de Lavapiés, 20% en supermercados comunes".

4. Superando retos técnicos (Tips para devs)

Durante la creación, me encontré con un par de "clásicos" que te ahorrarán tiempo:

El Error de la API Key en Bolt.new

Si usas Bolt.new, a veces el código no detecta tu GEMINI_API_KEY aunque esté en el archivo .env.
Solución: Asegúrate de que la variable esté declarada con el prefijo VITE_ si estás usando Vite:

const tempKey = import.meta.env.VITE_GEMINI_API_KEY;

El modelo "Fantasma" (404 Not Found)

Google actualiza sus modelos constantemente. Si recibes un error 404 al llamar a la API, verifica el nombre del modelo. Actualmente, gemini-1.5-flash es la opción más estable, pero en entornos de preview podrías necesitar gemini-3-flash-preview (según tu región y acceso).

const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });

5. De bolt.new a producción

Una vez que el prototipo funcionó en Bolt, el siguiente paso fue llevarlo a mi entorno local para tener control total:

Clonar el repo: git clone <tu-repo-de-bolt>
Instalar dependencias: npm install
Configurar Git: Si descargaste el ZIP, inicializa con git init y conecta tu origen.
Deploy: Conecta tu cuenta de GitHub con Vercel y ¡listo!

Conclusión

YouCanChef no es solo una app, es un compañero de viaje. Me enseñó que con la IA adecuada, las fronteras culinarias desaparecen.

¿Qué sigue? Estoy trabajando en un motor de "Sustitución de sabores" que analice perfiles de sabor para sugerir reemplazos exactos cuando un ingrediente es imposible de hallar.

¿Te animas a construir tu propio asistente de viajes? ¡Cuéntame en los comentarios qué otra utilidad le darías a la IA para nómadas! 🌍✈️

Tip: No esperes a tener la app perfecta. Lanza el MVP, prueba si la IA te da buenos consejos de cocina y luego añade las fotos y los mapas.

Explicándole blockchain a mi mamá: Guía para principiantes

Derlys — Fri, 13 Mar 2026 12:37:51 +0000

📚 Serie: Explicándole blockchain a mi mamá

Introducción a la economía

Explicándole blockchain a mi mamá: Guía para principiantes

¡Hola a todos! A veces, los conceptos más complejos de la tecnología son más fáciles de entender cuando intentamos explicárselos a alguien que no tiene experiencia previa en el área.

En este tutorial, basado en el primer episodio de mi serie "Explicándole blockchain a mi mamá", vamos a desglosar los pilares fundamentales de la economía actual y por qué la tecnología Blockchain es una alternativa tan revolucionaria.

1. El problema: Inflación y carestía

Antes de hablar de tecnología, debemos entender el contexto económico. Seguramente has escuchado a tus padres o abuelos decir: "Antes, con este mismo billete, compraba el doble de cosas".

A este fenómeno lo llamamos inflación o, en términos más sencillos, carestía. Es el proceso por el cual el dinero pierde su valor adquisitivo con el tiempo.

¿Por qué sucede?

Emisión desmedida: Los bancos centrales imprimen más dinero del que la economía puede respaldar.
Devaluación: Al haber más dinero en circulación pero la misma cantidad de productos, los precios suben.

2. El sistema tradicional: Centralización bancaria

Hoy en día, dependemos de los bancos para mover nuestro dinero. Este es un sistema centralizado.

Característica	Sistema Bancario Tradicional
Control	El banco decide si aprueba o bloquea tus transacciones.
Privacidad	Tu información financiera es privada para el público, pero totalmente visible para el banco y el gobierno.
Intermediarios	Siempre necesitas a un tercero para validar que tienes el dinero.

3. ¿Qué es blockchain? La revolución de la transparencia

Imagina un libro contable donde se anotan todas las transacciones del mundo, pero con tres reglas mágicas:

Es público: Cualquiera puede ver las transacciones (aunque no necesariamente quién las hizo).
Es inmutable: Una vez que algo se escribe, no se puede borrar ni modificar.
Es descentralizado: No le pertenece a un solo banco; miles de computadoras en todo el mundo guardan una copia de ese libro.

La analogía del libro de cuentas

En la blockchain, si yo te envío una "moneda digital", toda la red verifica que yo realmente tenía esa moneda antes de validar la transferencia. No necesitamos un banco que diga "sí, él tiene el dinero"; la propia red lo confirma mediante matemáticas y criptografía.

4. Seguridad y empoderamiento

Uno de los puntos más debatidos es el control. En el sistema tradicional, el banco es el dueño de la infraestructura. Si el banco cae o decide congelar tu cuenta, pierdes acceso a tus fondos.

En la Blockchain:

Tú eres tu propio banco: Tienes el control total de tus activos a través de llaves privadas.
Transparencia Total: Al ser un registro público, es mucho más difícil cometer fraudes sin que alguien lo note.
Seguridad: La descentralización hace que sea casi imposible hackear todo el sistema a la vez.

Conclusión: El primer paso

Este es solo el comienzo. Entender que el dinero actual tiene fallas (como la inflación) y que existe una tecnología capaz de devolvernos el control de forma transparente es el primer paso para entrar al mundo de la Web3.

En el próximo episodio, veremos cómo crear tu primera wallet y empezar a interactuar con este nuevo ecosistema.

¡Gracias por leer! Si tienes alguna pregunta sobre cómo explicarle esto a tus amigos o familiares, déjala en los comentarios. 🚀

CanguDev: ¿Cómo construí mi propio mentor de inglés técnico con Next.js y Gemini AI?

Derlys — Fri, 13 Mar 2026 11:07:39 +0000

CanguDev: Cómo construí mi propio mentor de inglés técnico con Next.js y Gemini AI

¡Hola, comunidad! Hoy quiero compartir con ustedes el proceso de creación de CanguDev, una aplicación que nació de una necesidad personal: mejorar mi inglés técnico para alcanzar un nivel C1, enfocado específicamente en el mundo del desarrollo de software.

En este tutorial, te guiaré paso a paso por el proceso de construcción, desde la idea inicial hasta el despliegue como una PWA (Progressive Web App).

1. El concepto: ¿Por qué CanguDev?

Como desarrolladores, el inglés es nuestra "lengua materna" técnica. Sin embargo, pasar del nivel intermedio al avanzado requiere práctica constante con terminología real. CanguDev actúa como un mentor que analiza textos técnicos y te proporciona feedback instantáneo, correcciones y explicaciones gramaticales contextualizadas.

El stack tecnológico

Framework: Next.js (App Router)
Lenguaje: TypeScript
Estilos: Tailwind CSS
IA: Google Generative AI (Gemini 1.5 Flash)
Despliegue: Vercel

2. Inicialización del proyecto

Primero, creamos nuestro proyecto base de Next.js. En la terminal, ejecutamos:

npx create-next-app@latest cangudev --typescript --tailwind --eslint

Durante la configuración, asegúrate de seleccionar el uso de App Router y src/ directory si así lo prefieres.

3. Integrando el "Cerebro": Gemini AI

Para que CanguDev pueda analizar inglés, necesitamos conectarlo con el modelo de Google.

Paso A: Obtener la API Key

Ve a Google AI Studio.
Crea un nuevo proyecto y genera tu API Key.
En la raíz de tu proyecto, crea un archivo .env.local y guarda tu llave:

GOOGLE_GENERATIVE_AI_API_KEY=Tu_API_Key_Aqui

Paso B: Instalación de la SDK

Instalamos la librería oficial de Google:

pnpm add @google/generative-ai

4. Creando el analizador (Route Handler)

En Next.js, creamos un endpoint en app/api/analyze/route.ts que se encargará de procesar las peticiones. Aquí es donde ocurre la magia del Prompt Engineering.

import { GoogleGenerativeAI } from "@google/generative-ai";
import { NextResponse } from 'next/server';

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GENERATIVE_AI_API_KEY!);

export async function POST(request: Request) {
  try {
    const { text } = await request.json();
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

    const prompt = `
      Actúa como un mentor de inglés técnico nivel C1 para desarrolladores.
      Analiza el siguiente texto y devuelve un JSON con:
      1. Correcciones gramaticales.
      2. Sugerencias de vocabulario técnico más avanzado.
      3. Una breve explicación del "por qué" de los cambios.

      Texto a analizar: "${text}"
    `;

    const result = await model.generateContent(prompt);
    const response = await result.response;
    return NextResponse.json({ analysis: response.text() });
  } catch (error) {
    console.error("Error en la IA:", error);
    return NextResponse.json({ error: "Error procesando la IA" }, { status: 500 });
  }
}

5. La experiencia de usuario: PWA e interfaz

Queremos que CanguDev se sienta como una app nativa en nuestro móvil. Para ello, configuramos las capacidades de PWA.

Configuración del manifest

Creamos un archivo public/manifest.json:

{
  "name": "CanguDev Mentor",
  "short_name": "CanguDev",
  "description": "Analizador de inglés técnico C1 para devs",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f8fafc",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Configuración del layout

En app/layout.tsx, añadimos los metadatos necesarios:

export const metadata: Metadata = {
  title: "CanguDev",
  description: "AI Technical English Mentor",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "CanguDev",
  },
};

6. Desafíos y aprendizajes

Durante el desarrollo, me encontré con algunos obstáculos interesantes:

Conflictos de Node: Aprendí que mezclar npm y pnpm puede causar errores de "lock file". La solución fue limpiar node_modules y elegir un solo gestor.
Depuración de la IA: Inicialmente, el modelo me devolvía errores de formato. Ajustar el System Prompt y verificar que la API Key estuviera correctamente cargada en Vercel fue clave.
Instalación en iOS: A diferencia de Android, en iOS los usuarios deben usar la opción "Añadir a pantalla de inicio" desde Safari para instalar la PWA.

7. Despliegue

Finalmente, subí el código a GitHub y lo conecté con Vercel. ¡En menos de 2 minutos la app estaba en producción!

Conclusión

Construir CanguDev no solo me ayudó a mejorar mi inglés, sino que me permitió entender mejor cómo integrar IA en aplicaciones modernas de forma gratuita (usando el tier gratuito de Gemini).

¿Qué sigue? Planeo añadir reconocimiento de voz para practicar la pronunciación y un historial de errores comunes.

Mira el repositorio 👉🏽 aquí

¡Espero que este tutorial te inspire a crear tu propia herramienta personalizada! Si tienes dudas, déjalas en los comentarios. 🚀

Utilizando la librería Mongoose

Derlys — Wed, 08 Jan 2025 15:48:14 +0000

Si ya tienes una base de datos creada en nestjs este tutorial es para ti con tan solo 6 simples pasos tienes la conexión a Mongo que necesitas.

Si te gustaría seguir un tutorial desde cero donde creemos los mudulos y esquemas antes de la conexión te recomiento este

En este tutorial crearemos un DatabaseModule que se basa en el paquete Mongoose

Paso 1

Instala la librería de Mongoose

 npm install --save mongoose

Paso 2

Establece la conexión con tu base de datos utilizando la función connect () esta función te devuelve una promesa, por eso debes generar un proveedor asíncrono.

Crea un archivo llamado database.provider.ts y escribe este código

import * as mongoose from 'mongoose';

export const databaseProviders = [
  {
    provide: 'DATABASE_CONNECTION',
    useFactory: (): Promise<typeof mongoose> =>
      mongoose.connect('mongodb://localhost/nest'),
  },
];

exporta el archivo anterior para que sea accesible al resto de la app, haz esto en el archivo database.module.ts

Paso 3

Inyecta el objeto Connection usando el decorador @Inject() y, ya que en Mongo todo es un derivado de un esquema, defínelo en tu esquema, en este caso cat.schema.ts y quedaría así:


import * as mongoose from 'mongoose';

export const CatSchema = new mongoose.Schema({
  name: String,
  age: Number,
  breed: String,
});

Paso 4

El CatsSchema pertenece a una carpeta llamada cats y este representa al CatsModule ahora crea un modelo provider genere un archivo llamado cats.provider.ts

import { CatSchema } from './schemas/cat.schema';

export const catsProviders = [
  {
    provide: 'CAT_MODEL',
    useFactory: (connection) => connection.model('Cat', CatSchema),
    inject: ['DATABASE_CONNECTION'],
  },
];

Paso 5

En el archivo cats.service.ts usa el modelo en el servicio, inyectándolo con el decorador @inject().


import { Injectable, Dependencies } from '@nestjs/common';

@Injectable()
@Dependencies('CAT_MODEL')
export class CatsService {
  constructor(catModel) {
    this.catModel = catModel;
  }

  async create(createCatDto) {
    const createdCat = new this.catModel(createCatDto);
    return createdCat.save();
  }

  async findAll() {
    return this.catModel.find().exec();
  }
}

📝 Nota: Tu puedes crear una interfaz de Cat y de esa manera extender el Document desde el paquete Mongoose

Paso 6

Por último, en el archivo cats.module.ts importa el CatsProvider y el CatsService así:


import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';
import { catsProviders } from './cats.providers';
import { DatabaseModule } from '../database/database.module';

@Module({
  imports: [DatabaseModule],
  controllers: [CatsController],
  providers: [
    CatsService,
    ...catsProviders,
  ],
})
export class CatsModule {}

Y así puedes usar esta librería que es superútil al momento de conectar tu base de datos. Yo aprendí a usar mongo recientemente y junto con nestjs son buenos aliados para hacer una conexión rápida y sencilla.

Únete a la comunidad de mododificildevs y aprendamos juntos.

Enviar y recibir Tokens en Solana

Derlys — Mon, 19 Feb 2024 12:38:56 +0000

Esta página describe cómo recibir y enviar tokens SOL utilizando las herramientas de línea de comandos con una wallet de línea de comandos como una wallet de papel, una wallet de sistema de archivos o una wallet de hardware. Antes de empezar, asegúrese de haber creado un monedero y de tener acceso a su dirección (pubkey) y al par de claves de firma. Consulte nuestras convenciones para introducir pares de claves para distintos tipos de monederos.

Pruebe su Wallet

Antes de compartir tu clave pública con otros, es posible que quieras asegurarte primero de que la clave es válida y de que realmente posees la clave privada correspondiente.

En este ejemplo, crearemos un segundo monedero además de tu primer monedero, y luego transferiremos algunos tokens a él. Esto confirmará que puedes enviar y recibir tokens en el tipo de monedero que elijas.

Este ejemplo de prueba utiliza nuestra Developer Testnet, llamada devnet. Los tokens emitidos en devnet no tienen valor, así que no te preocupes si los pierdes.

Airdrop algunos tokens para empezar

Primero, envía algunas airdrops a la red de devnet( red de desarrollo).

solana airdrop 1 <RECIPIENT_ACCOUNT_ADDRESS> --url https://api.devnet.solana.com

Donde remplazas el texto <RECIPIENT_ACCOUNT_ADDRESS> por la dirección de su public key (clave pública)/wallet address en base58.

Se devolverá una respuesta con la firma de la transacción. Si el saldo de la dirección no cambia por la cantidad esperada, ejecute el siguiente comando para obtener más información sobre lo que potencialmente salió mal:

solana confirm -v <TRANSACTION_SIGNATURE>

Compruebe su saldo

Confirma que el AirDrop se ha realizado correctamente comprobando el saldo de la cuenta. Debería salir 1 SOL:

solana balance <ACCOUNT_ADDRESS> --url https://api.devnet.solana.com

Crear una segunda dirección de monedero

Necesitaremos una nueva dirección para recibir nuestros tokens. Crea un segundo par de claves y registra su pubkey:

solana-keygen new --no-passphrase --no-outfile

La salida contendrá la dirección después del texto pubkey:. Copie la dirección. La utilizaremos en el siguiente paso.

pubkey: GKvqsuNcnwWqPzzuhLmGi4rzzh55FhJtGizkhHaEJqiV

También puede generar un segundo (o más) monedero de cualquier tipo: papel, sistema de archivos o hardware.

Transfiere tokens de tu primer monedero a la segunda dirección

A continuación, demuestra que eres el propietario de los tokens aéreos( Airdrops) transfiriéndolos. El clúster Solana solo aceptará la transferencia si firmas la transacción con el par de claves privadas correspondiente a la clave pública del remitente en la transacción.

solana transfer --from <KEYPAIR> <RECIPIENT_ACCOUNT_ADDRESS> 0.5 --allow-unfunded-recipient --url https://api.devnet.solana.com --fee-payer <KEYPAIR>

Donde sustituyes por la ruta a un par de claves en tu primer monedero, y sustituyes por la dirección de tu segundo monedero.

Confirme los saldos actualizados con solana balance:

solana balance <ACCOUNT_ADDRESS> --url http://api.devnet.solana.com

donde es la clave pública de tu par de claves o la clave pública del destinatario.

Ejemplo completo de transferencia de pruebas

$ solana-keygen new --outfile my_solana_wallet.json   # Creating my first wallet, a file system wallet
Generating a new keypair
For added security, enter a passphrase (empty for no passphrase):
Wrote new keypair to my_solana_wallet.json
==========================================================================
pubkey: DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK                          # Here is the address of the first wallet
==========================================================================
Save this seed phrase to recover your new keypair:
width enhance concert vacant ketchup eternal spy craft spy guard tag punch    # If this was a real wallet, never share these words on the internet like this!
==========================================================================

$ solana airdrop 1 DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK --url https://api.devnet.solana.com  # Airdropping 1 SOL to my wallet's address/pubkey
Requesting airdrop of 1 SOL from 35.233.193.70:9900
1 SOL

$ solana balance DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK --url https://api.devnet.solana.com # Check the address's balance
1 SOL

$ solana-keygen new --no-outfile  # Creating a second wallet, a paper wallet
Generating a new keypair
For added security, enter a passphrase (empty for no passphrase):
====================================================================
pubkey: 7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv                   # Here is the address of the second, paper, wallet.
====================================================================
Save this seed phrase to recover your new keypair:
clump panic cousin hurt coast charge engage fall eager urge win love   # If this was a real wallet, never share these words on the internet like this!
====================================================================

$ solana transfer --from my_solana_wallet.json 7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv 0.5 --allow-unfunded-recipient --url https://api.devnet.solana.com --fee-payer my_solana_wallet.json  # Transferring tokens to the public address of the paper wallet
3gmXvykAd1nCQQ7MjosaHLf69Xyaqyq1qw2eu1mgPyYXd5G4v1rihhg1CiRw35b9fHzcftGKKEu4mbUeXY2pEX2z  # This is the transaction signature

$ solana balance DYw8jCTfwHNRJhhmFcbXvVDTqWMEVFBX6ZKUmG5CNSKK --url https://api.devnet.solana.com
0.499995 SOL  # The sending account has slightly less than 0.5 SOL remaining due to the 0.000005 SOL transaction fee payment

$ solana balance 7S3P4HxJpyyigGzodYwHtCxZyUQe9JiBMHyRWXArAaKv --url https://api.devnet.solana.com
0.5 SOL  # The second wallet has now received the 0.5 SOL transfer from the first wallet

Recibir tokens

Para recibir tokens, necesitarás una dirección a la que otros puedan enviar tokens. En Solana, la dirección del monedero es la clave pública de un par de claves. Hay una variedad de técnicas para generar pares de claves. El método que elijas dependerá de cómo elijas almacenar los pares de claves. Los pares de claves se almacenan en monederos. Antes de recibir tokens, tendrá que crear un monedero. Una vez creada, deberá tener una clave pública para cada par de claves que haya generado. La clave pública es una larga cadena de caracteres base58. Su longitud varía entre 32 y 44 caracteres.

Enviar tokens

Si ya tienes SOL y quieres enviar tokens a alguien, necesitarás una ruta a tu par de claves, su clave pública codificada en base58 y un número de tokens para transferir. Una vez que tengas todo esto, puedes transferir tokens con el comando solana transfer:

solana transfer --from <KEYPAIR> <RECIPIENT_ACCOUNT_ADDRESS> <AMOUNT> --fee-payer <KEYPAIR>

Confirme los saldos actualizados con solana balance:

solana balance <ACCOUNT_ADDRESS>

A excepción de algunos links actualizados y párrafos, este tutorial fue escrito en el idioma inglés por Solana docs. Muchas gracias por crear este tipo de contenido.

Espero esta traducción le sea de ayuda a la comunidad Hispanohablante que usa Solana que está creciendo enormemente.

Haz parte de la comunidad SOLANA LATAM.

HispanaSol

Generar direcciones personalizadas en Solana

Derlys — Wed, 10 Jan 2024 17:04:58 +0000

Las direcciones personalizadas dan cierta legibilidad a la cadena aleatoria de letras y números conocida como dirección del monedero Solana.

Si alguna vez ha realizado una sola transacción en la blockchain Solana, hay una probabilidad muy alta de que haya interactuado antes con una de estas direcciones de vanidad. Algunos de los programas más conocidos utilizan una dirección, como estás:

TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA- SPL Token program
TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb- SPL Token 2022 program
whirLbMiicVdio4qvUfM5KAg6Ct8VwpYzGff3uctyCc - Orca Whirlpools
srmqPvymJeFKQ4zGQed1GFppgkRHL9kaELCbyksJtPX- Openbook

Observará que cada una de las direcciones de cuenta comienza con algunas palabras legibles (o partes de ellas). Todas son "Vanity Address".

¿Inmersión técnica?

Puede leer todo acerca de cómo se derivan y generan las direcciones Solana en mi profundización técnica al respecto. Incluyendo la comprensión de la "ruta de derivación" utilizada para generar direcciones vanidad con la Solana CLI. Cosas bastante interesantes 😀.

Cómo generar una dirección personalizada

La manera más fácil y común de generar direcciones vanity es usando el CLI de Solana. Así que eso es lo que voy a demostrar aquí también.

Instale el Solana CLI

Si usted no tiene el Solana CLI ya instalada y configurado en su computadora, entonces usted puede leer mi otro artículo sobre Como Instalar y Configurar el Solana CLI

Asegúrese de que tiene el programa solana-keygen instalado y funcionando ejecutándolo:

solana-keygen --version

# output (note the version)
# solana-keygen 1.17.6 (src:61caae6b; feat:3073089885, client:SolanaLabs)

Anote la versión que tiene instalada. Esto será importante si desea generar una dirección de vanidad para su uso en carteras web/navegadores como Phantom o Solflare. Más sobre esto en un momento.

Utilizando el programa solana keygen, podemos buscar (es decir, generar por fuerza bruta) nuevas direcciones de vanidad que empiecen por, acaben por, o empiecen Y acaben por determinados caracteres.

Para ver todas las opciones que puede utilizar para generar direcciones vanity aleatorias de Solana, consulte la ayuda de grind:

solana-keygen grind --help

Caracteres no admitidos

Las direcciones públicas y las transacciones de Solana funcionan con el juego de caracteres base-58. Es decir, solo hay 58 caracteres posibles:

incluidas las mayúsculas A-Z, excluidas las mayúsculas O e I(como en Oscar e India)
letras minúsculas de la A a la Z, excepto la l minúscula (como en letter)
dígitos 1-9, (que no incluyen el 0)

Estas letras específicas están excluidas del conjunto de caracteres base-58, ya que pueden confundirse fácilmente con otros caracteres. Y si se utiliza el carácter equivocado, ¡la dirección de la cadena de bloques es completamente diferente!

Así que cuando intente generar direcciones vanity usando uno de los 4 caracteres no soportados, el CLI de Solana le dará un error.

Velocidad de generación de las direcciones de vanidad

En el momento actual, el CLI de Solana solo soporta este método de fuerza bruta para generar direcciones de vanidad con todos los hilos de las CPUs de tu ordenador. Así que cuanto más potente sea tu CPU, menos tiempo tardará.

Dato: mi portátil de gama media con una CPU Intel i7 de 8 núcleos puede generar 1.000.000 de direcciones de clave privada cada ~6,3 segundos.

El otro gran factor que influye en la velocidad de generación de direcciones es la cadena de caracteres que se busca. Cuanto más larga sea la cadena (por ejemplo, 4 caracteres frente a 8 caracteres) y si se ignoran las mayúsculas o minúsculas (por ejemplo, "n" frente a "Nnn"), más tiempo se tardará.

El último factor importante es si estás intentando generar la frase mnemotécnica o solo la clave privada. Generar la frase mnemotécnica llevará SIGNIFICATIVAMENTE MÁS TIEMPO que sin.

Dato: el mismo ordenador del dato anterior puede generar 1.000.000 de direcciones de frases mnemotécnicas cada ~15-20 minutos. Mucho más tiempo.

Rectificado básico

Para iniciar el proceso de grind buscando una dirección que empiece por una cadena establecida:

solana-keygen grind --starts-with nemesis:1 --ignore-case

Este simple comando se ejecutará hasta que se encuentre 1dirección de vanidad que empiece por nemeisis (ignorando las mayúsculas y minúsculas). Bastante simple.

También hay que tener en cuenta que, una vez encontrada una dirección que coincida, la clave privada (en forma de matriz de bytes) se guardará en el directorio de trabajo actual de su terminal con el archivo denominado <GENERATED_PUBKEY>.json

Coincidencia de varias cadenas

El comando grind también le permite especificar múltiples cadenas que desea buscar y comparar. Esta suele ser una forma más eficaz de buscar si está buscando más de una dirección de vanidad posible.

Para buscar y hacer coincidir varias cadenas, basta con especificar varias veces el indicador --starts-with o --ends-with o --starts-and-ends-with (con su valor). Por ejemplo:

solana-keygen grind --ignore-case --starts-with n:2 --starts-with fress:2 --ends-with dominguez:2

Este proceso continuará hasta que se encuentren 2 coincidencias para CADA una de las comparaciones de cadena dadas. Al final, se generarán 6 direcciones.

Generar con frase mnemotécnica

Vanidad con ruta mnemotécnica y de derivación

El uso de la opción --derivation-path le permitirá establecer una ruta de derivación personalizada en la CLI de Solana. Si no especifica una ruta de derivación personalizada, este indicador utilizará una ruta codificada de m/44'/501'/0'/0' (que está lista para utilizarse con Phantom y Solflare).

A diferencia del valor predeterminado de la CLI de Solana, la ruta de derivación de m/44'/501' (que NO es compatible con los monederos de navegador).

./solana/target/release/solana-keygen grind --use-mnemonic --derivation-path --starts-with nick:1 --no-passphrase

Si lo desea, también puede establecer una ruta de derivación personalizada como esta:

./solana/target/release/solana-keygen grind --use-mnemonic --derivation-path m/44/117/0/0 --starts-with nick:1 --no-passphrase

Añade tu dirección de vanidad en el monedero de tu navegador

El mnemotécnico resultante de este comando puede introducirse en el monedero de su navegador y funcionará.

A continuación, puede utilizar cualquiera de las otras banderas de grind para personalizar las direcciones de vanidad que está buscando, y ser más utilizable en el resto de la blockchain Solana 🙃

Cómo genero las direcciones personalizadas

La forma en que me gusta generar direcciones de vanidad con mnemónicos es creando una carpeta grind_keys separada en mi ordenador. A continuación, la salida de los mnemónicos generados a un archivo de texto en mi ordenador.

A continuación, envío la salida del proceso a un archivo de texto (también conocido como mnemónico) para su uso posterior.

Así:

mkdir grinder_keys && cd grind_keys
mkdir keys && cd keys
./solana/target/release/solana-keygen grind --no-passphrase --use-mnemonic --derivation-path --ignore-case --starts-with nick:100 --starts-with more:100 >> ../mnemonics.txt

Esto me permite simplemente ejecutar el mismo comando grindcada vez que inicio mi ordenador. Así puedo generar direcciones durante periodos de tiempo más largos, como días y semanas, en mi ordenador de sobremesa. Sin miedo a perder la mnemotecnia generada.

A excepción de algunos links actualizados y párrafos, este tutorial fue creado en el idioma inglés por Nick Frostbutter. Muchas gracias por crear este tipo de contenido.

Espero esta traducción le sea de ayuda a la comunidad Hispanohablante que usa Solana que está creciendo enormemente.

Haz parte de la comunidad SOLANA LATAM.

HispanaSol

2023: El año de la comunidad Solana

Derlys — Fri, 22 Dec 2023 14:52:16 +0000

¿Ya estamos en otro Solsticio de Solana? 2023 parece haber pasado volando: un año lleno de acontecimientos, marcado por retos y oportunidades. Y ahora que la comunidad echa la vista atrás, es importante recordar lo lejos que hemos llegado.

El comienzo de 2023 fue la profundidad de los inviernos más fríos, un momento difícil para la gente en todo el ecosistema Solana y la comunidad blockchain en general. La comunidad Solana no solo se mantuvo firme, sino que se redobló.

Un grito de guerra orgánico, "solo es posible con Solana", resumía la actitud de quienes seguían construyendo. El ecosistema de Solana puede ser el lugar donde las tarifas bajas y el alto rendimiento abren nuevos casos de uso, por supuesto, pero también es el lugar donde una comunidad comprometida, vibrante y orgánica lidera por encima de todo. Los aspectos más destacados y las victorias de 2023 no son obra de ningún equipo ni de ningún individuo, sino que pertenecen al gran colectivo de constructores, artistas, líderes y usuarios que hacen que Solana sea Solana.

Solana les pertenece. De parte de los que trabajamos en la Fundación Solana, gracias.

Así es como hiciste de 2023 el año de la comunidad de Solana.

Un resurgimiento liderado por la comunidad

En diciembre de 2022, la gente empezó a recibir algo extraño en sus carteras (wallets): un token con el logotipo de un shiba inu. Los recibían por usar dApps y proyectos de Solana, por unirse a eventos y por ser participantes activos en la comunidad de Solana.

Un año después, la manía Bonk ha arrasado el mundo de la web3.

// Detect dark theme var iframe = document.getElementById('tweet-1735344728995139609-860'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1735344728995139609&theme=dark" }

La historia de Bonk es la historia del renacimiento del ecosistema de Solana en 2023, y de cómo lo lideró la comunidad. Los planes que se habían trazado meses o años antes empezaron a dar sus frutos, y las personas que se quedaron y construyeron durante tiempos inciertos se convirtieron en los nuevos líderes de la comunidad. Tras un año de impulso, el ecosistema de Solana volvió a despegar.

Por ejemplo, 2023 fue el año en que Saga, de Solana Mobile, salió al mercado. A pesar de la expectación suscitada por el anuncio y el lanzamiento iniciales, no fue hasta que estalló el entusiasmo de la comunidad cuando el dispositivo móvil web3-nativo, insignia, se agotó en diciembre de 2023.

// Detect dark theme var iframe = document.getElementById('tweet-1735835498025832651-852'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1735835498025832651&theme=dark" }

En febrero, la comunidad de Helium votó a favor de migrar de su propia blockchain de capa-1 a Solana. La migración tuvo lugar a finales de marzo... y se produjo sin contratiempos, demostrando que Solana tiene un hogar para los proyectos de infraestructuras descentralizadas y allanando el camino para que futuros equipos den el salto por sí mismos.

// Detect dark theme var iframe = document.getElementById('tweet-1648725076571766786-596'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1648725076571766786&theme=dark" }

Este ha sido el año de Solana DeFi 2.0: nuevos conjuntos de herramientas y proyectos, liderados por la comunidad descentralizada, que hacen posible la próxima generación de finanzas: Maple Finance volvió a Solana con tokenized t-bills; Pyth se trasladó a la gobernanza comunitaria de su Solana Permissioned Environment; TBTC trajo BTC a Solana; Armada lanzó una infraestructura de tokens de código abierto; el lanzamiento de múltiples nuevas stablecoins; y mucho más. Hace unos días, el volumen DEX de 24 horas de Solana superó al de Ethereum por primera vez en la historia.

// Detect dark theme var iframe = document.getElementById('tweet-1735842380257869974-528'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1735842380257869974&theme=dark" }

Y la infraestructura de validadores dirigida por la comunidad siguió avanzando. Como una de las cadenas más descentralizadas en web3 por el coeficiente de Nakamoto, los clientes validadores alternativos como Firedancer de Jump Crypto, el cliente de Jito Labs y **Tinydancer **continuaron diversificando y asegurando la pila tecnológica de Solana.

// Detect dark theme var iframe = document.getElementById('tweet-1719310929593057720-861'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1719310929593057720&theme=dark" }

Desarrolladores que innovan

Las innovaciones dentro del ecosistema Solana avanzaron a un ritmo vertiginoso en 2023, ya que los equipos colaboraron para introducir nuevos estándares y herramientas para toda la comunidad. Quizá nada lo ejemplifique mejor que el equipo de todo el ecosistema que trabaja para implantar la compresión de estados, una innovación que utiliza árboles de Merkle para reducir significativamente el coste del alquiler en la red Solana.

// Detect dark theme var iframe = document.getElementById('tweet-1643972968433975296-814'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1643972968433975296&theme=dark" }

Del mismo modo, Solana Labs introdujo un plugin que permitía a la IA interactuar con la cadena de bloques Solana, permitiendo a los desarrolladores crear herramientas útiles que unían el poder de la cadena de bloques y la inteligencia artificial.

// Detect dark theme var iframe = document.getElementById('tweet-1650955017585606656-957'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1650955017585606656&theme=dark" }

No sólo trabajaron los grandes equipos: la comunidad de desarrolladores de Solana siguió creciendo. Dos hackathones de Solana, Grizzlython e Hyperdrive, registraron un número récord de solicitudes y propuestas. En Hyperdrive se presentaron más de 900 proyectos, el mayor número hasta la fecha, a pesar de las difíciles condiciones del mercado.

// Detect dark theme var iframe = document.getElementById('tweet-1720579154737873218-647'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1720579154737873218&theme=dark" }

Todo se debe a que la experiencia de los desarrolladores al construir sobre Solana sigue mejorando: en lugar del viejo meme de que construir sobre la blockchain Solana es como masticar vidrio, hoy es más como surfear sobre vidrio. Los nuevos recursos y herramientas para desarrolladores han permitido a miles de desarrolladores crear la aplicación descentralizada de sus sueños. Más información en el portal para desarrolladores de Solana.com

Las instituciones se apoyan en Solana

A medida que la vibrante comunidad de Solana proseguía su labor, las instituciones empezaron a tomar nota. En 2023, varias grandes empresas y firmas tradicionales empezaron a explorar el ecosistema de Solana.

En abril, Mastercard, en colaboración con la Fundación Solana, trabajó en herramientas para ayudar a asegurar las transacciones entre instituciones web2 y web3.

// Detect dark theme var iframe = document.getElementById('tweet-1652003395052380160-581'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1652003395052380160&theme=dark" }

Visa amplió su programa piloto de stablecoin USDC a la red Solana, tras meses de investigación exhaustiva sobre la pila tecnológica y las ventajas de la cadena de bloques Solana.

// Detect dark theme var iframe = document.getElementById('tweet-1699031109080945049-512'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1699031109080945049&theme=dark" }

Solana Pay, un protocolo de pagos entre pares descentralizado y de código abierto construido sobre la cadena de bloques Solana por Solana Labs, se integró con Shopify - desbloqueando pagos USDC a millones de empresas como una integración de aplicación aprobada.

// Detect dark theme var iframe = document.getElementById('tweet-1694336131599393186-254'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1694336131599393186&theme=dark" }

Boba Guys, una popular tienda de té, llevó a cabo una prueba piloto de su programa de fidelización basado en Solana en una tienda de San Francisco. ¿Los resultados? Un 67% más de visitas mensuales entre los participantes en el programa de fidelización y un 65% más de consumo. El programa se extendió a todo el país en noviembre.

Más allá de los productos dirigidos a consumidores y empresas, las grandes instituciones de infraestructuras también empezaron a integrar el soporte para la blockchain Solana. Google Cloud integró los datos de Solana onchain en BigQuery, desbloqueando nuevos casos de uso.

// Detect dark theme var iframe = document.getElementById('tweet-1680654353357582337-853'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1680654353357582337&theme=dark" }

Amazon Web Services también anunció que la compatibilidad con los nodos de red Solana estaba disponible para su despliegue.

Reunirse IRL (In real life)

A pesar de las frías condiciones de la industria, en 2023 la comunidad de Solana tomó el mando. En ningún lugar esto fue más evidente que en las reuniones de la vida real de creadores, usuarios y fanáticos del ecosistema de Solana que tuvieron lugar en todo el mundo.

Breakpoint, la conferencia anual de la comunidad Solana organizada por la Fundación Solana, congregó a más de 3.000 asistentes en el Campus Solana, a las afueras de Ámsterdam, durante una semana de construcción y creación de redes. Pero fueron los actos organizados por la comunidad que proliferaron en el campus y fuera de él, desde conferencias como Block Zero, DRiP Haus y The Network State hasta actos paralelos de Superteam y otros proyectos del ecosistema, los que encarnaron el verdadero espíritu comunitario.

Las Solanas Hacker Houses, que muestran el trabajo del ecosistema Solana en ciudades de todo el mundo, vieron a más de 6.000 desarrolladores enviar y aprender colectivamente

// Detect dark theme var iframe = document.getElementById('tweet-1620458593563574277-966'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1620458593563574277&theme=dark" }

AthensDAOx, un evento organizado por el equipo de DeansListDAO, causó sensación con un fin de semana centrado en la gobernanza.

// Detect dark theme var iframe = document.getElementById('tweet-1734927545156669615-293'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1734927545156669615&theme=dark" }

Mientras tanto, Solana Crossroads -una conferencia independiente en Estambul, organizada por Step Finance- mostró la creciente comunidad de constructores en Turquía.

// Detect dark theme var iframe = document.getElementById('tweet-1649042474449637382-95'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1649042474449637382&theme=dark" }

mtnDAO, el hacker house comunitario de Salt Lake City, acogió una semana de talleres, aprendizaje y mucho más sobre el ecosistema Solana.

// Detect dark theme var iframe = document.getElementById('tweet-1625981076593348608-768'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1625981076593348608&theme=dark" }

La comunidad de creadores del ecosistema Solana hizo su debut en Art Basel Miami Beach, con artistas que organizaron estudios y crearon piezas en directo y experiencias organizadas por equipos de apoyo a los creadores de todo el ecosistema Solana.

// Detect dark theme var iframe = document.getElementById('tweet-1734653445171273838-893'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1734653445171273838&theme=dark" }

Estos eventos no fueron los únicos. Desde festivales como PlayGG hasta reuniones informales de la comunidad, desde Vancouver hasta Tokio, la comunidad Solana demostró su fuerza en todo el mundo.

¿Y ahora qué?

Según todos los indicios, la comunidad de Solana no ha hecho más que empezar. Si 2023 fue el año del renacimiento del ecosistema de Solana, 2024 volverá a ser el verano de Solana.

Pero para que eso ocurra, la comunidad tiene que liderar, construir y seguir avanzando. Es un momento emocionante para el ecosistema Solana, con nuevos proyectos y noticias que aparecen a diario. Pero todo depende de ti.

El impulso hacia adelante que la comunidad Solana está experimentando en este momento puede continuar, pero requiere un enfoque implacable y priorización. Sigue escribiendo código innovador, sigue creando la próxima generación de arte, sigue esforzándote por encontrar el próximo caso de uso en el mundo real y sigue mostrando al mundo el poder de una blockchain que se mueve a la velocidad de la luz.

El mejor momento para dar el paso y comenzar su proyecto Solana es ahora. ¿Qué vas a construir?

Este tutorial fue creado en el idioma inglés por Solana.

Espero esta traducción le sea de ayuda a la comunidad Hispanohablante que usa Solana que está creciendo enormemente.

Haz parte de la comunidad SOLANA LATAM.

Configurar Solana en Linux

Derlys — Mon, 18 Dec 2023 17:14:49 +0000

En este tutorial vamos a: Instalar las herramientas, crear una billetera local y crear un ejemplo de hola mundo. Programa para probar que está correctamente configurado.

Configure su entorno de desarrollo Solana en Linux con esta guía de instalación completa

Para configurar e instalar Solana en Linux, necesitará para instalar lo siguiente:

NodeJS y Yarn
Varios paquetes y bibliotecas del sistema Linux
Rust and Cargo (usando Rustup)
El conjunto de herramientas CLI de Solana
El marco Anchor (no es realmente necesario, ¡pero sí muy recomendable!)

Aviso: Es posible que se encuentre con errores del compilador o del generador durante el proceso de configuración, dependiendo de qué bibliotecas y dependencias ya tenga su sistema Linux instalado.

Instalar NodeJS y Yarn

Seamos realistas, el mundo de web 3 y blockchain se está construyendo con Aplicaciones basadas en JavaScript/TypeScript. De los cuales, NodeJS y el paquete NPM está a la vanguardia.

Así que simplemente instala NodeJS (si eres uno de esos desarrolladores cripto curiosos que aún no lo tienen instalado). En Linux/Ubuntu, recomiendo instalar NodeJS usando administrador de versiones de nodo(también conocido como NVM). ¡Actualizar las versiones de Node es lo más sencillo posible!

A continuación, recomiendo encarecidamente instalar el Administrador de paquetes de Yarn. Mucha gente está usando Yarn en el ecosistema Solana. (¡Incluyéndome y al equipo Anchor!):

npm i -g yarn

Instalar librerías y paquetes de Linux

Para comenzar esta fiesta de Solana, asegúrese de que su sistema Linux esté actualizado:

sudo apt-get update && sudo apt-get upgrade

Cada distribución de Linux es diferente. Y dependiendo del tipo de Linux que uses se están ejecutando, es posible que necesite instalar más o menos paquetes adicionales en tu sistema.

La instalación de los siguientes paquetes debería cubrir la mayoría de los casos para sistemas basados en Ubuntu o Debian:

sudo apt-get install -y pkg-config build-essential libudev-dev libssl-dev

Nota: En el pasado usaba Edición Parrot OS Home (Debian y apt) como mi conductor diario, y estos paquetes también eran necesarios para comenzar en el desarrollo de Solana.

Las personas a menudo se encuentran con varios errores al configurar la variedad de Solana. Herramientas de desarrollo en sistemas operativos basados en Linux como Ubuntu o Parrot OS (que es lo que me gusta usar). Esto generalmente se debe a que falta en su sistema algunas dependencias diversas. Lo bueno es que si tienes algún problema al instalar o crear programas Solana, Anchor y/o Solana, su salida del terminal suele ser lo suficientemente descriptiva como para indicarle qué paquete/dependencia te falta. ¡Hermoso!

Instalar Rust y Cargo

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

A medida que avanza a través de este asistente de instalación de Rust, se le dará algunas opciones al instalar. Cuando se le solicite, recomiendo seleccionar la opción de construcción nocturna(nightly). Esto parece funcionar mejor con el conjunto de herramientas Solana CLI.

Nota: Este comando de instalación de Rustup proviene directamente del sitio web Rustup.rs.

Instale la CLI de Solana

sh -c "$(curl -sSfL https://release.solana.com/stable/install)"

Nota: Este comando de instalación para el conjunto de herramientas Solana CLI proviene directamente de los documentos oficiales de Solana.

Instalar Anchor Lang para Solana

Anchor es el framework más popular para crear programas Solana. Es un proyecto de código abierto que puede ayudar a simplificar tus programas, además de hacerlos más seguros.

Nota: El equipo de Anchor recomienda instalar Anchor usando la herramienta Anchor Version Manager, AVM, ¡así que eso es lo que usaremos aquí! Este proceso construirá AVM desde el código fuente y puede llevar un poco de tiempo, dependiendo del hardware de tu ordenador.

Una vez que haya instalado Cargo, puede instalar AVM con el siguiente comando:

cargo install --git https://github.com/coral-xyz/anchor avm --locked --force

A continuación, podemos usar AVM para instalar Anchor CLI (esto puede tardar un poco), ya que Cargo compilará la CLI durante la instalación):

avm install latest

Finalmente, indique que configure la última versión de Anchor como predeterminada de su sistema y verifique tu versión:

avm use latest && anchor --version

Crea una billetera Solana local

Una de las últimas cosas que necesitará desarrollar (más específicamente implementar) Los programas Solana son una billetera. No profundizaré en los detalles del uso de la Solana CLI aquí, sino más bien una comprensión superficial de los comandos para empezar a desarrollar.

TLDR;

Las billeteras del sistema de archivos guardarán la clave privada de su billetera en un archivo local en su computadora
debe seleccionar la red Solana correcta que desea mediante la CLI necesitarás enviar el token SOL a tu billetera

Crear una billetera Solana

Cree una nueva billetera del sistema de archivos llamada "demo-wallet":

solana-keygen new --outfile ~/.config/solana/demo-wallet.json

Seleccione la red Solana

Seleccione Solana "testnet" red y configure su nueva billetera del sistema de archivos como la predeterminada:

solana config set --url testnet --keypair ~/.config/solana/demo-wallet.json

Verifique sus ajustes de configuración

Lea la configuración de su CLI de Solana para verificar que su billetera esté correctamente configurado y estás en la red correcta:

solana config get

El resultado debería ser algo parecido a esto:

Config File: /Users/derlys/.config/solana/cli/config.yml
RPC URL: https://api.devnet.solana.com
WebSocket URL: wss://api.devnet.solana.com/ (computed)
Keypair Path: /Users/derlys/.config/solana/id.json
Commitment: confirmed

Yo utilice la red devnet que es donde puedes hacer pruebas y solicitar airDrop(sol para para probar tus DApps). En la testdev también puedes solicitarlos sin embargo se usa mas que todo para comprobar que tus transacciones esten llegando correctamente.

Financia tu billetera con un AirDrop

Obtenga un token SOL gratuito lanzado desde el AirDrop (también conocido como depositado) en su nueva billetera:

solana airdrop 1 <RECIPIENT_ACCOUNT_ADDRESS>

si ejecutas el comando sin especificar la direccion( publickey) te carga los soles en la billetera (wallet) que tengas configurada por defecto.

Para comprobar el saldo de la billetera de su sistema de archivos:

solana balance <RECIPIENT_ACCOUNT_ADDRESS>

¿Qué sigue?

Ahora que tiene todas las herramientas de desarrollo de Solana necesarias instaladas en su entorno local, ¡está listo para comenzar a crear sus primeros programas Solana!

Introducción a Solana CLI: obtenga más información sobre comandos importantes y cómo navegar por la CLI de Solana.

Implemente un programa Solana (próximamente): cree, edite, implemente y vuelva a implementar su primer programa Solana para blockchain.

A excepción de algunos links y párrafos, este tutorial fue creado en el idioma inglés por Nick Frostbutter. Muchas gracias por producir este tipo de contenido.

Espero esta traducción le sea de ayuda a la comunidad Hispanohablante que usa Solana que está creciendo enormemente.

Haz parte de la comunidad SOLANA LATAM.

Introducción a la CLI de Solana

Derlys — Wed, 13 Dec 2023 16:45:24 +0000

Como parte de su viaje de desarrollo de Solana, deberá familiarizarse con la CLI de Solana.

Es muy poderoso y muy importante comprender algunos comandos para realizar algunas tareas específicas:

1️⃣ Crear billeteras
2️⃣ Actualizar la configuración de su red Solana
3️⃣ SOL gratuito desde el AirDrop (también conocido como fondos en su cuenta)
4️⃣ Ejecutar un validador de prueba
5️⃣ Implementar programas Solana

PD: También hay un video de YouTube para este tutorial de Solana.

Aprenda a utilizar la CLI de Solana

Esta guía asume que ya tiene instalada la CLI de Solana. Si no es así, consulte esta guía sobre cómo instalar Solana CLI en Linux.

Crea una billetera Solana para el desarrollo

Para implementar programas Solana en la cadena de bloques (ya sea un validador local o un RPC remoto), necesitará crear una billetera Solana.

Para simplificar, generaremos una billetera con sistema de archivos que almacenará nuestra clave privada (privateKey) en un archivo en su computadora. De esta manera, podemos decirle fácilmente a Solana CLI y/o Anchor CLI que usen esta billetera para implementar nuestros programas Solana.

La billetera del sistema de archivos predeterminada generalmente se encuentra en ~/.config/solana/id.json.

Cuando crea nuevas wallets de sistema de archivos, puede especificar cualquier ubicación de archivo específica con el indicador --outfile /path/to/file.

Para generar una nueva wallet (billetera) Solana utiliza este comando:

solana-keygen new --outfile ~/.config/solana/solfate-dev.json

Al generar cada wallet (billetera), también puedes establecer una frase de contraseña (como un archivo de claves SSH).

¡RECOMIENDO ENCARECIDAMENTE establecer una frase de contraseña para la billetera, especialmente para cualquier billetera que pueda usar en producción en algún momento!

Para efectos de este tutorial he decidido no usar esta frase de contraseña.

Una vez creada su billetera, obtendrá una lectura de su pubkey (también conocida como dirección de su billetera) y su frase inicial. No olvides escribir tu frase inicial en un lugar seguro si realmente vas a conservar esta dirección de billetera.

Lea la configuración de Solana

Para lograr cualquier cosa en la cadena de bloques de Solana, incluso con un validador de prueba local, deberá asegurarse de que su CLI de Solana esté configurada para conectarse a la red Solana RPC correcta y con la billetera correcta.

Para ver la configuración actual de Solana CLI, ejecute este comando:

solana config get

Debería obtener una lectura como esta:

Config File: /home/nick/.config/solana/cli/config.yml RPC URL: https://api.testnet.solana.com WebSocket URL: wss://api.testnet.solana.com/ (computed) Keypair Path: /home/nick/.config/solana/id.json Commitment: confirmed

Las configuraciones son MUY importantes son la URL RPC y el archivo Keypair Path.

RPC URL: le indica a la CLI a qué clúster de red Solana desea conectarse. Generalmente, para el desarrollo local, debe configurar su propio validador de pruebas local (también conocido como localnet). Solo los RPC de la “red principal” utilizarán realmente tokens SOL reales y, por lo tanto, dinero real.

Keypair Path: la clave privada de la billetera (como la que creamos anteriormente) para usar para implementar programas e interactuar con el RPC.

Actualice su configuración de Solana

Cuando desee cambiar la configuración de su red Solana o cambiar el archivo de clave de billetera predeterminado, deberá actualizar su configuración con la CLI de Solana.

Al configurar su URL RPC (también conocido como cambiar su red Solana), puede usar el nombre corto de la red (como “mainnet”, “testnet”, etc.) o la URL completa para un nodo RPC activo:

solana config set --url testnet

Para cambiar el archivo de la clave de billetera que utiliza la CLI:

solana config set --keypair /path/to/file

Consulta el saldo de tu billetera

Necesitará SOL para interactuar con la cadena de bloques, incluso durante el desarrollo. Siempre puede consultar fácilmente el saldo de su billetera (o la de cualquier persona) utilizando la CLI de Solana.

Para verificar el saldo de la dirección de su billetera configurada por CLI (también conocida como la que ha configurado con el archivo de claves de su sistema de archivos):

solana balance

Para consultar el saldo de cualquier otra billetera:

solana balance WALLET_ADDRESS_HERE

El comando solana balancesolo verificará el saldo de la billetera determinada en la red Solana actualmente seleccionada.

Financia tu billetera a través de AirDrop

Con su nueva configuración de billetera y seleccionada en la red RPC correcta, deberá depositar fondos en su billetera con SOL.

Este SOL se utilizará para implementar programas en la cadena de bloques, así como para pagar el alquiler y las transacciones mientras desarrolla programas.

Periódicamente, a medida que implemente o interactúe con los programas de Solana, deberá financiar su billetera con SOL (el token nativo de Solana).

Puede depositar fondos en su cuenta utilizando dos métodos:

AirDrop a través de Solana CLI

Para solicitar un AirDrop gratuito a su billetera seleccionada actualmente:

solana airdrop 1

El comando solana airdrop de solana tiene un límite en la cantidad de SOL que se puede lanzar. Cualquier solicitud que supere este límite hará que la transacción falle. Al momento de escribir esto, el límite es 5.

Tal como habrás adivinado, el AirDrop se producirá en la red que estás seleccionado en la configuración de Solana. Y no, el lanzamiento aéreo no funciona en la red principal. No seas tonto.

AirDrop a través de Solfate faucet

Otra manera fácil de obtener su SOL devnet y/o testnet gratuito en su billetera es usar un grifo público. Aquí en Solfate operamos un grifo público Solana faucet.

Todo lo que necesita hacer es ingresar la dirección de su billetera y hacer clic en el botón de la red Solana que desee: devnet o testnet.

Ejecute el validador de pruebas de Solana

Como mencioné anteriormente, cuando desarrolle sus programas Solana localmente, lo más probable es que desee ejecutar una versión de host local de la cadena de bloques Solana llamada “validador de prueba”(test validator). Tal como puede pensar, esto le permitirá tener una versión completa de la cadena de bloques Solana directamente en su computadora local.

Ejecutar y desarrollar usando el validador de pruebas es excelente (y recomendado) por varias razones:

Transacciones aún más rápidas (¡tú eres el único que las realiza!)
Menor riesgo de transacciones rechazadas
sin limitación desde puntos finales RPC públicos
fácil acceso a los registros del programa Solana (a través de la macro "msg" en Rust)

Para ejecutar el validador de pruebas de Solana, abra una nueva ventana de terminal y ejecute el siguiente comando:

solana-test-validator

Esta red localhost, también conocida como “localnet”, que se ejecuta en su terminal, enviará todos los mensajes que su programa Solana envíe a la cadena de bloques. Lo cual es una excelente manera de ayudar a depurar sus programas.

A excepción de algunos links actualizados y párrafos, este tutorial fue escrito en el idioma inglés por Nick Frostbutter. Muchas gracias por crear este tipo de contenido.

Espero esta traducción le sea de ayuda a la comunidad Hispanohablante que usa Solana que está creciendo enormemente.

Haz parte de la comunidad SOLANA LATAM.

HispanaSol

Tutorial 2: Creando una aplicación Angular V17 con Tailwind

Derlys — Sun, 03 Dec 2023 15:26:55 +0000

En este tutorial, aprenderás a usar Tailwind para dar estilo a aplicaciones Angular CLI.

El objetivo es construir un diseño de aplicación con un encabezado y pie de página con sus respectivas rutas.

Requisitos

Asegúrate de tener las siguientes herramientas instaladas:

Node JS y NPM, visite su página para ver las instrucciones.
- Ejecute node -v para verificar que tiene la versión 20 o superior.
- Ejecute npm -v para comprobar que tiene la versión 10 o superior.
Angular CLI (npm install -g @angular/cli)
- Ejecute ng version para revisar que tiene la versión 17.

Si prefiere usar yarn, primero configure el administrador de paquetes predeterminado de Angular CLI. Esto asegura que la aplicación generada tenga un archivo yarn.lock en lugar de un paquete-lock.json.

1. Crea una nueva aplicación

Abra una terminal y ejecute el siguiente comando:

ng new angular17

El comando ng new genera una aplicación Angular básica en una carpeta llamada angular17 e instala las dependencias.

La ejecución de este comando te da un recorrido por varias preguntas que configuran tu app con los estilos que quieras.

Además, una de las nuevas actualizaciones de Angular V17 es que nos permite desde el comienzo crear nuestro server side rendering algo increíblemente útil.

Al final de la configuración, la CLI de Angular también inicializa un repositorio git y hace un commit inicial.

2. Abrir la aplicación en modo de desarrollo

Después que la instalación haya finalizado, ejecuta el siguiente comando e ingresa a la carpeta de tu proyecto.

cd angular17

En la carpeta del proyecto tú puedes iniciar el servidor de desarrollo usando el comando ng serve.

** El servidor de desarrollo de Angular utiliza el localhost:4200, abre tu navegador en localhost:4200**

Haz clic en el enlace anterior y comprueba que funciona. ¡Ahora si la aplicación está lista para utilizar algunos estilos 🤗!

3. Instala Tailwind

Ejecuta los siguientes dos comandos en la carpeta de tu proyecto para instalar Tailwind.

yarn add -D tailwindcss postcss autoprefixer
yarn add tailwindcss init

Después que finalice el proceso, abre el archivo tailwind.config.js y agrega lo siguiente:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Abre el archivo styles.css y agrega las siguientes directivas:

@tailwind base;
@tailwind components;
@tailwind utilities;

Si quieres comprobar que Tailwind se instalo haz un cambio pequeño en tu app.component.html, prueba agregando esto:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

MD Tip 💡
Recuerda que no debes eliminar la etiqueta <router-outlet></router-outlet>.

MDato 🗃️
Angular ahora no tiene modulos y en los siguientes pasos del tutorial te daras cuenta por que

4. Configura el layout de la aplicación

En este paso generaremos 3 componentes layout, header y footer dentro de una carpeta llamada ui.

💡 Es una buena idea mantener la UI (Interfaz de ususario) separada del resto de la aplicacion. Esta Separacion de tareas tambien te permite reutilizar facilmente la UI en otros proyectos.

Ejecuta el comando:

ng generate component ui/layout

Esto te generará una carpeta que se llama ui y dentro de esta un componente llamado layout.

A partir de aquí crearemos el componente header y footer dentro de esta carpeta, ejecutando estos 2 comandos:

ng generate component ui/header
ng generate component ui/footer

MDato
💡 El comando ng generate acepta abreviaturas: usa ng g c Para generar un componente, ng g s para generar un servicio, etc.

4.1 Implementa el LayoutComponent

Abre src/app/ui/layout/layout.component.html y remplaza su contenido por lo siguiente:

<div class="flex flex-col h-full justify-between">
  <app-header></app-header>
  <div class='flex-grow  py-4 px-16 text-center bg-pink-300 
    text-pink-900 '>
    <div class="text-pink-500 text-3xl">
    <router-outlet></router-outlet>
    </div>
  </div>
  <app-footer></app-footer>
</div>

Vas a notar que las etiquetas de header footer y router-outlet se colocan rojas, eso es porque debes importarlas en el respectivo componentes donde las uses

Abre src/app/ui/layout/layout.component.ts y agrega esto en los imports:

import { Component } from '@angular/core';
import {HeaderComponent} from '../header/header.component'
import {FooterComponent} from '../footer/footer.component'
import {RouterOutlet} from '@angular/router'

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [HeaderComponent,FooterComponent, RouterOutlet],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.scss'
})
export class LayoutComponent {

}

4.2 Usa el LayoutComponent

Abra el archivo src/app/app-routes.ts y agrega el siguiente código que es una lista de objetos que irán dentro del array de routes.

{
    path: '',
    component: LayoutComponent,
    children: [
      // Here we will add our application pages
    ],
  },

Para que puedas usar el LayoutComponent debes importarlo en este mismo archivo en la parte superior.

import {LayoutComponent} from './ui/layout/layout.component'

Abre el archivo app.component.html y deja solo la etiqueta router-outlet.

Guarda y deberías ver en tu navegador el HeaderComponent
y FooterComponent renderizados.

4.3 Implementa el Header

Abre el archivo header.component.html y pega este código

<div class='p-4 bg-violet-900 text-violet-300'>
  <div class="flex justify-between align-items">
    <div>LOGO</div>
    <div class="flex space-x-4">

      <a
        routerLinkActive="active" routerLink="/home" 
        class="bg-pink-500 text-white rounded-md px-3 py-2 
        text-sm font-medium" aria-current="page">Home</a>
      <a
        routerLinkActive="active" routerLink="/blog" 
        class="text-gray-300 hover:bg-pink-500 hover:text- 
        white rounded-md px-3 py-2 text-sm font- 
        medium">Blog</a>
      <a
        routerLinkActive="active" routerLink="/contact" 
        class="text-gray-300 hover:bg-pink-500 hover:text- 
        white rounded-md px-3 py-2 text-sm font- 
        medium">Contact</a>
    </div>
  </div>
</div>

Importa RoterLink y RoterLinkActive en el archivo header.component.ts.

 imports: [RouterLink, RouterLinkActive],

4.4 Implementa el Footer

Abre el archivo footer.component.html y pega este código

<div class='p-4 text-center bg-violet-900 text-violet-300'>
  COPYRIGHT &copy; 2069
</div>

5. Agrega páginas a tu aplicación

Con el layout en su lugar es momento de agregar páginas a nuestra app.

Ejecuta el siguiente comando:

ng g c pages/home

Abre el siguiente archivo en la ruta src/app/pages/home/home.component.html y remplaza el contenido por esto:

<div class="bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">This is my home</h2>
    <p class="mt-6 text-lg leading-8 text-gray-600">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
  </div>
</div>

Recuerdas que habiamos configurado nuestro layout en el archivo app-routes.ts

Agrega tu primera rutaHome que es hija del layout el cual es compartido en cualquiera de las rutas, copia y pega lo siguiente el archivo app-routes.ts dentro del arraychildren:

{ path: 'home', component: HomeComponent },

Y ahora, si das clic en la ruta Home en tu navegador te mostrará el Homecomponent que acabaste de diseñar en el punto anterior.

MDato 🗃️
Puedes investigar mas acerca de rutas hijas o Nesting routes aqui

5.1 Crea la página blog

Ejecuta el comando:

ng g c pages/blog

Abre el archivo blog.component.html y copia esto:

<section class="relative isolate overflow-hidden bg-white px-6 py-24 sm:py-32 lg:px-8">
  <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"></div>
  <div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
  <div class="mx-auto max-w-2xl lg:max-w-4xl">
    <img class="mx-auto h-12" src="https://tailwindui.com/img/logos/workcation-logo-indigo-600.svg" alt="">
    <figure class="mt-10">
      <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>“Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis.”</p>
      </blockquote>
      <figcaption class="mt-10">
        <img class="mx-auto h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
        <div class="mt-4 flex items-center justify-center space-x-3 text-base">
          <div class="font-semibold text-gray-900">Judith Black</div>
          <svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
            <circle cx="1" cy="1" r="1" />
          </svg>
          <div class="text-gray-600">CEO of Workcation</div>
        </div>
      </figcaption>
    </figure>
  </div>
</section>

Abre nuevamente el archivo de tus rutasapp-routes.ts y agrega la nueva ruta de blog

children: [
      { path: 'home', component: HomeComponent },
      { path: 'blog', component: BlogComponent },
    ],

💡 Recuerda que cada ruta que agregues la debes importar en la parte superior de este mismo archivo.

5.2 Crea la página contact

Ejecuta el comando:

ng g c pages/contact

Abre el archivo contact.component.html y copia esto:

 <form [formGroup]="form" class="mx-auto mt-16 max-w-xl sm:mt-20">
    <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
      <div class="sm:col-span-2">
        <label for="email" class="block text-sm font-semibold leading-6 text-white">Email</label>
        <div class="mt-2.5">
          <input  formControlName="email" type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
        </div>
      </div><div class="sm:col-span-2">
        <label for="email" class="block text-sm font-semibold leading-6 text-white">Password</label>
        <div class="mt-2.5">
          <input formControlName="password"  type="email" name="email" id="password" autocomplete="email" class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
        </div>
      </div>
    </div>
    <div class="mt-10">
      <button type="submit" (click)="submit()" [disabled]="!form.value" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let's talk</button>
    </div>
  </form>

Abre nuevamente el archivo de tus rutas app.routes.ts y agrega la nueva ruta de contact

children: [
      { path: 'home', component: HomeComponent },
      { path: 'blog', component: BlogComponent },
      { path: 'contact', component: ContactComponent },
    ],

Para que nuestro formulario reactivo funcione debemos hacer algunos cambios en el archivo contact.component.ts

Copia y pega lo siguiente:


import { Component } from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [
    ReactiveFormsModule
  ],
  templateUrl: './contact.component.html',
  styleUrl: './contact.component.scss'
})
export class ContactComponent {

  form = new FormGroup({

    email: new FormControl(''),
    password: new FormControl(''),
  });
  public submit() {

    console.log(this.form.value);
  }
}

6. Redirigir la ruta raíz

Abre el archivo app.routes.ts y agrega el siguiente objeto en el array de Routes

{
    path: '',
    // If this path is the 'full' match...
    pathMatch: 'full',
    // ...redirect to this route.
    redirectTo:'home',
  },

Que hacer a partir de aquí?

Como se explica en la introducción, este es un punto de partida y debe ser sencillo mejorar esta app como te parezca

Tailwind es un framework de CSS poderoso y con muchas alternativas para colocar estilos a una app de forma rápida, después que aprendas a manejar su sintaxis podrás usarla a tu favor.

Te dejo por aquí su página oficial para que explores un poco más.

Conclusión

En este tutorial has aprendido a crear una aplicación básica y utilizar tailwind para crear un diseño con encabezado(header) y pie de página(footer) la aplicación tiene varias páginas, así que esta es una oportunidad para que apliques carga perezosa(Lazy loading).

Puedes guiarte por la nueva documentación de Angular V17 en la sección Guías detalladas(In depth Guides)

Si tienes alguna pregunta no dudes en dejar un comentario en DEV o enviarme un mensaje al X

Muchas gracias a Beeman por revisar este post.

Nos vemos en otro post ✋🏽