para buscar repositorios de GitHub relacionados con "Termux", y está pensado para ser una guía educativa para que los usuarios puedan crear su propia app. Vamos a desglosarlo por secciones para entender su funcionalidad y cómo podrías replicarla o modificarla.
- Estructura General
import flet as ft
import httpx
from datetime import datetimeflet: librería para crear interfaces gráficas responsivas con Python.
httpx: cliente HTTP para hacer peticiones a la API de GitHub.
datetime: para convertir y formatear fechas.
- Clase GitHubRepo
class GitHubRepo:
def __init__(self, repo_data):
Esta clase convierte los datos crudos del JSON de GitHub en un objeto organizado. Esto ayuda a manejar la información más fácilmente cuando se crea la UI.
- Configuración de la página
page.title = "Termux GitHub Hunter"
page.theme_mode = ft.ThemeMode.DARK
Establece título, modo oscuro, color de fondo, scroll automático, y padding.
Esta sección define la base visual de la app.
- AppBar personalizada con botones sociales
def setup_appbar():
Usa ft.AppBar para mostrar el nombre de la app y botones que abren redes sociales en el navegador.
Los íconos se cargan desde imágenes locales (assets_dir="assets").
- Contenedor de resultados con diseño responsive
repos_container = ft.ResponsiveRow(...)
Usa ResponsiveRow, que adapta el número de columnas en función del tamaño de pantalla.
Cada tarjeta de repositorio se adapta usando col={"xs": 12, "md": 6, "lg": 4}.
- Formato de fecha y tamaño
def format_date(date_str):
def format_size(size_kb):
Convierte datos como "2023-11-24T23:00:00Z" a "24/11/2023".
Convierte KB a MB si es mayor de 1024.
- Tarjeta interactiva de repositorio
def create_repo_card(repo: GitHubRepo): ...
Cada tarjeta tiene vista resumida y vista detallada.
Usa AnimatedSwitcher para cambiar entre ambas con animación SCALE.
- Buscar repositorios en GitHub
def search_repos(term="termux", append=False):
Hace una petición a https://api.github.com/search/repositories.
Usa paginación (page=1, 2...) para cargar más resultados.
Controla si borra los resultados previos (append=False) o agrega más (append=True).
- Buscador
search_field = ft.TextField(...)
search_btn = ft.ElevatedButton(...)
Input para que el usuario escriba su búsqueda.
El botón lanza search_repos() con el término ingresado.
- Diseño responsive
ft.ResponsiveRow([search_field, search_btn], spacing=10)
Hace que los elementos se acomoden según el ancho de pantalla.
Gracias a las propiedades col={"xs": 12, "md": 9}, funciona perfecto en móviles y escritorio.
- Ejecución
ft.app(target=main, assets_dir="assets")
Lanza la app y carga las imágenes sociales desde la carpeta assets.
¿Cómo puedes crear la tuya?
Paso a paso:
-
Piensa en una fuente de datos pública: usa una API como GitHub, YouTube, Reddit, etc.
-
Crea una clase que modele esos datos (GitHubRepo).
-
Diseña la interfaz con Flet:
Usa TextField, ElevatedButton, Container, ResponsiveRow.
Añade animaciones (AnimatedSwitcher) para interactividad.
- Haz tu diseño responsive:
Usa col={"xs": 12, "md": 6, "lg": 4} en contenedores.
- Agrega eventos con
on_click,on_submit, y actualiza conpage.update().