SW 2023-05-17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- API = Application Programming Interface
    para nos provarmos autorizados a fazer pedidos à API
    teremos que identificar-nos através de uma string
    que teremos que obter,
    => https://home.openweathermap.org/api_keys <=
    que se diz "a nossa API key"

    -->
    <!--
    Técnica AJAX
    é uma solução para criar pedido entre
    um "cliente"
    e um "servidor", disponível num
    qualquer endereço em rede.
    O pedido, tipicamente, é feito "assincronamente",
    o que é significa que é "não bloqueante",
    o que signifca que, por exemplo, numa seq
    de instruções JS, o código não fica parada não
    instrução que executa o pedido (segue para as instruções
    seguintes).
    Mas podemos escolher pedidos bloqueantes.

    i1;
    valor = i2(); -> imaginar que a i2 é async
    // se i2 for async, avançamos para i3
    // sem garantia de terminação de i2
    i3; // não podemos garantir que valor exista

    Como lidar com código async?
    Uma solução comum é usar o conceito de "callback"

    -->
    <title>Técnica AJAX - aplicada a openweathermap.org</title>
    <script src="am_ajax.js"></script>
    <script src="am_util.js"></script>
    <script src="1.js"></script>
</head>
<body>
<form id="idFormOWM">
    <label for="idLocations">Localizações pré-definidas:</label>
    <select id="idLocations">
        <option>Portugal,Santarém</option>
        <option>Itália,San Marino</option>
        <option>Portugal,Lisbon</option>
    </select>
    <input type="submit" value="obter info">
</form>
<hr>
<section id="idSectionResponse">

</section>
</body>
</html>

**********************

function ajaxGet(
    pUrlApiEndpoint, // https://openweathermap.org/api/s1
    pWhereToWriteTheResponse, // objeto onde escrever a resposta, quando chegar
    pDoAsync=true
){
    var req = new XMLHttpRequest()

    if(req){
        req.open(
            "GET",
            pUrlApiEndpoint,//destino
            pDoAsync
        )

        /*
        o pedido passa por estágios
        de "maturidade"
        1 - emitido
        2 - recebido
        3 - resposta sendo preparada
        4 - resposta pronta

        no código abaixo
        "maturityHandler" é o nome de uma
        função JS que será
        AUTOMATICAMENTE chamada
        sempre que houver mudança
        no estado de maturidade

        (representada em readyState)
         */
        req.onreadystatechange = maturityHandler

        // prototipagem (prop criada agora)
        req.oWhereToWriteTheResp = pWhereToWriteTheResponse

        req.send(null)

        return true
    }//if
    return false
}//ajaxGet

function ajaxPost(
    pUrl,
    pForm, // representa uma form
    pWhereToReply,
    pAsync
){
    var req = new XMLHttpRequest()
    if(req){
        req.open(
            "POST",
            pUrl,
            pAsync
        )
        req.oWhereToWriteTheResp = pWhereToReply
        req.onreadystatechange = maturityHandler

        var theData = new FormData(pForm)
        req.send(theData)

        return true
    }
    return false
}//ajaxPost

function maturityHandler(){
    //this representa o pedido
    //permite acesso a todas as props nativas (como readyState)
    //e outras, que tenhamos acrescentado
    //por conveniência, por prototipagem
    var bRequestReady = this.readyState===4 // && this.code===200
    if(bRequestReady){
        //apenas e tão somente quando o pedido estar totalmente pronto
        //veremos a resposta
        var theResponse = this.responseText
        this.oWhereToWriteTheResp.innerHTML = theResponse

        //escrever esta function em cada projeto específico
        processResponse(theResponse)
    }
    //enquanto o pedido não estiver pronto, aparece o output do código abaixo
    else{
        this.oWhereToWriteTheResp.innerHTML = ""+
        `request current state: ${this.readyState}`
    }
}//maturityHandler

************************

//1.js
window.onload = boot

//https://home.openweathermap.org/api_keys
MY_KEY = "A TUA API KEY AQUI"

/*
q=Lisboa,Portugal
appid=MY_KEY
 */

const OWMAP_BASE_URL =
    "https://api.openweathermap.org/data/2.5/weather?"

function buildRequest(
    pLocal,
    pApiKey=MY_KEY
){
    var strLocal = encodeURIComponent(pLocal)
    var strReq = `${OWMAP_BASE_URL}q=${strLocal}&appid=${pApiKey}`
    return strReq
}//buildRequest


const ID_FORM_OWM = "idFormOWM",
    ID_LOCATIONS = "idLocations",
    ID_SECTION_RESPONSE = "idSectionResponse"
var oFormOWM, oLocations, oSectionResponse;

function boot(){
    oFormOWM = id(ID_FORM_OWM)
    oLocations = id(ID_LOCATIONS)
    oSectionResponse = id(ID_SECTION_RESPONSE)

    oFormOWM.onsubmit = goGetResponse
}//boot

function goGetResponse_v1(){
    //window.alert("hello")
    var url = buildRequest(
        oLocations.value,
        MY_KEY
    )
    oSectionResponse.innerHTML = url
    return false
}

function processResponse(pR){
    //como processar a resposta
    oResponse = JSON.parse(pR)
    var latitude = oResponse['coord']['lat']
    window.alert(latitude)
}//processResponse

function goGetResponse(){
    var url = buildRequest(
        oLocations.value,
        MY_KEY
    )
    ajaxGet(
        url,
        oSectionResponse,
        true
    )
    return false
}