Skip to content

6. Appendices

Here we explain how to install the tools used in this document on Windows 7 machines.

6.1. Installing STS (Spring Tool Suite)

We will install SpringSource Tool Suite [http://www.springsource.com/developer/sts], an Eclipse environment pre-equipped with numerous plugins related to the Spring framework and also with a pre-installed Maven configuration.

  • Go to the SpringSource Tool Suite (STS) website [1] to download the current version of STS [2A] [2B].
  • The downloaded file is an installer that creates the file directory structure [3A] [3B]. In [4], we launch the executable,
  • in [5], the IDE workspace window after closing the welcome window. In [6], display the application servers window,
  • in [7], the servers window. A server is registered. It is a Tomcat-compatible VMware server.

The use of STS within the application is explained in section 1.3.2.

6.2. Installation of [ WampServer]

[WampServer] is a software package for developing in PHP/MySQL/Apache on a Windows machine. We will use it solely for the MySQL DBMS.

  • On the [WampServer] website [1], choose the appropriate version [2],
  • The downloaded executable is an installer. You will be asked for various pieces of information during the installation. These do not pertain to MySQL, so you can ignore them. Window [3] appears at the end of the installation. Launch [WampServer],
  • in [4], the [WampServer] icon appears in the taskbar at the bottom right of the screen [4],
  • when you click on it, the [5] menu appears. It allows you to manage the Apache server and the MySQL DBMS. To manage the latter, use the [PhpMyAdmin] option,
  • which opens the window shown below,

Image

We will provide few details on using [PhpMyAdmin]. In section 1.3.1, we show how to use it to create the application’s database.

6.3. Installing [WebStorm]

[WebStorm] (WS) is JetBrains’ IDE for developing HTML/CSS/JS applications. I found it perfect for developing Angular applications. The download site is [http://www.jetbrains.com/webstorm/download/]. It is a paid IDE, but a 30-day trial version is available for download. There are affordable personal and student versions.

Its use within the application is described in section 1.3.3. To install JS libraries within an application, WS uses a tool called [bower]. This tool is a module of [node.js], a collection of JS libraries. Additionally, JS libraries are fetched from a Git repository, requiring a Git client on the machine performing the download.

6.3.1. Installing [node.js]

The [node.js] download site is [http://nodejs.org/]. Download the installer and then run it. That is all you need to do for now.

6.3.2. Installing the [bower] tool

The [bower] tool, which allows you to download JavaScript libraries, can be installed in several ways. We will install it from the command line:


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)
  • line 1: the [node.js] command that installs the [bower] module. For the command to work, the [npm] executable must be in the machine’s PATH (see paragraph below);

6.3.3. Installing [Git]

Git is a software version control system. There is a Windows version called [msysgit] available at the URL [http://msysgit.github.io/]. We will not use [msysgit] to manage versions of our application, but simply to download JS libraries found on sites like [https://github.com], which require a special access protocol provided by the [msysgit] client

The installation wizard offers several steps, including the following:

For the other installation steps, you can accept the default values provided.

Once Git is installed, verify that the executable is in your machine’s PATH: [Control Panel / System and Security / System / Advanced System Settings]:

The PATH variable looks like this:


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:\Program Files\sgbd\OracleXE\app\oracle\product\11.2.0\client\bin;D:\Program Files\sgbd\OracleXE\app\oracle\product\11.2.0\server\bin;...;D:\Program Files\javascript\node.js\;D:\Program Files\utilities\Git\cmd

Verify that:

  • the path to the [node.js] installation folder is present (here D:\Programs\javascript\node.js);
  • the path to the Git client executable is present (here D:\Program Files\Utilities\Git\cmd);

6.3.4. Configuring [WebStorm]

Let’s now check the [WebStorm] configuration

Above, select option [1]. The list of already installed [node.js] modules appears in [2]. This list should only contain line [3] for the [bower] module if you followed the previous installation process.

6.4. Installing an Android emulator

The emulators provided with the Android SDK are slow, which discourages their use. The company [Genymotion] offers a much more powerful emulator. It is available at the URL [https://cloud.genymotion.com/page/launchpad/download/]

(February 2014).

You will need to register to obtain a version for personal use. Download the [Genymotion] product with the VirtualBox virtual machine;

Image

Install and then launch [Genymotion]. Next, download an image for a tablet or phone:

  • in [1], add a virtual device;
  • in [2], choose one or more devices to install. You can refine the displayed list by specifying the desired Android version [3] and the device model [4];
  • Once the download is complete, you'll see [5] a list of the virtual devices available for testing your Android apps;

6.5. Installing the Chrome [Advanced Rest Client] plugin

In this document, we use Google's Chrome browser (http://www.google.fr/intl/fr/chrome/browser/). We will add the [ Advanced Rest Client] extension to it. Here's how to do it:

 
  • the app is then available for download:
  • to get it, you’ll need to create a Google account. The [Google Web Store] will then ask for confirmation [1]:
  • in [2], the added extension is available in the [Apps] option [3]. This option appears on every new tab you create (CTRL-T) in the browser.
https://tahe.developpez.com
This tutorial written by Serge Tahé is made available to the public under the terms of the Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.