CN 2022-05-13

<!-- ex_owm.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de pedido a openweathermap.org</title>
    <script src="ex_owm.js"></script>
</head>
<body>
    <h1>Fazer pedido a openweathermap.org</h1>
    <form>
        <label for="idLocal">Indique a localização: </label>
        <input type="text"
               id="idLocal"
               placeholder="cidade, País">
        <br>
        <select id="idSelectPredefinedLocals">
            <option>Santarém, Portugal</option>
            <option>Lisboa, Portugal</option>
            <option selected>Santiago do Chile, Chile</option>
        </select>
        <input type="button"
               id="idBtnFazerPedido"
               value="Fazer pedido">
    </form>
    <hr>
    <section id="idSectionFeedback"></section>
</body>
</html>

***********************+

//ex_owm.js
window.onload = boot

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

const ID_LOCAL ="idLocal",
    ID_SELECT_PRE_DEFINED_LOCALS = "idSelectPredefinedLocals",
    ID_BTN_FAZER_PEDIDO = "idBtnFazerPedido",
    ID_SECTION_FEEDBACK = "idSectionFeedback"

var oLocal, oSelectPredefinedLocals, oBtnFazerPedido, oSectionFeedback

function id(pId){return document.getElementById(pId)}

function boot(){
    //assocs
    oLocal = id(ID_LOCAL)
    oSelectPredefinedLocals = id(ID_SELECT_PRE_DEFINED_LOCALS)
    oBtnFazerPedido = id(ID_BTN_FAZER_PEDIDO)
    oSectionFeedback = id(ID_SECTION_FEEDBACK)

    //behaviors
    oBtnFazerPedido.onclick = obterRespostaOWM
}

/*
clientes de API
síncronos?
assíncronos?
XMLHttpRequest
GET
POST => FormData
 */
function buildRequestUrl(
    pLocal,
    pApiKey=MY_KEY
){
    var strLocal = encodeURIComponent(pLocal)
    var strReq = `${API_BASE_URL}q=${strLocal}&appid=${pApiKey}`
    //http://base-da-api?q=Santarem,Portugal&appid=20392039
    return strReq
}//buildRequestUrl

function obterRespostaOWM(){
    var strLocal = oLocal.value.trim()!="" ? oLocal.value : oSelectPredefinedLocals.value

    //preparar o endereço correspondente ao pedido GET
    var strUrl =
        buildRequestUrl(
            strLocal
        ) //q=Santarém,Portugal&appid=239203920392

    //#1 - fornece a possibilidade de se fazer o pedido manualmente, via URL
    oSectionFeedback.innerHTML = `<a href='${strUrl}'>${strUrl}</a>`

    //#alt #2 - executar o pedido
    pedidoGet(
        strUrl,
        oSectionFeedback
    )

    //submeter o pedido + visualizar a resposta
}//obterRespostaOWM

function pedidoGet(
    pUrl,
    pOndeInscreverResposta,
    pAsync=true
){
    var req = new XMLHttpRequest()
    if (req){
        req.open(
            "GET",
            pUrl,
            pAsync
        )
        req.onreadystatechange = acompanharPedido
        req.mOndeInscreverResposta = pOndeInscreverResposta
        req.send(null)

        return true
    }
    else{
        return false
    }
}//pedidoGet

function acompanharPedido(){
    var bPedidoEstaTotalmenteRespondido = this.readyState === 4
        &&
        this.status===200

    if (bPedidoEstaTotalmenteRespondido){
        this.mOndeInscreverResposta.innerHTML = this.responseText
    }
    else{
        this.mOndeInscreverResposta.innerHTML+=`maturity:${this.readyState}<br>`
    }
}//acompanharPedido