En automático

Programación => Web => Mensaje iniciado por: Th3r1p3r en Septiembre 12, 2017, 09:32:08 pm

Título: Empezando bot - Javascript y Tampermonkey [Parte 1]
Publicado por: Th3r1p3r en Septiembre 12, 2017, 09:32:08 pm
Hola, bueno... como tengo un proyecto abandonado y para darle algo de vida te voy a enseñar a realizar tu propio bot...
Bueno, en realidad te voy a enseñar la estructura básica en programación...
Porque de JavaScript 0 conocimiento, así que aprenderemos juntos, probablemente me veas con google abierto buscando el significado. (Si eres programador de JavaScript y ves que hago cosas engorrosas, puedes corregirme y mejorar la guía con nueva información  8))

Las herramientas para esta "guía" es:
Citar
- Navegador (Firefox, Chrome, Opera)
- Extensión Tampermonkey.
- Tiempo.

La metodología es sencilla, voy desarrollando mi propio "script" (se le dice así al texto que tiene que ser ejecutado por un intéprete) que es para un sitio web para adultos. (Evidentemente filtrando cualquier imágen indecente)

Mientras escribo utilizaré () para especificar más respecto al texto, pero si no lo leís no os perdereís (o al menos lo supongo ;D).

Esta primera parte es la aburrida, vamos a ver:
Citar
1.0 - Instalación de Tampermonkey.
1.1 - Creación de nuestro primer archivo en Tampermonkey.
1.2 - Desarrollo de idea y pensamiento estructurado. (optativo)
1.3 - Entendiendo diagrama de flujo y aplicaciones. (optativo)

Se que puede ser un rollo, así que lo voy a hacer lo más sencillo posible... Hay cosas que como futuros programadores (me incluyo en lo de "futuros" jajaja)

Bien, sin más preámbulos vamos a con:
1.0 - Instalación de Tampermonkey.
Ponemos en el buscador "Tampermonkey" y podremos ver diferentes páginas de descarga, en mi caso como uso firefox (https://addons.mozilla.org/es/firefox/addon/tampermonkey/).

(https://k61.kn3.net/B/F/D/A/3/4/5BD.jpg)

Bien, entonces entramos en la página y seguimos las instrucciones (las flechas tienen números para indicar los pasos):

(https://k60.kn3.net/6/5/6/9/1/8/284.jpg)

1.1 - Creación de nuestro primer archivo en Tampermonkey.

Una vez instalado podreís ver un muñequito arriba a la izquierda, al hacer click aparecerá un menú nuevo, ahí debes acceder a "agregar nuevo script..."
(https://k60.kn3.net/F/E/6/7/C/1/720.jpg)

Al hacerlo, se te abrirá una nueva página, habrá mucho código, en este caso sólo debeís prestar atención en:
Código: javascript
// @namespace
// @match
En mi caso, el namespace (del inglés, nombre del espacio) pondré como página, la de xvideos pero esto no quiere decir que se ejecute ahí, sino que es el lugar predeterminado.
Para que se ejecute en diferentes lugares el script, debeís colocarlo donde dice match siendo el * un caracter especial para decir cualquier que ahí puede ir cualquier palabra por ejemplo:
Citar
h*a => hola
ejemp*o => ejemplo

en mi caso debería usar:
Código: javascript
// @match        http*://*xvideos.com/*
(esto permite que coincida con https y www y cualquier cosa que le siga a la última /

Por último borra todo el contenido que te pueda aparecer y escribe en la última línea alert();. Las funciones se escriben dentro de parentecis() y siempre se termina en ; salvo que se ejecute código dentro en ese caso se usa {}.

Recordarle dar al disket, sino no guardará los cambios.  8)
(https://k60.kn3.net/D/6/E/8/F/E/8E3.jpg)
Código: js
alert(""Hola mund... ¿Dónde quedó mi creatividad? Ah sí, en la universidad."");
// Alert(); es una función que envía un mensaje en pantalla.
// "" => sirve para delimitar una string (del inglés cadena pero hace referencia a una cadena de caracteres o lo que es lo mismo texto)
// si cambias el texto dentro del alert(); dirá lo que tu quieras.

Si ingresaís a la página (que pongaís por defecto) terminaría apareciendo algo así:

(https://k61.kn3.net/C/E/C/7/1/9/9FE.jpg)

1.2 - Desarrollo de idea y pensamiento estructurado.
Bien, lo divertido se terminó, ahora viene lo aburrido... Já! es broma, trataré de introducir el pensamiento de un programador...
Pero imaginate que ahora eres un cocinero  :o (ya cambié de temática, me di por vencido :P)

Lo lógico es que queremos hacer un bizcochuelo porque tenemos hambre, entones primero buscamos los ingredientes (aceite, harina, huevos, etc...).
Luego de los ingredientes viene mezclar, metemos en el horno y una vez que esté dorado, pasamos a deborar nuestra creación...
(https://k61.kn3.net/3/0/0/6/F/6/E7E.jpg)

En programación es lo mismo, sólo que tenéis que escribirlo.  ??? Y os preguntareís por qué... Porque tienes que saber como vas a empezar y a donde quieres llegar, de no hacerlo... no vas a tener un objetivo claro... Así que lo primero no es pensar en los ingredientes, es en bizcochuelo! y luego piensas "¿Qué tengo que hacer para obtener el bizcochuelo?" y mágia, creamos una imágen mental de cómo se hace... Pero claro, si estáis programando bots no hay receta, así que teneís que pensar : => primero quiero hacer un bizcochuelo, luego tiene que estar horneado, para eso tengo que meter la masa en el horno, etc... (de atrás hacia adelante).
No, no me he fuma' nada  ;D, si lo haceís de forma contraria (pensamiento inductivo) estaís matando vuestra creatividad y es lo segundo más importante en programación (1º es codigo claro y comentado). Que no, que si quieres hacerlo al revés no hay problema, pero a veces ciertas funciones no sabes cual es el principio, así que te toca buscar el "cómo" lograr hacerlo.

1.3 - Entendiendo diagrama de flujo y aplicaciones.
El diagrama de flujo no es más que un dibujo de la dirección de vuestro algoritmo (código que tiene instrucciones precisas para ser ejecutadas). Digamos... sería como un camino
Y en el mismo se permite desviarse... Por ejemplo: ¿Qué pasaría si no tenemos los ingredientes? => Comemos unas galletitas ya compradas. ¿Y si no podemos batir? => Comemos unas galletitas. ¿Y si se nos quema el bizcochuelo? => ... sí las mald*** galletitas...

(https://k60.kn3.net/A/C/C/F/1/B/2AD.jpg)

Conclusión: En programación se escribe de arriba hacia abajo y de izquierda a derecha y existen "condicionales" ( "if()" del inglés si) que lo que hace es preguntarse [si hay ingredientes] => mezclar pero sino [no hay ingredientes] => comer galletita.

Nosostros especificamos que sólo sí, se ejecute cierto código... ejemplo en JavaScript:  8)
Código: javascript
if(hay_ingredientes == true){
    mezclar();
} else {
    comer_galletitas();
}
***** corregido por: Draconus
* Las imágenes están muy pixeleadas para que carguen más rápido. (prometo recortarlas en el próximo)
* Si no entendeís algo, deja un comentario y trataré de explicartelo.
* ¡Si no te sale algo o necesitas ayuda, como siempre, trataré de ayudarte!
* Y sí, no conozco el lenguaje, pero utilizar un navegador es la forma más sencilla de realizar bots, quizás algún día te explique como trabajo con C# y HTTP limpio, pero primero vamos a lo más fácil.
Título: Re:Empezando bot - Javascript y Tampermonkey [Parte 1]
Publicado por: Draconus en Octubre 27, 2017, 03:06:13 am
Perdon, pero en la linea
 
     if(hay_galletitas == true){

deberia decir

     if(hay_ingredientes == true){

Si no, quedaria como "si hay galletitas, mezclar. Si no hay galletitas, comer galletitas"..... no me cierra :)
Título: Re:Empezando bot - Javascript y Tampermonkey [Parte 1]
Publicado por: Th3r1p3r en Octubre 27, 2017, 12:09:14 pm
@Draconus: Gracias, ya lo corregí.