Monday, September 16, 2013

Google Coder: a simple way to make web stuff on Raspberry Pi

Apologies for the late post today—I started playing about with Coder this afternoon and kind of got side tracked for four hours because it’s quite wonderful. (By ‘playing’ of course I mean carrying out an Educational Evaluative Assessment.)

Coder turns your Raspberry Pi into a mini web server that allows you to create web content using HTML, CSS and JavaScript via a browser-based IDE. Or rather, it allows you to easily make Cool Web Stuff. Coder was made by a team of Googlers in New York—thanks Coder Team!

So why use Coder and not some other environment? It’s a brilliantly simple out of the box solution, perfect for people aren’t sure where to start or for schools where setting up servers and IDEs can be a nightmare for teacher and technician alike. Beyond this it’s an instant hacking environment and a web development sandbox. As well as letting you make stuff it’s also a great introduction to the concept of web servers and some of the main languages that underpin the web.

The section tabs physically and conceptually separate the HTML from the styles from the script, which is just how it should be.  The interface is clean and simple and you can see the code side by side with the result and change it in real time.  I could go on but instead I’ll tell you how to get started.

How to get started

Full instructions are on the Coder site but here’s the gist:

  1. Download the image file and flash a 4Gb SD card
  2. Pop it into your Pi and turn it on. You won’t notice too much difference to a standard installation whilst it’s booting (Raspbian lurks beneath) but you’ll end up at the prompt ‘coder login:‘  (You don’t need to login.)
  3. Open a browser on any computer on the same network as the Pi and type ‘http://coder.local‘ into the address bar**

From booting to playing around with web pages took less than two minutes. The hardest bit was coming up with a strong password (what the hell is wrong with ‘pooface1′? My bank is OK with it).

A Machine of Doom? I’ll take three.

So once you’re in, what can you do? Unlike many educational resources, the tutorial is actually a good place to start. Comments at the top of each page explain what’s going on and it’s easy to start tweaking and hacking the code—just click on the </>.  Personally I went for the eyeball and gave it a huge, red sclera because it was looking at me funny. ‘Space Rocks‘ actually has a ‘Hack‘ button that lets you play about with variables, which is always a great way to explore a program (and who can resist giving themselves hundreds of lives? Cheating at its finest.)

Big red & sclerotic — that’s better.

Coder is what all educational resources should be: focused and fun but with loads of potential. It’s a damn fine piece of software. You can also get involved with Coder directly as it’s open source and the Coder Team would love your help.

Download it and have a play—we love it. I’m off to make huge, monkey headed missiles  for my spaceship.

**Note: Windows users will have to install Apple’s Bonjour Print Services first. NOTE: When I tried to install BPS in Windows 8 it fell over, refusing to create the shortcut due to some rubbishly random nonsense about privileges. I fixed this by first manually creating a new folder called “Bonjour Print Services” in C:\ProgramData\Microsoft\Windows\Start Menu\Programs and then installing. Ho hum.

Glossary for beginners

IDE. Integrated Development Environment.  Software that brings together a bunch of tools and utilities to assist in software development.

CSS. Cascading Style Sheets. A language that is used to tell a web page how it should look.

HTML. Hypertext Markup Language. The main language that web pages are written in.

Web server. A computer that stores web content (text, images, scripts, video, style sheets etc.) and sends it to other computers when they request it. For example, your browser requested this blog page from the server and then displayed it on the screen.

JavaScript. A programming language that can be used in web pages to provide interactivity and functionality, from checking password strength to games.

No comments:

Post a Comment