Giro de la Suerte: Programación Divina - Capítulo 7

7: Capítulo 7: Ganar mucho dinero 7: Capítulo 7: Ganar mucho dinero Jeff descargó el archivo Zip, extrajo su contenido y luego abrió la carpeta del proyecto.

Dentro había archivos típicos de desarrollo web.

Como index.html, style.css, script.js y un README.txt, junto con una captura de pantalla que mostraba un error en la consola del navegador.

Luego abrió Visual Studio Code, navegó al directorio del proyecto y comenzó la configuración.

…

Bash
npm install
npm start
…

La aplicación se cargó en el navegador.

Era un sencillo formulario de contacto con campos para Nombre, Correo electrónico y Mensaje.

El diseño era limpio, pero había algunos errores notables.

Jeff rellenó un mensaje de prueba e hizo clic en Enviar.

¡Clic!

La página se actualizó después de esperar un rato la confirmación.

No se envió ningún mensaje al servidor.

Abrió la consola de DevTools del navegador y, efectivamente, un error saltó a la vista, haciendo que él también frunciera el ceño.

[Uncaught TypeError: Cannot read properties of undefined (reading ‘value’)]
Jeff entrecerró los ojos hacia la pantalla, fijándolos en la línea 27 de script.js.

El código intentaba acceder a los elementos del formulario antes de que el DOM se hubiera cargado por completo.

Hizo clic para pasar al archivo de JavaScript y confirmarlo.

Efectivamente, el event listener se había declarado fuera del bloque DOMContentLoaded, lo que significaba que el script intentaba interactuar con elementos que aún no estaban disponibles.

—La trampa del principiante —masculló para sí.

Con su habilidad de programación de nivel divino, literalmente no era un principiante en ese momento.

Era una solución fácil para alguien como él, un dios de la programación.

Sin perder tiempo, se puso manos a la obra.

Envolvió el código existente dentro de un bloque document.addEventListener(‘DOMContentLoaded’, …) para asegurarse de que el script solo se ejecutara después de que toda la página hubiera terminado de cargarse.

A continuación, se percató de otro error común.

Al formulario le faltaba event.preventDefault(), lo que significaba que el navegador actualizaba la página antes de que cualquier JavaScript pudiera ejecutarse correctamente.

«Por esto no se envía tu mensaje, amigo», reflexionó para sus adentros, reescribiendo ya la función con una expresión tranquila.

Luego añadió la siguiente línea.

…

JavaScript
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
// …resto del código
});
…

(Nota del autor: JavaScript es un lenguaje de programación o de «scripting» que te permite crear contenido que se actualiza dinámicamente, controlar multimedia, animar imágenes y mucho más en las páginas web.

Es una de las tecnologías principales de la web, junto con HTML y CSS)
Por último, la función fetch() estaba presente, pero carecía de las cabeceras adecuadas y no incluía JSON.stringify().

Esto significaba que, aunque la petición llegara al servidor, probablemente causaría un error o sería rechazada por completo.

Así que reescribió la lógica de envío correctamente.

Añadió las cabeceras necesarias para especificar el tipo de contenido como JSON y envolvió los datos del formulario en JSON.stringify() para asegurarse de que estuvieran formateados correctamente antes de ser enviados al servidor.

Con unas pocas y precisas pulsaciones de teclas, la lógica rota fue reemplazada por un código limpio y funcional.

…

JavaScript
fetch(‘/contact’, {
method: ‘POST’,
headers: {…resto del código
…

«No había validación, ni manejo de errores.

Este tipo debe de ser nuevo en la programación», pensó Jeff mientras guardaba el archivo.

Probó el formulario de nuevo: lo rellenó e hizo clic en enviar.

Esta vez, la página no se recargó.

Apareció la alerta.

«¡Mensaje enviado!»
Revisó el registro de la terminal y vio que los datos aparecían perfectamente formateados, tal como esperaba.

Como le sobraba algo de tiempo, decidió hacer un esfuerzo extra.

Refactorizó el código, corrigió las incoherencias y se aseguró de que cada línea fuera limpia, legible y precisa.

Cuando terminó, el código se veía tan pulido que hasta los desarrolladores sénior se sorprenderían de su claridad y estructura.

Después de todo, la legibilidad es la reina.

El código no se escribe solo para las máquinas, también se escribe para otros humanos.

Si un desarrollador sénior abre tu archivo y puede entender al instante el flujo, la lógica y el propósito, deja una impresión duradera.

En el mundo de los desarrolladores, escribir código limpio, legible y bien estructurado es algo muy importante.

De hecho, a menudo es más impresionante que escribir un código demasiado complicado e ingenioso que nadie más puede entender.

Pero Jeff no sabe esto; la razón por la que lo hace es porque le da comezón si no lo arregla.

Razon: Hola, he corregido todos los problemas.

Envolví tu script en un evento DOMContentLoaded, añadí preventDefault() y reescribí tu llamada fetch con las cabeceras adecuadas y el formato JSON.

También añadí comentarios para explicar los cambios y que puedas aprender de ellos.

¡Avísame si quieres ayuda para mejorar el diseño o añadir validación al formulario!

Jeff se recostó entonces en la cama; solo le había llevado unos 5 minutos.

Las líneas de código eran más de cien, pero lo hizo en un minuto.

Ya había superado la capacidad de la inteligencia artificial en su propio mundo.

El cliente, tras terminar de hervir agua y prepararse una taza de café, volvió a su escritorio.

Cuando se sentó, se dio cuenta de que tenía un mensaje sin leer que había llegado unos cinco minutos antes.

Dejando la taza sobre la mesa, lo abrió.

Lo que vio lo dejó atónito.

Mientras se desplazaba hacia arriba y releía la conversación, se dio cuenta de que solo habían pasado cinco minutos desde que le asignó la tarea, y ya estaba terminada.

—¡¿Este tipo es retrasado mental?!

Si intentas estafarme, has fallado.

Al menos debería hacerlo más creíble —masculló, preguntándose si a ese tipo le faltaba un tornillo.

Pero aun así, para comprobarlo, ya que había un archivo zip adjunto, lo descargó y lo ejecutó en su propio PC.

Ver el programa lo dejó helado y atónito; se veía tan diferente al suyo.

Como si ya nada fuera igual.

Dudoso, ejecutó el código para comprobarlo por sí mismo.

A primera vista, la apariencia del formulario seguía siendo la misma, pero cuando escribió un mensaje e hizo clic en enviar, funcionó a la perfección.

—Eh, de verdad funciona.

Hasta añadió comentarios para ayudarme a entender —dijo sorprendido.

Mientras seguía leyendo el código, se sorprendió aún más de por qué todo estaba tan ordenado.

—Joder, ¿este tipo es un maestro?

Entonces estoy de suerte.

Después de todo, no voy a suspender el primer semestre —añadió, eufórico.

Cliente: Gracias, acabo de comprobarlo y es realmente bueno, ¿dónde te envío el pago?

Viendo que todo funcionaba a la perfección, Jeff le envió rápidamente su cuenta de PayPal.

El cliente, ya convencido, respondió enviando el pago.

Momentos después, una notificación apareció en la pantalla de Jeff.

La revisó de inmediato.

[Has recibido 15,00 USD de [email protected].]
Razon: Un placer hacer negocios contigo.

Cliente: Igualmente.

Con eso, Jeff se puso a buscar más trabajo en el sitio web.

Después de navegar un poco, encontró otro.

Trabajo: Crear un sistema de inicio de sesión básico (Front + Back)
Pago: $20
Herramientas: HTML/CSS + Python Flask o PHP
Tarea: «Crear una página de inicio de sesión/registro con un sistema de contraseñas que funcione».

Luego le envió un mensaje a otro cliente, con la esperanza de conseguir más trabajo.

Sin embargo, este cliente le pidió un portafolio.

Jeff intentó el mismo enfoque que antes, ofreciéndose a trabajar primero y cobrar solo si tenía éxito, pero esta vez no funcionó.

No fue hasta que mostró el trabajo terminado de su primer cliente que el nuevo cliente finalmente accedió a darle una oportunidad.

Cliente: ¡Hola!

Necesito una página básica de inicio de sesión/registro para mi aplicación.

No necesita ser lujosa, solo un sistema funcional de nombre de usuario y contraseña, eso es todo.

¿Puedes terminarla en unas pocas horas?

Razon: Por supuesto.

Para el cliente, unas pocas horas era más que suficiente.

¿Para él?

Podía terminar algo así en solo unos minutos, así que se puso a trabajar de inmediato.

Abrió Visual Studio Code, creó una carpeta llamada simple_auth y comenzó a construir el proyecto.

Esta carpeta contendría todos los archivos necesarios, incluidas las páginas web para la interfaz de usuario, el estilo para que se viera limpia y la lógica del backend escrita en Python.

Luego, abrió su terminal y comenzó a ejecutar los comandos de configuración inicial.

…

Bash
pip install flask
…

Flask es un «framework» web de Python.

Le permite a Jeff crear páginas web y controlar lo que sucede entre bastidores cuando alguien hace clic en un botón o envía un formulario.

A continuación, pasó al frontend.

Comenzó creando dos archivos HTML.

Uno para la página de inicio de sesión y otro para la página de registro.

…

HTML
<!– login.html –>
<form action=”/login” method=”POST”>
…resto del código
…

Este formulario que creó envía el nombre de usuario y la contraseña al servidor cuando el usuario hace clic en «Iniciar sesión».

Duplicó el archivo e hizo algunos ajustes para crear la página de registro.

Después de eso, Jeff creó un archivo de Python llamado app.py y comenzó a trabajar en el backend.

Primero, importó las herramientas necesarias para poner todo en marcha.

…

Python
from flask import Flask, render_template, request, redirect
from werkzeug.security import generate_password_hash, check_password_hash
import json
import os
…

Flask maneja el enrutamiento y el procesamiento de formularios, lo que facilita la vinculación de páginas y la gestión de las interacciones del usuario.

Werkzeug.security se utiliza para el «hashing» de contraseñas, convirtiendo las contraseñas de texto plano en cadenas cifradas para mantenerlas seguras.

Los datos de los usuarios se almacenan en un pequeño archivo JSON, que sirve como una alternativa ligera al uso de una base de datos completa.

A continuación, Jeff creó un archivo específicamente para almacenar los datos de los usuarios.

Se aseguró de que existiera y estuviera listo para recibir y gestionar la información de los usuarios.

…

Python
USER_FILE = ‘users.json’
if not os.path.exists(USER_FILE):
…resto del código
…

De esta manera, si el archivo aún no existía, el programa lo crearía.

Se vería exactamente así.

…

JSON
{
“jeff123”: “pbkdf2:sha256:260000$asHedpAsSworD123…”
}
…

Cada nombre de usuario estaría vinculado a una contraseña hasheada dentro del archivo JSON.

Cuando un nuevo usuario visitara la página de registro y enviara su información, el sistema almacenaría sus credenciales de forma segura.

Jeff creó entonces una ruta para gestionar el registro.

Después de eso, construyó la funcionalidad de inicio de sesión, donde el sistema primero comprobaría si el usuario existía y luego verificaría si la contraseña coincidía con el hash almacenado.

Para probarlo todo, ejecutó el servidor de Flask con el comando python app.py y esperó a que se iniciara el servidor local.

Entonces se abrió una ventana del navegador local, mostrando la página de inicio de sesión.

Jeff creó una nueva cuenta y luego probó la función de inicio de sesión.

La contraseña se cifraba entre bastidores y todo funcionaba a la perfección.

Abrió el archivo users.json para revisar los datos almacenados.

—Se ve limpio.

El hash es fuerte.

Las páginas cargan rápido y no parece haber ningún problema —masculló para sí, satisfecho con el resultado.

Luego comprimió en un zip todo el proyecto, incluidos los archivos HTML, el código de Python y el archivo de datos JSON, y se lo envió al cliente.

Razon: Sistema de inicio de sesión completado.

Backend con Flask y contraseñas hasheadas.

Almacenado en JSON por simplicidad.

Avísame si quieres conectarlo a una base de datos real o añadir funciones como la recuperación de contraseña.

El cliente se sorprendió.

Solo habían pasado ocho minutos y el sistema funcionaba a la perfección.

Impresionado por la velocidad y la calidad, pagó inmediatamente al programador.

Estaba muy satisfecho con el resultado.

[Has recibido 20,00 USD de [email protected].]
Después de eso, Jeff continuó su búsqueda de nuevas tareas, revisando listados y programando sin parar.

Cada vez que terminaba un proyecto, repetía el mismo proceso, completando trabajos de forma rápida y eficiente.

Su perfil pronto mostró una calificación perfecta de cinco estrellas de múltiples clientes.

Con cada tarea completada, ganaba más, y en poco tiempo, sus ganancias habían alcanzado cientos de dólares.

Finalmente, después de tres horas seguidas, se detuvo.

Tenía las manos entumecidas y los dedos le temblaban por teclear constantemente.

Cogió su teléfono para comprobar su saldo.

Lo que vio hizo que sus ojos se abrieran como platos por la sorpresa.

Fuente: Webnovel.com, actualizado en Leernovelas.com