Angular – Hello world

Instalace

  1. Nainstalovat Node.js https://nodejs.org/en/
  2. Po nainstalovaná Node.js začnou v příkazové řádce fungovat příkazy:
    node –version
    npm –v
  3. Nainstalujeme Angular CLI: npm install -g @angular/cli
    Po nainstalování začne fungovat příkaz zobrazující verzi Angular CLI:
    ng –version

První aplikace – Hello world

Skelet první aplikace vygenerujeme příkazem:

ng new hello-world

Budeme dotázání, zda chceme použít knihovnu Angular routing a jaký stylesheet chceme použít pro stylování (SCSS, Sass, Less, Stylus). Stačí potvrdit předpřipravené hodnoty, nebo vyberte to co umíte.

Pří kazové řádce vstoupíme do složky s vytvořeným projektem:

cd hello-world

Spustíme aplikaci:

ng serve

Aplikace se defaultně spustí na portu 4200. Teď jen do internetového prohlížeče zadáte adresu: http://localhost:4200/ kde rovnou vidíte výsledek.

Pokud chcete aplikaci spustit na jiném portu, provedete to příkazem:

ng serve --port 7777

Úprava kódu

Nyní se můžete vrhnout a úpravu kódu. Všechny úpravy můžete průběžně kontrolovat v internetovém prohlížeči, kde se projevují bez nutnosti ručního obnovení stránky. Skvělé.

Nová komponenta

Pro znovu použitelnost kód který využíváme na několika místech dáváme do komponent. Komponentu vygenerujeme:

ng generate component hero-detail

Node,js PM2

PM2 (Process Manager 2) je správce procesů pro Node.js, který vám pomůže spravovat a udržovat vaše aplikace v chodu. Pojďme se podívat na základy.

Instalace

npm install pm2 -g

Spuštění aplikace

pm2 start app.js

Správa aplikací

$ pm2 restart app_name
$ pm2 reload app_name
$ pm2 stop app_name
$ pm2 delete app_name

app_name nahraďte:

  • all pro všechny aplikace
  • id konkrétního procesu

Seznam spravovaných aplikací

Krásně vidíte status aplikace, přidělený výkon procesoru a paměti

pm2 [list|ls|status]

Zobrazení logu

pm2 logs

Zobrazení staršího logu:

pm2 logs --lines 200

Zobrazení řídícího panelu zobrazující realtime data z aplikace

pm2 monit

Linux – připojení přes SSH klíč

Doba pokročila, přihlašování na server přes jméno a heslo není nejbezpečnější a je zbytečně zdlouhavé. Nyní si v cloudu vytvoříte server na pár kliknutí a následně se na něj přihlásíte přes SSH klíč. Je to bezpečné a rychlé.

Jak to funguje

Potřebujete vygenerovat soukromý a veřejný klíč. Soukromý klíč umístíte na klienta, ze kterého se přihlašujete a veřejný klíč na server, na který se přihlašujete. Při inicializaci spojení vám server pošle data, která zašifrujete soukromým klíčem, a server po rozšifrování veřejným klíčem získá původní data. Tím ověří, že máte správný soukromý klíč a povolí vám přístup.

Soukromý klíč v žádném případě nesmíte nikomu poskytnout, ten si chraňte!

K veřejnému klíči se může dostat kdokoliv. V případě napadení serveru, není problém když se útočník dostane k veřejnému klíči.

Vygenerování klíčů

Pojďme vygenerovat soukromý a veřejný klíč – to většinou budeme dělat na klientu.

ssh-keygen -t rsa

Výstup bude podobný tomuto -toto není výstup pro klíč, který používám :-):

root@vencax-virtual-machine:/home/venca-x# ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /root/.ssh/id_rsa
Your public key has been saved in /root/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:wV81a776hOaU5Gtj5vVtWhujL2hUJn53H4XsdL3dG72 root@vencax-virtual-machine
The key's randomart image is:
+---[RSA 3072]----+
| .+,G|
| +.PRX|
| =oxR|
| . . --A|
| S . l.x+|
| .+. =E+|
| .+.F.o=.|
| .o.- .|
| .=a. |
+----[SHA256]-----+

Budete vyzváni, zda se má veřejný klíč uložit do výchozího umístění (/root/.ssh/id_rsa) – stačí potvrdit <ENTER>

Dále budete vyzváni pro zadání passphrase (hesla k certifikátu). Toto heslo není povinné. nicméně doporučuji jeho zadání pro případ kdyby se někdo dostal k privátnímu klíči.

Tím se klíče uloží do umístění: /root/.ssh/

  • id_rsa – privátní klíč
  • id_rsa.pub – soukromý klíč

Nahrání veřejného klíče na server

Klientská část je hotova. Nyní nahrajeme veřejný SSH klíč na server, ke kterému se budeme připojovat. Můžeme nahrát stejný veřejný klíč na všechny servery, na které se chceme připojit.

ssh-copy-id -i ~/.ssh/id_rsa.pub user@host.com

Ukázka výstupu:

root@vencax-virtual-machine:~/.ssh# ssh-copy-id -i ~/.ssh/id_rsa.pub user@host.com
/usr/bin/ssh-copy-id: INFO: Source of key(s) to be installed: "/root/.ssh/id_rsa.pub"
/usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
/usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
user@host.com's password:

Number of key(s) added: 1

Now try logging into the machine, with: "ssh 'user@host.com'"
and check to make sure that only the key(s) you wanted were added.

Na serveru se podívejte do souboru .ssh/authorized_keys, ve kterém byste měli vidět přidaný veřejný klíč z klienta

Zapnutí autentizace přes SSH klíče na serveru

Na serveru nyní zapneme přihlášení přes SSH klíč a zakážeme přihlášení přes jméno a heslo. To provedeme v souboru:

vim /etc/ssh/sshd_config

Povolení přihlášení přes SSH klíč:

RSAAuthentication yes
PubkeyAuthentication yes

Zakázání přihlášení přes SSH přes jméno a heslo:

ChallengeResponseAuthentication no
PasswordAuthentication no
UsePAM no
PermitRootLogin no

Nakonec restartujeme SSH:

systemctl restart sshd.service
Tím máme hotovo. Restartem SSH stále zůstáváme připojení k serveru, než otestujete správnou funkčnost přes SSH klíče, se raději neodpojujte :-)

Putty – připojení přes SSH klíč

Připojení z linuxu nám funguje, trochu problém nastává u připojení přes Putty. Nyní máme soukromý klíč ve formátu OpenSSH a musíme ho převést na .ppk

Spustíme program PuTTYgen – už je předinstalovaná ve WIndows 10?

Do programu PuTTYgen naimportujeme náš soukromý klíč (id_rsa) File -> Load private key
Načtený soukromý klíč uložíme tlačítkem Save private key -> například jako id_rsa.ppk

Tento výsledný id_rsa.ppk vložíme k našemu připojení v Putty: Connection -> SSH -> Auth -> Private key for authentication

Dnes jsme si ukázali bezpečnější, rychlejší a modernější způsob přihlášení na server přes SSH. Už se nemusíte bát o svá hesla, jejich pravidelnou změnu a brutal force útok pro prolomení hesla.

Debian – LXDE + X2Go

Pokud máte VPS s Ubuntu a z nějakého důvodu potřebujete grafický desktop, vyhází mi výkonově nejlépe LXDE + X2Go.

Instalace LXDE

sudo apt-get update 
sudo apt-get upgrade 
sudo apt-get install lxde

Instalace X2Go

sudo apt-get install software-properties-common 
sudo add-apt-repository ppa:x2go/stable 
sudo apt-get install x2goserver x2goserver-xsession

Zkontrolujeme status X2Go:

systemctl status x2goserver

X2Go klient pro Windows

V mém případě se budu připojovat z Windows, klienta stáhnu z https://wiki.x2go.org/doku.php/download:start (X2Go Client -> mswin)

Problémy

Connection failed. mesg: ttyname failed: Inappropriate ioctl for device

1) editujeme soubor /root/.profile
2) zakomentujeme řádek: mesg n || true (komentář je #), takže: #mesg n || true
3) přidáme: tty -s && mesg n

Telegram – chat bot

Přeskočíme kecy o botech a rovnou se pustíme do práce. Největší platformou pro chatovací boty s otevřeným API nabízí Telegram. Dnes si ukážeme, jak si vytvořit bota, který bude interagovat na uživatelovo požadavky.

Vytvoření bota

Všechny boty vytváříme u toce botů – BotFather. Uděláme to tak, že v seznamu konverzací vyhledáme BotFather. V detailu konverzace vytvoříme nového bota příkazem /newbot a postupujeme podle pokynů.

Budete vyzváni na jméno bota (libovolné znaky včetně diakritiky) a následně na uživatelské jméno bota: slovo bez diakritiky, mezer s příponou bot nebo _bot. Uživatelské jméno musí být v celém Telegramu jedinečné.

Po vytvoření bota bude zobrazeno jeho API access token – dále jen token. Ten si pečlivě uchovejte a nikomu ho nesdělujte – slouží k ovládání bota.

Ovládání bota

V Telegramu existují dva způsoby, jak získat zprávy poslané botovi: long polling a webhooks

Long pooling

Při tomto přístupu se periodicky doptáváte API Telegramu na nové zprávy. Musíte vhodně nastavit periodu doptávání se na nové zprávy.

Webhooks

Při tomto přístupu je při každé interakci s botem zpráva odeslaná i na náš server. Tento přístup mám raději, protože vypadá jako komunikace v reálném čase.

V tomto článku si popíšeme použití webhooks. Pro použití webhooks potřebujeme php script, který běží na veřejné adrese s HTTPS certifikátem. Pro naši ukázku například: https://www.venca-x.cz/bot/pocasi.php

Teď trochu přeskočíme obsah souboru pocasi.php a rovnou tento script zaregistrujeme aby byl zavolán a přijal zprávu od našeho bota. To provedeme příkazem:

https://api.telegram.org:443/bot[token]/setwebhook?url=https://www.venca-x.cz/bot/pocasi.php 

Příkaz zadáme do URL v prohlížeči. Měli bychom obdržet hlášku s úspěšným nastavením webhooku:

 {"ok":true,"result":true,"description":"Webhook was set"}

Vytvoření bota

Zahájíme chat s uživatele BotFather, kterému pošleme následující požadavky

/newbot

Budete vyzváni pro přesdívku bota a následně budete vyzváni pro zadání uživatelského jména bota. Uživatelské jmeno musí končit na slovo „bot“.

Po vytvoření bota získáte token pro přístup k API Telegramu. Token si pečlivě uložte, budeme ho potřebovat.

Nastavení webooks botovi

Nyní botovi musíme nastavit URL adresu, na kterou bude přeposílat požadavky. Do vašeho prohlížeče zadáme následující URL adresu:

https://api.telegram.org/bot*TOKEN*/setwebhook?url=*https:/ /example.domain/path/to/bothook.php*

Slovo *TOKEN* nahraďte API tokenem, získaným při vytvoření bota.
*https:/ /example.domain/path/to/bothook.php* nahraďte vaší adresou, kde jsme zprovoznili jednoduchou ukázku vracející JSON.

Oživení bota

Bota máme vytvořeného, zaregistrovaný webhook, který nám přeposílá zprávy poslané botovi. Pojďme bota oživit aby zprávy zpracovával a reagoval na ně.

Pro práci s bot API se mi zalíbila knihovna telegram-bot/api nainstalujeme ji:

composer require telegram-bot/api

Super, konečně jsme se dostali na příjem zpráv a reagování na ně. Na zprávu /ping odpoví bot zprávou pong:

<?php

require_once "vendor/autoload.php";

try {
$bot = new \TelegramBot\Api\Client('YOUR_BOT_API_TOKEN');
$bot->command('ping', function ($message) use ($bot) {
$bot->sendMessage($message->getChat()->getId(), 'pong!');
}); $bot->run();
} catch (\TelegramBot\Api\Exception $e) {
$e->getMessage();
}

Nezapomeňte místo YOUR_BOT_API_TOKEN nastavit váš token z vytváření bota.

Klávesnice pro ovládání bota

Bota můžeme ovládát i přes speciální klávesnici pro rychlé volby. Po zadání příkazu /start přivítáme návštěvníka a zobrazíme mu klávesnici s rychlou volbou:

$bot->command('start', function ($message) use ($bot) {

$keyboard = new \TelegramBot\Api\Types\ReplyKeyboardMarkup(array(array("/pocasi", "/ping")), true);

$bot->sendMessage($message->getChat()->getId(), 'Vítejte počasí', null, false, null, $keyboard);

});

Jak upgradovat Denon DJ PRIME 4

  1. Na webu https://www.denondj.com/downloads v sekci STAND ALONE DJ SYSTEMS > PRIME 4
  2. stáhneme nejnovější firmware ( Firmware update (USB Updater) ) – budeme aktualizovat přes USB flash disk
  3. stažený .zip rozbalíme – v rozbalené složce bychom měli najít soubor s příponou .img
  4. Zkopírujte soubor xxxx.img do kořenové složky USB flešky naformátované do: exFat nebo Fat32
  5. Takto připravenou flešku vložte do PRIME 4 a zapneme přehrávač
  6. Po zapnutí držte 2 vteřiny tlačítko VIEW
  7. Klepněte na sekci UTILITY
  8. Přejeďte dolů a vyberte volbu: UPDATE FIRMWARE, poté potvrďte volbou REBOOT a potvrďte provedení aktualizace
  9. Nyní se přehrávač aktualizuje, neodpojujte ho od napájení
  10. Po dokončení aktualizace se restartuje restartuje a spustí s novým firmwarem

Nette ajax – Naja

Načítání obsahu webových stránek bez nutnosti obnovení stránky prostřednictvím AJAXového volání je dnes běžnou praxí.

Zavést toto funkčnost web postaveném na Nette frameworku, je velice jednoduché a rychlé. Ukážeme si jak na to s ajaxovou knihovnou s názvem Naja. Pokud děláte úplně nový projekt, doporučuji Nette 3.0, zapomeňte na nette.ajax.js ale rovnou použijte Naju. Nette,ajax.js je již „hotový“ a dál se nevyvijí. Naja je jeho nástupce.

Instalace a zprovoznění Naja knihovny

npm install naja –save-dev

Pro sloučení všech js souborů a jejich minifikaci používám Gulp. V Gulp tasku přidáme Naja.js do našeho jednoho velkého minifikovaného main.min.js souboru:

var uglify = require('gulp-uglify-es').default;
 //…..
 gulp.task('jsMain', done => {
     gulp
         .src(['node_modules/jquery/dist/jquery.min.js',
             'node_modules/popper.js/dist/umd/popper.min.js',
             'node_modules/bootstrap/dist/js/bootstrap.min.js',
             'node_modules/tether/dist/js/tether.min.js',
             'node_modules/naja/dist/Naja.js',
             'venor/nette/forms/src/assets/netteForms.min.js',
             'src/js/main.js'], {allowEmpty: true})
         .pipe(uglify({
             mangle: false,//disable rename variables and functions
         }))
         .pipe(concat('main.min.js'))
         .pipe(gulp.dest('www/js'));
 done();
 });

TIP: je potřeba použít knihovnu gulp-uglify-es ( gulp-uglify nestačí)

npm gulp-uglify-es --save-dev

Pak jen jednoduše tento 1 minifikovaný JS vložíme do šablony:

<script src="{$basePath}/js/main.min.js"></script>

Do souboru /src/js/main.js (který se také přidává do main.min.js přidáme tento kód pro inicializaci Naji):

document.addEventListener(
     'DOMContentLoaded',
     () => {
         naja.initialize();
     }
);

A máme hotovo. Nyní jen přidáme class=“ajax“ prvků, které chceme mít ajaxově, stejně jako u Nette.ajax.js

Demo signálu

Po kliknutí na tlačítko aktualizujeme ajaxem snippet, ve kterém se překreslí aktuální datum. Jednoduché 🙂

Presenter:

<?php
 declare(strict_types=1);
 namespace App\FrontModule\Presenters;
 use App;
 use Nette\Utils\DateTime;
 class HomepagePresenter extends BasePresenter
 {
    private $dateTime;
 public function handleActualiseDateTime()
    {
       $this->dateTime = new DateTime();
       if ($this->isAjax()) {
          $this->redrawControl('dateTimeSnippet');
       }
    }
 public function renderDefault(): void
    {
       if ($this->dateTime === null) {
          $this->dateTime = new DateTime();
       }
       $this->template->dateTime = $this->dateTime;
    }
 }

Šablona:

<div class="col-12">
   <hr/>
   {snippet dateTimeSnippet}
      {$dateTime|date:'j. n. Y H:i:s'}
   {/snippet}
   <a n:href="actualiseDateTime!" class="ajax">AKTUALIZOVAT</a>
</div>