6. Załączniki

Poniżej przedstawiamy instrukcję instalacji narzędzi wykorzystanych w niniejszym dokumencie na komputerach z systemem Windows 7.

6.1. Instalacja STS (Spring Tool Suite)

Zainstalujemy SpringSource Tool Suite [http://www.springsource.com/developer/sts], czyli środowisko Eclipse wyposażone w liczne wtyczki związane z frameworkiem Spring, a także z preinstalowaną konfiguracją Maven.

przejdź na stronę pakietu narzędziowego SpringSource (STS) [1], aby pobrać aktualną wersję STS [2A] [2B],

pobrany plik jest instalatorem, który tworzy drzewo plików [3A] [3B]. W pliku [4] uruchamia się plik wykonywalny,
w pliku [5] widoczne jest okno robocze programu IDE po zamknięciu okna powitalnego. W pliku [6] wyświetlane jest okno serwerów aplikacji,

w [7] wyświetla się okno serwerów. Zarejestrowano jeden serwer. Jest to serwer VMware zgodny z Tomcatem.

Sposób wykorzystania STS w ramach aplikacji wyjaśniono w punkcie 1.3.2.

6.2. Instalacja [WampServer]

[WampServer] to pakiet oprogramowania służący do tworzenia aplikacji w środowisku PHP / MySQL / Apache na komputerze z systemem Windows. Będziemy go używać wyłącznie w przypadku SGBD i MySQL.

na stronie [WampServer] [1] należy wybrać odpowiednią wersję [2],
pobrany plik wykonywalny jest instalatorem. Podczas instalacji wymagane jest podanie różnych informacji. Nie dotyczą one MySQL. Można je zatem pominąć. Po zakończeniu instalacji wyświetla się okno [3]. Uruchamia się [WampServer],

w [4], ikona [WampServer] zostanie umieszczona na pasku zadań w prawym dolnym rogu ekranu [4],
po kliknięciu na nią wyświetla się menu [5]. Umożliwia ono zarządzanie serwerem Apache oraz SGBD i MySQL. Aby nim zarządzać, należy użyć opcji [PhpPmyAdmin],
po czym pojawia się poniższe okno,

Nie będziemy szczegółowo omawiać korzystania z [PhpMyAdmin]. W punkcie 1.3.1 pokazujemy, jak używać go do tworzenia bazy danych aplikacji.

6.3. Instalacja [Webstorm]

[WebStorm] (WS) jest rozszerzeniem IDE o JetBrains, służącym do tworzenia aplikacji HTML / CSS / JS. Okazało się, że idealnie nadaje się do tworzenia aplikacji w Angularze. Strona pobierania to [http://www.jetbrains.com/webstorm/download/]. Jest to wersja płatna IDE, ale można pobrać 30-dniową wersję próbną. Dostępne są niedrogie wersje osobista i studencka.

Sposób jego wykorzystania w ramach aplikacji opisano w punkcie 1.3.3. Aby zainstalować biblioteki JS w aplikacji, WS wykorzystuje narzędzie o nazwie [bower]. Narzędzie to jest modułem [node.js], zestawu bibliotek JS. Ponadto biblioteki JS są pobierane z serwisu Git, co wymaga zainstalowania klienta Git na komputerze, z którego odbywa się pobieranie.

6.3.1. Instalacja [node.js]

Stroną pobierania [node.js] jest [http://nodejs.org/]. Pobierz instalator, a następnie uruchom go. Na razie nie trzeba robić nic więcej.

6.3.2. Instalacja narzędzia [bower]

Instalację narzędzia [bower], które umożliwi pobieranie bibliotek JavaScript, można przeprowadzić na różne sposoby. My wykonamy ją z poziomu konsoli:


C:\Users\Serge Tahé>npm install -g bower
C:\Users\Serge Tahé\AppData\Roaming\npm\bower -> C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.7 C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower
├── stringify-object@0.2.1
├── is-root@0.1.0
├── junk@0.3.0
...
├── insight@0.3.1 (object-assign@0.1.2, async@0.2.10, lodash.debounce@2.4.1, req
uest@2.27.0, configstore@0.2.3, inquirer@0.4.1)
├── mout@0.9.1
└── inquirer@0.5.1 (readline2@0.1.0, mute-stream@0.0.4, through@2.3.4, async@0.8
.0, lodash@2.4.1, cli-color@0.3.2)

wiersz 1: polecenie [node.js], które instaluje moduł [bower]. Aby polecenie zadziałało, plik wykonywalny [npm] musi znajdować się w katalogu PATH na komputerze (patrz poniższy akapit);

6.3.3. Instalacja [Git]

Git to system zarządzania wersjami oprogramowania. Istnieje wersja dla systemu Windows o nazwie [msysgit], dostępna w URL i [http://msysgit.github.io/]. Nie będziemy używać [msysgit] do zarządzania wersjami naszej aplikacji, a jedynie do pobierania bibliotek JS znajdujących się na stronach typu [https://github.com], które wymagają protokołuspecjalnego dostępu, który jest zapewniany przez klienta [msysgit]

Asystent instalacji proponuje różne etapy, w tym następujące:

W pozostałych etapach instalacji można zaakceptować proponowane wartości domyślne.

Po zakończeniu instalacji Gita sprawdź, czy plik wykonywalny znajduje się w katalogu PATH na Twoim komputerze: [Panneau de configuration / Système et sécurité / Système / Paramètres systèmes avancés]:

Zmienna PATH wygląda następująco:


D:\Programs\devjava\java\jdk1.7.0\bin;D:\Programs\ActivePerl\Perl64\site\bin;D:\Programs\ActivePerl\Perl64\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\server\bin;...;D:\Programs\javascript\node.js\;D:\Programs\utilitaires\Git\cmd

Sprawdź, czy:

ścieżka do folderu instalacyjnego pliku [node.js] jest prawidłowa (w tym przypadku D:\Programs\javascript\node.js);
czy podano ścieżkę do pliku wykonywalnego klienta Git (w tym przypadku D:\Programs\utilitaires\Git\cmd);

6.3.4. Konfiguracja [Webstorm]

Sprawdźmy teraz konfigurację [Webstorm]

Powyżej wybierz opcję [1]. Lista już zainstalowanych modułów [node.js] pojawia się w [2]. Lista ta powinna zawierać wyłącznie wiersz [3] modułu [bower], jeśli postępowano zgodnie z poprzednią procedurą instalacji.

6.4. Instalacja emulatora dla systemu Android

Emulatory dostarczane wraz z SDK dla systemu Android działają wolno, co zniechęca do ich używania. Firma [Genymotion] oferuje znacznie wydajniejszy emulator. Jest on dostępny na stronie URL [https://cloud.genymotion.com/page/launchpad/download/]

(luty 2014 r.).

Aby uzyskać wersję do użytku osobistego, należy się zarejestrować. Pobierz produkt [Genymotion] wraz z maszyną wirtualną VirtualBox;

Zainstaluj, a następnie uruchom [Genymotion]. Następnie pobierz obraz dla tabletu lub telefonu:

w [1] dodaj urządzenie wirtualne;
w [2] wybierz jedno lub więcej urządzeń do zainstalowania. Możesz zawęzić wyświetlaną listę, określając żądaną wersję Androida ([3]) oraz model urządzenia ([4]);

po zakończeniu pobierania otrzymasz w [5] listę wirtualnych urządzeń, które są do Twojej dyspozycji w celu testowania aplikacji na Androida;

6.5. Instalacja rozszerzenia do przeglądarki Chrome o numerze [Advanced Rest Client]

W niniejszym dokumencie korzystamy z przeglądarki Chrome firmy Google (http://www.google.fr/intl/fr/chrome/browser/). Dodamy do niej rozszerzenie [Advanced Rest Client] . Można to zrobić w następujący sposób:

wejść na stronę [Google Web store] (https://chrome.google.com/webstore) w przeglądarce Chrome;
wyszukać aplikację [Advanced Rest Client]:

aplikacja jest wtedy dostępna do pobrania:

aby ją pobrać, należy utworzyć konto Google. Aplikacja [Google Web Store] prosi następnie o potwierdzenie [1]:

W [2] dodane rozszerzenie jest dostępne w opcji [Applications] [3]. Opcja ta jest wyświetlana na każdej nowej karcie, którą tworzysz (CTRL-T) w przeglądarce.