Notifikácie o počasí, 23 riadková konzolová aplikácia v JavaScripte

Publikoval Michal Kočí dňa 2.8.2016 o 18:44 v kategóriach Node.js a JavaScript

JavaScript je úžasný a už dávno neslúži len na akési dynamické efekty v prehliadači. Dnes sa v ňom dá naprogramovať všeličo, to som už spomínal v príspevku A víťazom sa stáva... JavaScript. Poďme sa teda pozrieť, ako v ňom na 23 riadkoch naprogramovať nástroj, ktorý zistí aktuálne počasie a zobrazí ho ako notifikáciu operačného systému.

Node.js - Nie len webové aplikácie

Pre našu utilitku použijeme Node.js. Ten má veľa ľudí spojený s tvorbou serverových webových aplikácií. Vec sa však má tak, že slúži na spúšťanie JavaScriptu mimo webový prehliadač a tak v ňom môžete programovať aj serverové web aplikácie, ale kľudne aj konzolové aplikácie (pracujúce z príkazového riadku či tzv. terminálu).

Keď už spomínam Node.js, viete že vás dokážem rýchlo a ľahko naučiť programovať webové aplikácie v Javascripte na mojom školení Node.js - serverové aplikácie v Javascripte?

Ak ešte nemáte, chodťe a stiahnite si najnovšiu verziu Node.js. Tá sa bude okrem iného vyznačovať tým, že bude podporovať ES6 (správne sa teraz má označovať ES2015), teda najnovšiu verziu JavaScriptu.

Keď máte, spustite si príkazový riadok (terminál) a overte si, že sa vám node ninštaloval korektne a viete ho spustiť. Spustite nasledujúci príkaz, mal by vám vypísať verziu Node.js:

node -v

Všetko funguje, super, poďme teda na to.

Nevymýšľajme znovu koleso

Ako aj v iných programovacích jazykoch, pokiaľ už existuje funkcionalita, ktorú potrebujete, v podobe nejakej knižnice, nebojme sa ju použiť. Pre Node.js existuje repository modulov, z ktorých si tie ktoré potrebujete viete stiahnuť do vášho projekty a volá sa NPM repository.

My pre našu aplikáciu budeme potrebovať:

  • Komunikovať s nejakou službou poskytujúcou informácie o aktuálnom počasí a ideálne aj s predpoveďou počasia na najbližšie dni. Použijeme modulweather-js
  • Zobraziť notifikácie operačného systému, ktorými budeme zobrazovať informáciu o počasí. Použijeme modul node-notifier

Vytvorte si na disku adresár, v ktorom budete mať vašu aplikáciu a prepnite sa do neho v rámci príkazového riadku. Následne si zinicializujte npm príkazom:

npm init -y

Vytvorí sa vám súbor package.json, ktorý slúži na popis vašej aplikácie a ukladanie informácie o nainštalovaných moduloch.

Parameter -y zabezpečil, že sa vám vytvoril s defaultnými hodnotami. Môžete si ho nechať vytvoriť aj interaktívne, bez tohto parametra, vtedy budete musieť zodpovedať na pár otázok. Alebo si ho následne manuálne upravíte v textovom editore. Ale pre účely tohto cvičenia nejdeme do detailov a stačí nám vytvorený tak ako je.

Následne si chceme nainštalovať vyššie spomenuté moduly a chceme si informáciu o nich uložiť do package.json, preto spustíme príkaz:

npm instal --save weather-js node-notifier

Tento moduly stiahne do adresára node_modules a informáciu o nich uloží do package.json, aby ste si v budúcnosti vedeli balíčky zreinštalovať, ak bude treba - keď adresár node_modules na disku nebudete mať. Napríklad keď si ho zmažete alebo ako dôsledok toho, že tento adresár necommitujete do repository a repository si niekedy v budúcnosti vycheckoutujete.

Informácie o počasí

V tom istom adresári si teraz vytvoríme náš skript, nazvať ho môžete index.js. Tak poďme teda na našu utilitku. Ako prvé si potrebujeme v našej aplikácii načítať modul weather-js cez require:

const weather = require('weather-js');

Všimnite si použitie const z ES6, miesto tradičného var. Premennú weather totiž nebudeme meniť a tak môžeme použiť const (mohli by sme použiť aj let, ale const je prísnejšie a nám viac vyhovuje).

V popise module weather-js si pozrieme ako sa používa a zistíme, že obsahuje funkciu find, ktorej prvý parameter je konfiguračný objekt (čo hľadáme, aký jazyk chceme použiť pre odpoveď, aké stupne chceme použiť) a druhý je callback, ktorý bude zavolaný.

Callback je funkcia, prijímajúca 2 parametre - err a result. Ak má err hodnotu, došlo k chybe a mali by sme patrične zareagovať. Ak nemá hodnotu, výsledok (informácie o počasí) nájdeme v result. Takýto callback, kedy prvý parameter je informácia o chybe, je v Node.js veľmi bežný a volá sa Error-First Callback.

Prvá verzia nášho nástroju teda môže vyzerať takto, zatiaľ si všetko zapisujeme len do konzoly:

const weather = require('weather-js');

weather.find({ search: 'Bratislava', degreeType: 'C', lang: 'sk' }, (err, result) => {
  if (err) {
    console.log('Failed to fetch weather information', err);
    return;
  }
 
  if(!result.length) {
    console.log('No weather information for the requested location', result);
    return;
  }

  console.log('We got the weather information', result);
 });

Za všimnutie stojí použitie tzv. arrow functions, ďalšej novinky v ES6/ES2015. Nemusíme sa už zdržiavať zapisovaním anonymných funkcií, ale tam kde sa očakáva callback použijeme arrow function. Okrem iných príjemných pozitív, ktoré teraz nepotrebujeme, tieto skracujú zápis a podľa môjho názoru aj sprehľadňujú kód.

Spustite si našu utilitku nasledovným príkazom:

node index.js

Ak máte pripojenie na internet a nič sa nepokazilo, mali by ste v príkazovom riadku vidieť odpoveď zo servera, s ktorou budeme ďalej pracovať.

Notifikácie

Polovicu našej utilitky už máme hotovú a zatiaľ sme napísali 15 riadkov kódu. Šikovné, nie? Lenže, počasie zatiaľ len zapisujeme len do konzoly. Poďme si pridať notifikácie. Modul už máme nainštalovaný, stačí si ho v aplikácii načítať:

const notifier = require('node-notifier');

Zase sa pozrieme do dokumentácie, tentoraz tohto modulu, a dočítame sa, že na obyčajné zobrazenie notifikácie stačí zavolať funkciu notify a predať jej konfiguračný objekt. Do neho v zásade stačí poslať title a message, dá sa však konfigurovať aj viac (podtitulok, ikonka, odkaz ktorý sa otvorí po kliknutí na notifikáciu, ...).

Podobne ako pri zisťovaní informácie o počasí, aj notifier.notify prijíma ako druhý parameter callback funkciu, tiež Error-First Callback. Nás výsledok moc nezaujíma, stačí nám v zásade zareagovať na prípadnú chybu (zapíšeme do konzoly).

Jediné čo sa od nás očakáva je, že z informácie o počasí potrebujeme vyzískať zaujímavé informácie (formát odpovede si môžeme pozrieť v konzole, keďže do nej si ho logujeme) pre zobrazenie v notifikácii a nastaviť patrične title a message. Celý skrip našej aplikácie tak môže vyzerať nasledovne:

const notifier = require('node-notifier');
const weather = require('weather-js');

weather.find({ search: 'Bratislava', degreeType: 'C', lang: 'sk' }, (err, result) => {
  if (err) {
    console.log('Failed to fetch weather information', err);
    return;
  }

  if(!result.length) {
    console.log('No weather information for the requested location', result);
    return;
  }

  notifier.notify({
    title: result[0].current.observationpoint,
    message: `${result[0].current.observationtime}: ${result[0].current.temperature}°${result[0].location.degreetype}, ${result[0].current.skytext}`,
  }, (error, response) => {
    if (error) {
      console.error('Got a notification center error:', error, response);
    }
  });
});

Možno ste si všimli tie zvláštne reťazce, uzatvorené v tzv. tickoch miesto úvodzoviek. Ďalšia novinka z ES6 - template strings. Pomáha vám, keď chcete reťazec vyskladať z rôznych premenných. V takomto type reťazca môžete mixovať text s výrazmi v JavaScripte, tie uzatvoríte do ${}.

Spustite si aplikáciu, mala by sa vám zobraziť notifikácia. Gratulujem, úšpešne ste zvládli vašu prvú JavaScriptovú konzolovú aplikáciu. Príjemný pocit, nie?

Rozšírenie aplikácie

Takáto aplikácia funguje, aj niečo zobrazuje, ale možno si ju budete chcieť zlepšiť. Aj ja som si. Moju verziu nájdete na githube, mám ju v crone a spúšťa sa mi každú hodinu.

Pokiaľ si ju chcete vylepšiť sami, tu je pár nápadov (všetky som si implementoval, takže sa stačí pozrieť na github, ak sa zaseknete):

  • Ak nastane niekde chyba (okrem chyby zobrazenia notifikácie), zobrazte si detail chyby v notifikácii
  • V notifikácii si zobrazte nie len aktuálne počasie, ale aj predpoveď na dnes a zajtra.
  • Rozšírte si notifikáciu o ikonku aktuálneho počasia. Ikonku si stiahnite lokálne a prípadne zakešujte, aby ste ju nabudúce nemuseli sťahovať, ak sa bude jednať o rovnakú.
  • Pridajte si možnosť zobraziť si detail počasia na webe po kliknutí na notifikáciu.

Možností je veľa, utilita je to zaujímavá a tak sa s ňou môžete do sýtosti vyblbnúť. Zabavte sa!

Mohlo by ťa tiež zaujímať

Páčil sa ti príspevok?

Zdieľaj príspevok alebo si ho odlož na neskôr

Sleduj ma

Ak nechceš premeškať príspevky ako je tento, sleduj ma na Twitteri, alebo ak máš RSS čítačku, môžeš sledovať môj RSS kanál.