Kako poslati http request POST kao notify na pametni telefon?

Zadatak: Radimo ekstenziju za Chrome preglednik koja prati promjene na dinamičnoj web-stranici. Kada se dogodi promjena, treba ju nekako prijaviti na pametni telefon.

Najmanje komplicirani način je da pošaljemo HttpRequest iz ekstenzije.

Ekstenzija je najjednostavnije svedena na ‘content.js’ skriptu. U ekstenziji imamo setInterval funkciju koja svake sekunde uzima html element provjerava sadržaj i (po potrebi) uzima screenshot elementa.

Za screenshot koristimo ‘html2canvas.js‘ lib koji će nam “ugrabiti” element i prebaciti ga u base64 format.

html2canvas(document.querySelector("#capture")).then(canvas => { 
    var data = canvas.toDataURL();
});

PHP/mariadb server

Prvo sam zamislio složiti jednostavni webapi server. Server koji bi zaprimio sadržaj (tekst i base64 sliku) iz ekstenzije, pa ga pohranio na mariadb server. Frontend bi svake sekunde slao POST zahtjev koji bi provjeravao da li postoji novi sadržaj. Pristup serveru bi bio osiguran sa login formom.

Klijent bi se preko pametnog telefona spojio na web stranicu i tako pratio promjene. Naravno bilo bi potrebno i ugraditi Push Notifications… 💩

Telegram bot

Druga opcija je Telegram bot.

Da bi napravili bot u Telegramu potrebno je razgovarati sa @BotFather botom.

Potrebno mu je napisati:

/newbot

Nakon toga unosite ime bota:

moj mali bot

A zatim “slug” ime:

moj_mali_bot

I to je to. Dobili ste API token, koji izgleda ovako:

213231231:lhliawhdilAAdaoihao32h83halahr_bUw

Sada bi trebali imati nešto za testiranje REST komunikacije.
Ja koristim restclient na Firefox-u.

Za prvi test koristimo ‘getMe’ putanju:

https://api.telegram.org/bot213231231:lhliawhdilAAdaoihao32h83halahr_bUw/getMe

Bitno je napomenuti da je moramo dodati riječ ‘bot’ prije token stringa.

bot213231231:lhliawhdilAAdaoihao32h83halahr_bUw

Kao odgovor dobivamo JSON sa ID-em i bot postavkama.

Kako poslati poruku Telegram korisniku?

Kao obični Telegram korisnik šaljemo (bez veze) poruku bot-u.
Nakon toga šaljemo POST http request:

https://api.telegram.org/bot<YourBOTToken>/getUpdates

Kao odgovor dobivamo JSON sa “message” vrijednosti koja sadržava ID
korisnika i “chat” vrijednost sa ID-em. Nas zanima “chat”.

POST request izgleda ovako, sendMessage je putanja:

https://api.telegram.org/bot<YourBOTToken>/sendMessage?chat_id=6545646456&text=Hello world

Kako bot-om objaviti poruku u grupi?

Treba nam ID grupe. Za to ćemo prvo ubaciti bot-a u grupu a zatim zvati:

https://api.telegram.org/bot<YourBOTToken>/getUpdates

Kao odgovor dobivamo JSON sa “chat” vrijednosti koja sadržava ID grupe kojeg dodajemo kao ‘chat_id’.

https://api.telegram.org/bot<YourBOTToken>/sendMessage?chat_id=-1566546545555&text=Hello Group World

Ukoliko dobijemo:

{"ok":true,"result":[]}

kao odgovor, potrebno je napisati bilo kakav tekst u grupi, pa izbaciti/ubaciti bot-a i opet poslati POST request sa ‘getUpdates’ endpointom.

Super, a kako sad da pošaljemo base64 sliku?

Moramo base64 sliku prebaciti u blob sa JS funkcijom:

function b64toBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);

    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

const base64 = "data:image/png;base64,iVBORw0KGg...";
const blob = b64toBlob(base64);

Pripremamo URL string sa “chat_id” koji može biti chat ID grupe ili sa korisnikom:

const telegram_token = "2129473651:AAGBFBQGYN4ky7ZE3WKm2FDHOFe8Qdh_bUw";
const telegram_url_img = "https://api.telegram.org/bot" + telegram_token + "/sendPhoto?chat_id=-1566546545555";

Pakiramo blob u FormData objekt:

var fd = new FormData();
fd.append('photo', blob)

Nakon toga sve šaljemo sa mojom fetch wrapper funkcijom:

function dsijak_sendData(url, data, cb)
{        
    var send = async function (url = '', data = {})    
    {    
        const response = await fetch(url, {        
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'same-origin',
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: data
        });
        if (response.status != 200){
            return {error: response.status +', '+ response.statusText};
        }     
        
        return response.json();
    }
    
    send(url, data)
    .then(x => { 
        cb(x);                
    });  
}

Odgovor primamo sa callback funkcijom.

dsijak_sendData(telegram_url_img, fd, function(log){	
	console.log(log);
});

I tako iz Chrome ekstenzije do Telegram poruke (sa notification zvukom) na pametnom telefonu.