Introducción
¡Hola a todos los amantes de la tecnología! En este artículo quiero presentarles un proyecto impresionante que demuestra cómo la inteligencia artificial y la programación pueden trabajar juntos para crear soluciones útiles y fascinantes. Se trata de un Buscador de usuarios de GitHub con API de Github, desarrollado con HTML, CSS y Javascript. Con este proyecto, podrás buscar fácilmente a cualquier usuario de GitHub que esté registrado en la plataforma, lo que lo hace especialmente útil para aquellos que trabajan en proyectos de código abierto o que simplemente buscan conectarse con otros programadores. Además, este proyecto es un excelente ejemplo de cómo la tecnología de Inteligencia Articial, puede ayudarnos en nuestras tareas cotidianas. Si quieren que les muestre este PROMPT, Con sus detalles y cómo podemos, con conocimientos fundamentales en programación, hacer aplicaciones útiles por medio de un Prompt. !Pues suscríbete! a nuestro blog y canal de YouTube y déjanos un comentario. «Quiero el Prompt Juancito!». ¡Te prometo que te lo comparto, no te arrepentirás!
Descripcion del Proyecto
Este proyecto tiene como finalidad crear una página web que permita a los usuarios registrarse, ver perfiles de otros usuarios y crear publicaciones. La idea detrás de esto es que las personas puedan conectar con otros miembros de su comunidad y compartir información útil y noticias relevantes.
La página web ha sido diseñada utilizando HTML, Bootstrap y CSS para crear una interfaz moderna y atractiva para los usuarios. Se ha utilizado JavaScript para la interacción y funcionalidad de la página web, como el registro de usuarios, la visualización de perfiles y la creación de publicaciones.
El archivo index.html es la página principal que contiene el formulario de registro y las publicaciones de los usuarios. Se ha utilizado Bootstrap para crear un diseño de respuesta para diferentes tamaños de pantalla y mejorar la experiencia del usuario.
El archivo style.CSS contiene los estilos personalizados para la página, incluyendo la fuente, los colores y la disposición de los elementos en la página. También se ha utilizado para aplicar animaciones y efectos visuales en la página.
El archivo JavaScript.js se ha utilizado para agregar funcionalidad a la página web. Esto incluye la validación del formulario de registro, la creación de perfiles de usuario, la creación de publicaciones y la visualización de perfiles de usuario utilizando la API de GitHub.
Para compartir este proyecto en línea, se ha utilizado GitHub Pages. Esto permite alojar la página web de forma gratuita en un servidor de GitHub, lo que significa que cualquier persona con acceso a Internet puede acceder a la página.
Buscador de usuarios de GitHub CON API de Github, HTML, CSS y Javascript
El Buscador de usuarios de GitHub permite buscar usuarios y ver su información pública, como el nombre de usuario, la ubicación, la biografía, la imagen de perfil, Con un Link a su Perfil de GitHub, fue relizada usando la API de GitHub https://api.github.com/search/users?q=${username}, con HTML, CSS Y Javascript, y algunos parametros para visualizar la informacion. Url del Proyecto: https://juancitopena.github.io/Buscador_de_usuarios_de_GitHub/
Nota:
El límite de solicitudes a la API de GitHub varía según el tipo de autenticación utilizado y si la solicitud es autenticada o no.
Para solicitudes autenticadas, el límite es más alto, y depende del nivel de tu cuenta de GitHub. Por ejemplo, para los usuarios de nivel gratuito, el límite es de 60 solicitudes por hora para solicitudes sin autenticar y 5,000 solicitudes por hora para solicitudes autenticadas.
Para solicitudes no autenticadas, el límite es de 10 solicitudes por minuto por dirección IP.
Es importante tener en cuenta que estos límites pueden cambiar y que GitHub se reserva el derecho de cambiar los límites de la API en cualquier momento. Por lo tanto, es recomendable leer la documentación oficial de la API de GitHub para obtener la información más actualizada.
El archivo HTML contiene la estructura básica de una página web
<!DOCTYPE html> <!-- declaración del tipo de documento HTML -->
<html lang="en"> <!-- inicio del elemento HTML raíz, especificando el idioma predeterminado en inglés -->
<head> <!-- inicio de la sección head de la página -->
<link rel="shortcut icon" href="buscar.png" type="image/x-icon"> <!-- definición del icono de la pestaña -->
<meta charset="UTF-8"> <!-- especificación de la codificación de caracteres UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- indicación de que el navegador debe usar la última versión disponible de Internet Explorer -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- definición de la escala inicial para dispositivos móviles -->
<title>Buscador de usuarios de GitHub</title> <!-- definición del título de la página -->
<link rel="stylesheet" href="style.css"> <!-- inclusión del archivo de hojas de estilo -->
</head> <!-- fin de la sección head de la página -->
<body> <!-- inicio de la sección body de la página -->
<div class="card"> <!-- inicio de un contenedor para la página -->
<h2>Buscador de usuarios de GitHub</h2> <!-- título principal de la página -->
<label for="input-username">Introduce el nombre de usuario:</label> <!-- etiqueta de entrada de usuario -->
<input type="text" id="input-username"> <!-- campo de entrada de texto para el usuario -->
<br> <!-- salto de línea -->
<button id="btn-buscar">Buscar</button> <!-- botón para buscar un usuario de GitHub -->
<br> <!-- salto de línea -->
<ul id="user-list"></ul> <!-- lista para mostrar los usuarios encontrados -->
</div> <!-- fin del contenedor para la página -->
<script src="index.js"></script> <!-- inclusión del archivo de JavaScript -->
</body> <!-- fin de la sección body de la página -->
</html> <!-- fin del elemento HTML raíz -->
Detalles:
Primero, se define el tipo de documento (<!DOCTYPE html>) y se establece el idioma en inglés (<html lang="en">).
Dentro de la sección head, se establecen una serie de metadatos importantes, como la codificación de caracteres (<meta charset="UTF-8">), la compatibilidad con Internet Explorer (<meta http-equiv="X-UA-Compatible" content="IE=edge">) y la escala de visualización en dispositivos móviles (<meta name="viewport" content="width=device-width, initial-scale=1.0">).
También se establece el título de la página (<title>) y se enlaza un archivo de hoja de estilos (<link rel="stylesheet" href="style.css">) que se utilizará para personalizar el diseño de la página.
En el cuerpo (<body>) de la página, se encuentra un contenedor con una clase card que contiene el título del buscador y un campo de texto (<input type="text">) donde se puede ingresar el nombre de usuario a buscar en la API de GitHub. También hay un botón de búsqueda (<button>) y una lista (<ul>) donde se mostrarán los resultados de la búsqueda.
Al final del cuerpo (</body>), se enlaza un archivo JavaScript (<script src="index.js"></script>) que contiene el código para hacer la búsqueda en la API de GitHub y mostrar los resultados en la lista de usuarios.
El archivo CSS define los estilos para una página web
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
padding: 16px;
margin: 0 auto;
max-width: 70%;
background-color: #fdfcfc;
color: #120756;
}
.card h2 {
margin-top: 0;
text-align: center;
font-weight: bold;
font-size: 35px;
}
.card label {
display: block;
margin-bottom: 8px;
font-size: 30px;
color: #007bff;
text-align: center;
font-weight: bold;
}
.card input[type="text"],
.card button {
display: block;
margin-bottom: 16px;
padding: 8px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
width: 50%;
margin: 0 auto;
box-sizing: border-box;
}
.card button {
background-color: #007bff;
color: white;
border: none;
padding-top: 25px;
padding-bottom: 25px;
}
.card button:hover {
background-color: #0069d9;
cursor: pointer;
}
.card ul {
list-style: none;
padding: 0;
margin: 0;
}
.card .user-item {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 8px;
}
.card .user-item img {
width: 250px;
height: 250px;
border-radius: 50%;
margin-bottom: 10px;
}
.card .user-item a {
font-size: 25px;
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.bio {
text-align: center;
padding: 25px;
}
.card .user-item a:hover {
text-decoration: underline;
}
li {
font-size: 35px;
}
li a {
font-size: 35px;
color: #120756;
}
.user-item {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
font-size: 25px;
}
.user-item img {
width: 250px;
height: 250px;
border-radius: 50%;
margin-bottom: 20px;
}
.user-item a {
font-size: 25px;
font-weight: bold;
}
li img{
width: 250px;
height: 250px;
border-radius: 50%;
margin-bottom: 20px;
font-weight: 700px;
}
@media only screen and (max-width: 600px) {
/* Estilos CSS a aplicar en pantallas con ancho menor a 600px */
.card {
width: 90%;
max-width: 450px; /*opcional: fijar un tamaño máximo*/
height: 100%;
margin: 0 auto; /*centrar horizontalmente*/
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
padding: 5px;
background-color: #fdfcfc;
color: #120756;
}
.bio {
text-align: center;
padding: 25px;
}
}
El archivo CSS, define los estilos para una página web que contiene un formulario para buscar usuarios de GitHub y mostrar los resultados en una lista.
Los estilos se aplican a los elementos HTML con clases específicas. Por ejemplo, la clase «.card» se aplica a un contenedor que envuelve todo el formulario y los resultados de búsqueda. La clase «.card h2» se aplica al título principal de la página.
El archivo CSS también contiene algunas reglas de estilo responsivo que se aplican a pantallas con un ancho menor a 600px. En este caso, se ajustan algunos estilos para que el formulario y los resultados sean más legibles en pantallas pequeñas.
Archivo JavaScript que define el código para llamar la API
let inputUsername = document.getElementById("input-username");
let btnBuscar = document.getElementById("btn-buscar");
let userList = document.getElementById("user-list");
btnBuscar.addEventListener("click", function(){
let username = inputUsername.value;
if (username) {
let url = `https://api.github.com/search/users?q=${username}`;
fetch(url)
.then(response => response.json())
.then(data => {
userList.innerHTML = "";
data.items.forEach(item => {
let userUrl = item.url;
fetch(userUrl)
.then(response => response.json())
.then(userData => {
let li = document.createElement("li");
li.className = "user-item";
let a = document.createElement("a");
a.href = item.html_url;
a.target = "_blank";
a.textContent = item.login;
let img = document.createElement("img");
img.src = item.avatar_url;
img.alt = `${item.login} avatar`;
let repos = document.createElement("p");
repos.className = "repos";
repos.textContent = `Public repositories: ${userData.public_repos}`;
let bio = document.createElement("p");
bio.textContent = userData.bio;
bio.className = "bio"; // Agrega una clase
bio.textContent = userData.bio;
let location = document.createElement("p");
location.textContent = `Location: ${userData.location}`;
li.appendChild(img);
li.appendChild(a);
li.appendChild(bio);
li.appendChild(location);
li.appendChild(repos);
userList.appendChild(li);
})
.catch(error => {
console.error(error);
});
});
})
.catch(error => {
console.error(error);
});
} else {
alert("Introduce un nombre de usuario válido");
}
});
Archivo con el código en JavaScript que se encarga de hacer una búsqueda en la API de GitHub para encontrar usuarios basados en un nombre de usuario introducido por el usuario en una página web.
Primero, el código define tres variables utilizando la función document.getElementById(), las cuales hacen referencia a elementos HTML de la página: inputUsername hace referencia a un campo de texto donde se ingresa el nombre de usuario, btnBuscar hace referencia a un botón de búsqueda y userList hace referencia a una lista de usuarios que se mostrará en la página.
Luego, el código agrega un event listener al botón de búsqueda (btnBuscar) que se activa cuando el usuario hace clic en el botón. Cuando esto sucede, el código obtiene el valor del campo de texto inputUsername y comprueba si hay algún nombre de usuario ingresado.
Si se ha ingresado un nombre de usuario, se construye una URL para hacer una petición a la API de GitHub utilizando el valor del campo de texto (username) en la búsqueda. La función fetch() se utiliza para hacer la petición a la API de GitHub y la respuesta se convierte en formato JSON.
El resultado de la petición se procesa mediante una función forEach() que itera sobre cada elemento encontrado y hace otra petición para obtener más información sobre cada usuario encontrado. Esta petición secundaria se realiza utilizando la URL del usuario encontrado y se convierte en formato JSON.
Para cada usuario encontrado y su información adicional obtenida, se crea un elemento de lista (li) y se le agrega una serie de elementos HTML, como un enlace (a) al perfil del usuario, una imagen (img) de su avatar, un párrafo (p) que muestra la descripción del usuario (bio) y otro párrafo que muestra la ubicación del usuario.
Finalmente, se agrega cada elemento de la lista (li) a la lista de usuarios (userList) que se mostrará en la página. Si no se ha ingresado ningún nombre de usuario, se muestra una alerta indicando que se debe ingresar un nombre de usuario válido.
Conclusión
El proyecto del Buscador de usuarios de GitHub con API de GitHub, HTML, CSS y Javascript, es solo un ejemplo de cómo la Inteligencia Artificial puede ser utilizada para resolver problemas cotidianos y mejorar la eficiencia de diversas tareas. La capacidad de la IA para procesar grandes cantidades de datos y reconocer patrones complejos abre una amplia variedad de posibilidades para su uso en diferentes campos.
Sin embargo, a medida que la IA sigue evolucionando, es importante tener en cuenta su impacto en la sociedad y en el mundo laboral. Al igual que con cualquier otra tecnología, la IA tiene tanto beneficios como riesgos potenciales. Es importante tener en cuenta estos factores y garantizar que la tecnología se utilice de manera ética y responsable.
Mi consejo: es importante explorar y aprender más sobre la IA y sus aplicaciones en diferentes campos. Ya sea en la industria, el sector público o la investigación, la IA está revolucionando la forma en que hacemos las cosas. Al mantenernos informados y actualizados sobre las últimas tendencias y avances en el campo de la IA, podemos estar mejor preparados para utilizar esta tecnología para resolver problemas y mejorar nuestras vidas.
