Automatyczny deploy aplikacji Angular na Heroku

Heroku logo

Proces deploymentu, to dla deweloperów temat rzeka. Mamy obecnie wiele możliwości oraz wiele gotowych rozwiązań. W tym wpisie zademonstruję jak wykonać deploy aplikacji napisanej przy użyciu frameworka Angular na Heroku.

Przygotowanie

Na początku musimy trochę zmodyfikować package.json, który został wygenerowany za pomocą Angular CLI. Nasza aplikacja będzie budowana bezpośrednio na serwerze Heroku, dlatego musimy przenieść wymagane zależności z devDependencies do dependencies. W moim przypadku są to:

  • "@angular/cli": "^1.0.1"
  • "@angular/compiler-cli": "^4.1.0"
  • "typescript": "^2.3.1"

Dodatkowo, zadeklarujmy jaką wersję node i npm Heroku powinien wykorzystać do budowania aplikacji. Określamy to w następujący sposób:

"engines": {
  "node": "7.5.0",
  "npm": "4.1.2"
},

W przypadku nie zadeklarowania wersji node i  npm, Heroku użyje domyślnych. W chwili obecnej są to: node 6.10.3 i npm 3.10.10. Lokalnie korzystałem z node 7.5.0 i npm 4.1.2, więc aby wystrzec się błędów i różnic przy instalacji oraz kompilowaniu, zdecydowałem się na zadeklarowanie wersji, z których korzystam.

Budowanie aplikacji

Jeżeli przygotowaliśmy aplikację, przetestujmy czy uda się nam ją zbudować lokalnie. Do tego celu wykorzystamy komendę:

ng build --prod --aot

Parametr --prod oznacza wersję produkcyjną, natomiast --aot Ahead-of-time.

Polecam zerknąć na dokumentację Angular CLI, gdzie znajdziemy wszystkie atrybuty możliwe do wykorzystania podczas budowania aplikacji.

Jeżeli wszystko przebiegnie pomyślnie, zostanie utworzony folder dist/, a w nim znajdować się będzie kod wynikowy. Dodatkowo możemy przetestować poprawność budowania używając serwera http.

Angular app build

Na koniec tego etapu umieszczamy komendę do budowania aplikacji do skryptów. Zależy nam na tym, by Heroku automatycznie wykonało budowanie, więc skrypt nazywamy postinstall.

"scripts": {
  ...
  "postinstall": "ng build --prod --aot"
},

Utworzenie serwera

Do uruchomienia naszej aplikacji na Heroku wykorzystamy niezawodnego Express.js. Instalujemy framework poleceniem:

npm install express --save

Po pomyślnej instalacji, tworzymy prosty skrypt, który wypuści naszą aplikację na domyślny port Heroku czyli 8080:

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

Ostatnią czynność jaką musimy wykonać w tym etapie, to podmiana w package.json skryptu start:

"scripts": {
  ...
  "start": "node server.js"
},

Aplikacja na Heroku

Utworzenie aplikacji na Heroku zajmuje chwilę. Na początku wybieramy nazwę aplikacji oraz region gdzie nasza aplikacja będzie uruchomiona.

Heroku create app

Następnie w zakładce Deploy, mamy możliwość wybrania sposobu, w jaki nasza aplikacja ma być dystrybuowana. Mając repozytorium aplikacji w serwisie GitHub, zdecydowałem się na wybranie właśnie tego sposobu.

Heroku deploy app

Teraz możemy zdecydować, czy nasza aplikacja ma być automatycznie deployowana czy też nie. Nic nie stoi na przeszkodzie, by wykonać ręczny deploy w dowolnym momencie.

Heroku automatic deploys

Po wykonanym deployu możemy przejrzeć logi z budowania i uruchomić naszą aplikację.

Heroku log Shopping Manager Web

Migracja do Angular4

Angular4

Nowy Angular żyje i ma się nad wyraz dobrze. Efektem było wypuszczenie nieco ponad miesiąc temu wersji 4.0.0, z kolei zaledwie przedwczoraj wyszła wersja 4.1.0. W tym wpisie omówimy po krótce nową wersję oraz przeprowadzimy migrację z wersji Angular2 do Angular4.

Angular4 – co nowego?

Mniej znaczy szybciej

Projektanci frameworka postawili sobie za cel przyspieszenie oraz zredukowanie kodu wynikowego Angular4. Jak możemy przeczytać na oficjalnym blogu:

These changes reduce the size of the generated code for your components by around 60%  in most cases (..) During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes

Animacje zostały wyciągnięte z @angular/core i umieszczone w osobnym pakiecie. By wykorzystać teraz animations, trzeba zaimportować paczkę BrowserAnimationsModule z pakietu @angular/platform-browser/animations.

Features

Na warsztat poszły dyrektywy *ngIf oraz *ngFor. Można od teraz po stronie HTMLa wykorzystywać składnię if/else:

TypeScript

Update przyniósł również wsparcie dla kolejnych wersji języka TypeScript. Angular4.0.0 jest zgodny z TypeScriptem 2.12.2. Z kolei przedwczorajszy update Angular4.1.0 przyniósł zgodność z TypeScriptem 2.22.3.

To tylko kluczowe zmiany. Zainteresowanych zachęcam do zerknięcia w CHANGELOG.

Migracja

Wpierw rzućmy okiem na nasz package.json. Interesują nas zależności @angular, zone.js oraz typescript.

Angular4 - before migration

Proces migracji zaczynamy od podniesienia TypeScriptu do najnowszej wersji:

npm install --save-dev typescript@latest

W moim przypadku musiałem podnieść także @angular/cli:

npm install --save-dev @angular/cli@latest

Przyszedł czas na zone.js:

npm install --save zone.js@latest

Ostatnim etapem jest podniesienie pozostałych wykorzystywanych paczek, u mnie będzie to kolejno:

npm install --save-dev @angular/compiler-cli@latest

oraz

npm install @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Proces migrowania do wersji 4.1.0 przeszedł bez żadnych komplikacji. Kluczowym elementem jest niewielki rozmiar mojej aplikacji. Robiłem jednak wcześniej migrację dużo bardziej rozbudowanego systemu. Problemy, które wyniknęły w trakcie, nie blokowały mnie jednak w żadnym stopniu. Pamiętajmy, że nie powinniśmy zbytnio odwlekać w czasie, aktualizacji systemów, które utrzymujemy i tych które się ciągle rozwijają.

Na koniec jeszcze package.json po wszystkich update’ach:

Angular4 - after migration

Źródła:

  1. http://angularjs.blogspot.com/2017/03/angular-400-now-available.html
  2. http://angularjs.blogspot.com/2017/04/angular-410-now-available.html

Chatbot, Wit.ai – środowisko graficzne

AI Robot

W poprzednim wpisie dowiedzieliśmy się czym są chatboty, do czego mogą służyć oraz było kilka słów o jednym z systemów do ich tworzenia. Dzisiaj przyjrzymy się nieco bardziej środowisku graficznemu Wit.ai oraz zaczniemy projektować prostego chatbota.

Tworzenie aplikacji Wit.ai

Tworzenie aplikacji w Wit.ai jest bardzo proste i intuicyjne. W górnej belce należy kliknąć znak +. Zostaniemy przekierowani na stronę http://wit.ai/apps/new.

Możliwość tworzenia aplikacji, dostępna jest tylko dla zalogowanych użytkowników.

Po wypełnieniu prostego formularza, klikamy na przycisk Create App.

Wit.ai - creating app

Jeżeli wszystko przebiegnie pomyślnie, stworzona dla nas zostanie nowa instancja wit. Zostaniemy przekierowani do nowej aplikacji na zakładkę Understanding, gdzie zostaniemy przywitani przez kota.

Wit.ai - welcome

Entity

Cała magia w tworzeniu aplikacji za pomocą Wit.ai polega na właściwym wytrenowaniu sieci. W input User says... wpisujemy zatem sentencję, jaką mógłby wypowiedzieć użytkownik aplikacji. Następnie oznaczamy poszczególne elementy składowe.

Wit.ai - test sentence

Jak widać na obrazku załączonym powyżej, sentencja brzmi Kim jest Johnny Depp?. Zidentyfikowałem sobie intencję jako find-person oraz stworzyłem encję fullName, do której zostało przyporządkowane imię i nazwisko znanego aktora.

Po kliknięciu validate mamy możliwość wpisania kolejnej sentencji testowej. Spójrzmy jednak poniżej. Lista używanych encji zmieniła się. Nasza aplikacja wykorzystuje teraz dwie encje: fullName oraz intent. Obie zostały utworzone przez nas, a na skrajnie prawej kolumnie widać jakie wartości kryją się za daną encją.

Wit.ai - entity

Wbudowane encje (Built-in entities)

Warto przy tej okazji nadmienić, że Wit.ai posiada szereg wbudowanych encji, które możemy wykorzystać w swojej aplikacji. Built-in entities mają przede wszystkim ułatwić pracę deweloperom, tak by nie musieli tworzyć najczęściej używanych encji.

You’ll often need to extract temporal expressions, numbers, locations, temperatures, etc. To make your developer life easier, we have predefined these entities. They are trained across all our dataset, so they are supposed to perform very well.

Strategia wyszukiwania (Search Strategy)

Jeżeli nie używamy wbudowanych encji, musimy określić Search Strategy. Wit.ai rozróżnia następujące strategie wyszukiwania:

  • trait – należy wybrać tę strategię, gdy wartość encji nie wywodzi się ze słowa kluczowego lub nie jest bezpośrednią częścią składową w danej sentencji. Wykorzystujemy ten sposób wyszukiwania do określania ogólnego kontekstu lub wyczuwania intencji użytkownika.
  • free-text – należy wybrać tę strategię, gdy chcemy wyodrębnić tekst z danej sentencji.
  • keywords – słowa kluczowe. Wykorzystujemy dla zdefiniowanych wartości np. kraje, waluty itp.

Trenowanie

Nasza aplikacja zaczyna lepiej rozumieć nasze wypowiedzi, jeśli ją dobrze wytrenujemy. Zadbajmy o to, żeby wpisywane dane były różnorodne. Zmieniajmy szyk zdania oraz popełniajmy częste literówki. Pomoże to w przypadku chatbota z którym chcemy się komunikować za pomocą tekstu.

Trenowanie w Wit.ai to żmudny proces, który niestety wymaga naszej atencji. W minimalnym stopniu, ale jednak. Gdy wprowadzimy odpowiednią ilość sentencji treningowych, możemy przejść dalej.

Stories

Stories są na razie w fazie beta. Nic nie stoi jednak na przeszkodzie, by wykorzystać je do prostej implementacji chatbota. To swoiste dialogi pomiędzy użytkownikiem, a naszą aplikacją.

Stwórzmy zatem przykładową historię klikając Create a story.

Wit.ai - story

Zaczynamy od wpisania sentencji użytkownika: Kim jest Adam Małysz? Sprawdzamy jednocześnie czy tekst został poprawnie zinterpretowany. Następnie klikamy Bot executes, gdzie wpisujemy nazwę metody. W naszym przypadku ma się uruchomić metoda findPerson(). Jak widzimy na screenie, w metodzie są przekazywane parametry: context i entities. Następnie możemy uzupełnić context-key, który nie jest wymagany. Na koniec dodajemy standardową odpowiedź naszego bota do zaistniałej sytuacji.

Test

Wit.ai - chat buttonŚrodowisko graficzne pozwala nam także szybko przetestować naszą aplikację. W prawym dolnym rogu jest przycisk rozpoczynający dialog z chatbotem.

W okienku, które wyskoczyło, możemy teraz wpisać dowolną sentencję i zaobserwować jak do tego ustosunkuje się stworzony chatbot.

Co dalej?

Wit.ai - responseTo pierwszy krok do stworzenia własnego chatbota. W tym wpisie było dużo klikania, a mało kodowania. Poprawimy to w kolejnej części serii, gdzie stworzymy od podstaw aplikację w node.js. Skomunikujemy się z naszą instancją Wit.ai. Wyślemy sentencję użytkownika do API, zobaczymy co nam chatbot odpowie i spróbujemy coś zrobić z danymi, które zostały wydobyte z zadanej sentencji.