After I created the Facebook fanpage for this blog (you can find it here: https://facebook.com/creynblog/) I decided that I want to invite all of my friends to like it. I wanted them all to join me on my path as a blogger. But the default “Facebook way” is to click them one by one on the “Invite” button next to the photo. And I had a lot of friends (222). So I decided that I will use my dev skills.

So first, go to the Facebook fanpage “Invite Friends” section:

Then you will see the list of your friends. Exactly 100 of your friends. So you have to scroll the list to the very bottom and as you will be doing this, you will notice that more of them are showing. So please scroll to the very bottom of the list (to have all of your friends shown). Next let’s see under the hood. I am using Chrome browser for this. So right click on the “Invite” button and choose something like “Inspect element”. The new window should open and then you can find the source code of the button:

You can see that the button has a class attribute called “uiButton“. So we can select all of the buttons using javasctipt. Open the Console tab and now you can execute some code in the context of the website. Quick look at the documentation (https://developer.chrome.com/devtools/docs/console#selecting-elements) and we can see that to get all elements with specific class we should use the “$$()” function. It will give us an array of all buttons that we want to click. So if we count them we should get number of our friends. In my case there was 218, so 4 of my friends were missing. Probably there is some “don’t invite me to the fanpage” option that they selected.

And now the final step. We could execute a “clicking” action on each button. It would be exactly like we were clicking all of them manually. This is done by following script:

And after just about 1 second (on Chrome browser) all of my friends were spammed with my invitation and I was so happy seeing them accepting the invitation :)

C.

It is an extension for Chrome browser. Which is good when you don’t have permissions to install new software on production, but you can launch some browser extensions ;) The installation is very simple as every extension for Chrome. Just look for the “Postman” in the Chrome extension manager (https://chrome.google.com/webstore/) and then click “Add to Chrome”. It then will show in the Chrome Apps section (“chrome://apps/”) .

After the first launch, you will have an option to create the “Postman” account. You can skip this step, but having the account will let you sync your test requests with other computers and even colaborate on them with your colleagues. I’ve choosen the “Sign Up with Google” option. Then, upon login, Google send me the confirmation SMS with a unique code and polish characters encoding error (so hey, encoding is hard, it happens to everybody ;)). The “Postman” requirements for my account are very simple and look ok for me, so I allowed it to do so.

“Postman” started and I am connected to my account. In the main window, the upper part is the “Request” section. You can specify all parameters that you want to send, including headers.

So let’s try if it works. In the “Enter request URL” please enter the “http://blog.creyn.pl“ and then click on “Send”. The bottom part of the screen is the “Response” section. There you can find: response time, response status, response body, cookies and headers. You can see that my blog homepage responded with success.

I really recommend you to save your requests to a “Collection”, because even if all requests are saved into the “History” section (on the left), the collection will be usefull for us in the future. After clicking the “Save” button you will have to create a name for this request. It is also usefull to add some grouping to your requests. So I created a new one called “CreynBlog”. On the left part there is a “History / Collections” section and you can see the new request we just added and also some predefined “Postman Echo” collection. In this default collection you can find some very usefull examples of what can be done with the “Postman” tests, as this is actually a very nice test framework for your APIs.

So let’s pick the “Postman Echo > Cookies > Set Cookies” test request. This is a “GET” request to the “https://echo.getpostman.com/cookies/set?foo1=bar1&foo2=bar” URL. The response from the server set cookies with the names specified in the URL. But what is interesting is the “Tests” tab in the “Request” section. You can find there a test case written in JavaScript. Tests are defined in an array called “tests” and the names are later shown on the “Tests” tab in the “Response” section. There are 4 tests defined and all passed successfully. This will be very usefull in testing our own APIs and I will show you later what we can do with it. And as it is JavaScript we can do a lot.

I said that having test requests saved in the “Collection” will be usefull. Now, when we have a collectoin full of test cases we can run them easilly. For that we will use the “Runner” which is located at the top left part of the window. It will start a new window and you can pick your test collections to run. I will go into details in the future.

C.

The first step is to choose the type for the new fanpage. For blog use the “Brand or Product” and then “Website“. You will have to pick a name and after clicking “Get started” the fanpage will be created.

Now you have to configure the URL of your website (in case of my blog it is: http://blog.creyn.pl), short description and unique fanpage identifier. It will be used in the link of the fanpage. I wanted to choose “creyn” but it was already taken so I choose the “creynblog“. Now you can go directly to the fanpage of my blog by typing the “https://facebook.com/creynblog/” in the browser.

On next tab you have to setup the logo. I have to play with few of my old ones. The image should be square because Facebook will crop it otherwise. The problem is that each of the logos you’ll try will be saved on your timeline and will be visible to your fans. Fortunatelly you can delete them later in the “Photos” section.

Next you can add your new fanpage to “Favourites“. I decided to do this because it is easier to go to fanpage by clicking on the link in the “Favourites” menu group. You can also skip this step.

Next tab, the “Preferred Page Audience” is a big one. You can pick a location, age and even gender for who your fanpage will be presented. There are a lot of interests that you can choose from. Tooooo many for my taste. Really, it is overwhelming. But hey. This is Facebook, they know how to promote your content. So I spend some time to pick just the two that I find fit the best: “Computer programming” and “Photography“. Fortunatelly you can change it later (in the “Settings > Preferred Page Audience” section of the fanpage).

And this is it. Your new Facebook fanpage is created and configured. Of course you can tweek it later and the number of available settings is huge. Yoy can now explore it and spend some time getting familiar with how it works. Please go and have fun with it :)

I am inviting you to go to my fanpage here: https://facebook.com/creynblog/. I would be honored if you like my fanpage, please say hallo and comment that you came directly from the blog :)

C.

So let’s go to the second step: Configure blog with the Tracking ID.

Step 2: Configure blog

In the first step, on the “Google Analytics” website (https://analytics.google.com/analytics/web/#management/Settings > “Tracking Info” > “Tracking Code”), right next to the “Tracking ID” we’ve found a “Tracking Script” that could be used to configure our blog.

My blog is a so called “self hosted” version. This is an installation on a hosting platform that I paid for and have more controll over my blog. There are many ways to put the tracking code on every webpage. There are many plugins to do it. I decided to try a simple one that inserts snippets of source code in the header and the footer on each webpage. As I didn’t have it before, I had to install it from the “WordPress” plugins repository. If you want to follow, please go to the “Plugins > Add New” section and look for the “Header and Footer” plugin. The search engine should return many similar plugins but this is the most popular one and has the 5 star score. After installing it, we can find it in the “Settings > Header and Footer” section.

From the screenshoot below you can see that it is very customizable and has many options for inserting snippets of code on dfferent pages. I’ve choosen the “<HEAD> Section Injection” which inserts code on “Every” page of my blog.  Here you have to paste the auto generated “Tracking Script” from the “Google Analytics” website.

After this is done we could check if the setup is correct. First go to one of your blog posts and then open the “View page source” from the browser (you can press Ctrl+U on the keyboard, it should work in most browsers). You can now see that the script was succesfully inserted on my “Fog in Warsaw” blog post.

On the “Google Analytics” reporting page (here: https://analytics.google.com/analytics/web) we can also see that the script is working and the statistics are send to Google. Please go to the “Reporting > Real Time > Conversions“. In my case there is already one visitor showing in this report.

The reports in other reporting sections are shown with some delay and can not be shown from the very beginning. But it will be there tomorrow. Now we could start promote our blog posts and see which one is the most popular.

To sum up, I already had the “Jetpack” plugin statistics for my “WordPress” blog but I have the feeling that they are very simple and I hope that the “Google Analytics” will give me much more insight into my visitors preferences. We’ll see. And as it turned out, adding GA to my blog was very easy.

C.

In this post I’ll focus on the first step that is needed: Registration to the “Google Analytics“.

Step 1: Register

For the “Google Analytics” the registration process is actually very simple and it is summarized on this graphic below:

First you will need a “Google” account. I assume you have one already or know how to register for a new one. Then you need to go to the page: https://www.google.com/analytics/ and login using that account. When logged in you need to go trought a very simple wizard process that helps you create and configure the account.

First step is choosing if the setup will be for a Mobile App or a Website. In case of a blog let’s choose the “Website” option. Then you have to set an “Account Name” and “Website Name“. Those are for you to differentiate with some other analytics that you might want to have (for example a second blog or some static websites). The “Website URL” is the URL of your blog. You can copy paste the URL from your blog homepage address (like I did here). The “Industry Category” section will help Google to prepare some basic raports for you. The last thing is to choose the “Reporting Zone Time“. You can choose you country and all reports will be properly recalculated to your timezone.

Next thing is to allow Google to gather and share some statistics to help them to imrove their service. I allowed for all of them. And after clicking “Get Tracking ID” and accepting some “Terms of Service Agreement” you will be send to a new website and the “Tracking ID” will be generated for you.

The “Tracking ID” is very important. This is an identificator that allows Google to track users on your website. Below the “Tracking ID” is a section with the JavaScript code. You can just copy paste it on the web page that you want to have tracking enabled. In my case, I want to put it on every page on my blog.

How to do it I will show you in the next post. For now you could play around with the nice “Google Analytics” website. They have many video tutorials and informations about each report. Even a quick look at the available options will give you the idea of the things you can learn about your visitors. And there are a lot of them.

C.

Z całego konkursu żałuję, że nie znalazłem czasu na czytanie wszystkich wybranych blogów ani większego udzielania się w społeczności. Czytając inne podsumowania dowiedziałem się np. o Slacku, gdzie uczestnicy dyskutowali o swoich projektach :) Szkoda, że gdzieś mi to umknęło, bo może udałoby się bardziej zintegrować z koleżankami i kolegami z konkursu.

Chciałbym też wyróżnić kilka blogów, które awansowały w moim Feedly (czytnik RSS online) z jednej z 7 kategorii na jakie podzieliłem uczestników do “Must Read”:

• Konrad Kokosa – Memory Visualizer – http://blog.kokosa.net/
• CZe SiO  – Smart Hub – http://czesio-w-it.2ap.pl/
• Tomasz Jarzyński – Pokerowe Podziemie – http://tomaszjarzynski.pl/
• Maciej Lesiczka – DSP Meta – http://macieklesiczka.github.io/
• Szymon Kulec – RampUp – https://blog.scooletz.com/

Na koniec podsumowanie stanu projektu “Smart Lodówka”.

Działa :) To najważniejsze. Na chwilę obecną malinka jest podłączona do mojej lodówki i za pomocą sprytnego czujnika otwarcia drzwi monitorowane są zdarzenia: DOOR_OPEN oraz DOOR_CLOSE. Dwie diody LED sygnalizują pracę skryptu: zielona miga jednostajnie a czerwona świeci się tylko gdy są otwarte drzwi. Gdy znajdę chwilę pojawią się wpisy o implementacji i kodzie. A na koniec filmik:

#RaspberryPi #SmartLodowka #smart #fridge #DajSiePoznac2016 #IoT

Film zamieszczony przez użytkownika @pawel.kowalik 31 Maj, 2016 o 1:11 PDT

Pozdrawiam i gratuluję wszystkim uczestnikom :)

C.

Visual Studio potrafi podłączyć swój debugger do już uruchomionego procesu, czy to lokalnie czy też na zdalnym komputerze. Także na innym systemie. W tym Raspberry Pi. Scenariusz wygląda następująco:

1. Piszemy skrypt w Pythonie
2. Dodajemy do naszego skryptu pakiet “ptvsd“, umożliwia on właśnie zdalne podłączenie się do procesu skryptu
3. Uruchamiamy nasz skrypt na Raspberry Pi
4. W Visual Studio podłączamy debugger do malinki (która teraz jest serwerem debugowania)

Zdalne debugowanie możliwe jest właśnie dzięki pakietowi “ptvsd“. Należy go zainstalować na malince:

pip install ptvsd

W skryptcie należy go zaimportować i skonfigurować. W tym przypadku umożliwiamy zdalne podłączanie procesu debugowania oraz ustawiamy nasz sekret “SomeSecret”. Będzie on potrzebny w kolejnym kroku.

import ptvsd
ptvsd.enable_attach("SomeSecret")

Możliwe jest także podpięcie certyfikatu i zabezpieczenie naszego połączenia z malinką. Na razie jednak obejdziemy się bez tego. Kod skryptu znajduje się w repozytorium na githubie.

Po uruchomieniu skryptu możemy podłączyć się do malinki z Visual Studio. W tym celu przechodzimy do “Debug” > “Attach to process“. Jako typ Transportu wybieramy “Python remote (ptvsd)“. Następnie wskazujemy adres naszej malinki wraz z wcześniej wpisanym sekretem i po naciśnięciu na przycisk “Refresh” powinniśmy dostać listę procesów, do których możemy się podłączyć. W tym przypadku widzimy jeden: “python @ tcp://192.168.0.11/”. To nasz uruchomiony skrypt. Podłączamy się więc do niego debuggerem.

W kodzie skryptu ustawiamy breakpoint i czekamy aż wykonywanie skryptu dojdzie do niego. W tym momencie mamy już pełny debugger Visual Studio na procesie z naszym skryptem. Z całym stackiem, zmiennymi i innymi dobrodziejstwami IDE. Na screenie widzimy konsolę z malinki oraz debugger Visual Studio. Skrypt ma pętlę, która wykonuje się aż użytkownik nie przypisze do zmiennej X wartości 0 (zero). Breakpoint ustawiony jest w linii z instrukcją wyświetlenia wartości zmiennej. Poniżej widzimy wartości zmiennych, do których również mamy dostęp z poziomu debuggera.

Z okna “Immediate Window” możemy wykonywać różne polecenia na malince. Wypiszmy informację, że zaraz zmienimy wartość wpisanej zmiennej: “VS is changing the X for 0 ;)” i następnie to zróbmy. W tym momencie, po wznowieniu wykonywania skryptu zostanie spełniony warunek kończący pętlę i skrypt się zakończy pomimo tego, że użytkownik nie wpisał 0.

Mamy więc dostęp do malinki. Tutaj przy okazji pobawiłem się trochę świecącymi diodami. Dla spostrzegawczych, widzicie “import ptvsd”? Wygląda to jak początek naszego skryptu :)

Debugowanie przyda się, kiedy przejdę do kolejnych, bardziej skomplikowanych etapów pracy nad Smart Lodówką. Teraz przyszła już pora na obsługę zdarzeń otwierania drzwi lodówki.

C.

import urllib2

response = urllib2.urlopen('http://smartlodowka.creyn.pl/api/events/')

print response.read()
# [{"Id":2,"Name":"First test event"},{"Id":3,"Name":"And second event"},{"Id":4,"Name":"Test multi 1"},{"Id":5,"Name":"Test multi 2"},{"Id":6,"Name":"New one"},{"Id":7,"Name":"pTest1"}]

Możemy użyć bezpośrednio URLa lub stworzyć obiekt Request, który umożliwi także ustawianie nagłówków żądania. W tym przykładzie chcę dostać od serwera odpowiedź w formacie XML a nie JSON.

import urllib2

request = urllib2.Request('http://smartlodowka.creyn.pl/api/events/')
request.add_header('Accept', 'application/xml')
response = urllib2.urlopen(request)

print response.read()
# <ArrayOfEvent xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/SmartLodowkaAPI.DTO"><Event><Id>2</Id><Name>First test event</Name></Event><Event><Id>3</Id><Name>And second event</Name></Event><Event><Id>4</Id><Name>Test multi 1</Name></Event><Event><Id>5</Id><Name>Test multi 2</Name></Event><Event><Id>6</Id><Name>New one</Name></Event><Event><Id>7</Id><Name>pTest1</Name></Event></ArrayOfEvent>

Pobrana odpowiedź z serwera jest stringiem, przydałoby się zamienić ją na jakiś bardziej przydatny typ danych. Zacznijmy od stworzenia klasy Event. Konstruktor klasy w Pythonie nazywa sie “__init__” i przyjmuje parametr “self“, dzięki któremu możemy stworzyć property klasy i zainicjować je na odpowiednie dane przekazane przy tworzeniu obiektu.

class Event:
    def __init__(self, id, name):
        self.Id = id
        self.Name = name
		
ev = Event(1, 'First event')

print 'Name of first event: ' + ev.Name + ' of id: ' + str(ev.Id)
# Name of first event: First event of id: 1

Następnie należy zrobić deserializację stringa do obiektów naszej nowej klasy. Wiemy, że z serwera dostaniemy listę obiektów typu Event w jednym stringu w formacie JSON. Niestety nie udało mi się znaleźć biblioteki pokroju Json.NET od Newtonsoft. Także napiszemy własnego, skrojonego na miarę “Json to Event” parsera opartego na wyrażeniach regularnych:

import json
import re # regular expresion module

# class representing Event
class Event:
    def __init__(self, id, name):
        self.Id = int(id) # make sure id is integer
        self.Name = name

# response that cames from api
response = '[{"Id":2,"Name":"First test event"},{"Id":3,"Name":"And second event"},{"Id":4,"Name":"Test multi 1"},{"Id":5,"Name":"Test multi 2"},{"Id":6,"Name":"New one"},{"Id":7,"Name":"pTest1"}]'
print response
# [{"Id":2,"Name":"First test event"},{"Id":3,"Name":"And second event"},{"Id":4,"Name":"Test multi 1"},{"Id":5,"Name":"Test multi 2"},{"Id":6,"Name":"New one"},{"Id":7,"Name":"pTest1"}]

# split response and get all objects: between { and }
jsonObjects = re.findall("{.*?}",response)

# foreach of found object, get values between: " and " and between: : and ,
events = []
for o in jsonObjects:
    values = re.findall("\".*?\"|:.*?,", o)
    id = values[1][1:-1] # remove first and last character
    name = values[3][1:-1]
    ev = Event(id, name)
    events.append(ev)
    
print len(events)
# 6

print 'Id is: ' + str(events[3].Id)
# Id is: 5

print 'Name is: ' + events[3].Name
# Name is: Test multi 2

Powyższy kod pozostawia wiele do życzenia, co z kolei daje miejsce do poprawy w kolejnych wpisach :)

Skoro już potrafimy pobrać listę zdarzeń z Web Api należałoby teraz wysłać nowe i dodać do kolekcji na serwerze. W tym celu również posłużymy się biblioteką urllib2 i metodą urlopen. Metoda ta, jako pierwszy parametr przyjmuje URL lub obiekt Request określający docelowy endpoint, do którego się łączy. Jako drugi parametr może przyjąć dane. Jeżeli przekażemy do tej metody dane, to automatycznie zostanie wysłane zapytanie POST (zamiast GET jak w poprzednich przypadkach). Dane muszą być w formacie ‘application/x-www-form-urlencoded‘.

import urllib2

# has to be list of Events

data = 'Events[0].Name=TestURLLIB2'

response = urllib2.urlopen('http://smartlodowka.creyn.pl/api/events/', data)
print response.read()

# [{"Id":8,"Name":"TestURLLIB2"}]

Ten dziwny format danych wysłanych w requeście spowodowany jest sposobem w jaki budowane są obiekty C# w Web Api. Kontroler spodziewa się listy obiektów typu Event, nazwa tego property to właśnie “Events“, czyli przesyłamy tablicę i pierwszy element (stąd indeks 0) bindujemy do obiektu Event a jego property “Name” ustawiamy na “TestURLLIB2″.

public IHttpActionResult Post(CreateEventsRequest request)
{
    ...
}
public class CreateEventsRequest
{
    public List<Event> Events { get; set; }
}
public class Event
{
    ...    
    public string Name { get; set; }
}

A chcąc przekazać dwa zdarzenia ustawiamy dwa pierwsze elementy tablicy

import urllib2

url = 'http://smartlodowka.creyn.pl/api/events/'

# has to be list of Events
data = 'Events[0].Name=List1&Events[1].Name=List2'

response = urllib2.urlopen(url, data)
print response.read()
# [{"Id":9,"Name":"List1"},{"Id":10,"Name":"List2"}]

allEvents = urllib2.urlopen(url).read()
print allEvents
# [{"Id":2,"Name":"First test event"},{"Id":3,"Name":"And second event"},{"Id":4,"Name":"Test multi 1"},{"Id":5,"Name":"Test multi 2"},{"Id":6,"Name":"New one"},{"Id":7,"Name":"pTest1"},{"Id":8,"Name":"TestURLLIB2"},{"Id":9,"Name":"List1"},{"Id":10,"Name":"List2"}]

Dzięki tym kilku ćwiczeniom znamy już proste zapytania HTTP: pobieranie danych za pomocą GET i wysyłanie za pomocą POST. W tym momencie to w zupełności wystarczy aby przejść dalej w ramach projektu Smart Lodówka i przymierzyć się do wysyłania zdarzeń ze świata rzeczywistego. Zacznę od dwóch podstawowych typów zdarzeń: Otwarcie i Zamknięcie drzwi lodówki.

C.

	Node.js (https://nodejs.org/en/) JavaScriptowy silnik (?) do tworzenia aplikacji serwerowych. “Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.”
	NPM (Node Package Manager) (https://www.npmjs.com/) Menadżer paczek dla Node.js. “npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways. “ Instaluje się razem z Node.js Uwaga. Z powodu błędu związanego z przesyłaniem tokenów do uwierzytelnienia zaleca się aktualizację do najnowszej wersji. Więcej tutaj: https://nodejs.org/en/blog/vulnerability/npm-tokens-leak-march-2016/
	Grunt (http://gruntjs.com/) Program do automatyzacji “GruntThe JavaScript Task Runner” Instalacja za pomocą npm
	Gulp (http://gulpjs.com/) Program do automatyzacji (konkurencja Grunta?) “Automate and enhance your workflow” Instalacja za pomocą npm
	Bower (http://bower.io/) Menadżer pakietów dla frontendu (npm instaluje pakiety dla Node po stronie serwera, bower po stronie klienta) “A package manager for the web” “Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.” Instalacja za pomocą npm (bo jest to pakiet rozszerzający możliwości Node)

C.

“Aurelia is the most powerful, flexible and forward-looking JavaScript client framework in the world.”
“Aurelia is a next generation UI framework“.

Z tego co widzę, jest to taki następca bardzo popularnego Angulara. Choć może bardziej konkurencja. Nigdy nie myślałem o sobie jako o frontendowcu i dlatego wszelkie biblioteki ułatwiające programowanie w JavaScript uważam za świetny pomysł i im więcej tym lepiej.

Jak zatem zacząć? Na stronie Aurelii jest dość dokładny poradnik Getting Started. Dzięki niemu udało mi się stworzyć przykładową stronę.

Pierwsza rzecz, która rzuca się w oczy: bardzo dużo tutaj wszelkiego rodzaju: gulpów, gruntów, nodów, npmów i jsmpów. Chyba nadeszła chwila, aby dokładniej poznać te narzędzia. Na początek, fajnie że autorzy przygotowali “Starter Kit” aby przejść przez tutorial i zacząć poznawać Aurelię. Po pobraniu okazało się że ma on … 10 MB. Wydało mi się to trochę dużo. Drugą rzeczą jest liczba modułów. Aurelia jest bardzo modułowa i podobno można używać tylko tych, które są naprawdę potrzebne. Okazuje się jednak, że do wyświetlenia mojej banalnej strony potrzebne są praktycznie wszystkie. Nie wykluczam, że coś źle robię i w przyszłości będzie możliwe ograniczenie tej liczby, ale nie wiem czy nie jest to za bardzo modułowe :)

Ucząc się najlepiej zacząć od początku, także chciałem krok po kroku stworzyć najprostszy możliwy projekt. Do solucji w Visual Studio dodałem folder Aurelia i dwa podstawowe pliki: “config.js” i “system.js”. Pierwszy zawiera listę mapowań modułów na konkretne pliki. Być może tutaj nie potrzebuję mieć wszystkich a jedynie kilka podstawowych. Sprawa do zgłębienia. W każdym razie przenosiłem po kolei pakiety ze “Starter Kita” do solucji. Udało mi się uruchomić sam framework w tym sensie, że nie dostawałem już błędów 404 z plikami JavaScript Aurelii. Doszedłem do etapu tworzenia swojej aplikacji.

Aby to zrobić należy stworzyć dwa pliki: “app.js” i “app.html”. Plik “app.js” jest modelem dla widoku z “app.html”. Takie MVC. Przychodzący request jest mapowany do konkretnego widoku w ruterze, który konfigurowany jest właśnie w startowym pliku aplikacji “app.js”. Ja dodałem tam tylko jeden widok: events. Wyświetla on listę wszystkich zdarzeń pobranych z API, które stworzyłem wcześniej (OWIN WebApi na hostingu Webio).

Na koniec opublikowałem zmiany na hosting Webio i uruchomiłem przeglądarkę. Bardzo się zdziwiłem jak długo trwa wczytanie strony. Każdy moduł Aurelii jest pobierany jako jeden plik JavaScript a jest ich wszystkich … 95. Nic dziwnego, że trochę to trwa (30 sekund).

Ale jest tutaj pole do optymalizacji. W każdym razie drugie załadowanie strony, przy plikach pobranych z cache, jest znośne, choć też zbyt wolne dla tego typu strony. Trwa 1,5 s. Jest to koszt odpalenia frameworka i wszystkich dobroci, które ze sobą niesie, a których chyba nie zauważę w tak prostym projekcie.

Ciekawostka. Przed opublikowaniem tego posta postanowiłem jeszcze raz zrobić test strony po paru godzinach nieaktywności. Strona załadowała się w … 4 i pół minuty. Wydaje mi się, że na optymalizację będę musiał przeznaczyć więcej czasu niż początkowo zakładałem. Mam też nadzieję że nie będę musiał rezygnować z Aurelii.

Podsumowując, udało mi się uruchomić swoją pierwszą stronę we frameworku Aurelia. Na stronie możliwe będzie monitorowanie zdarzeń jakie wystąpią w mojej Smart Lodówce. Dostępna jest pod adresem: http://smartlodowka.creyn.pl (jeśli długo nic nie widać … cierpliwości). Dla przypomnienia, ta sama lista zdarzeń z systemu dostępna jest bezpośrednio z API: http://smartlodowka.creyn.pl/api/events.

C.