Forem: Erik Giovani

Women in Tech

Erik Giovani — Fri, 01 Mar 2024 21:02:20 +0000

Hi 👋, a year ago I made a list to make more visible the profiles of women content creators or who excel in programming or any topic related to technology, unfortunately it didn't have the support I would have liked and only two people have contributed, but I would like to invite you to take a look at it or if you admire someone's work in technology, feel free to contribute.

It is still a small list and a work in progress, my plan is that when I have a larger list I will turn it into a website.

Women in Tech

Thanks for reading.

GitHub + DEV 2023 Hackathon: Best GitHub

Erik Giovani — Tue, 16 May 2023 06:13:44 +0000

What I built

I built a web app with the parallax effect to be able to compete with other GitHub users with a points system based on the sum of the user's repos and the number of followers on GitHub.

Category Submission

Wacky Wildcards

App Link

https://best-github.vercel.app/

Screenshots

Description

Best GitHub is a web app where the user, by typing his GitHub username in the form, using the GitHub public api, can appear in the ranking of the first places to be able to compete against other users.

Link to Source Code

https://github.com/ErikGIovani/best-gihub

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

I was inspired by the hackathon, since I wanted several users to have fun competing to see who had the most points.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I built everything directly with GitHub Codespaces and have been using them for several months from a Raspberry Pi 3B+.

Additional Resources/Info

All additional information can be found in the Series of this post.

Best GitHub parte 4

Erik Giovani — Mon, 15 May 2023 23:15:30 +0000

Hola 👋, en este post terminaremos la parte del backend con Next JS.

Para empezar, dentro de nuestra carpeta api que se encuentra dentro de la carpeta pages, vamos a crear un archivo llamado search-place.ts.

Dentro de este archivo agregaremos el siguiente código:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "POST") {
    return res.status(404).json(messages.notFound);
  }
}

Como te habrás dado cuenta, la estructura es muy parecida a lo que habíamos hecho en el post anterior, pero esta vez vamos de usar el método GET usaremos el método POST.

Antes de continuar, vamos a instalar una dependencia llamada Zod para validar el usuario de GitHub que vamos a resibir.

Esto lo haremos con el siguiente comando:

yarn add zod

Si estás usando NPM:

npm install zod

Ya instalado, crearemos un archivo llamado validations.ts, dentro de nuestra carpeta utils, ahí procederemos a escribir el siguiente código:

import { z } from "zod";

export const userZodSchema = z.object({
  username: z.string().trim().min(1),
});

Lo que estoy haciendo es importar z desde zod para poder acceder a su propiedad object, que nos sirve para poder validar varios datos, pasándole un solo objeto, en lugar de validar dato por dato, también estoy validando un dato como un objeto en caso de que quiera después agregar más datos para validar que vengan del frontend.

La key username va a tener la validación del username, en este caso le estoy diciendo con z.string que quiero que el dato sea de tipo string, con el trim le estoy diciendo que si el string recibido tiene espacios se los quite, y con min(1) le estoy diciendo que el username no puede estar vacío y debe tener minimo un carácter.

Y ese esquema de validación lo estoy guardando en una constante llamada userZodSchema.

Ahora en nuestro archivo search-place.ts, procederemos a importar nuestro esquema y agregar el siguiente código después del if:

const result = userZodSchema.safeParse(req.body);

if (!result.success) {
  return res.status(400).json(messages.error);
}

const { username } = result.data;

Lo que hace ese código, es que estamos accediendo a la propiedad safeParse que nos crea zod en nuestro esquema de validación, que sirve para que si el dato recibido no cumple con las validaciones que le agregamos no nos mande un error, depués va a recibir todo lo que venga del req.body de la petición que nos manden a la ruta /api/search-place con el método POST y guardaremos el resultado en una constante llamada result, si el objeto recibido tiene más propiedades aparte del username, nuestro esquema de validación directamente las ignorará.

En el if lo que estoy haciendo es revisar que la constante result no tenga una propiedad llamada success en true, que significa que el dato recibido no cumple con las validaciones que agregamos,y responda con el mensaje de error de nuestras utilidades que habíamos creado en el post anterior, y si existe la propiedad success, entonces de data desestructuramos el username ya validado.

Ahora en nuestra carpeta util vamos a crear un archivo llamado githubCall.ts y dentro agregaremos el siguiente código:

const githubCall = async(username: string) => {
    const response = await fetch(`https://api.github.com/users/${username}`);
    const user = await response.json();
    return user;
}

export default githubCall;

Como podrás ver, es solo una función que recibe el username y hace una llamada al api pública de GitHub y nos retorna los datos públicos de su perfil de GitHub.

También crearemos un archivo llamado changeUser.ts dentro de nuestra carpeta utils, y agregaremos el siguiente código:

import { PrismaClient } from "@prisma/client";

import type { NewUser } from "./types";

const prisma = new PrismaClient();

const changeUser = async (userID: string, newUser: NewUser) => {
  const updatedUser = await prisma.user.update({
    where: { id: userID },
    data: newUser,
  });

  if (updatedUser) {
    console.log("User Updated");
  } else {
    console.error("Error Updating User");
  }
};

export default changeUser;

Esta utilidad nos va a servir para actualizar a los lugares ganadores, por eso la función esta recibiendo el userID y el newUser, dentro de la función estamos accediendo a la propiedad user de nuestro user en prisma para actualizar los del usuario por los del nuevo usuario identificándolo por su ID.

También crearemos un archivo newUser.ts dentro de nuestra carpeta utils con el siguiente código:

import type { NextApiResponse } from "next";

import changeUser from "./changeUser";
import type { GitHubUser, NewUser } from "./types";
import type { User } from "@prisma/client";

const newUser = async (
  res: NextApiResponse,
  user: GitHubUser,
  users: User[]
) => {
  const newUser: NewUser = {
    username: user.login,
    name: user.name,
    url: user.html_url,
    avatar: user.avatar_url,
    total: user.public_repos + user.followers,
  };

  if (newUser.total >= users[0].total) {
    await changeUser(users[0].id, newUser);
    return res.status(200).json({
      message: "Congratulations, you are in the first place",
    });
  } else if (
    newUser.total < users[0].total &&
    newUser.total >= users[1].total
  ) {
    await changeUser(users[1].id, newUser);
    return res.status(200).json({
      message: "Congratulations, you are in the second place",
    });
  } else if (
    newUser.total < users[1].total &&
    newUser.total >= users[2].total
  ) {
    await changeUser(users[2].id, newUser);
    return res.status(200).json({
      message: "Congratulations, you are in the third place",
    });
  } else {
    return res.status(200).json({
      message: "Sorry, you are not in any of the first places",
    });
  }
};

export default newUser;

Lo que está haciendo ese código es ver si el nuevo usuario tiene más puntos o menos que cualquiera de los tres usuarios en nuestra base de datos, y si tiene más o igual de puntos lo va a sustituir.

Para finalizar, nuestro archivo search-place.ts se tendría que ver de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";
import { userZodSchema } from "@/utils/validations";
import githubCall from "@/utils/githubCall";
import usersCall from "@/utils/usersCall";
import newUser from "@/utils/newUser";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== "POST") {
    return res.status(404).json(messages.notFound);
  }

  const result = userZodSchema.safeParse(req.body);

  if (!result.success) {
    return res.status(400).json(messages.error);
  }

  const { username } = result.data;

  try {
    const user = await githubCall(username);

    if (user.message) {
      return res.status(400).json({ message: "The username not exist" });
    }

    const users = await usersCall();

    return await newUser(res, user, users);
  } catch (error) {
    return res.status(400).json(messages.error);
  }
}

Best GitHub parte 3

Erik Giovani — Wed, 03 May 2023 01:41:37 +0000

Hola de nuevo 👋, en este post vamos a crear el backend en Next JS.

Vamos a empezar accediendo a la carpeta api que se encuentra dentro de la carpeta pages que se encuentra dentro de la carpeta src.

Una vez ahí, nos encontraremos con un archivo hello.ts, lo que haremos será renombrarlo a places.ts y hacer que quede de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest,res: NextApiResponse ) {

}

Ahora en la carpeta src vamos a proceder a crear una carpeta llamada utils, que es la que va a contener todas las utilidades que vamos a utilizar en el frontend como en el backend.

Dentro de la carpeta utils vamos a crear un archivo messages.ts, que va a tener los mensajes de respuesta que se van a usar en más de un lugar, así evitaremos reescribir código.

Dentro del archivo messages.ts vamos a agregar el siguiente código:

const messages = {
  error: { message: "There was an error, please try again later" },
  notFound: { message: "Not found" },
};

export default messages;

La constante messages almacena un objeto con dos objetos, el primero lo vamos a utilizar como un mensaje de error general y el segundo como un mensaje de error cuando traten de acceder a alguno de nuestros endpoints con un método distinto al que establezcamos.

Una vez aclarado, accederemos a nuesto archivo places.ts y dentro de la función handler agregaremos el siguiente código:

if (req.method !== "GET") {
  return res.status(404).json(messages.notFound);
}

El if sirve para que si alguien trata de acceder a la ruta /api/places con un método distinto al método GET le responda al usuario con un código de estado 404 y el mensaje { message: "Not found" } en formato JSON.

Así que nuestro archivo places.ts se tendría que ver de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }
}

Ahora crearemos en la carpeta utils un archivo usersCall.ts, que usaremos para traer con prisma todos los usuarios que tenemos agregados en nuestra base de datos de MongoDB Atlas.

Una vez creado agregaremos el siguiente código:

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const usersCall = async () => {
  const users = await prisma.user.findMany();
  const usersOrdered = users.sort((a, b) => b.total - a.total);
  return usersOrdered;
};

export default usersCall;

En la constante users estoy guardando todos los usuarios que he mandado a llamar con prisma con la función findMany, y en la constante usersOrdered estoy guardando todos los usuarios ordenados por el total de mayor a menor con el método sort de JavaScript.

Ahora en nuestro archivo places.ts después del if agregaremos el siguiente código:

try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
} catch (error) {
    res.status(400).json(messages.error);
}

En la constante users estoy guardando los usuarios ordenados de mayor a menor por el total desde la función usersCall, en el if estoy comprobando que si los usuarios son cero, me retorne un código de estado 400 y un mensaje { message: "There was an error, please try again later" } en formato JSON.

Y si no, me retorne un código de estado 200, y todos los usuarios ordenados de mayor a menor en formato JSON, pero si todo eso falla, ya sea porque la base de datos se encuentre caída o alguna causa no provista, me retorne con un catch la respuesta de código de estado 400 y el mensaje { message: "There was an error, please try again later" } en formato JSON.

Así que tu archivo places.ts tendría que verse de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";
import usersCall from "@/utils/usersCall";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }

  try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
  } catch (error) {
    res.status(400).json(messages.error);
  }
}

Eso es todo por este post, en el siguiente post crearemos una ruta más para poder cambiar los lugares consultando el api pública de GitHub.

Best GitHub parte 2

Erik Giovani — Sun, 30 Apr 2023 00:44:58 +0000

Hola 👋, lo prometido es deuda, así que es momento de empezar a escribir código.

Empezaremos creando un nuevo proyecto con la herramienta create-next-app de Next JS, yo la voy a usar con el gestor de dependencias Yarn, pero si tú gustas puedes hacerlo con NPM o con PNPM, eso ya es a tu gusto.

En la terminal de nuestro GitHub Codespace debes proceder a ejecutar el siguiente comando:

yarn create next-app

Si estás usando NPM debes ejecutar el siguiente comando:

npx create-next-app

Para abrir una terminal en GitHub Codespaces necesitas dar click en el menú de hamburguesa de la izquierda, después tienes que dar click en Terminal y después en Nuevo terminal.

Eso nos abrirá una terminal, por lo que tu GitHub Codespace debería verse algo parecido a esto.

Al ejecutar el comando de create-next-app nos hara las siguientes preguntas:

What is your project named? … my-app
Would you like to use TypeScript with this project? … No / Yes
Would you like to use ESLint with this project? … No / Yes
Would you like to use Tailwind CSS with this project? … No / Yes
Would you like to use `src/` directory with this project? … No / Yes
Would you like to use experimental `app/` directory with this project? … No / Yes
What import alias would you like configured? … @/*

Para elegir, Yes o No, puedes hacerlo con las flechas de izquierda y derecha del teclado, y para continuar con la siguiente pregunta solo tienes que presionar la tecla Enter.

Yo le he dado a todo si, excepto a usar el directorio app y a usar tailwind, al nombre del proyecto y al import alias los dejé como están por defecto.

Eso nos generará una nueva carpeta con todos lo necesario para desarrollar en Next JS.

Lo primero que haré será arrastrar todo el contenido de la carpeta generada, a la carpeta principal, y borraremos la carpeta vacía.

Como puedes ver, nos aparece en el icono de Git que tenemos más de 10.000 archivos modificados, no te preocupes, eso se resuelve dando click en el icono de Git que se encuentra en la izquierda y después dando click en el icono de Refesh que aparece hasta arriba.

Ahora instalaremos algunos paquetes que necesitaremos, los cuales serán prisma y ts-node como dependencias de desarrollo, lo haremos ejecutando el siguiente comando en la terminal:

yarn add -D prisma ts-node

Si estás usando NPM con el siguiente comando:

npm install -D prisma ts-node

Una vez instalados, para empezar a usar Prisma primero necesitamos ejecutar el siguiente comando:

npx prisma init

Eso nos creará una carpeta llamada prisma, un archivo .env y nos mostrará el siguiente mensaje en la terminal:

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started

Ahora tienes que crear una cuenta en MongoDB Atlas si aún no tienes una, y agregar la url de tu base de datos en el archivo .env, si aún no sabes como usar MongoDB Atlas, te dejo este video para que aprendas a usarlo.

Después abriremos el archivo schema.prisma que se encuentra en la carpeta prisma, y cambiaremos postgresql por mongodb.

Y procederemos a agregar un nuevo modelo llamado User de la siguiente forma:

model User {
  id       String @id @default(auto()) @map("_id") @db.ObjectId
  username String
  name     String
  avatar   String
  url      String
  total    Int
}

El tipo String @id @default(auto()) @map("_id") @db.ObjectId sirve para decirle a prisma que el id va a ser de tipo string y autogenerado por MongoDB

Si todo ha salido bien, tu archivo schema.prisma debería de verse así:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id       String @id @default(auto()) @map("_id") @db.ObjectId
  username String
  name     String
  avatar   String
  url      String
  total    Int
}

Para darle un mejor formato y autocompletado a los archivos .prisma, te recomiendo instalar en vscode una extensión llamada Prisma.

Aquí te dejo el enlace: https://marketplace.visualstudio.com/items?itemName=Prisma.prisma

Ahora, para empezar a poblar nuestra base de datos, crearemos una Semilla, para eso crearemos un archivo seed.ts en la carpeta prisma.

Pero antes necesitamos instalar el paquete @prisma/client con el siguiente comando:

yarn add @prisma/client

Si estás usando NPM con el siguiente comando:

npm install @prisma/client

Ese comando aparte de instalar @prisma/client también ejecuta automáticamente el comando npx prisma generate, para poder crear el modelo User en prisma, por lo que si haces más cambios en el modelo en el esquema o agregas un modelo nuevo para que prisma pueda detectar los cambios tienes que ejecutar manualmente npx prisma generate.

En nuestro archivo seed.ts agregaremos el siguiente código:

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const seed = async () => {
  const Users = await prisma.user.createMany({
    data: [
      {
        username: "ErikGIovani",
        name: "Erik Giovani",
        url: "https://github.com/ErikGIovani",
        avatar: "https://avatars.githubusercontent.com/u/46170949?v=4",
        total: 35,
      },
      {
        username: "Dino",
        name: "Dino Picapiedra",
        url: "https://github.com/ErikGIovani",
        avatar: "https://avatars.githubusercontent.com/u/46170949?v=4",
        total: 40,
      },
      {
        username: "Pablo",
        name: "Pablo Marmol",
        url: "https://github.com/ErikGIovani",
        avatar: "https://avatars.githubusercontent.com/u/46170949?v=4",
        total: 16,
      },
    ],
  });

  console.log(Users);
};

seed()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (error) => {
    console.error(error);
    await prisma.$disconnect();
    process.exit(1);
  });

En esta semilla estoy creando una función flecha llamada seed que va a ser asíncrona, dentro de esa función estoy mandando a llamar al cliente de prisma y accediendo a su propiedad user, que es para poder acceder al modelo User que agregamos al esquema en el archivo schema.prisma, y finalmente accediendo a su función createMany para agregar varios usuarios de prueba con una sola llamada a la base de datos.

Depués mando a llamar a la función seed y al finalizar la ejecución de la función hago una llamada a la funcion $disconnect() de prisma, para cerrar la conexión con la base de datos.

Para hacer funcionar nuestra semilla, en nuestro archivo package.json agregaremos la siguiente propiedad:

"prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
},

La opción --compiler-options {\"module\":\"CommonJS\"}, sirve para decirle a ts-node que ejecute nuesto archivo seed.ts de manera transpilada como si fuera CommonJS, eso lo hacemos porque si no nos daría un error por usar import sin configurar el type module en el package.json o agregar la configuración en el archivo de configuración de TypeScript.

Para usar nuestra seed ejecutamos el siguiente comando en la terminal:

npx prisma db seed

Para evitar hacer este post demasiado largo, eso es todo por este post, en el siguiente post crearemos la lógica del backend en Next JS.

Best GitHub

Erik Giovani — Thu, 27 Apr 2023 01:04:51 +0000

Hola 👋, este es mi primer post que escribo, así que si algo de lo que escribo es confuso o tiene faltas de ortografía, te pido una disculpa.

En este post te voy a enseñar los pasos de como estoy desarrollando una web app llamada Best GitHub para el hackathon de GitHub Y DEV.

Stack:

Next JS
TypeScript
Zod
Prisma
MongoDB Atlas
GitHub Codespaces

Primeros Pasos

Para empezar, primero voy a crear un nuevo repositorio en GitHub, lo puedes hacer en la parte de arriba de tu perfil, dando click en el botón con el signo + y después dando click en la parte que dice New repository.

Nos mandará a una página parecida a esta, dónde tendremos que poner el nombre que va a tener el proyecto, también puedes agregar una descripción, pero eso ya es opcional, de cualquier forma puedes agregarla o cambiarla después.

Lo que sí haremos será marcar la casilla que dice Add a README file, ya que sin un archivo, GitHub Codespaces puede tener problemas para dejarnos crear archivos.

Solo falta dar click en el botón que dice Create repository para que nos redirija al repositorio.

Para crear un GitHub Codespace le daremos click al botón que dice Code, después a la pestaña que dice Codespaces, para finalizar le daremos click al botón que dice Create codespace on main.

Eso nos abrirá una nueva pestaña en el navegador con nuestro GitHub Codespace, como en esta imagen.

Eso es todo por este post, en el siguiente empezaremos a escribir código. Tenía pensado en este post agregar como configurar más a detalle los GitHub Codespaces, pero sería demasiado largo, así que dejaré eso para un post fuera de esta serie.

Espero que te haya gustado y espero verte en el siguiente post, saludos!!