Let's now see how to connect the different parts of the project. We are first going to take care of connecting all the components to the Arduino board, basically the relay module and the CC3000 Wi-Fi chip. To give you an idea, this is what you should end up with:

To know exactly which wires and pins you have to connect, the following image describes all the connections of the project:

Note that this schematic only displays the connections for one relay module. Let's first see how to connect a single relay module. To get started on the hardware connection, first place the different components next to each other and plug the CC3000 module on the breadboard. We are first going to take care of the power supply part. Connect the ground (GND) pin of the Arduino board to the GND pin of the CC3000 board. Then, connect the Arduino Uno board 5V pin to the Vin pin of the CC3000 board.

Now, let's look at the CC3000 chip. There are quite a few pins to connect to the...

Now that the hardware configuration is complete, we can start writing some code to test our project. We'll first write a simple sketch to test a given relay. Go over to your Arduino IDE and you can start writing some code. The most important parts of the code will be detailed below, and you can find the complete code on the GitHub repository of the project at https://github.com/openhomeautomation/arduino-home-automation/tree/master/chapter2.

The first step is to declare which pin the relay you want to test is connected to:

const int relay_pin = 6;

We use a const int variable here, which is similar to #define but better, since we are sure the constant is of the right type. In the setup() function of the sketch, we need to specify that this pin is a digital output with the pinMode() function:

pinMode(relay_pin,OUTPUT);

Then, inside the loop() function, we are basically going to activate the relay, wait for 5 seconds, switch it off again, wait for 5...

Although it's good to use commands directly inside your browser to test the project, it's not so convenient to actually use the project for daily use. That's why we are going to build a dedicated interface so that you can control your relays from your computer, just by clicking on some buttons.

Since we'll use web technologies to do so, this interface will also be accessible from your mobile phone or tablet, as long as you are connected to the same Wi-Fi network.

Just as seen in the first chapter of this book, we are going to use a mix of HTML, CSS, JavaScript, and PHP to build the interface. Let's first see the important part of the HTML file. It is basically composed of several blocks, each corresponding to a relay. For each relay, there are two buttons: one to set the relay on and one to set it off. The following is the code which is responsible for that part:

<div class="relayBlock"><span class...

It's now time to test the interface. Make sure that the web server is running on your computer. Also, make sure that all the files of the interface are placed inside a folder at the root of your web server. You can go over to this folder in your browser (by typing in localhost) and open the HTML file. This is what you should see:

To test the interface, simply try to click on these different buttons. You will see that the lights switch instantly whenever you press the right button. If it doesn't work at this point, there are several things you can check.

The first thing is to check that your web server is running correctly. Also, check that you have entered the right name for your Arduino board (or the right IP address) inside the PHP file. Finally, make sure that your Arduino sketch is working correctly by typing the commands inside your web browser directly. Also, note that at this point, you should also have set the relay pins to be outputs, as...