Jako praktyk jestem zwolennikiem nauki poprzez ćwiczenia. Sprawdza się to w szczególności podczas prób opanowania nowej technologii lub narzędzia. Dlatego też, w celach naukowych, postanowiłem stworzyć projekt z wykorzystaniem Dojo Toolkit. Aby uniknąć implementacji czegokolwiek w oderwaniu od rzeczywistości, co nigdy nie przyda się nikomu, wybrałem aplikację-pogodynkę. Służyłaby ona sprawdzaniu prognozy pogody, korzystając z gotowego API.

Chcąc korzystać z gotowego i sprawdzonego API, a równocześnie uniknąć opłat, wziąłem pod lupę dane udostępnione przez OpenWeatherMap. Zaletą jest możliwość darmowego korzystania z podstawowych danych i dobra (na pierwszy rzut oka) dokumentacja. Chcąc korzystać z niego, należy zarejestrować się w celu uzyskania identyfikatora aplikacji, który należy dołączać do każdego żądania wysyłanego do OpenWeatherMap. Po rejestracji, wystarczy korzystając z sekcji “API keys”, wygenerować nowy klucz lub skorzystać z domyślnego (Default).

Generowanie nowego klucza

Mając gotowy klucz dla API można zabrać się za implementację.

Na początek warto stworzyć szkielet strony z dołączonym skryptem dojo.js:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Pogodynka</title>
	</head>
	<body>
		<div id="dojo-root"></div>
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js" data-dojo-config="async: true"></script>
	</body>
</html>

Atrybut data-dojo-config wskazuje Dojo, aby ładowało się w sposób asynchroniczny. Oczywiście na tym nie kończą się możliwości konfiguracji. Póki co poprzestaniemy na przeniesieniu ustawień (na razie tej jednej flagi) do osobnego pliku w celu zwiększenia czytelności. Aby to zrobić, wystarczy stworzyć odpowiedni plik:

var dojoConfig = {
	async: true
};

Oraz dołączyć go do struktury strony:

<script src="js/config.js"></script>

Plik dojo.js sam w sobie zawiera zbyt dużo funkcjonalności. Najistotniejsze co posiada to mechanizm AMD (zapewniony przez funkcje require i define). Dzięki nim, możemy załadować i wykorzystać dowolny moduł, w tym podstawowe mechanizmy działania na drzewie DOM. Do tego celu stworzymy plik main.js:

require(["dojo/dom", "dojo/dom-construct"], function (dom, domConstruct) {
	var dojoRoot = dom.byId("dojo-root");
	domConstruct.place("<h1>Pogodynka</h1>", dojoRoot);
});

Który stworzy element h1 w drzewie DOM, jeśli tylko dołączymy skrypt:

<script src="js/main.js"></script>

Funkcjonalność tak stworzonej aplikacji nie zwala z nóg ale jest szkieletem na bazie którego będziemy mogli rozwinąć naszą aplikację, co postaram się opisać w kolejnych artykułach.

Przykładowy projekt: