YUNIOR

Twitter: @YuniorGlez

Linkedin: Yunior González Santana

Correo: yunior@squaads.com

2011

ULPGC

2012

Desarrollo apps híbridas ionic + angular

2016

4 apps como freelance

2016

2017

∞ APPS

pre - squaads

Comienzo con la EOI

2018

∞ APPS

2022

2018

∞ APPS

2022

2018

∞ APPS

2022

¿Qué es Squaads?

No es tan importante el qué es, sino el ¿quiénes somos?

Actualmente squaads está formada por una familia de 24 cracks

Tratamos de crear las mejores aplicaciones móviles del mercado. Con amor y pasión por lo que hacemos

From 🏝 with 💜

Les conozco un poco

¿Quién tiene algo de experiencia de programación?

¿Quién NO tiene nada de experiencia de programación?

¿Quién tiene algo de experiencia con desarrollo web?

¿Quién NO tiene nada de experiencia con desarrollo web?

Levantamos la manito

¿Qué es JavaScript?

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos.

Por ejemplo, un texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

A diferencia de PHP

JAVASCRIPT es un lenguaje que se ejecuta en el cliente.

Esto tenemos que tenerlo siempre muy en cuenta.

A diferencia de PHP

JAVASCRIPT es un lenguaje que se ejecuta en el cliente.

Esto tenemos que tenerlo siempre muy en cuenta.

Tu ordenador

facebook.com

== DAME FACEBOOK.COM =>

<= Toma el index.html ==

== El usuario navega a categories.html =>

Web estática

Se refresca la pantalla

== Dame todos los ficheros =>

<= Toma los js y los css ==

El código de los JS lo ejecuto YO

Si facebook estuviese hecho solo con html+css+js

En los lenguajes de ...

En todos los lenguajes de programación, existen lo que se denominan "las variables"

¿Qué es una variable?

Pues te lo puedes imaginar como "un sitio" o "un lugar" o en este caso "una variable" dónde quieres almacenar un valor o un resultado. Imaginate que quieres guardar los nombres de todos los alumnos de este curso en algún sitio en javascript, pues bien, los guardarás en "una variable"

¡ Al lío !

Las variables en JS

Pueden ser de muchos tipos distintos:

De tipo boolean.
De tipo String.
De tipo number.
Null o Undefined
Object
Array
Function

String

var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;

Se indican o con comilla simple, o con comilla doble o con la comilla que está al lado de la p

Si eres canario, la puedes llamar "la comilla cambada"

Si estás en una entrevista de trabajo no ... ahí la llamas template literal o template string

String

var myNombre = 'Yunior';

var elCurso = "Angular2+";

var hoyToca = `Bases de JS`;

Se indican o con comilla simple, o con comilla doble o con la comilla que está al lado de la p

Si eres canario, la puedes llamar "la comilla cambada"

Si estás en una entrevista de trabajo no ... ahí la llamas template literal o template string

Number

var myEdad = 26; 

var laDeOtro = 190;

var añoDeNacimiento = 1993;

var precioDeUnCafé = 0.50;

1993 es un número entero

0.50 es un número real, en otros lenguajes se les conoce como floats. Al fin y al cabo es un número que tiene decimales

Por cierto

var añoDeNacimiento = 1993;

var precioDeUnCafé = 0.50;

Como habrás comprobado en esta diapo, podemos usar cualquier caracter como nombre de una variable.

Peeeero, hay limitaciones en cual puede ser el primer caracter

Docu

boolean

var yuniorEsMásJovenQueCarlos= true; 

var edadYunior = 28,
    edadCarlos = 42;

var yuniorEsMásJovenQueCarlos = edadYunior < edadCarlos;

Nombres tan largo nos ayudarán a entender más fácil nuestro código.

Cuanto más semántico es tu código, más feliz vivirás.

Resumen

var numero = 23; 

var frase = "ola k ase?";

var boleano = false;

var condicion = boleano == false;

var temp1;

Creamos una variable de esta forma

var nombre = valorInicial

var nombre;

Antes dijimos

Que los lenguajes de programación nos servían para indicarle a un programa que cosas hacer.

Pero de momento ... solo estamos creando variables

¿Cómo?

¿Cómo le diré yo a un programa que haga algo si una condición se cumple por ejemplo?

Pues eso es lo siguiente que tenemos que aprender.

Condiciones

var edadYunior = 26;
var edadMiguel = 38;

edadYunior < edadMiguel // true

edadYunior > edadMiguel // false

edadYunior == edadMiguel // false

edadYunior == edadYunior // true

edadYunior != edadYunior // false

var otraEdadYunior = "26";

Condiciones

var edadYunior = 26;

edadYunior == edadYunior // true


var otraEdadYunior = "26";

edadYunior === otraEdadYunior // ¿?

Ojo con Javascript

https://github.com/denysdovhan/wtfjs

Consejo

Cuando dudes si tienes guardado en dos variables números por ejemplo, lo mejor es pasar ambas a números al menos mientras las comparas.

¿Cómo se hace esto? Pueeesss.... como todo en este trabajo. Coges google y le dices "Cómo pasar una variable a numero en JS"

Cuándo buscas no solo encuentras la solución, sino que aprenderás muchísimas cosas que no sabías

Condicional, el if

if ( 10 > 5 ) { 
    console.log("El 10 es mayor que el 5");
} else {
    alert("WTF ! ? Llama a los bomberos! ");
}

Al igual que en otros lenguajes.

Existe una forma de escoger ejecutar un código u otro según una condición

If, else y else if

if ( 26 < 35) { 
    console.log('26 es menor que 35');
}else if ( true ) {
    console.log("Hmmm, ¿me ejecutaría?");
}else {
    console.log('26 no es menor que 36');
}

// Estamos en un fichero js
// Pero esta vez lo ejecutamos
// En el servidor

console.log('Hello World');

server.js

node server.js

En una terminal

SCRIPTING

ejEMPLO

function generarNumeroAleatorio(min=0,max=100){
    return Math.round(Math.random() * (max - min) + min);
}

console.log(generarNumeroAleatorio())

server.js

Ejecutado desde la terminal

process

ejEMPLO pasando parámetros

function generarNumeroAleatorio(min=0,max=100){
    const min_int = +min;
    const max_int = +max;
    return Math.round(Math.random() * (max_int - min_int) + min_int);
}
const minUsuario = process.argv[2];
const maxUsuario = process.argv[3];

console.log(generarNumeroAleatorio(minUsuario,maxUsuario));

server.js

Ejecutado desde la terminal

Miniejercicios

Crea un script el cual recibe dos parámetros, el primero es una frase y el segundo será un carácter o una palabra a buscar. Tu script escribirá en consola el número de apariciones.

Ejemplo : node index.js "Esta es la frase" a

index.js: "El número de apariciones de 'a' es 3"

Miniejercicios

Crea un script el cual recibe un parámetro. El parámetro será una frase y tu script escribirá en consola el número de apariciones de cada carácter distinto dentro de la frase.

Ejemplo : node index.js "Esta es la frase"

index.js: "e: 2, s: 3, t:1, a: 3, l: 1, f: 1, r:1"

Pista de una posible solución: usar un objeto como diccionario

Y método Object.keys( )

Miniejercicios

Investiga como recoger por la consola lo que el usuario introduzca (pista: process.stdin). Modifica el ejercicio anterior para que el usuario pueda seguir introduciendo frases y se vayan acumulando los resultados

Ejemplo : node index.js "Esta es la frase"

index.js: "e: 2, s: 3, t:1, a: 3, l: 1, f: 1, r:1"
index.js: "Introduce otra frase"

Usuario : "otra"
index.js: "e: 2, s: 3, t:2, a: 4, l: 1, f: 1, r:2"

mÓDULOS

Primero nos aseguramos tener un package.json creado o en caso de que no ejecutamos un

NPM INIT en la terminal en nuestro proyecto

EJEMPLO

var moment = require('moment');
var _ = require('lodash');

var fechas = [ 1520711483186, 1520781485186,
               1520781485186, 1520781485186,
               1520714473186 ];
var unicas = _.uniq(fechas);

unicas.forEach( fecha => {
    console.log(moment(fecha).fromNow());
});

RECUERDA

npm init

npm i lodash moment

PARA HACER SCRIPTING DEL BOMBI

MÓDULO MINIMIST

LIBRERIA GUAY PARA LAS FECHAS

momentjs

package.json

Miniejercicios

Modifica el código anterior de manera que si el usuario introduce el flag --novocals no se tengan en cuenta las vocales

Recuerda el módulo minimist

Miniejercicios

Modifica el código anterior de manera que si el usuario introduce el flag --onlywords se cuentan las apariciones de las distintas palabras

MÁS MÓDULOS !

hacer Peticiones

http

request

axios

Haciendo web scraping

EJEMPLO

var axios = require('axios');
var urlWeb = 'https://www.mediamarkt.es/es/category/_port%C3%A1tiles-701175.html';

axios.get(urlWeb).then(response => {

    console.log(typeof response.data); // string

})

EJEMPLO

var axios = require('axios');
var urlWeb = 'https://www.mediamarkt.es/es/category/_port%C3%A1tiles-701175.html';
axios.get(urlWeb).then(response => {
    console.log(typeof response.data); // string

    const posBodyInit = response.data.indexOf('<body') ;
    const posBodyEnd = response.data.indexOf('</body>') ;
    const aux = response.data.substring(posBodyInit,posBodyEnd);

    console.log(typeof aux) // string :O

})

CHEERIO

EJEMPLO

var axios = require('axios');
var cheerio = require('cheerio');

var urlWeb = 'https://airbnb.com';

axios.get(urlWeb).then(response => {

    var $ = cheerio.load(response.data);

    console.log($('.casa')); // :O So Sexy
})

Manipular el HTML con Jquery

document.getElementById('pepe');

Antes:

$('#pepe');

Ahora:

Seleccionar

Leer del DOM

$('.list .item.product').html();

$('.list .item.product').text();

$('.list .item.product').val();

¡ Jquery es muy grande!

https://www.w3schools.com/jquery/jquery_selectors.asp

https://www.w3schools.com/jquery/default.asp

https://www.anerbarrena.com/jquery-each-5297/

https://www.w3schools.com/jquery/jquery_traversing.asp

EJERCICIO SUAVE

Hagamos web scraping a mediamarkt.

Desde node realiza una petición get a la categoría de smartphones de mediamarkt y devuelve por consola el número de smartphones que tienen disponible en total

EJERCICIO SUAVE

Hagamos web scraping a mediamarkt.

Desde node realiza una petición get a la categoría de smartphones de mediamarkt y devuelve por consola el número de smartphones que tienen disponible en total

EJERCICIO SUAVE

Hagamos web scraping a la website de hackernews/jobs

Saca un array de ofertas con todas las que hay en la primera página.

https://news.ycombinator.com/jobs

EJERCICIO SUAVE

Hagamos web scraping a la website de hackernews/jobs

Saca un array de ofertas con todas las que hay en la primera página.

Obtén en otro array aquellas que tengan alguna de estas palabras en el texto :

"front" "front end" "frontend" "javascript" "js" "angular"

https://news.ycombinator.com/jobs

¡ Repasemos, asincronia !

PROMESAS

Promesas

function dameLaInfo(){

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            if( false ){
                reject('No te envío nada');
            }else{
                resolve({nombre: 'Fulano', email: 'fulano@fu.com'});
            }
        }, 3000);

    });

}

dameLaInfo().then(info => console.log(info))

Promesas

function dameLaInfo(){

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            if( false ){
                reject('No te envío nada');
            }else{
                resolve({nombre: 'Fulano', email: 'fulano@fu.com'});
            }
        }, 3000);

    });

}

dameLaInfo().then(info => console.log(info))

Promesas

function dameLaInfo(){

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            if( false ){
                reject('No te envío nada');
            }else{
                resolve({nombre: 'Fulano', email: 'fulano@fu.com'});
            }
        }, 3000);

    });

}

dameLaInfo().then(info => console.log(info))

Promesas

function dameLaInfo(error){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(error){
                reject('No te envío nada');
            }else{
                resolve({nombre: 'Fulano', email: 'fulano@fu.com'});
            }
        }, 3000);
    });
}

// Si cambiamos el parámetro se resolverá 
// o se rechazará la promesa

dameLaInfo(true)
    .then(response => {
        console.log(`Me ha llegado como respuesta ${response}`);
    })
    .catch(err => {
        console.log(err);
    });

MULTIPLES PROMESAS

recuerda

Que un get es asíncrono, y con axios o con jquery es una promesa

var axios = require('axios')
var urlInfo = "https://jsonplaceholder.typicode.com/users/2";

function buscarInfoUsuario(){
    axios.get(urlInfo)
        .then(user => {
            console.log('La info ya llegó');
            return user.data;
        });
}

buscarInfoUsuario().then(user => {
    console.log('Recojo la info');
    console.log(user);
});

hay un error en esta diapo

recuerda

Que un get es asíncrono, y con axios o con jquery es una promesa

var axios = require('axios')
var urlInfo = "https://jsonplaceholder.typicode.com/users/2";

function buscarInfoUsuario(){

    return axios.get(urlInfo)
            .then(user => {
                console.log('La info ya llegó');
                return user.data;
            });
}

buscarInfoUsuario().then(user => {
    console.log('Recojo la info');
    console.log(user);
});

Promesas

Hacemos varias peticiones para pedir distintos datos de un usuario.

var user = {};

//Dos promesas
getTwitterProfile()
    .then( TWProfile => user.TWprofile )

getFacebookProfile()
    .then( FBProfile => user.FBProfile )

// Necesito tener las dos promesas resueltas
if (user.TWProfile && user.FBProfile )

Pero queremos esperar a que se cumplan las dos para poder avanzar

PROMISE.ALL(arrayDepromesas)

Promesas

Promise.all([getTwitterProfile(), getFacebookProfile()])
    .then(resultados => {
        // Cuando todas las promesas se cumplen
        // se devuelve un array de promesas
        let res1 = resultados[0];
        let res2 = resultados[1]; ...
    )
    .catch(err => {
        // En caso de que alguna falle se rechaza todo
        // y se devuelve el error de la que falló
    });

AWAIT

async function f1() {

  var x = await resolveAfter2Seconds(10);

  console.log(x); // 10

}


f1();

AWAIT

function resolveAfter2Seconds(x) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

Anécdota

ES6

Desestructuración

var objeto = {
	usuario: 'Jose',
	email: 'jose@gmail.com',
	estado: 'registrado'
}

var { usuario, email, estado } = objeto;

// Jose
console.log(usuario);
// jose@gmail.com
console.log(email);
// registrado
console.log(estado);

Desestructuración

Promise.all([getTwitterProfile, getFacebookProfile])
    .then(resultados => {

        let res1 = resultados[0];
        let res2 = resultados[1];
    });

Antes

Promise.all([getTwitterProfile, getFacebookProfile])
    .then([ res1, res2 ] => {

        console.log(res1); //Es el resultado de la promesa1
        console.log(res2); //Es el resultado de la promesa2
    });

Ahora

Las variables se crearían solas

¡A trabajar otra vez!

SIGAMOS

Esta vez vamos a extraer todos los portátiles.

Investiga (jugando con la web) como se crean las distintas urls para llegar a la siguiente página y extrae desde la primera hasta la última página todos los smartphones.

HAZ LAS PETICIONES DE UNA EN UNA Y ESPERA AL MENOS 250 MILISEGUNDOS ANTES DE HACER LA SIGUIENTE PETICIÓN

Ten mucho cuidado MUCHO CUIDADO mucho cuidado con los bucles y las peticiones que hagas, ojo con ser baneado y hacer excesivas peticiones

¡consejo!

Métodos cortos :

obtenerPagina(indice)

extraerDatos(html)

SIGAMOS

Esta vez vamos a extraer todos los portátiles.

Investiga (jugando con la web) como se crean las distintas urls para llegar a la siguiente página y extrae desde la primera hasta la última página todos los smartphones.

HAZ LAS PETICIONES DE UNA EN UNA Y ESPERA AL MENOS 250 MILISEGUNDOS ANTES DE HACER LA SIGUIENTE PETICIÓN

Ten mucho cuidado MUCHO CUIDADO mucho cuidado con los bucles y las peticiones que hagas, ojo con ser baneado y hacer excesivas peticiones

¡consejo!

Métodos cortos :

obtenerPagina(indice)

extraerDatos(html)

EJERCICIO

Extrae 5 páginas seguidas de jobs

Investiga como navega a la siguiente página.

Una vez recorras cinco páginas separa también las ofertas de frontend como en el otro

MÁS MÓDULOS

fs

lO USAMOS EN DIRECTO

METODOS

readDir

readDirSync

readFile

readFileSync

EJEMPLO readfile

var fs = require('fs');

var fileUrl = 'data/a.json';

fs.readFile( fileUrl , (err , data ) => {
    
    if (err){
        console.log('Err', err);
        return ;
    }
    console.log(data) // A lot of shit

    var json = JSON.parse(data);
    console.log(json);

})

¡A trabajar otra vez!

mini EJERCICIO

Crea un proyecto nuevo, carpeta en blanco y preparar nodejs para funcionar.

Descárga como un fichero .json lo que hay en esta url https://jsonplaceholder.typicode.com/posts

Ahora haz un script en nodejs que sea capaz de leer el fichero y mostrar solo las publicaciones del usuario con el id = 4.

Modifícalo para indicar mediante la opción --id NUMERO el id del usuario del apartamento que quieres visualizar

Modifícalo para que guarde en un fichero a parte los resultados

EJERCICIO

Modificando el ejercicio del web scraping de los portátiles de mediamarkt.

Añádele a dicho script la posibilidad de guardar los smartphones en un fichero de resultados.

Si el usuario no introduce nada por defecto guárdalo en la carpeta output/smartphones .json

Haz que el usuario pueda introducir el parámetro --outputpath "lo/quiero/aqui" para especificar donde se van a guardar los datos

ULTIMO EJERCICIO CON NODEJS

YA MAÑANA EMPEZAREMOS A CREAR NUESTRA PRIMERA API RESTFUL CON NODE+EXPRESSJS

PERO ANTES ....

¡ OJO !

¡ No te tires a la piscina a picar código del tirón !

¡ SE ORIGINAL !

Ahora que sabes hacer web scraping.

Piensa en alguna otra página que tenga contenido separado por páginas que pueda ser interesante, la que sea, como si es ... el catálogo de juegos nuevos en steam.com o el listado de una búsqueda de videos de programación en youtube

¡ A LA GUERRA !

Realiza un script para poder extraer la info de dicha página cuando lo ejecutes y lo más personalizable posible que puedas

Primer paso

RESUELVE UNA NECESIDAD REAL.

Mezcla web scraping con otros servicios/módulos de npm de mensajería (nodemailer, twilio, telegram-bot, slack, etc) para montar una idea que gire entorno a la automatización del scrapeo de una web y por ejemplo el envío de un correo por la mañana con el reporte o cuando ejecutes el script indicandoselo por telegram o slack !

Dividan fuerzas, sois 4, aprovechen para dividir el problema en 4 partes, ejemplo web scraping por un lado, tratado de la info por otro y el usar un servicio de mensajería por el otro para hacer el proyecto

Segundo paso

MÓDULOS INTERESANTES

TELEGRAM-BOT

EMAIL

SMS CON TWILLIO

SLACK

¡busca en google! "How to send email from nodejs" , "How to send slack msg from node", etc etc etc

MÓDULOS INTERESANTES

TELEGRAM-BOT

EMAIL - OTRO DE EMAIL - OTRO DE EMAIL

SMS CON TWILLIO

SLACK