Andrej Sládkovič, AngularJS a Node.js

Zápisník experimentátora

Hierarchy: Node.js

V dnešnom článku budeme pokračovať v spracovaní básne Marína od Andreja Sládkoviča. Cieľom je dostať túto báseň do Arduina, ale pretože pomocou samotného Arduina by vývoj trval dlho, urobíme malú zastávku v Node.js. Vytvoríme si HTTP server v Node.js, ktorý bude zabezpečovať backend pre AngularJS aplikáciu. Túto aplikáciu neskôr využijeme v Arduine, keď server v Node.js nahradíme serverom v Arduine.

Báseň od Andreja Sládkoviča má 291 strof. V jednej chvíli budeme zobrazovať iba jednu strofu na obrazovke. Preto použijeme štyri ovládacie tlačidlá, pomocou ktorých môžeme listovať v celej básni. Ako báseň vyzerá v prehliadači vidíte na obrázku.

HTTP

Aplikácia je navrhnutá ako jednostránková aplikácia v AngularJS. Používa nasledovné rozhranie.

  • / - Zo servera sa stiahne HTML stránka, na ktorej sú odkazy na ďalšie stránky. Stiahne sa postupne Bootstrap, AngularJS a potom samotná aplikácia v javascripte. Všetko sa sťahuje z Internetu, aby sme nemuseli do Arduina dávať veľké súbory.
  • /sladkovic.js - Zdrojový kód AngularJS aplikácie.
  • /marina?verse=X - Stiahnutie textu konkrétnej strofy.
  • /marinaverses - Získanie počtu strof v básni.

HTML

Zdrojový kód HTML stránky vyzerá takto. AngularJS aplikácia je uzatvorená v značke <div ng-app="sladkovicApp" ng-controller="sladkovicCtrl">. V kóde ľahko rozoznáte, ako sa vytvárajú tlačidla a pripájajú sa na funkcie. Napríklad skok na prvú strofu básne urobíte pomocou <button ng-click="doFirst()">Prvý</button>. Výpis samotnej básne je robený pomocou špeciálnych značiek pre AngularJS. Napríklad číslo aktuálnej strofy zobrazíte pomocou {{verse}}.

<!DOCTYPE html>
<html lang="sk">
<head>
  <title>Andrej Sládkovič - Marína</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="sladkovic.js"></script>
</head>

<body>
  <div ng-app="sladkovicApp" ng-controller="sladkovicCtrl">
  <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>Andrej Sládkovič - Marína</h1>
      <p><button ng-click="doFirst()">Prvý</button> <button ng-click="doPrev()">Predchádzajúci</button> <button ng-click="doNext()">Nasledujúci</button> <button ng-click="doLast()">Posledný</button></p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <p>Verš {{verse}}/{{maxverse}}</p>
      <pre>{{text}}</pre>
    </div>
  </div>

  </div>
  </div>
</body>

</html>

AngularJS

Zdrojový kód v javascripte je ľahko čitateľný. Komunikácia medzi HTML a javasciptom sa deje pomocou premennej $scope. Pomocou funkcie $http.get si zo servera stiahneme všetky potrebné informácie. Pekný príklad na funkciu, ktorá je využívaná na získanie textu konkrétnej strofy, nájdete vo funkcii updateText. Je volaná z mnohých iných funkcii, ktoré sú napojené na tlačidlá na stránke.

var app = angular.module('sladkovicApp', []);

app.controller('sladkovicCtrl', ['$scope', '$http', function($scope, $http) {

  $scope.verse = 1;
  $scope.maxverse = 1;
  $scope.text = '';

  $http.get('/marinaverses')
    .then(function(response) {
      console.log(response);
      $scope.maxverse = response.data.maxverse;
    }, function(error) {
      console.log(error);
    });

  updateText();

  function updateText() {
    $http.get('/marina?verse=' + $scope.verse)
      .then(function(response) {
        console.log(response);
        $scope.text = response.data;
      }, function(error) {
        console.log(error);
      });
  }

  $scope.doFirst = function() {
    if($scope.verse>1) {
      $scope.verse = 1;
      updateText();
    }
  }

  $scope.doPrev = function() {
    if($scope.verse>1) {
      $scope.verse--;
      updateText();
    }
  }

  $scope.doNext = function() {
    if($scope.verse<$scope.maxverse) {
      $scope.verse++;
      updateText();
    }
  }

  $scope.doLast = function() {
    if($scope.verse<$scope.maxverse) {
      $scope.verse = $scope.maxverse;
      updateText();
    }
  }

}]);

Node.js

Poslednou časťou aplikácie je samotný HTTP server. je vygenerovaný pomocou aplikácie express-generator. Z vygenerovaného kódu som odstránil všetko nepotrebné a nechal iba tú časť, ktorá dodáva statický obsah. Tá slúži na odoslanie úvodnej HTML stránky a javascriptu s AngularJS aplikáciou do prehliadača. Doplnil som do kódu iba pole s jednotlivými strofami (var marina) a dve funkcie, ktoré odosielajú odpovede do AngularJS aplikácie (app.get('/marina'... a app.get('/marinaverses'...).

Aplikáciu pre Node.js si nainštalujete pomocou príkazu npm install a spustíte ju pomocou príkazu npm start.

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();

var marina = [
  "Ja sladké túžby, túžby po kráse\nspievam peknotou nadšený,\na v tomto duše mojej ohlase\nsvet môj je celý zavrený;\nz výsosti Tatier ona mi svieti,\nona mi z ohňov nebeských letí,\nona mi svety pohýna;\nona mi kýva zo sto životov:\nNo centrom, živlom, nebom, jednotou\nkrás mojich moja Marína!",
...
  "Marína moja! teda tak sme my\nako tie božie plamene,\nako tie kvety v chladnej zemi,\nako tie drahé kamene;\npadajú hviezdy, aj my padneme,\nvädnú tie kvety, aj my zvädneme,\na klenoty hruda kryje:\nAle tie hviezdy predsa svietili,\na pekný život tie kvety žili,\na diamant v hrude nezhnije!",
];

// uncomment after placing your favicon in /public
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'), {'extensions': ['html']}));

app.get('/marina', function (req, res) {
  var id = req.query.verse || 1;
  res.send(marina[id-1]);
});

app.get('/marinaverses', function (req, res) {
  res.json({maxverse: marina.length});
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Zdrojový kód

Zdrojový kód sa nachádza na serveri GitHub.

Ak máte nainštalovaný program git, môžete si zdrojové kódy nainštalovať napríklad takto. Ak ho nemáte, dajú sa stiahnuť aj ako zip archív. Spustite si konzolu príkazového riadku. Dôležitý je posledný riadok, ktorý nainštaluje všetky súvisiace knižnice, ktoré sú v súbore package.json.

cd d:
mkdir arduino
cd arduino
git clone https://github.com/roboulbricht/arduinoslovakia
cd arduinoslovakia\node.js\sladkovic_demo
npm install

20.01.2018


Menu