Hoy lo que vamos a hacer es una aplicación del tiempo desde cero.
No espero que tenga el mejor diseño del mundo, pero lo vamos a hacer con SvelteKit.
¿Y por qué lo vamos a hacer con SvelteKit?
No sé, he dejado de utilizar Svelte durante mucho tiempo y me gustaría empezar a introducirlo más y más.
Y la verdad es que Svelte, os lo voy a decir con toda sinceridad, me parece la hostia.
O sea, Svelte es increíble, o sea, está muy chulo.
Y me da rabia no tener soltura.
Y no tengo soltura, lo vais a ver.
Voy a tener que estar mirando la documentación, revisando cosas y tal.
Pero es que es increíble, me gusta mucho a muchos niveles.
Simplicidad, no tiene boilerplate, lo fácil que hacen las cosas, no sé.
Tiene algunas magias un poco así, mágicas negras, un poco Doctor Strange.
Pero vas a ver que es increíble, que me encanta.
SvelteKit, y de hecho me gusta hacer predicciones del futuro.
Mi predicción del futuro es que SvelteKit se va a convertir en algo bastante importante en los próximos tiempos.
¿Y cómo va a ser eso?
Yo creo que Vercell le va a dar mucha caña.
Le va a dar mucho, mucho, mucho, mucho, mucho apoyo a esto.
Recordad que Vercell contrató a Rich Harris, que es el creador de Svelte.
El caso es que Vercell tenga en su propiedad, digamos, un framework, es súper potente.
Porque hace que no tenga que depender de las iteraciones de React para mejorar su plataforma.
Porque ahora mismo Next.js es el framework de React.
Pero si os habéis dado cuenta, Vercell lo que quiere es convertirse en el framework de la web.
No tengo ninguna duda que en los planes de Vercell está, no digo dentro de tres meses, seis meses o lo que sea.
Pero yo os juro y estoy bastante convencido que SvelteKit va a pillar mucho protagonismo en las keynotes de Next, en siguientes conferencias y tal.
Eso sí, inflando sí, pero no estoy matando a React ni mucho menos.
Creo que tiene sentido para Vercell justamente el hecho de utilizar SvelteKit o de promocionar más SvelteKit.
Y ver si suena la flauta de que la gente empiece a pasarse un poquito más a Svelte.
Es mi opinión, es mi opinión, pero de verdad creo que tiene muchísimo potencial.
Y creo que por eso tiene bastante, bastante buena pinta.
Entonces, yo creo que está bien aprenderlo.
Y ahí os lo dejo, ¿vale?
Lo siento por Dan Abramov, pero bueno, quién sabe.
A lo mejor un día de estos veis, Dan Abramov se va a Vercell.
No me estrenaría.
Es como la mantequilla, reitero.
Midu, ¿crees que es mejor que React?
A ver, ¿qué es Svelte?
Svelte es para el que no conozca Svelte.
Venga, os hago una rápida, rápidamente, ¿vale?
Svelte, ¿qué es?
Es una cibernética...
No, eso no es lo que es.
Lo que es, es una aproximación totalmente diferente al mundo de cómo se construyen las interfaces de usuario, ¿vale?
El tema de que hasta hoy, cómo hacía Vue y React sus interfaces, pues era una forma mucho más tradicional,
que creabas componentes, alguno con mucho JavaScript, en el caso de React, con JSX,
y en el caso de Vue, un poquito con su propio template engine,
pero que al final del día, lo que tienen es que tú transpilas o compilas el código utilizando cosas como Babel, Bit y tal.
Bueno, Svelte, en realidad, aunque podríamos decir que es un framework, ¿sabéis lo que es en realidad Svelte?
De número uno, lo que es, es un compilador, directamente.
Svelte es un compilador y un framework a la vez.
¿Y por qué es un compilador?
Porque básicamente tú escribes estas cuatro líneas, que fíjate lo bonito que es,
o sea, no tiene absolutamente, absolutamente nada de boilerplate, ¿no?
Tú escribes estas cuatro líneas y aquí puedes ver el resultado,
pero fíjate lo que escupe, o sea, el JavaScript que estamos escupiendo, pues tenemos todo esto, ¿no?
O sea, lo está compilando, son estas cuatro líneas, Svelte,
las está transformando en todas estas líneas de aquí.
O sea, que está compilándolo.
Y fíjate cómo de potente es esto de que sea un compilador también,
que podríamos encontrar que nos digan, por ejemplo, pues errores.
Bueno, en este caso pensaba que me iba a decir este, pero no, no me lo dice.
Vale.
Pero, por ejemplo, los estilos, si le decimos H2 color red, ¿vale?
Fíjate que ha detectado que el selector H2 no lo estoy utilizando.
Y esto no es un tema de que tenga un linter,
esto es el compilador de Svelte que está detectando errores
antes incluso de que podamos ejecutar el código.
O sea, se está dando cuenta de errores que tiene nuestro código
o cosas que podemos mejorar antes realmente de ver el resultado de la pantalla.
Esto lo hace súper interesante, súper potente
y muy fácil de poder programar con él con total de garantías.
Además tiene un montón de ventajas, como el tema del CSS,
que como podéis ver está en el ámbito del componente,
se crean muchos single file components, o sea, un solo archivo
donde tienes todo lo del componente, tendríamos la parte del JavaScript,
tendríamos la parte del renderizado o el marcado
y tendríamos los estilos, todo en el mismo fichero, ¿vale?
Y estos estilos, como puedes ver, no está utilizando ninguna clase
porque este párrafo se refiere a este, al que tiene en el mismo ámbito.
En cambio, si en otro componente tenemos aquí una P,
pues podemos ver que no se ve afectado por los estilos
que tenemos en otro componente. O sea, te olvidas de clases,
tiene un montón de ventajas.
Reactividad. La reactividad también es muy interesante
porque la reactividad en realidad lo que tiene es que en ningún sitio
tú indicas que es un estado.
Simplemente tú tienes una variable, tienes una función con el handle click
y lo que haces es que cuando el botón haces click
y se ejecuta el handle click, lo único que haces
es aumentar el contador en uno y ya está.
O sea, ya tienes un estado de gratis, ¿sabes?
Sin necesidad de decirle esto es un estado y tal.
Esto significa que es reactivo de verdad, ¿no?
Como lo es React, ¿no? Que esto es lo típico que se comenta
y en el que además no tiene virtual DOM
porque solo cambia exactamente lo que necesita
pero porque ha detectado, gracias al compilador,
cuál es la parte que es un estado.
Para que lo vean más claro, para que vean la magia
y porque es un approach totalmente diferente a React
que yo no descarto que en algún momento React,
sobre todo React, se atreva a hacer algo así
para poder optimizar bastante más el código,
es que gracias a ser un compilador,
fijaos en la magia que hace.
Aquí no veis en ningún sitio que es un estado
y claro, es cómo vuelve a renderizar esto,
cómo este count vuelve a renderizarse.
Por lo que hace este compilador es detectar,
ah, es que este count es un estado por lo que he visto aquí.
Por lo tanto, cuando lo compila, si nos fijamos por aquí,
fíjate que está como, está haciendo algo parecido
a un hook, a un useState, ¿verdad?
Está devolviendo aquí un count, un handleClick.
Entonces, este instance, si vamos viendo a ver dónde sea,
es que claro, es bastante difícil aquí de leer,
pero lo vamos a ver, lo vamos a ver, ta, ta, ta.
Bueno, lo que, es que fíjate cómo se compila el código.
Pero aquí, estaría por aquí, ¿vale?
¿Ves que aquí esto es lo que se renderiza?
El time, times, esto es lo que hay aquí, justamente, ¿no?
Entonces, lo que está haciendo es como envolverlo, ¿no?
Está diciendo, vale, esta parte del render
que es la que debería cambiar, la voy a envolver
para detectar que cada vez que cambia,
vaya a renderizar una cosa, vaya a renderizar la otra.
O sea, ha detectado este renderizado condicional
y lo ha aislado gracias al compilador,
justamente para saber dónde lo tiene que hacer.
Y entonces llama a esta función de invalidate
cada vez que haces el handle click
y esto lo que te permite es que esa parte
que tenemos por aquí se vuelva a renderizar.
O sea, ¿y cómo maneja los estados?
Entre componentes.
Tienes props también, lo vamos a ver ahora.
O sea, lo vamos a ir viendo.
Además, tienes transiciones súper chulas
que esto están por...
O sea, esto ya lo tienes de gratis.
Las animaciones, transiciones,
también puedes hacer custom.
Es brutal.
Tienes un estado global con una store.
Tiene mil millones de historias.
Pero yo creo que lo mejor
es que intentemos hacer nuestra aplicación
y para hacer nuestra aplicación
vamos, como os decía antes,
vamos a hacer una hackathon
y esto significa que vamos a hacer una aplicación
y luego la podréis seguir, ¿vale?
La seguís vosotros
y la presentaréis
y a ver las que estén mejor
pues se llevarán un premio
y si no, al menos habrás aprendido algo, ¿vale?
Entonces, para la aplicación que voy a hacer
he pensado en hacer algo sencillito.
No es que sea muy bueno de diseño,
pero bueno, para ir probando Svelte
y para que os sirva para el tema de la hackathon
vamos a hacer una aplicación
que es la típica aplicación del tiempo.
Vamos a utilizar una API,
vamos a intentar hacer el fetch de la API
y vamos a hacer todo esto, ¿vale?
Y a ver hasta dónde llegamos.
¿Que llegamos muy lejos?
Fantástico.
¿Que no llegamos muy lejos?
Pues bueno, ¿qué le vamos a hacer?
Ya habremos llegado lo más lejos posible.
Así que vamos a ello.
Vamos a ello.
Para la API del tiempo
voy a entrar aquí a Rapid API.
Para que entréis a Rapid API rápidamente
podéis ir a midu.link barra API, ¿vale?
Que lo dejo por aquí.
Bueno, lo dejo tres veces.
Pam, pam, pam.
No se va a quedar pegado como en Platzi.
Hombre, espero que no, ¿eh?
Espero que no, espero que no.
Pero bueno, ahí lo tenéis, ¿vale?
El enlace este de la API.
Aquí tenéis un montón, un montón de APIs.
Si tenéis que...
¿Por qué me gusta mucho este servicio?
Si tenéis que desarrollar alguna cosa para probar,
bueno, aparte,
y queréis ir un poquito más allá de la Poke API
y este tipo de cosas,
que está súper bien, ¿eh?
La Poke API.
Pero si queréis salir un poco de ahí,
tiene Rapid API,
tiene justamente esta sección que dice
Free Public APIs for Developers.
Casi todas tienen una parte gratuita,
que a lo mejor puedes hacer 500 llamadas al día
o al mes o a la que sea, ¿vale?
Pero tiene esta sección que es
Free Public APIs for Developers,
que estas están bastante bien
porque suelen tener bastante...
O sea, bastantes requests que puedes hacer.
Y aquí tendríamos esta de Weather API.
Es que si no me equivoco,
esta está bastante bien.
Weather API, ¿vale?
Entonces, una vez que te registras
en Weather API...
La Poke API es mítica, sí,
pero es que al final
siempre utilizamos la Poke API
y nos vamos a quedar un poco...
de aquella forma.
Por cierto,
AjoLocer,
que se ha suscrito,
que ya lleva tres meses,
me preguntó que qué es local
y qué es global state.
O sea, qué es local state
y global state.
Hoy en el stream
lo vamos a comentar, ¿vale?
Así que le puedes dar cañita.
Te puedes quedar por aquí
y te enterarás.
Vale.
Bueno, pues aquí en Weather API
lo primero que podéis hacer
es mirar el pricing.
Aunque aquí pone...
Ay, esta es freemium.
Esta no es la que digo.
Ah, sí, sí, esta sí que es.
Fíjate, es que tienes
un millón de requests al mes.
O sea, un millón de requests al mes.
Ya me contaréis.
Es verdad que tienen menos servicios,
pero bueno,
estos servicios no nos interesan tanto.
Que si fuese necesario,
ya ves tú,
son cuatro dólares al mes,
tampoco es mucho.
Pero bueno,
no lo vamos a necesitar.
Así que podemos ir ya a endpoints.
¿Le he dado...
O sea, ¿estoy suscrito a esta API?
Sí, ya estoy suscrito.
Porque normalmente
le tienes que dar aquí a subscribe
para poder utilizarla.
Hay veces que tienes que hacer eso,
otras que no.
Vale.
Meadu, ¿está bien si uso
Rapid API para una prueba técnica?
Era una prueba técnica
para Data Science.
No la utilicé porque pensé
que no se podía.
Yo creo que sí, claro.
No hay ningún problema.
No tienes ningún problema
no utilizarla, hombre.
De hecho,
una cosa que me gusta mucho
de Rapid API
es que tú tienes aquí a la izquierda
los endpoints,
que también puedes utilizar el buscador.
Y entonces,
puedes probarlos todos.
Por ejemplo,
este, este...
Esta API me gusta mucho
por una cosa.
Que además del tema del tiempo,
también tiene cositas
que puedes utilizar
en nuestros proyectos.
Y te vas a dar cuenta ahora.
Mira,
por ejemplo,
tienes esta que es
IP Lookup API.
Esta es la típica API
que tú lo que haces
es ejecutarla
porque además le puedes dar
aquí a Test in Point
y aquí te da el resultado.
Ah, vale.
Ah, vale.
Está muy bien esto.
Me dice,
la Q es requerida.
La Q es por lo que quieres buscar.
O sea,
en la Q deberíamos poner,
por ejemplo,
una IP,
la que sea.
En este caso,
voy a poner
auto dos puntos IP
para que utilice mi IP,
la que tengo ahora.
¿Vale?
Y me debería devolver
la ubicación.
Voy a mirar
que la ubicación
no sea muy...
Ah, no.
No creo que la haya pegado
mucho la ubicación,
me parece.
Porque pone
continente Europa,
Europa,
Alemania.
No la ha pegado mucho,
¿vale?
No la ha pegado mucho.
No estoy en Alemania,
os lo puedo asegurar,
¿vale?
Os puedo asegurar
que no estoy aquí.
Entonces,
vale,
Frankfurt,
no estoy en Frankfurt,
pero se supone
que hay veces
que con la IP,
hostia,
ahí sale la IP.
No,
otra vez mi IP,
no.
Otra vez la IP leak.
Bueno,
no pasa nada.
De hecho,
creo,
creo que no es mi IP.
Claro,
es que creo
que ha hecho
este test en point
y no es mi IP.
Esta no es mi IP.
Por eso,
por eso me está saliendo
lo de Frankfurt.
O sea que,
uy,
no es mi IP.
Así que,
sí,
sí,
no es mi IP.
No hay problema.
No hay problema.
Supongo que es porque
está haciendo esto,
no está enviando mi IP,
sino que al pasar esto
por mitad
de Rapid API,
a lo mejor está pasando
por esa IP
y ya está,
¿no?
Eso diría alguien
que leakéó su IP.
Mira,
Gonci,
la he leakéado
ya tantas veces
que no tendría
ningún problema
en decir
que se me ha escapado,
¿eh?
O sea,
mi IP ya ha salido
por aquí
80 veces.
Así que no pasa nada.
No pasa nada.
Sí,
igual la IP de Savita,
ya que me ha hackeado
el cabrón.
Bueno,
total,
total.
En serio,
creo que no es mi IP
porque el rango
y tal no me encaja,
¿eh?
Y claro,
es que tampoco
me está pillando
el sitio,
pero ni de lejos,
¿eh?
Sí,
la IP de Midoo
ya es pública.
Podéis buscar,
podéis buscar por ahí
IP de Midoo
y ya la tenéis.
Bueno,
total,
que podéis probar aquí
todos los sitios,
¿vale?
Pongamos que quiero poner aquí
Real Time Weather,
que entiendo.
Bueno,
este Search Autocomplete,
este también puede ser interesante,
¿eh?
Porque este,
creo,
mira,
aquí podéis utilizar,
por ejemplo,
el código postal,
podéis buscar con la Q,
con la IP también,
pero vamos a buscar,
por ejemplo,
Buenos Aires.
A ver si Buenos Aires sale.
Le vamos a dar Test Endpoint.
Mira,
los coléricas.
Es que no sé si este Buenos Aires
habría que hacerlo así,
¿no?
No.
No sé si...
T, T, T,
Joya de los Santos,
Puerto Rico...
Es que claro,
¿cómo podríamos poner
que esto esté junto?
Ay,
es que he puesto la Q.
Nada,
nada.
Perdón,
perdón.
Es todo así.
Vale,
Argentina.
Bella Vista,
Buenos Aires,
Argentina.
Según esto,
según esto,
si esto,
si esto,
mira,
Distrito Federal,
¿ves?
Esto sería que tú puedes buscar aquí
una localización,
un texto libre
y te va a decir
posibles,
posibles sitios.
Esto está bastante interesante,
o sea,
para que veáis que aunque es una API de,
aunque es una API del tiempo,
que podéis utilizarla para cosas muy chulas
para otros proyectos,
¿vale?
Porque yo,
de hecho,
lo he utilizado alguna vez
para este tipo de cosas.
Vale,
pues real-time weather.
Venga,
vamos a poner ahora sí,
Buenos Aires.
Vamos a ver qué tiempo hace en Buenos Aires,
aunque encima he dicho que hace mucho frío.
Distrito Federal.
Ahora mismo,
según esto,
está haciendo solito,
está haciendo sol
y hay 15 grados,
hay 15 grados Celsius.
También están los Fahrenheit
y nos dicen si es de día o si es de noche.
Está bastante chulo.
Nos dice la velocidad del tiempo,
nos dice si hay precipitaciones,
si está nublado,
o sea,
nos da bastante información,
¿vale?
Así que no está mal.
Hay un vídeo en YouTube
con el título Hackers Habitat
se filtra la IP de mi UDF en vivo.
Sí,
sí,
la he visto,
la he visto.
Bastante fuerte.
Hay que ver,
¿eh?
Es la IP de uno de los servidores
de Rapid API,
que es el cliente que ha realizado
la llamada.
Sí,
tienes toda la razón.
O sea,
al final,
claro,
al tener Rapid API
como de proxy
que está en medio
haciendo la llamada,
me imagino que es por eso.
¿Es correcto?
Entonces,
¿está bien?
Vale,
perfecto.
Bueno,
pues ya sabemos
cómo hacer el test endpoint,
ya nos da aquí los resultados.
Y en CodeSnippets,
que esto está muy chulo,
podríamos decirle,
oye,
pues en JavaScript
hazme el fetch
y te da,
es que el código del fetch.
O sea,
es que me parece,
y esto lo puedes copiar,
lo deberíamos poder pegar aquí.
Vamos a ver,
sí.
Y esto,
fíjate,
ya lo tiene funcionando.
Que alguien decía por aquí,
no sé cómo funcionar,
no sé cómo funciona el,
no sé cómo funciona el fetch.
Pues mira,
es que me hace falta
que sepas cómo funciona.
Mira,
ahí lo tiene,
Juan Semprunt.
Vale,
pues entonces,
entonces,
como veis,
tenéis un host,
que es para decirle cuál es la API
que quieres atacar.
Esto lo necesita a veces
por temas de seguridad y tal.
Y vuestra key.
A ver,
la key,
supongo que ahora la gente está diciendo,
ah,
también se te ha escapado la key y tal.
A ver,
siendo realista,
este tipo de keys
es bastante normal
que estén públicas.
¿Por qué?
Porque hay muchas veces
que estas llamadas
las vas a hacer desde el cliente.
Unas cosas que se pueden hacer
con los headers,
estos que ves por aquí,
o verás,
no me acuerdo,
bueno,
en Rapid API creo que hay
cierta configuración sobre esto.
Y es que puedes hacer
que ciertas keys
solo funcionen
para cierto host.
De esta forma puedes evitar
que una key
que se te ha filtrado,
bueno,
se te ha filtrado no,
pues se te va a filtrar seguro,
pero que alguien
intente utilizar la key
fuera de ese host,
por ejemplo.
Se pueden intentar
hacer ciertas cosas
o puedes intentar hacer,
por ejemplo,
y es lo que vamos a hacer después
para que lo veamos,
desvelte,
hacer un endpoint
y desde el que haces
la petición
en lugar de hacerlo
directamente desde el cliente.
De esta forma
nadie vería tu API key.
En mi caso,
pues ya se me ha colado,
lo que tendré que hacer
es borrar la suscripción,
volver a hacerla
y te añade otra API key.
Venga,
vamos a empezar
nuestro proyecto
de SvelteKit.
Vámonos por aquí
para empezar
un proyecto de SvelteKit
en PMInit,
Svelte,
MyApp.
Pues vámonos,
voy a cerrar esto,
pam, pam,
vamos a cerrar esto,
en PMInit,
Svelte,
mira,
taller Svelte,
le voy a llamar
Midweather.
Midweather.
Venga,
vamos,
Midweather.
Sí,
le decimos instalar,
le voy a decir
que me ponga el esqueleto
porque no me gusta mucho
el otro
porque tiene muchas cosas
y como podéis ver
me está diciendo
que es beta software,
que esperas bugs
y missing features.
Esto es normal,
¿vale?
pero ya llevan mucho tiempo
de beta
y yo creo que es bastante fiable
así que no hay ningún problema.
Aquí tenéis tres opciones
que están bastante chulas
que es la de utilizar
TypeScript,
TypeCheck,
JavaScript o None.
Si utilizáis
TypeCheck,
JavaScript
es bastante interesante
porque sin necesidad
de escribir TypeScript
por si os da rabia
o lo que sea
porque también podéis utilizar
TypeScript con Svelte
pues está bien
porque con un poquito
de JSDoc
tiene bastante tema
de lo que serían
los tipos y tal.
Vamos a poner None
porque si no es un poquito rollo
pero bueno
que lo sepáis
si os gustan los tipos
ahí los tenéis.
Añadidmos Slyne y Prettier
le voy a añadir Playwright
por si nos da tiempo
a hacer los test
y nos vamos a
Midu Weather
en PM Install
y ya está instalando
las dependencias.
Midu,
estoy en un nuevo trabajo
y siendo que es mucho
mucho para mí
no sé qué hago aquí.
Pues anda
y si no sabes tú
que te voy a decir
yo casco Lucas
yo que sé
lo que haces ahí.
A ver amigo
no te preocupes
no pasa nada
todos entramos alguna vez
en un trabajo
al principio es que es normal
estás aturdido
te estás adaptando
no pasa nada
a mí me ha pasado
en todos los trabajos
en los que he entrado
y si el día de mañana
me voy a otro
que lo dudo
pues me pasará
un poco lo mismo
no pasa nada.
¿Por qué?
Porque al principio
tenemos un poco de pánico
queremos hacerlo bien
hay que aprender muchas cosas
no solo de programación
de cómo la gente trabaja
código
la lógica del producto
hay un montón de cosas
entonces no te preocupes
tú intenta hacerlo
lo mejor posible
que eso es lo que
se tiene que valorar
y poco a poco
ya lo harás mejor
no te preocupes
tú sobre todo
a darle cañita
y ya está.
Vale, ya he hecho
la instalación
pues hacemos
un npm run dev
open
y ya está
ya tenemos aquí
nuestra aplicación
hasta aquí la hackathon
muchas gracias a todos
pensaba que iba a hablar
siempre que escucho
el tipo que más me gusta
eres tú
gracias hombre
muchas gracias
voy a ver si soy capaz
de hacer esto
vamos a ver si soy capaz
de hacer en pantalla
completa esto
a ver si soy capaz
no soy capaz
no soy capaz
no soy capaz
ah
¿cómo lo hago?
es que siempre me cuesta
vale
ahora sí
ojo
lo conseguí
lo conseguí
me equivoqué
me he equivocado
lo quería poner al revés
bueno
lo quería poner al revés
no puedo
ah sí que lo puedo mover
madre mía
que me encanta
me encanta
bravo
bravo
vale
pues
vamos a darle a esto
ay no me digas
que no he abierto
no había abierto el proyecto
un momento
un momento
que no he abierto
el proyecto correcto
he abierto
Visual Studio Code
y tengo que abrir el proyecto
y es que tengo proyectos ahí
secretos
que no puedo permitir
que veas
no puedo permitir
que veas todavía
entonces
vale ya está
ahora sí
¿vale?
ahora sí
¿qué fuente usas en tu terminal?
Cascade a Code
uso Cascade a Code
en todo
¿vale?
Midu Hub
ese es el que tengo
el Midu Hub
vale
¿qué usa el nombre del post
y no la idea?
por favor si puedes probar
las url de las páginas dinámicas
vale
eso lo intentaremos
bueno
ya hemos creado el proyecto
no quiero aburrirte
con todos los detalles
ya haremos un taller
mucho más en detalle
de Svelte
pero bueno
tenemos la configuración
el package JSON
bla bla
lo interesante
está aquí en Source
donde tenemos las rutas
el index
y que fíjate
que esto que tenemos aquí
voy a hacer esto
un poquito más grande
esto que tenemos aquí
es
lo que
lo que está renderizando
¿vale?
ni más ni menos
y lo guardas
y se cambia aquí
fantástico
pues vamos a estilar
¿vale?
y h1
font family
font family
system UI
lo guardamos
y mira ya está
pim pam
pim pam
así está
así está
si he dicho pajas dinámicas
pero
era páginas
perdón
¿eh?
perdón
y no sé en qué
estabais pensando
pero lo siento
me he equivocado
¿en qué tal
mido?
¿en qué proyecto
estás trabajando?
estamos haciendo
una aplicación
de noticias
¿eh?
¿cómo hiciste
la fuente
system?
ajá
bueno a ver
podéis utilizar
system UI
pero si tú
en Visual Studio Code
empiezas a escribir
system UI
fíjate que el autocomplete
te dice esta
entonces le das al enter
pam
y te pasa estas
que básicamente
son todas las fuentes
del sistema
y te las pone en orden
bueno
para que primero
intenta utilizar
las de Apple
luego creo que esta
es de Microsoft
Roboto
Roboto creo que es de Android
o OpenSense
es de Android
Oxygen
Ubuntu
Linux
OpenSense
bueno
que intenta utilizar
todas las que pueda
el sistema
que están bastante chulas
¿vale?
bueno ya tenemos aquí
lo que se está renderizando
como había hecho
por aquí
la cosa esta
ya que la tengo por aquí
vamos a ir bastante a saco
y vas a ver
lo fácil que es
en un momento
hacer ciertas cositas
mira
tenemos aquí script
¿vale?
ponemos ya esto
que lo he pegado
y ahora os explico lo que es
no os preocupéis
los que no sepáis
que es un fetch
os lo explico ahora
¿vale?
hay una cosa
que es muy increíble
de Svelte
a ver
es que esto es lo más interesante
de Svelte
os lo aseguro
que esto
que os voy a contar ahora
es lo más interesante de Svelte
y es la razón
por la que me gusta
mucho más que Vue
lo siento por la gente
que le guste Vue
o Angular
y lo siento por la gente
que le guste Angular
es verdad que se parece a Vue
¿vale?
se parece a Vue
pero hay una cosa
que me parece
muy chula
de Svelte
¿no?
y es que
si hasta el momento
si tú ves
si tuvieses
este
este
este código
no podrías saber
o sea
olvídate de esta parte
¿vale?
imagínate que no está viendo esta parte
pero si tuvieses este código
ya te puedes imaginar
que es Svelte
porque no hay otro framework
que lo haga igual
pero en realidad
es HTML
lo que estamos viendo aquí
es todo
todo
HTML
¿sabes?
o sea
no hay
ahora mismo
con todo lo que hemos hecho
no hay ni un indicio
de algo
del framework
o sea
es HTML
es verdad que luego
veremos que tiene su propio
como
DSL
¿vale?
como un template engine
para que puedas hacer loops
condicionales
y todo esto
¿no?
pero lo que mola
lo mejor que tiene Svelte
es este tipo de cosas
que dices
madre mía
es que parece
HTML
con su etiqueta
es que tú
mira
podrías poner aquí
en printer
no perdón
aquí ves que tengo lenguaje
he puesto Svelte
pero yo pongo HTML
y es que
tiene ya
la sintaxis resaltada
o sea
es genial
es brutal
es tremendo
sí sí
y esto es código
que tú lo pegas en HTML
y funciona
eso es lo que
lo que realmente
está muy chulo
sí sí
me gustaría invitar a Rich Harris
un día de estos lo invito
a ver
le diré a Gonzi
que mueva las manitas
que es el que tiene
los contactos
en Vercel
yo en Vercel
solo conozco a Lee
bueno
y a Guillermo Rauf
pero Guillermo ya no
no somos colegas
Guillermo es demasiado famoso
ojalá
ojalá me encuentre a Guillermo
en Buenos Aires
bueno
no me voy a encontrar a Guillermo
pero me voy a encontrar
a alguien mejor
me voy a encontrar
a Gonzi
Gonzi Pozo
va a ser tremendo
ya haremos algún stream
no Gonzi
a tope
podríamos hacer una hackathon
Gonzi
de hacer nuestro propio
Next.js
48 horas
non-stop
Buenos Aires
la startup
y entonces ya imagino
la nación
la startup
que nació en 48 horas
un viaje
un viaje
un viaje
de un español
hacia Buenos Aires
y la pasión
y la pasión
de un chico
argentino
acaba con la
Miduan
Midun
Ciab
la Midun
Ciab
que ha generado
millones de euros
en toda Latinoamérica
sería tremendo
ay que bueno
bueno pues el tema
que hasta aquí
podemos ver que bueno
no ha cambiado
lo que está renderizando
pero si miramos aquí
en la consola
vas a ver que ya tenemos
aquí lo del fetch
y todo esto
ves ya tenemos aquí
el objeto
con todo
entonces hay diferentes
formas de hacer esto
en cuanto a cómo
podemos resolver
la promesa
y una de ellas
que es bastante
declarativa
que es una de las cosas
que me gusta también
bastante de
de Svelte
es el hecho de que
tiene su propia etiqueta
a ver si me acuerdo
que es esta
la de await
no tiene muchas etiquetas
o sea fíjate que tiene
await
each
if
y key
ya está
ya está
o sea tiene
para aprender
3, 4 y 5
bueno
una
porque el await
este
solo tiene
como dos formas
de hacerlo
tienes el
await
each
if
key
o sea que es facilísimo
de aprender
Svelte
vale
entonces puedes utilizar
esta de await then
que está bastante bien
con la que tú puedes decirle
vale
espera
la promesa
y que promesa vamos a esperar
pues esta de aquí
por ejemplo
y aquí tendríamos
por ejemplo
weather
vale
vamos a
quitar esto
y este weather
sería la promesa
que tenemos que esperar
y cuando tenemos
esto
lo que podemos hacer aquí
es lo que nos dé la gana
o sea aquí podríamos poner
de hecho un console.log
de weather
vamos a ver
qué es lo que tiene esto
vale
vale
está undefined
vale
empiezo bien
fetch
la he liado ya
ya la he liado
ya la he liado
a ver esto
ahí funciona
funciona
aquí está
a ver vamos a ver
un momento
promise
fulfill
promise
promise
promise
promise
promise
fulfill
vale
sí
ya sé que está
fulfill
pero dónde está
ah ostras
vale vale
es que aquí
he puesto este weather
aquí como si me fuese a enterar
de lo que tenía
y lo que quería era justamente
la respuesta
mirar el console.log
a ver qué es lo que tenía
vale
entonces
location
y current
¿no?
entonces tendríamos
por aquí
tendríamos
por un lado
la location
y el current
esto de la respuesta
vale
vamos a poner
response
vale
country
argentina
vale
eso lo podremos
cambiar después
podríamos sacar
de location
el country
country
local time
el name
y yo creo
que con eso
ya está
y del current
que es donde
debe estar
el tema
de la
toda la información
vale
tenemos el condition
condition
esto lo pillamos
del current
y vamos a tomar
el código
el texto
del condition
y del current
además
vamos a ver
qué tenemos
por aquí
tenemos
humedad
tenemos
fields like
esto
esto es como
el tiempo
que parece
que hace
o sea
el que se siente
y esta es la
temperatura
qué preciso
¿no?
o sea
se siente como que son
15,3 grados
pero hacen 15 grados
demasiado preciso
me suena de esto
vale
y vamos a ver
la velocidad
del viento
también podríamos tomar
el wind
deer
para
para estilar esto
vale
pa, pa, pa, pa, pa
ponemos así
esto por aquí
vale
const
bla, bla, bla
pressure
yo creo que por ahora
bueno
y el is day
este me parece interesante
así que lo voy a sacar
porque podríamos poner
un solecito
en el caso que sea de día
y
última actualización
bueno
por ahora
yo creo que ya está
yo creo que ya está
toda esta información
la voy a aplanar
local time
luego veremos
si hace falta
mapearla
o algo
humidity
is day
is day
vale
feels
like
vamos a poner aquí
feels like
c
y el temp
temperature
temp c
wind speed
y el wind deer
que es wind deer
uso el camel case
porque me gusta más
el camel case
vale
pero si os gusta más
el otro pues
vale
el coat
el coat es del condition
entonces podríamos poner
condition coat
y condition text
o description
porque es
bueno
vamos a poner text
vale
lo vamos a dejar así
esto por aquí
vamos a cerrar esto por aquí
vale
sensación térmica
sí
el feels like
es la sensación térmica
pero quiero decir
que que
que super precisa
la sensación térmica
que me
me sorprende
porque
no sé
eran
que temperatura hace
15
sensación térmica
15.3
o sea
what
es bastante bestia
vale
entonces
esto es que yo creo que aquí
esto es lo que esperas
esta es la promesa
la que esperas
y luego aquí en el den
yo creo que tienes que poner
si no me equivoco
el valor
o sea
tú esperas la promesa
o sea
este weather
sería weather promise
vale
weather promise
y entonces este es el weather promise
y entonces tienes el weather aquí
que no hubiera estado mal
que me lo hubiera dicho
pero
y este weather
tu tu tu
return
weather promise
pero me sigue saliendo aquí
undefined
que está pasando aquí
no será
no será que no le mola
este weather
¿verdad?
ah bueno
espérate
a ver
a ver
ah claro
es que el undefined
a ver
es que el console lock
es devuelve undefined
lo que tengo que mirar
un momento es aquí
vale
vale
ya lo tengo
ya lo tengo
ya tenemos el condition code
vale
lo que vamos a poner
por ejemplo
para empezar con algo
sería poner aquí
el weather
punto
no punto promise
no
punto condition text
vale
h1
y ya con esto
podemos ir empezando
vale
lo que está renderizando
y hacemos un repaso
de todo esto
¿vale?
vale
hace sol
hace sol directamente
¿vale?
entonces
con todo lo que hemos hecho
vamos a hacer un pequeño recap
¿vale?
pequeño recap
primero
tenemos una parte
que se llama script
donde puedes ejecutar scripts
aquí puedes crear
por ejemplo
variables
por ejemplo
por ejemplo
number
1
y este number
ya lo puedes utilizar
aquí
que esto sería la parte
como del renderizado
y aquí tendríamos la parte
como de los estilos
de hecho
a mí me gusta más
poner script
estilos
y abajo del todo
renderizado
pero bueno
aquí cada uno
que haga lo que quiera
lo puedes cambiar
el orden
lo que quieras
pero ves esta variable
que hemos creado aquí
pues esa variable
la puedes
la puedes poner aquí
¿vale?
puedes poner aquí number
y guardas los cambios
y aquí tengo el 1
y si le pones
que esto es
pues entonces
ves
lo tenemos aquí
perfecto
entonces
esto por un lado
luego
hemos hecho esto
del script aquí
pero ahora veremos
que podemos importar
módulos
podemos hacer
componentes
esto lo podemos sacar
de aquí
pero bueno
para que veas
que se puede hacer
¿no?
entonces aquí
tú tienes esta constante
con las opciones
tenemos aquí esta promesa
y lo interesante
es que esta promesa
la podemos utilizar
en el renderizado
utilizando como
esta
esta etiqueta
await
le podemos decir
espera esta promesa
y cuando tengas esta promesa
entonces
la renderizas así
voy a quitar el number
que ya no lo tengo
y ya está
¿cómo funciona esto del fetch?
en el fetch
le estamos pasando
la dirección
a la que queremos
recuperar los datos
y le pasamos las opciones
del fetch
que en este caso
pues le estamos haciendo
que es un método get
y le pasamos dos headers
el rapid api host
y el aquí
el aquí
esto te lo da
el tema este de
cuando te registran
en rapid api
en el tema este
del test endpoint
ya lo tienes
de hecho
tú tú tú
aquí
¿ves?
lo tienes aquí
pero si no
es que te puedes copiar
directamente
que es lo que he hecho yo
te puedes copiar
todo este código
y ya lo tienes
vale
entonces
lo que he hecho aquí
es que
una vez que hacemos el fetch
esto devuelve una promesa
la transformamos en json
porque sabemos
que la respuesta de la api
es un json
y una vez que tenemos esto
le puedes llamar json
response
data
como tú quieras
vamos a llamarla data
cuando tenemos la data
lo que he hecho
es como extraer la información
que me interesa
para no pasar siempre
el mismo objeto
tocho
estoy haciendo como este
mapeo
estoy transformando la información
y esta es la información
que a priori
es la que me interesa
y esta información
al final
cuando hace la wait
de la promesa
en weather
voy a tener este objeto
con la información
que me interesa
y ya está
entonces
esto es lo primero
primero
que hemos hecho
pero ahora vamos a extraer esto
y vamos a ver
como en svel
puedes utilizar módulos
crear componentes
y todo este tipo de cosas
vale
vas a subir este vivo
lo intentaré
como muestras un loading
mientras carga la promesa
ahora te enseño
¿tú cómo haces ese recuadro
de lupa en la Mac
cuando quieres resaltar
una parte de pantalla?
así
mira, mira, mira
es un tema de accesibilidad
es una cosa del sistema operativo
que se puede configurar muy fácil
este, este, este
si me hubieran dado un euro
cada vez que me han preguntado esto
me quedaría finísimo
vale
pues entonces
como te puedes imaginar
aparte de que puedes poner más rutas
que en este caso
a lo mejor no tengo muchas rutas
pero alguien me había dicho
de poner una ruta esta
dinámica
la podríamos intentar
vamos a crear aquí
en source
un services
weather.js
vale
y vamos a extraer todo esto
para que veas
cómo se pueden importar módulos
vale
pues ya tenemos todo esto
con el options
el weather tal
vamos a hacer un export
del const
de get
weather
from
y vamos a poner aquí
más que city
vamos a poner
query
¿no?
from query
porque al final
ese buenos aires
va a ser una query
que por ahora
lo vamos a dejar
como buenos aires
pero bueno
que estará bien
hacer esto
de esta forma
podemos quitar esto
de aquí
hacemos aquí un return
directamente
y aquí
vamos a utilizar
la query
¿vale?
lo pasamos aquí
como template string
y aquí vamos a poner
que por defecto
por ahora
sea buenos aires
¿vale?
ta ta ta
export const
vamos a transformar
bueno
vamos a dejarlo
con función
export function
¿vale?
devolvemos la promesa
importante
como sé que
os encanta
y si no
os vais a quejar
oye
pero ¿por qué no utilizas
el await?
¿por qué no utilizas
el await?
¿y por qué no utilizas
el await?
porque os conozco
pues venga
vamos a utilizar
el await
¿vale?
para que quede
más a plano
que si no luego
¿pero por qué no utilizas
el await?
ya está
ya he utilizado
el await
vale
ya lo tendríamos
¿vale?
entonces tenemos
el data
await response.json
y aquí transformamos
todo el data
y lo que hacemos
es devolver
esta información
que es la que no interesa
y ahora
para poder llamar
esto lo voy a dejar
aquí fuera
porque la verdad
es que tiene bastante
sentido por ahora
aunque luego
si tuviéramos
post
put
pues ya dejaría
de tener sentido
pero bueno
lo voy a dejar
por ahí
vamos a hacer
fetch options
lo vamos a dejar
como una constante
lo ponemos por aquí
¿vale?
guardo los cambios
y ahora
todo esto
que habíamos hecho
aquí
pues ya no lo necesitamos
de hecho
podemos hacer aquí
import
get weather
from
y esto
lo vamos a traer
de services
weather
y vamos a tener
la constante
del weather
promise
ejecutando
el weather
from
y con esto
no, no funciona
se rompió
get weather
from
vamos a ver
qué es lo que
le ha pasado
qué ha pasado
qué hemos roto
algo me he cargado
algo me he cargado
vamos a ver
la consola
call rip properties
of null
it's not defined
hola
si estás aquí
¿qué he hecho ya?
ah
o sea
sí que estaba funcionando
pero tengo que refrescar
está en beta
se lo vamos a perdonar
que está en beta
entonces
los ficheros
no tienen que ser
todos svelte
no
porque como podemos ver
el
esto solo tiene
javascript
entonces no tiene mucho sentido
¿vale?
así que no
no hay ningún problema
mido hablando de eso
siempre las promesas
son reemplazables
por la sinca wet
o hay casos en los que no
pues la verdad
es que hay casos
en los que no
hay casos en los que no
por ejemplo
a ver
siempre son reemplazables
lo que pasa es que
el cómo lo tienes que hacer
a lo mejor
es diferente
por ejemplo
si tú tienes un punto den
y un catch
y luego
un
finally
¿es reemplazable
por un sinca wet?
sí
pero tendrás que hacer
el try, catch
no sé qué
a diferentes puntos
especialmente
hay veces que puede ser tricky
si tienes esto
porque esto
si tú haces un punto den
y por lo que sea
entras en el catch
¿vale?
hay un error en la promesa
y tú la resuelves aquí
entonces va al punto den
esto es un error muy común
que la gente cree
que una vez que haces un catch
luego va al siguiente catch
también
y no
una vez que tú haces un catch
entonces entra el den
y eso pues a ver
¿se puede hacer con un sinca wet?
pues sí
se puede hacer con un sinca wet
pero
no es tan fácil
como lo que hemos hecho aquí
de pasarlo
y ya está
o sea tiene su historia
tiene su cosilla
vale
entonces
¿no te falta la wet?
no
no me falta la wet
porque aquí la wet
lo hacemos aquí
fíjate
lo hacemos aquí
¿vale?
vale
vamos a ver entonces
más cositas
que podríamos sacar
va
vamos a estilar
vamos a estilar un poquito
no
no
no que vaya a ser yo aquí
la leche
pero de hecho
os voy a enseñar una cosa
que está bastante chula
que es el tema del layout
tú puedes poner aquí un layout
para hacer eso
tienes que poner dos barras bajas
dos guiones bajos
layout.svelte
y fíjate que de repente
me ha desaparecido todo
me ha desaparecido todo
porque el layout
es lo que envuelve a tu aplicación
¿vale?
entonces
como ahora
lo que envuelve nuestra aplicación
es vacío
pues por eso no se ve
para hacer que se vea
tienes que poner el slot
¿vale?
entonces ponemos el slot
y ahora está
digamos
el contenido
pero podríamos hacer esto
que por ejemplo
tenga
pues los estilos globales
y todo este tipo de cosas
así que vamos a poner aquí un style
vamos a poner
creo que es dos puntos global
global
vamos a poner el body
y vamos a poner aquí
por ejemplo
background
vamos a poner
a ver
estoy pensando
vale
vamos a ponerlo así
pero más que ponerlo así
lo que estoy pensando
voy a poner aquí un div
voy a ver si soy capaz de hacer esto
lo que voy a hacer
es
display grid
place content
center
y este div
que no es global
porque el global
es como para estilar una etiqueta
que quieres que sea global
en este caso
lo que queremos
es que el body
el body
tenga el background
oscuro
el display grid
y el place center
vale
y este en cambio
vamos a intentar
que tenga una spread ratio
de 16.9
16.9
max width
del
vamos a ponerle un max width
de 500
width 100%
vale
vamos a poner el border
border radius
no vamos a poner
ya sé lo que vamos a hacer
más o menos
vamos a quitar esto
uy colon is expected
vale
vale
y vamos a
esto
también vamos a poner
que tenga
esto así
vale
ahora sí que lo tenemos
esto bien centrado
y el tema este
vamos a ponerle un borde
un momento
a ver si
vale
hay si
ya había puesto esto
ya había puesto esto
max width
y si le pongo el width
que sea uno fijo
me lo va a hacer bien
y le digo que el max width
vale
y que el max width
sea el 100%
ah claro
es que esto
esto está mal
esto era al revés
ahora
ahora lo entiendo
vale
eso es lo que quería
width
vale
vale
vale
lo que quiero hacer
es básicamente
a ver
que backshadow
me dice esto
bueno
no está mal
no está mal
no está mal
border radius
vamos a poner
8 píxeles
vale
padding
bueno
padding
eso lo haremos después
vale
vale
más o menos
más o menos
es para darle un toquecillo
al tema
eh
si
el aspect ratio
porque esto
lo puedes obtener también
para el tema de imágenes
si va a tener sombritas
y a mi las sombritas
me gustan
lo que no me gustan
son las sombritas
que a veces le ponéis
que os encanta
hacer unas sombritas
muy
muy claras
¿no?
uy
esto es demasiado poco
no sé si ponerla
bastante bestia
le quitamos el borde
vale
vale
más o menos
por ahí van los tiros
¿vale?
sin que se cuele el polvillo
sí
es como un poquito menos
de polvillo
de hecho esto
yo creo que no hace falta
no sé ponerlo
bastante bestia
venga
lo vas a dejar así
y con el background
igual podemos hacer
una cosa así
que quede como
que le dé un poquito
de relieve
sin que se parezca
vale
vale
pues ahora que tenemos esto
eh
vamos a darle
vamos a darle cariño
al tema
vamos a darle un poco
de
de estilillo
eh
vamos a ver
que información tenemos aquí
tendríamos
por ejemplo
bueno
el h1
el h1
h2
vamos a poner el weather
punto
hostia
se ha vuelto ahí
temperature
creo que era
vale
esto aquí tendríamos
tendríamos que hacer
con esto
vale
voy a poner toda la información
que nos interesa
vamos a poner el weather
punto condition
condition
text
creo que era
condition
condition
condition
condition
text
vale
y
vamos a poner
que más teníamos
hostia
wind speed
wind speed
vale
vale
yo creo que con esto
más o menos
vale
este
esto que haya puesto
del font family
y todo esto
esto lo voy a poner
en
en el global
vale
porque tiene más sentido
que no que estén
y así los tendremos
todos igual
perfecto
y ya podemos quitar esto
y ahora aquí sí que lo que podemos hacer
por ejemplo
es el
vamos a utilizar una fuente
vamos a utilizar una fuente
la gordita
vamos a utilizar la gordita
a ver si se puede ver esto
a ver
google phones gordita
a ver
gorditas
no esto no es
esta no es
no está la gordita
no está la fuente gordita
hay una que me encanta
no
esta fuente gordita
bueno pues nada
quería utilizar la gordita
vale
no pasa nada
vamos a intentar hacerlo
con
con esto
400
vamos a poner
color
que sea así
más o menos
igual incluso menos
vamos a poner esto así
esto
vamos a poner la condición
vamos a ponerle aquí también
esta sí que la vamos a poner así
y esta la vamos a poner
text transform uppercase
¿vale?
uppercase
esto
¿cómo era esto?
¿de rotar?
¿así?
¿90 grados?
no
¿90 grados?
¿25 grados?
hostia ¿cómo se rotaba?
no era así
era filter
¿no?
o sea filter
rotate
no
hostia ¿cómo se rotaba el texto?
¿cómo se rota el texto?
cuéntame
decime
transform
eso
eso
transform
rotate
eso
eso
eso
eso
ahí está
ahí está
uh
uh
uh
position
absolute
top
eh
12 pixels
right
12 pixels
casi
vamos a hacer que esto
este edit
tenga un position relative
¿vale?
ojo
ojo
sunny
sunny
vale
este sunny
que había puesto aquí
que había puesto
esto tiene que ser la ciudad
esto tiene que ser el nombre de la ciudad
country
name
esto será el
location name
vamos a poner
para que quede más claro
¿no?
location name
buenos aires
y vamos a hacer que esto
tenga un padding
arriba
de 32
a la derecha
de 0
abajo
de 32
también
bueno
de 16 píxeles
y abajo
y a la izquierda
arriba
derecha
abajo
izquierda
de 16 píxeles
vale
más o menos
vamos con el h2
que es el weather
vamos a ponerle una fuente
bastante grande
esta
prueba la fuente
Montserrat
venga va
vamos a probar la fuente
Montserrat
esto lo quitamos
bueno
no lo quitamos
pero esto sí que lo quitamos
0
0
vale
arriba
derecha
vale
esto es también
que tengo que tener en cuenta
que no tengo
no tengo reset
de CSS
vale
entonces tenéis que poner aquí
el h1
h2
h3
h4
h5
y esto también
en el body
vamos a poner un
claro
ahora sí que eso está bien
y aquí igual margin 0
vale
vale
margin 0
hostia pero el sunny este
se me ha ido al carajo
con el sunny
48
vamos a poner
48
56
vale
luego le damos otro
vistazo a eso
y
vamos a ver esto
porque
vale porque está arriba
el padding
y no lo queremos arriba
de hecho queremos que esté
bastante pecado
arriba
abajo
derecha
padding
arriba
derecha
abajo
que estoy pensando
si poner
todo esto
dentro de un
section
y así le dejamos
los paddings
al section
section
padding
32
hostia
la he liado
vale
y arriba
abajo
vale
mejor
vamos a poner
este font size
más bestia
porque es lo interesante
vale
bueno va pillando
va pillando
que bien
tire de spell
después del pt
que hubo en platzi
que se andaba cayendo
bueno pero haremos uno más
más bestia
así que
lo haremos más
este es como
muy rápido
es más que nada
para empezar
con el tema
de la hackathon
para que pueda ir
sirviendo y tal
vale
ahora lo que
estaría bien
bueno alguien decía
monserrat
igual no estaría mal
pero
lo que
estaría bien
ahora que tenemos
esto
aquí
a este le voy a poner
le voy a poner negrita
esta
un poquito más
no se puede poner
más negrita
vale
y esto
este
arriba
arriba
derecha
abajo
claro es que este
ahora ya no tiene sentido
para que quede así
vale
lo que podemos hacer abajo
esto sería como el section
vale
vale
vamos a hacer un componente
para que veáis
como son los componentes
vamos a hacer un componente
que vaya aquí abajo
con información
vale
luego
se podrían hacer un montón
de historias de
el icono
de hecho el icono
lo podemos hacer fácil
pero vamos a hacer un componente
que abajo
weather
footer
punto svelte
por ejemplo
de hecho esto lo podríamos poner
en la carpeta
components
vamos a poner
components
weather footer
svelte
y aquí
vamos a hacer un footer
que tenga
así
muy interesante
aquí inventando cosas
con el style
vamos a ver esto
por aquí
hostia
me lo mueve
arriba
o sea que en realidad
aquí
hostia si
lo mueve arriba
que cabrón
o sea que yo
me puedo
o sea
que el orden
que te recomiendas
es arriba el script
en mitad el renderizado
y abajo el estilo
ojo
ojo
no tengo ni idea
la verdad
borde
dos pixels
solid
vale
vamos a ponerlo así
negrito
y aquí vamos a tener
por ejemplo
me voy a inventar
ahora mismo los números
porque no es importante
pero luego los arreglamos
tendríamos por un lado
tendríamos
humedad
33%
y span
humidity
bueno no sé
cómo es inglés
humidity
vale
¿qué más teníamos?
si es de día
la temperatura
ah
el viento
el viento
el viento sí que es interesante
vale
pues esto
también este dip
aquí
solo que aquí
tendríamos el wind
speed
¿no?
y aquí le vamos a poner
no sé
12 kilómetros
12 kilómetros
la hora
y no sé
qué más tenía
el weather
este
local time
country
humidity
si es de día o no
el tiempo
que se siente
bueno pues
feels like
vamos a poner feels like
por poner algo
feels like
luego esto
podéis hacer
lo que os dé la gana
feels like
y vamos a poner
que
bueno
12 grados
vale
perfecto
entonces
esto sería un componente
en svelte
¿vale?
ahora
para que
para poder utilizar esto
lo único que tenemos que hacer
es importarlo
import
le puedes poner el nombre
que te dé la gana
weather
footer
porque fíjate que ni siquiera
le hemos dicho el nombre
del componente
así que vamos a importarlo
punto punto
components
barra
weather
footer
punto svelte
y ahora este componente
lo puedes utilizar
donde quiera
lo podemos
por ejemplo aquí
¿vale?
ya lo tenemos aquí
obviamente
bastante
bastante horrible
vamos a poner
que esto tenga
un padding
de 32 píxeles
bueno
más que padding
un width
del 80%
no
menos
del 90%
¡ah!
ostras
es que los paddings
me están jodiendo
con los bordes
con el ancho
porque
no tenemos
el global
el border box
la madre que lo trajo
eh
after
most container
single selector
pues
antes no se ha quejado
ah vale
box size
in border box
vale
vale vale vale
max
vale
ahora
ahora sí
ahora sí
vale
margin
0 auto
border
radius
vamos a poner
10 pixels
esto vamos a tener que ser
un display flex
perfecto
text align center
vale
vale
y el span
cada uno de los span
con el display block
para que quede uno debajo el otro
vale
y vamos a hacer que esto tenga
hostia
siempre
vale
más o menos
más o menos
vamos a hacer que tenga
es que le he puesto aquí un padding
brutal
por arriba y por abajo
igual menos
igual más
vale
vale
ahora sí
vale
ahora sí
de hecho
estoy pensando que
estos segundos que son spam
vamos a poner que sean strong
porque tiene sentido
porque es la información que nos interesa
vale
solo que le vamos a bajar un poquito el strong
vamos a ponerle un color así un poquito
un poquito más fino
vale
y todo esto nos lo vamos a llevar para abajo
position
bottom 0
right 0
y bottom 0
32 pixels
bueno
uff
bueno es que no está mal
el keback case en nombres de ficheros
me da un poco de talk
pues el keback case en nombres de ficheros
tiene más sentido que cualquier otro
el keback case
entiendo que te da talk
porque a mí también me lo da
pero en nombres de ficheros
tiene todo el sentido del mundo
y tiene todo el sentido del mundo
porque al final lo que quieras
o sea lo que quieres
es que te funcione cualquier sistema
y aunque te equivoques
porque mira
te lo voy a explicar
si tú aquí tienes esto
imagínate que yo me invento aquí un nombre
que es
así ¿no?
weather
footer
punto es verde
esto es un pascal case
por decir aún una cosa ¿no?
y tú luego lo importas
aquí
así
import
footer
por decir algo
components
barra
weather footer
es verde
cuando tú haces así
bien
cuando haces así
normalmente
te va a funcionar
en algunos sistemas operativos
y en otros no
en aquellos sistemas operativos
que sean case sensitive
pues te va a petar
y al final
te vas a dar cuenta
demasiado tarde
te vas a dar cuenta
en continuous integration
y cosas así
porque en continuous integration
normalmente se utiliza Linux
que sí que es case sensitive
y en
macOS
por ejemplo
no es
es insensitive
o sea le da igual
que sea mayúsculas o minúsculas
entonces
la verdad
lo cierto
es que en archivo
normalmente
es bastante buena idea
utilizar
kebab case
o
si no es kebab case
snake case
y cosas así
y utilizar siempre lower case
ese es el tema
ese es el tema
en Windows
no es case sensitive
tienes razón
ya me ha pasado
no
ya te digo yo
que te ha pasado a ti
y a todo el mundo
porque son años
y te puede
y al final
te puede costar mucho
darte cuenta del error
que es lo peor
cuando no te das cuenta del error
y estás ahí rato
dices
ostras
pero por qué
no lo encuentra
que no sé qué
eso es lo que es un poco rollo
¿sabes?
eso es lo que es realmente
un verdadero rollo
vale
vale
14 pixels
bueno
va tomando forma
hostia
que son
y media
hay forma de tener
más de un layout
puedes tener más de un layout
por rutas
y cosas así
con puntos también puede ser
sí sí
se puede hacer
se puede hacer
midu
chequea los endpoints
bueno
ya que queréis
que hagamos los endpoints
vamos a hacer los endpoints
que no lo he hecho
pero básicamente
podéis hacer aquí
en source
podéis crear una carpeta
que sea api
api 1
podéis hacer api
api
y aquí
podéis escribir una
que
quita midu
no veo
ah hostia
es verdad
que no veis
que no veis
todo lo que he estado haciendo
no veis
la pedazo de
mira
que he hecho ahí abajo
que estaba haciendo eso
ahí
que no lo habéis visto
estaba dejando ahí
súper bonito
y no habéis dicho nada
me agacho
me agacho
perdonad
perdonad
sí sí
que no se estaba viendo
bueno bueno
vale
vamos a hacer
me quedan unos minutos
vamos a hacer
para explicaros
en la hackathon
qué hay que hacer
y cómo hay que hacerlo
está medio cálido
en buenos aires
por lo visto
sí
y os explicaré
los premios que hay
y todo esto
vale
hacemos lo de los endpoints
por ejemplo
podéis tener aquí
endpoints
podéis poner por ejemplo
wetweather.js
no me acuerdo
cómo es esto
exactamente
export
a ver si me lo dice esto
no
bueno
pues vamos a
vamos a buscarlos
es velkitapi
endpoints
es que no me acuerdo
cómo es
ah sí
ahora me he acordado
ahora me he acordado
tenía que exportar
creo que
creo que
el get
no
get
sí
creo que es un export function
get
me he acordado
export function get
tú aquí lo puedes
lo que puedes tener
sería un export function
post
put
patch
deal
o delete
es que delete
delete
no se puede
claro
delete es una palabra reservada
no puedes utilizar delete
ves
es una palabra
que no se esperaba ahí
pero aquí puedes utilizar
post
patch
get
del
puedes utilizar todas estas
y entonces lo que estás haciendo
es que este endpoint
pueda responder
por esas acciones
del método
puedes utilizar la de get
tenemos aquí
el event
y si no recuerdo mal
aquí lo que habría que devolver
sería por ejemplo
un status
status
o un code
no recuerdo
creo que es status
no sé por qué se ha detachado
pero creo que es status
a ver qué nos pone aquí
status
entonces le vamos a decir
un status 200
y un body
de qué es lo que queremos
que devuelva la respuesta
en el cuerpo
por ejemplo
imaginar que me invento esto
vamos a poner
que me devuelva esto
vale
el event este ahora mismo
no es muy útil
así que le vamos a poner
un console.lo
para que lo veamos
y si yo ahora
intento utilizar esta API
para poder utilizarla
tendrías que irte
al localhost 3000
barra API
barra
get weather
y al darle enter
pues me peta
me peta
pero porque me peta
que he hecho mal
algo he hecho mal
que no le ha gustado
está en el puerto 3000
¿verdad?
sí
API
get weather
y le he puesto
tu tu tu tu tu
get weather
lo he escrito bien
¿verdad?
ah
perdonad
es que creo
es que es dentro de rutas
¿vale?
es que lo he dejado dentro de source
y esto tiene que estar dentro
de las rutas
porque al final
los endpoints de la API
también son rutas
entonces de rutas
puedes tener componentes
de sbelt
pero para la API
tienes que tener la carpeta API
y dentro .js
sin ningún problema
y ya está
y entiendo que ahora sí
¿ves?
ahora sí
entonces con esto
con esto que hemos hecho
tan fácil
puedes crear tus propios
tus propios endpoints
así que
esto nos puede servir
por ejemplo
para
esto que habíamos hecho aquí
este servicio
recordáis que habíamos hecho aquí
este servicio
a ver
este servicio está bien
pero tenemos aquí
toda la información
y aquí puedes verla
cuando hagamos aquí la request
de hecho lo voy a enseñar
¿vale?
si hacemos aquí la request
voy a tirar
voy a poner esto abajo
¿vale?
aquí
y miramos en la red
y miramos la request
aquí se puede ver
toda la información
de la request
desde el objeto
que me está devolviendo
de más
sin necesidad
si vemos aquí todo el objeto
¿ves?
tengo toda la información
del objeto
y luego
si miramos
el encabezado
vamos a ver aquí también
las api keys
¿ves?
bueno no sé si lo ves
pero es que
está difícil
está difícil verlo
pero bueno
que se ve
justo ahí
se ve la api key
y toda la información
de la cabecera
que no se debería ver
¿vale?
entonces
lo que tenemos que hacer
para evitar esto
o lo que podemos hacer
para evitar esto
sería sacar esa información
sacar este
fetch options
y todo esto
y llevárnoslo
a nuestro endpoint
de forma que
vamos a hacer
aquí
esto
lo copiamos aquí
esto
lo quitamos de aquí
y es este fetch
en lugar de hacer
toda esta petición
lo que podemos hacer
ah mira
también el query
también lo podemos
seguir utilizando
podemos decirle
barra
api
barra
get weather
¿vale?
le vamos a dejar
este
esperad que me voy a copiar
me voy a copiar esto
y ahora continuo
vamos a dejar
la q
que es la query
este fetch options
ya no es necesario
porque no tenemos que pasarle
ninguna cabecera
ni nada raro
¿vale?
esto lo simplificamos bastante
de hecho
esto también lo podemos hacer
de hecho
lo vamos a hacer
¿vale?
hacemos aquí el fetch
esto lo pasamos a sync
aquí tendríamos la respuesta
vamos a transformar
todo esto
todo esto que estamos
haciendo antes
lo vamos a poner aquí
sí
vamos a poner aquí
aquí tendríamos la data
bueno
aquí data
pero aquí sí que
necesitamos hacer esto
es json
de hecho podemos hacer
el return directamente
y ya está
¿vale?
transformándolo en un json
y ya está
hacemos la petición
a nuestra api
y lo que nos responde
nos responde la api
lo devolvemos como un json
y en nuestra api
lo que vamos a hacer
hostia
cuánto undefine aquí
porque todavía no he hecho esto
lo que vamos a hacer
es transformar
de la respuesta
que estamos haciendo
a la api
lo que devolvemos aquí
esto
en lugar de devolverlo
lo creamos como body
lo vamos a enviar aquí
guardamos los cambios
y peta
peta
porque la query
no la estamos
no estamos viendo
la query
¿no?
para la query
si no recuerdo mal
esto debería ser
.params
o lo que sea
a ver
vent
parámetro
any
si no podemos poner
¿ves?
este es el típico momento
en el que
TypeScript te salva la vida
¿por qué?
porque ahí puedes ver
fácilmente
qué es lo que tiene
la cosa esta
bueno, bueno
aquí lo tenemos
tendríamos
del evento
tendríamos la request
y en la request
podríamos recuperar
los parámetros
en este caso
no tenemos parámetros
porque no le he pasado nada
pero aquí podríamos poner
Q
Buenos Aires
por ejemplo
¿vale?
query is not defined
porque me está petando
porque la query
que estamos utilizando
no está definida
¿ves?
esta query no está definida
vamos a poner por ahora
query
Buenos Aires
para que no
para que deje de petar
¿vale?
y de hecho ves
ahora me está funcionando
todo correctamente
pero lo que me gustaría
es que busque
la que yo le paso
no la que
no siempre
Buenos Aires
así que para eso
tendríamos que sacar
los parámetros
de la request
¿no?
de la URL
de la URL
¿ves?
tenemos aquí
search params
entonces
tenemos un objeto especial
esto es de la plataforma web
lo cual lo hace
bastante interesante
de la venta
del evento
tenemos URL
y de la URL
los search params
vamos a sacar
los search params
del event URL
¿vale?
URL
search params
y ahora
para la query
podemos hacer
search params
punto get
la Q
la Q
porque es como
se lo estamos informando
aquí en aquí
¿vale?
venga
pues nos vamos
para aquí
ya tenemos la query
aquí incluso
podríamos hacer
que si no tiene
query
que sea
Buenos Aires
y ahora
si pongo aquí
Barcelona
¿ves?
me está haciendo
la petición correcta
hacia Barcelona
y me está recuperando
la información de Barcelona
o sea que ahora
sé que está funcionando
bien la Q
vamos a ver que funcione bien
sin utilizar ningún parámetro
pero que si le pasamos
el parámetro
como
el Prat
de Jobregat
que es mi pueblo
pues podemos ver
que sí que funciona
correctamente
bueno
súper interesante
hemos hecho un endpoint
en un momentito
¿qué os parece?
hace rato
te pregunté
si Svelte
soporta TypeScript
pues a ver
aparte que le acabo de decir
también
desde el principio
hemos visto que se podía
lo que pasa es que yo
he elegido
no hacerlo con TypeScript
porque si no
tendría que poner
más que aplicar TypeScript
a la vez que hago
el proyecto
y Svelte
entonces es un poco rollo
vale
ahora que tenemos esto
una
una cosa que se puede hacer
que no está mal
a ver
se pueden hacer
unas cuantas cosas
pero tampoco me quiero
liar mucho
con el proyecto
creo que hay unos
iconos
a ver
weather
icons
no
two colors
no
estos
estos iconos
download now
a ver si hay un CDN
o algo
o se puedan instalar
o algo
porque estos iconos
que veis aquí
que son muy fáciles de usar
porque al final
son como fuentes
una cosa muy interesante
que tiene
es que
ves este número
este número de aquí
este número que hay aquí
corresponde
con el código
que hay aquí
con el código
que hemos recuperado
aquí
este condition code
este condition code
lo podríamos utilizar
para mostrar un iconito
de hecho lo vamos a hacer aquí
weather punto
condition code
vale
vale
ahí sale mil
y si buscamos aquí
debería tener
pues no
aquí no hay ningún mil
pensaba que habría un mil
a ver si es que la API
me lo está devolviendo mal
API
get weather
weather
los aires
condition code
mil
pues pensaba
que
si que
que
iba a encajar
porque si no
lo que hay que hacer
entonces es mapear
cada uno de ellos
a ver si sale por aquí
el weather API
weather
es que ese condition code
como se utiliza mucho
mira
built in API compatibility
open weather maps
yahoo weather
build the list of
API mappings
mappings
a ver
si sale el mil
pues no sale el mil
ahora tengo dudas
si es que he utilizado mal
el
sabes si he recuperado mal
el condition code
no pero aquí pone
code mil
pero ves
aquí sale 113
que rata
hostia es que tiene un icono
aquí hay un icono
pues bueno
vamos a recuperar el icono
directamente y ya está
pero fíjate que ahí utiliza el 113
son unas ratas
porque el 113 me parece a mi
que si que tiene sentido
el 113
al final se podría hacer una regex
para sacarlo
pero el 113
ah pues tampoco
tampoco está el 113 aquí
ya me extraña
que raro
normalmente esos códigos
son justamente para esto
o sea que habría que hacer un mapping
a mano
un poco rollo
o se podría buscar seguro
que el weatherapi.com
en algún sitio te explica
te explica esto
pero bueno
pues vamos a hacer esto
vamos a traernos este
en lugar del condition code
pues nada
condition icon
condition icon
vale
nos traemos el icon
y este icon
condition icon
obviamente esto ahora es una
sería esto
vamos a poner aquí el source
hay una cosa que no he enseñado
que es bastante importante
así que lo voy a enseñar ahora
vale
ojo
ojo
vamos a ver cómo son las props
porque no lo hemos visto
y las props lo necesitan
todos los proyectos del mundo
vale
entonces
para hacer props
es súper fácil
aunque es verdad
que puede ser un poco
intuitivo
no muy intuitivo
vamos a poner aquí
por ejemplo
el weathericon.svelte
y vamos a hacer que esto
lo vamos a
renderizar aquí
y además
lo bueno es que le vamos a poner
unos estilos
de la imagen
para hacerla más grande
y bla bla bla
vale
el tema
es que queremos
que este condition icon
le venga por props
¿cómo podemos hacer esto?
bueno
lo primero obviamente
sería importar el weather icon
from
components
weather icon
y este weather icon
esto sería el componente
esto hasta aquí
bien
para pasarle una prop
es muy parecido
a como
pero bueno
ves que ahora no funciona
pero para pasarle una prop
es muy parecido
como lo hacemos en React
o sea
sería ponerle como
la prop
atributo
abrimos llaves
y le pasamos el weather
condition icon
hasta aquí esta parte
bien
o sea
esta parte sí que está bien
porque es así
pero ¿qué pasa
con la otra parte?
la otra parte
de cómo
le indico
las props
que tienen que recibir
ah
he quitado el weather
text
¿cómo?
por el short
quitaste el weather text
hostia
pues ahora no sé
el weather text
bueno
el tema es
¿cómo aquí
le paso las props?
pues para ello
necesitas añadir el script
y tienes que hacer
una cosa un poco rara
que es poner
export
let
y el nombre
de la prop
tiene sentido
en el sentido
de que
bueno
le he llamado icon
no condition icon
así que icon
¿vale?
tiene sentido
en el sentido
de que es exportar
pero es raro
porque no estás exportando
un módulo
ni nada
ni una variable
realmente
sino que es una forma
de indicar
¿no?
que al final
estamos
estamos como
dejando abierta
la posibilidad
de que te pasen
una prop
pero es así
export
let
icon
y además
le puedes poner
un valor
por defecto
así
súper fácil
pero verdad
que es una
de estas cosas
que a veces
tiene
Svelte
que son un poco
pero bueno
se entiende fácil
pero raro
¿no?
porque
normalmente
cuando exportamos
es que estamos
exportando
información nuestra
no que estamos
permitiendo
que desde fuera
nos venga
información
se puede pasar
un objeto
como prop
por supuesto
sin ningún problema
de hecho hay una cosa
muy chula
que tiene Svelte
que puedes pasar
un objeto
así
o sea
en lugar de hacer
el weather
igual a weather
esto es lo que haces
en React
en Svelte
de hecho si guardo
me lo va a cambiar
ya verás
voy a guardar
pum
¿has visto?
de esta forma lo que haces
es pasar este objeto
y por lo tanto
si yo hago
un export let weather
y hago un console lock
del weather
entonces vamos a ver
que tengo
en la consola
tengo el objeto
y este objeto
que ves aquí
es este console lock
que he hecho aquí
es bastante
bastante genial
ojalá esto lo pusieran
me encantaría
que lo pusieran
en React
pero esto sí que está complicado
que lo pongan en React
la verdad
está un poco complicado
entonces
eso es top
eso está muy chulo
export no reservado
bueno pero al final
aunque es reservado
lo están utilizando
de forma nativa
se supone
entonces no
en ese caso
no hay ningún problema
podríamos poner aquí
el text
vamos a quitar esto
también puedes utilizar
por supuesto
puedes esparcir
como todos los
todas las propiedades
a ver esto
puedes hacer esto
y esto lo que hace
es pasar
todas las propiedades
del objeto
pero para poder utilizarlas
tienes que hacer
un export
export export export
¿sabes?
para que lo tengas en cuenta
pero siempre que podáis
yo intentaría
hacerlo más
así
condition text
vale
y ya está
hostia si me he cargado
el condition text
vale ahora
ahora he visto
el undefined
condition icon
condition text
y esto sería el text
y esto sería el text
vale
ya está
ahí lo tenemos
vale
y entonces ahora
pues nada
ya podríamos estilar aquí
esto un poco más
los iconos son horribles
son bastante horribles
a ver
más cosas
que se podrían hacer
y solo para
para que lo hagamos
rápidamente
a ver que hora es
porque a ver
os tengo que comentar
todavía
a ver
os quería enseñar
cómo hacer un estado
global
os quería enseñar
cómo hacer un estado
global
pero
tendría que crear
la store
no es muy difícil
no es muy difícil
a ver
hago la store
os enseño el estado
global
o queréis que os explique
lo de la hackathon
vosotros decís
no hay redax
Svelte tiene su
tarea para la casa
vale
es que
para la hackathon
vale
es que estaría bonito
porque de esta forma
el fondo
lo que quería es que
se pusiera de un color
se pusiera de un color
dependiendo
sin necesidad de pasarle
como el parámetro
y tal
y en el layout
podríamos haber recuperado
la información
de cuál era
la
claro
cuál es
la temperatura
para hacer el tema
del color
si es de día o es de noche
y este tipo de cosas
estado global
sería el reto
bueno
puede ser
bueno
pues vale
que quede tarea
vale
bueno
haremos un curso
igualmente
haremos un curso
de Svelte
en condiciones
hoy ha sido
bueno
primero porque me apetecía
porque hacía tiempo
que no hacía Svelte
y quiero volver a
empezar a hacer
y tal
y lo segundo
porque bueno
así lo veis
y os va
sonando y tal
y
sí
que
sí
y