Hola!
Soy Santiago y tengo un nick de mierda porque la cuenta me la hice hace 8 años, (era un niño de 13)
Soy programador javascript, tanto servidor como cliente y base de datos (se dice nos llama "programador fullstacker" ) ,
Aunque se nota que el lado cliente no es mi fuerte por ahora, pero me defiendo
Empiezo con off-topic porque el post no va a ser un tutorial paso a paso detalladao, sino mas bien la historia con partes tecnicas de como hice la extension.
Todo empezo la madrugada del sabado 20/2/14, 2 dias antes ya habia hecho una extension pero igual estaba aburrido
(no encontre el shout original, creo que lo borree)
cuando de repente, en el MI @-Dystopia- shuteo
Me emocione, pense que era verdad, y como un pelotudo entre a preguntar...
No iba a dejar que la desilucion me gane de mano y empece a pensar como hacer realidad el sueño de estos otakus...
Lo primero que se me vino a la mente, es que, si taringa no tiene la infraestructura para guardar likes negativos porque para ellos NO EXISTEN, entonces de alguna manera lo debia solucinar.
Hare mi propia taringa, con votos negativos y gif porno.
No viejo, eso nunca funciono, seria un fracaso o me quedaria en la sombra de la envidia como voxed e identi
Entonces, hago un servidor que guarde la cantidad de votos negativos que tiene un shout, y luego para mostrarlos, hago una extension!
Eran como las 5 de la mañana, pero no me importaba nada, estaba REE duro y emocionado.
Empece a bocetear la estructura de datos
Manos a la obra! Hagamos la aplicacion servidor!
Primero, un poco de teoria asi nomas de como funciona el mundo web.
1-*Una navegador/cliente hace una consulta a un servidor
2-*El servidor procesa la consulta
3-*El servidor envia la respuesta
4-*El navegador/cliente procesa esa informacion y muestra al usuario final la vista adecuada
Cuando navegas en taringa, ejemplo en /mi, lo que haces es decirle al servidor de taringa que ejecute el codigo que corresponde a esa seccion, como buscar en su base de datos los shouts de las personas a quien seguis.
Perfecto, ahora mostrame el codigo
Como dije, javascript del lado del servidor, nada de PHP ni C# o Java o cosas raras como python.
Construido sobre Express.js por simplicidad.
LA GUIA
Los "endpoints" osea a donde el cliente (LA EXTENSION) va a hacer la consulta.
-te muestra un mensaje por diversion
-Deberia devolverte los votos de un shout, pasandole su ID
-Te permite votar un shout, requiere mas cosas que solamente el ID
Necesitas una base de datos donde persistir la informacion, en este caso usamos MONGO, nada de cosas inmundamente relacionales como MySQL o SQL asco.
Use otra libreria, llamada mongojs para hacer las consultas necesarias
Empezamos a escribir las funciones copadas.
Usamos el ID que viene como parametro (LINEA 19)
Buscamos en la coleccion Shouts el que tenga el ID (LINEA 21)
Por ultimo devolvemos el resultado al cliente (LINEA 22)
Con esta funcion, recibimos los datos desde el cliente y lo ingresamos a mongo
Vemos que usa mas datos que solo el id del shout, esto es para en un futuro, poder mostrar en el cliente, quien voto y a que hora, junto con su avatar, tal como lo hace taringa.
Eso es todo? Listo?
No flaco, sos loquito vos?!!
Edge cases (o situaciones de mierda que te pueden pasar)
¿Que pasa si algunos datos falta, como el nick, o el id del shout?
Se agregarian a la base de datos y la corromperian
Debemos prevenir eso, chequeando que la consulta venga con esos datos
Agregamos Lodash y Request
Lodash trae funciones para ahorrar tiempo, ejemplo saber si un numero esta dentro de una lista de numeros
Request hace consultas HTTP util para llamar a taringa
¿Que pasa si alguien nos hace una consulta con un nick que no existe? ¿Como evitar que vote gente que no voto realmente?
Para evitar ese fraude propio de un Peroncho Kukaracha, debemos preguntarle a taringa si el usuario existe
Vemos como mi servidor le pregunta al servidor de taringa (LINEA 50)
Luego, si no existe ese usuario, los mandamos a la puta que los pario (LINEA 54)
Cada vez que hacemos una consulta, se esta creando un nuevo objeto de voto para el shout.
Y nosotros solo queremos aumentar el contador que ya tiene.
Entonces, debemos fijarnos si ya existe un voto para un shout, en tal caso incrementar el contador en 1.
En caso contrario, crear el documento
Ademas, otra posible escenario, es que el usuario ya halla votado el shout
Usando Lodash vemos si el usuario que esta queriendo votar el shout, ya esta entre la lista de votantes (LINEA 65)
Y LISTO! YA ESTA TODO FUNCIONANDO!
Ahora a subir a un hosting node, como Heroku, pero eso escapa del objetivo del post, googlealo lince.
Repostorio con el codigo fuente entero
https://github.com/santiq/taringa-extend
Este trabajo lo hice en 2-3 horitas bien testeado
Y ahora vienen los 2-3 dias mas rompe pijas de mi vida, el lado cliente y la puta que te pario jQuery...
Pero eso lo dejo para la parte 2
Seguime! y descubir conmigo como se crea una extension para chrome y como podes moficar Taringa!
No te la pierdas!
Soy Santiago y tengo un nick de mierda porque la cuenta me la hice hace 8 años, (era un niño de 13)
Soy programador javascript, tanto servidor como cliente y base de datos (se dice nos llama "programador fullstacker" ) ,
Aunque se nota que el lado cliente no es mi fuerte por ahora, pero me defiendo
Empiezo con off-topic porque el post no va a ser un tutorial paso a paso detalladao, sino mas bien la historia con partes tecnicas de como hice la extension.
Todo empezo la madrugada del sabado 20/2/14, 2 dias antes ya habia hecho una extension pero igual estaba aburrido
GIF
(no encontre el shout original, creo que lo borree)
cuando de repente, en el MI @-Dystopia- shuteo
Me emocione, pense que era verdad, y como un pelotudo entre a preguntar...
No iba a dejar que la desilucion me gane de mano y empece a pensar como hacer realidad el sueño de estos otakus...
Lo primero que se me vino a la mente, es que, si taringa no tiene la infraestructura para guardar likes negativos porque para ellos NO EXISTEN, entonces de alguna manera lo debia solucinar.
Hare mi propia taringa, con votos negativos y gif porno.
No viejo, eso nunca funciono, seria un fracaso o me quedaria en la sombra de la envidia como voxed e identi
Entonces, hago un servidor que guarde la cantidad de votos negativos que tiene un shout, y luego para mostrarlos, hago una extension!
Eran como las 5 de la mañana, pero no me importaba nada, estaba REE duro y emocionado.
Empece a bocetear la estructura de datos
Manos a la obra! Hagamos la aplicacion servidor!
Primero, un poco de teoria asi nomas de como funciona el mundo web.
1-*Una navegador/cliente hace una consulta a un servidor
2-*El servidor procesa la consulta
3-*El servidor envia la respuesta
4-*El navegador/cliente procesa esa informacion y muestra al usuario final la vista adecuada
Cuando navegas en taringa, ejemplo en /mi, lo que haces es decirle al servidor de taringa que ejecute el codigo que corresponde a esa seccion, como buscar en su base de datos los shouts de las personas a quien seguis.
Perfecto, ahora mostrame el codigo
Como dije, javascript del lado del servidor, nada de PHP ni C# o Java o cosas raras como python.
Construido sobre Express.js por simplicidad.
LA GUIA
Primer Paso
Los "endpoints" osea a donde el cliente (LA EXTENSION) va a hacer la consulta.
/
-te muestra un mensaje por diversion
/get-votes
-Deberia devolverte los votos de un shout, pasandole su ID
/vote
-Te permite votar un shout, requiere mas cosas que solamente el ID
Segundo Paso
Necesitas una base de datos donde persistir la informacion, en este caso usamos MONGO, nada de cosas inmundamente relacionales como MySQL o SQL asco.
Use otra libreria, llamada mongojs para hacer las consultas necesarias
Tercer Paso
Empezamos a escribir las funciones copadas.
Usamos el ID que viene como parametro (LINEA 19)
Buscamos en la coleccion Shouts el que tenga el ID (LINEA 21)
Por ultimo devolvemos el resultado al cliente (LINEA 22)
CuartoPaso
Con esta funcion, recibimos los datos desde el cliente y lo ingresamos a mongo
Vemos que usa mas datos que solo el id del shout, esto es para en un futuro, poder mostrar en el cliente, quien voto y a que hora, junto con su avatar, tal como lo hace taringa.
Eso es todo? Listo?
No flaco, sos loquito vos?!!
Edge cases (o situaciones de mierda que te pueden pasar)
Quinto Paso
¿Que pasa si algunos datos falta, como el nick, o el id del shout?
Se agregarian a la base de datos y la corromperian
Debemos prevenir eso, chequeando que la consulta venga con esos datos
Sexto Paso
Agregamos Lodash y Request
Lodash trae funciones para ahorrar tiempo, ejemplo saber si un numero esta dentro de una lista de numeros
Request hace consultas HTTP util para llamar a taringa
Septimo Paso
¿Que pasa si alguien nos hace una consulta con un nick que no existe? ¿Como evitar que vote gente que no voto realmente?
Para evitar ese fraude propio de un Peroncho Kukaracha, debemos preguntarle a taringa si el usuario existe
Vemos como mi servidor le pregunta al servidor de taringa (LINEA 50)
Luego, si no existe ese usuario, los mandamos a la puta que los pario (LINEA 54)
Octavo Paso
Cada vez que hacemos una consulta, se esta creando un nuevo objeto de voto para el shout.
Y nosotros solo queremos aumentar el contador que ya tiene.
Entonces, debemos fijarnos si ya existe un voto para un shout, en tal caso incrementar el contador en 1.
En caso contrario, crear el documento
Noveno Paso
Ademas, otra posible escenario, es que el usuario ya halla votado el shout
Usando Lodash vemos si el usuario que esta queriendo votar el shout, ya esta entre la lista de votantes (LINEA 65)
Y LISTO! YA ESTA TODO FUNCIONANDO!
Ahora a subir a un hosting node, como Heroku, pero eso escapa del objetivo del post, googlealo lince.
Repostorio con el codigo fuente entero
https://github.com/santiq/taringa-extend
Este trabajo lo hice en 2-3 horitas bien testeado
Y ahora vienen los 2-3 dias mas rompe pijas de mi vida, el lado cliente y la puta que te pario jQuery...
Pero eso lo dejo para la parte 2
Seguime! y descubir conmigo como se crea una extension para chrome y como podes moficar Taringa!
No te la pierdas!