Turn your Raspberry Pi into fully fledged web development environment with a little help from Google Coder.
Why do this?
The internet extends into every facet of our lives and learning how a web page is constructed is a great skill for children to learn. In this tutorial we will use free software from Google called Coder to learn HTML, CSS and JavaScript.
Tools required
A Raspberry Pi.
Ethernet or Wi-Fi.
A computer on the same network as the Raspberry Pi.
When we think of the Raspberry Pi we instantly think of great projects using Python, Scratch and Sonic Pi. But there are also many other languages that can be used with the credit-card sized computer. Three of these languages are HTML, CSS and JavaScript, which together provide a powerful framework for creating web content.
HTML Hyper Text Markup Language is the most common language used to create web pages. It uses a series of ‘tags’ that identify elements on a page, for example a title, image or video. HTML is not a programming language – it’s more of a content/markup language.
CSS Cascading Style Sheets are used to change the look and feel of a web page. A whole site can be linked to just one stylesheet.
JavaScript is a programming language that has matured with use on the internet. It can be used to link HTML forms to MySQL databases or used with a microcontroller to power hardware projects such as the Espruino Pico board.
Thanks to the cost-effective Raspberry Pi we can easily create a web development suite using a Linux distribution created by a team of Google employees, this project is called Coder. Coder is an open source operating system that creates a suite of tools to edit HTML, CSS and JavaScript in your web browser. Using Coder you can easily create web apps that are hosted on your Raspberry Pi.
When connecting to Coder your browser will warn you that the connection is untrusted; normally this is good advice, but for Google Coder we can trust the connection, so click on Advanced to progress.
Getting started
Installing Google Coder requires downloading a zip archive from http://googlecreativelab.github.io/coder/#download which contains raspi.img, an image of a full operating system which is to be copied to an SD card. Extract the archive to a suitable location, and then open a terminal and navigate to the location of raspi.img:
cd /home/les/Downloads
We are going to be using a command called dd to copy the contents on the image file to a blank SD card. In this tutorial we’re using Linux Mint 17, but if you are using a Windows or Apple computer, follow the instructions at http://googlecreativelab.github.io/coder. The dd command is not to be used lightly, as it has the capacity to cause damage if used incorrectly. The dd command works as follows:
sudo dd if=/location of image of=/location of SD card bs=4M
Firstly you will notice that dd is preceded by the sudo command – this is a safety precaution requiring you to enter your root password.
if refers to the input file, which in our case is the raspi.img file. of refers to the device that will receive the stream of data, which is typically /dev/name of SD card. Lastly bs refers to the block size, used to copy a certain amount of data in one block, in this case 4MB.
So we know the location of the raspi.img file, but where is our SD card? To find out, insert a blank SD card of greater than 4GB in size into your computer. In the terminal type in the command:
mount
You will now see a list of all the hard drives, USB flash disks and SD cards inserted into your computer. One of those will correspond to your SD card – in our case it was /dev/mmcblk0, which is what we need for the dd command. So repeat the above dd command and substitute the if and of values for your locations. This command may take some time to complete, so now is a great time to get a cup of tea.
With the image copied to your SD card, unmount the card, and when prompted remove the card from your computer. Now insert the card into your Raspberry Pi, and then insert an Ethernet cable, connected to your router, and finally insert the power adaptor and power up your Raspberry Pi.
With our Raspberry Pi booted we now have an effective web development environment for less than £30, but now we need to access it. On our Linux Mint computer we opened the Google Chrome web browser and navigated to:
http://coder.local
When connecting to Google Coder for the first time, you’ll be prompted to create a secure password made up of letters and numbers. On the next screen, enter your new password and click on Let’s Code.
Once logged in to Coder, you will see a short introduction to the user interface. The green box enables you to create a new application, and the other coloured blocks are pre-made applications that can be explored. In the top-right of the screen is the Google Coder settings menu.
From the Coder main menu you can access the settings menu via the cog icon in the top-right of the screen.
Our project
We’re going to create a simple website to learn more about HTML, CSS and JavaScript. And of course we are going to use the Raspberry Pi 2, the latest model from the Raspberry Pi Foundation, as our subject.
To create a new project, click on the green box, and you will be prompted to name your project. You can also select the colour of the box; we chose a fetching Raspberry colour. Choose a colour and then click on Create to continue.
We are now taken to our web application, and we can see many tabs at the top of the screen, the first of which is HTML. We can see that there is already some code in there; leave it there for now. In the CSS and JS (JavaScript) tabs we can also see example code which for the time being can be left as is.
The next few tabs are identified via icons, the first of which is a folder icon. This is the media menu and we can use it to import pictures, files, videos and audio into our projects. The next icon is an eye, which enables you to have a split screen preview of your work in code and the finished results. Our final icon is a gear, which denotes that it controls the settings for our project – we can rename, add an author and change the colour of the project for the main menu.
After you’ve created a strong password, Google Coder will ask you to log in using that password.
HTML
HTML is not a programming language; it’s a markup language used to position elements on a page. It does have its own syntax, and elements are constructed inside of tags that are encapsulated in “<..>” brackets. An HTML document is constructed like this:
<html> <head> <!--In the head we store links to external resources such as JavaScript and CSS.--> </head> <body> <h1>Hello World</h1> <p>Your html goes here.</p> </body> </html>
So here we have a selection of elements. We start with <html>, which instructs the browser that we have written an HTML document. Next we have <head>, which performs the tasks that happen behind the scenes, such as loading JavaScript and linking to CSS documents. After the head we have <body>, which contains the elements that will be visible in our project. In this case we use <h1> to create a large headline that says “Hello World”. For all of the tags, we must open them and then remember to close them correctly, for example <html> is closed by </html>. You may have noticed <div> tags dotted around the code. These are tags that divide the HTML page into sections; you can see one called pagecontent that contains all of the elements in the document. Later on we’ll create our own to contain part of our page.
Now that we understand a little HTML, let’s start building our website. We will start by editing the code that is in the body of the HTML document. You can see the <h1> tags. Change the contents to:
<h1>The Raspberry Pi Computer</h1>
Google Coder will display a great navigation tutorial when you first login – take your time to read what it says as it provides lots of useful information.
On the next line we have <hr />. This creates a horizontal line on the page, but this tag is different as it does not have a closing tag, rather it is a self closing tag, denoted by the / in the brackets.
Our next line of code is a <div> element, and this one has the class (a method to identify it in the document) of pi. This new <div> will create a section of the page that is separate from the main body of the document. Inside the <div> we will create a smaller headline, which asks the question “What is the Raspberry Pi?”
<div class="pi"> <h2>What is the Raspberry Pi?</h2>
Again we use another <hr /> tag to create a horizontal line to divide our headline from the main text. Creating paragraph text, as in the main body of text, is achieved using <p> tags:
<hr /> <p>The Raspberry Pi 2 is a powerful single board computer from the Raspberry Pi foundation.</p> <p>It comes with</p>
HTML can display many different styles of data and one of the simplest styles is a list with bullet points. In this project we will use an unordered list to generate bullets, but you could use an ordered list to create a numbered list.
To start a list we first use the <ul> tag to say that we are creating an unordered list. Then for every item in the list we create a <li> tag (list item) that includes the text for that item. Each item in the list will need </li> in order to be closed correctly. Lastly we close the list using </ul>:
<ul> <li>BCM2836 System On A Chip (SoC) consisting of ARM7 quad core CPU running at 900Mhz per core.</li> <li>1GB or DDR2 RAM running at 450Mhz</li> <li>4x USB 2 Ports</li> <li>1x 10/100 Fast Ethernet</li> </ul>
Our next element is a rather lovely picture of the new Raspberry Pi 2, and to display it we need to use the <img> tag. Type in:
<img src=”
and then use the media icon in the top-right of the screen, upload an image to Coder and then paste the link just after src. The image is rather large, so I used the “width=50%” option to reduce its size. The original image still retains its dimensions and file size no matter what size is displayed in the document. Finally you will notice the alt tag, which is alternative text used to describe the picture for browsers that do not support images, such as Lynx:
<img src="/static/apps/raspberry_pi/media/Pi2ModB1GB_-comp.jpeg" width=50% alt="The Raspberry Pi 2 is a powerful single board computer" />
We now close the pi div using </div>.
Our last line of HTML is a simple button, which we will make interactive using JavaScript:
<button>Where can I learn more about the Raspberry Pi?</button>
When you first create an application, it will create a default HTML framework for you to work inside of.
The basic CSS template is sparse but ready for you to edit and make your own.
Great resources
Google Coder is a great way to learn web development. It comes with a great suite of tools to enable you, but if you need a little theory to help you understand the practice then there are plenty of great resources for your classes. W3Schools (www.w3schools.com) is a fantastic online resource that covers many aspects of web development such as HTML, CSS, JavaScript and also more advanced topics such as SQL, PHP and JQuery. All of the languages have a steady and interactive stream of lessons with working examples for you to review and inspect, line by line. In class this is a great resource for self learning.
The site also provides an excellent series of references for each of the languages, including HTML and HTML 5, highlighting elements and their compatibility across the many browsers and platforms that exist.
If you’re just taking your first steps with web development then there are two essential resources provided by Mozilla. X-Ray Goggles, (https://goggles.webmaker.org) is a JavaScript tool that enables anyone to peek at the code that makes up web pages. You can even change the content on the page for use in class – try changing the headlines of a news website, for example.
Another great resource from Mozilla is Thimble (https://thimble.webmaker.org/en-US) which is an HTML editor in your browser. While not as feature rich as Google Coder, Thimble is a step up from using a text editor on a computer and works with most modern web browsers.
Cascading stye sheets
We now move on to the CSS tab. CSS is a powerful layout and customisation language that enables a plain HTML page to be transformed into a responsive and beautiful page. CSS is a wonderful tool – it enables even the most basic and plain page to become a stylish experience.
CSS has the following syntax:
selector { property: value; }
We can select individual elements on a page using the “selector”; we then say what we would like to change about the element and then enter the value.
Here’s all the CSS for our page:
.pagecontent { padding: 24px; background-color: white; } h1 { color: rgb(0,0,0); font-family: 'Ubuntu', sans-serif; text-shadow: 5px 5px 5px #ff0000; } .pi { font-family: arial, verdana; color:grey; width: 50%; margin-left: auto; margin-right: auto; }
Our first section of CSS controls the pagecontent – it sets the padding of elements and the background colour to white. Colours can be input as names, hex or RGB values. The next section, h1, controls the largest headline. We’re using an RGB value of 0,0,0, which is black. To make our title look more snazzy we will use a text shadow effect to give it a red glow, which this time is written as a hex value #ff0000.
Our last section of CSS controls the pi div that we created in HTML. To select a div in CSS we must add a full stop before the div name, which constitutes the selector for this element. Our first change is to change the font for this div – we used font-family to advise CSS which fonts it should try. If a font is not available then the next font in the list is used. Next we change the text colour to grey. Our last three lines of CSS control the width of the div, in this case 50% of the relative screen size, and to centralise the content we set the margins for left and right to be automatic, giving us a pleasing central column of content.
JavaScript is a great language to learn, and Google Coder enables you to test out your projects.
Exporting your application is achieved by clicking on the ‘cog’ icon from inside your app. From there you can see an arrow in the bottom righ
JavaScript – where the magic happens
Now we come to the JavaScript that controls the button we created in HTML earlier. The button is a method of input, and now we must create an action to happen when it has been pressed. Our JavaScript code to enable the button looks like this:
$(document).ready(function() { $( 'button' ).click( function() { alert('To learn more about the Raspberry Pi, pick up a copy of Linux Voice'); }); });
We start with our first line, which connects our JavaScript code to the HTML document that we wish to work with. We need to do this before we can proceed any further. We now move on to the second line of code, which creates the functionality for our button. We have our button placed on the web page and we instruct the code to look for an event, in this case when the button is clicked. When clicked, the event triggers the next line of code to be executed. We trigger a pop-up dialog box to be displayed on the screen. This is called an alert, as they are generally used to alert the user to an issue, for example alerting the user to an incorrect password.
You will notice that the first two lines of JavaScript mention functions; these are actions that are called when an event occurs, for example the button click, this is given the name “callback”.
Congratulations, you have created a simple web page using HTML, styled the content using CSS and added interactivity using JavaScript.
Inside your application you can see a preview of how it will look by clicking on the ‘eye’ icon – this opens a split- screen preview of your code and the app.
To import a project into your Google Coder, click on the green block on the main menu and click on the arrow to open a menu.
Code for this project
You can find the complete code for this project at our Github repository https://github.com/lesp/LinuxVoice-Issue-14-GoogleCoder. Those of you unfamiliar with Git
can download the complete package as a Zip file from https://github.com/lesp/LinuxVoice-Issue-14-GoogleCoder/blob/master/raspberry_pi.zip
You can easily import the project into Google Coder by clicking on the green new app block in the top-left of the main screen. You will see an up arrow; click there and navigate to the downloaded file. Select the Zip file and the project will be uploaded to your Raspberry Pi and instantly opened ready for you to edit.
From Linux Voice issue 14. Click here to subscribe for more top-quality Linux learning every month!