search

Fictizia / Curso-JS-para-desarrolladores-web_ed5

FICTIZIA » Curso de JavaScript para desarrolladores web — 5ª Edición
4 stars 11 forks source link

Proyecto (Nasa/Smithsonian) de NoemiMS #5

Open UlisesGascon opened 8 years ago

UlisesGascon commented 8 years ago

Hola @NoemiMS

Puedes abrir un repositorio nuevo en GitHub para trabajar en el proyecto.

Sobre lo que hablamos del proyecto... he podido investigar un poco. Te comparto algunos recursos y enlaces útiles.

NASA

La Nasa tiene muchísimas cosas disponibles:

Algunas cosas me han llamado mucho la atención:

Tienen mucha información disponible, incluyendo visitas, tienda, horarios de apertura, etc....

Un abrazo!

NoemiMS commented 8 years ago

Hola!!!!

Gracias por los recursos!

Creo que me voy a quedar con las APIs de Astronomy Picture of the Day y Mars Rover Photos.

Tengo una duda sobre la wikipedia, he leído que como tal no tiene api, pero si se quiere obtener datos de ella, se debe usar esta. ¿Podríamos hacer un mix? :)

¡Gracias!

UlisesGascon commented 8 years ago

Hola! Esa es la API por el momento... siguen trabajando en ella, y aún no esta del todo terminada... pero es bastante funcional. La documentación es algo confusa, pero esta API permite recuperar muchísima información :-)

El lunes en clase veremos como mezclar diversas APIs.

Buen finde!

NoemiMS commented 8 years ago

Hola Ulises!!!

Ya he terminado el proyecto, he usado las APIs de la NASA para ver la foto del día y fotos de Marte, pero tengo un problema, y es que en local me funciona la llamada a la última API pero cuando lo subo a mi dominio, deja de cargarse y me da el siguiente error en consola:

"XMLHttpRequest cannot load https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=HwoYeicxD7xs6igwFnRxASPVjqtwhOWf4VqcD1pO. The 'Access-Control-Allow-Origin' header contains the invalid value 'null'. Origin 'http://noemimedina.com' is therefore not allowed access."

El repo del proyecto es este: https://github.com/NoemiMS/Proyecto-Final-Curso-JS-Fictizia-2016

Y la url donde lo tengo subido es: http://noemimedina.com/projects/AcrossTheUniverse/

Lo curioso es que en mi móvil si puedo verlo online, así como en otros pcs... WHAAAAT????

¡Gracias!

UlisesGascon commented 8 years ago

Wooow! Woow!

Me encanta, especialmente como has resuelto las peticiones AJAX, separando la manipulación del DOM en una función. Muy elegante!

El fondo animado es un puntazo!

He estado revisando el código, creo que es un tema de Backend, seguramente tengan algún desajuste cuando la petición se realiza desde dispositivos específicos. Por lo que veo en la cabecera... la cosa pinta bien y no debería de dar problemas.

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:http://noemimedina.com
Access-Control-Max-Age:1728000

De todas formas si quieres evitar problemas de CORS... igual es un buen momento para "expandir el conocimiento" hacia Node e investigar como servir una web estática enriquecida con datos de otros. Pero cuidado con la sobreexposición a la iocaina ;-)

Ya puedes estar orgullosa! Es un gran proyecto :+1:

NoemiMS commented 8 years ago

Holaaaaaaaa otra vez!!!!!

He seguido haciendo algunas cosillas, y he descubierto un problemilla, quise que la API de las fotos de los robots de Marte no pintara siempre la misma foto, así que calculaba la fecha de hoy y le restaba un día... La historia es que no siempre hay fotos del día anterior, como pasa hoy:

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=2016-05-11&api_key=HwoYeicxD7xs6igwFnRxASPVjqtwhOWf4VqcD1pO

Se me ocurren dos formas de solucionar esto, y es:

  1. Viendo si la api me devuelve un error, y si es así, pintar un aviso de "Hoy no hay fotos disponibles" (no sé como hacer esa casuística)
  2. Viendo si hay error, y si lo hay, hacer de nuevo la llamada a la api con otra fecha (fija esta vez, para asegurarnos de que hay fotos) y que ya la pinte.

¿Qué sería lo mejor?

UlisesGascon commented 8 years ago

Hola de nuevo! :)

La manera más sencilla de resolver esto es usando una función recursiva (que se llama a si misma).

Veamos algunas cosas que nos pueden ayudar a simplificar el código. Antes de meter nueva lógica.

Por un lado tenemos la manera de obtener la fecha en el formato que deseamos (YYYY-MM-DD).

var yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
var dd = yesterday.getDate();
var mm = yesterday.getMonth()+1;
var yyyy = yesterday.getFullYear();

if(dd<10) {
    dd='0'+dd
}

if(mm<10) {
    mm='0'+mm
}

var currentDate = yyyy+'-'+mm+'-'+dd;

Podríamos sustituir mucho de ello si trabajaremos en formato ISO. Dejemos que haga JavaScript el trabajo por nosotros.

var date = new Date(); // La fecha de ahora mismo
var currentDate = date.toISOString().slice(0,10); // Casi lo tenemos solo necesitamos limpiar la fecha de "2016-05-15T08:04:51.620Z" a  "2016-05-15" con slice.

El siguiente paso es hacer nuestra llamada AJAX para ver si tenemos o no tenemos fotos. Los días que no tenemos foto la respuesta es {"errors":"No Photos Found"} con un código 400 y los días que tenemos es {"photos":[..]} con un código 200.

Entonces al terminar la llamada AJAX vemos si tenemos errors del tipo No Photos Found o no, es importante hacer esta diferenciación porque esta parte de la función gestiona todos los errores que se pueden producir y que no son solo este.

Si no tenemos... modificamos la fecha... y lanzamos de nuevo la función tantas veces como fuera necesario hasta que salgamos del error y tengamos las fotos... es parecido a un bucle while pero con funciones ;-)


nasaRequest("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=" + currentDate +  "&api_key=" + apiKey, "marsRovers");

function nasaRequest(url,container) {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState === 4) {
            if (xmlHttp.status >= 100 && xmlHttp.status <= 300) {
                var datos = JSON.parse(xmlHttp.responseText);
                pushToHTML(datos,container);
            } else if (xmlHttp.status >= 400 && xmlHttp.status <= 600) {
                // No hay fotos. Volvemos a pedirlo para un día antes.
                if(datos.errors === "No Photos Found") {
                    console.log("buscando fotos anteriores...")
                    date.setDate(date.getDate()-1); // Ayer
                    currentDate = date.toISOString().slice(0,10); // Formato YYYY-MM-DD
                    nasaRequest("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=" + currentDate +  "&api_key=" + apiKey, "marsRovers"); // Llamamos de nuevo a la función
                } else {
                // Estilos
                document.getElementById("row-contenido").innerHTML = '<img src="http://www.404notfound.fr/assets/images/pages/img/androiddev101.jpg">';

                var datos = JSON.parse(xmlHttp.responseText);
                console.error("ERROR! 404", datos);

                }

            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send();
}

Creo que esto podría resolver el problema :)

NoemiMS commented 8 years ago

Muchas gracias Ulises!!!!!

La fecha la hice así porque tenía que sacar la fecha del día anterior para asegurarme de que hubiera foto ya subida : )

De todos modos me he dado cuenta de que hay muchos días en los que no hay foto y no encuentro mucha más info sobre cómo saber si habrá o no foto, de manera que he optado por llamar a la API con el "día marciano" (por soles, vaya). Así cada vez que recarguemos tendremos una foto distinta de Marte.

Y ya por último he hecho que cuando haya fotos, las pinte y si no, muestre una imagen fija (sigo con eso, hay una clase que no me pinta, jajajaja).

Muchísimas gracias de nuevo :)