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 interface is clean and simple and you can see the code side by side with the result and change it in real time. The section tabs physically and conceptually separate the HTML from the styles from the script, which is just how it should be. 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:
- Download the image file and flash a 4Gb SD card
- 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.)
- 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).
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.)
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.
37 comments
The Raspberry Pi Guy
Awesome! I will be having a look at doing a tutorial for this!
The Raspberry Pi Guy
Kieran
Will it come as something we can load on top of a webserver in Raspbian for example?
David Palmer
I’d like to bump that feature request. I am currently running my Pi as 1) a Tiny-Tiny RSS replacement for Google Reader and 2) A web-based camera server using the camera module under development.
Being able to add it on to an existing system rather than replacing it would be useful. (Although, admittedly, the number of people who are in my situation who want this is much smaller than the number of people who have never set up a webserver and therefore want this.)
AndrewS
It’s all open source, so I don’t see why it couldn’t be done, just need someone to work out some instructions ;-)
Ah, just checked and in fact there’s already a request open for this
https://github.com/googlecreativelab/coder/issues/8
Might be interesting to see if both Google Coder and Adafruit’s WebIDE could be made to work on the same Pi (IIRC they both use node.js).
Neil C Ford
Biggest issue with this currently is that it is single user, so it’s not really a useful tool for education as each pupil in a class would need both a Pi and a regular computer.
Hopefully this will change at some point. Until then it’s a nice proof of concept but not overly useful.
clive — post author
On the contrary — it’s very useful for education. For example, my friend’s son is currently using it to learn HTML and CSS even though he showed no interest in the past using other tools. Education isn’t just for schools and proof of concept this ain’t.
A multi user version would of course be welcome, although this was never the dev team’s intention when they set out. But we are only on v0.4 after all ;)
Stephen
I plugged it into our school network and it picked up an ip address using DHCP.
I then checked what the address was, using ifconfig.
I’ve already had a couple of students at a time access the development environment directly at the same time using the ip address.
They just enter the password when prompted and create a new App for themselves, or work on an App with their partner.
So far it has worked really well. My next step is to have about 5 configured and set up for our class, that way students will share 1 between 4 when learning web development.
Definitely applicable to the classroom in my opinion.
clive — post author
Hi Stephen — this sounds great, I’d be really interested to see how you get on so please do drop me a line, or post in the forums, to let us know.
Stephen
Hi Chris
Had 16 students working on two Raspberry Pi / Google Coder webservers today.
I just connect the Pi’s to our school network via either DHCP or assigning a static ip.
Once I know the ip’s (ifconfig), the kids use these to navigate to one of the Pi’s from Chrome on our Windows computers. All they had to do was enter the set password and away they go.
They know enough about programing (via Python) to get straight into the HTML and CSS.
All kids created their own App. Some worked on Apps from scratch using our HTML & CSS basics tutorials, others copied the contents from Eyeball or Space Rocks, then played around to understand the relationships which existed between the HTML, CSS and JS. I did not mind which method they chose as their learning path. They could not just play however.
One boy is now working on having two Eyeballs on his App. Was quite a neat idea. Lots of boys made changes to Space Rocks. Different ships, different shapes, colors, bullet sizes and rate, invincibility etc etc.
When creating our own Apps from scratch, the trick was to ensure that you keep the bit in the tags to reference the CSS and JS pages within the App. Otherwise any CSS does not work.
It is definitely a concept that works and far more engaging that a HTML page written in Notepad (like we used to do). A great way for many kids to work together on a web server, even on the same App. It was so easy to explain the concept of a web server to them given that we were looking at two of them in our classroom (i.e. the Raspberry Pi’s).
Thanks to Google for providing the tools to create a creative environment for all levels of students in my class to get into web programming. I am looking forward to our next lesson.
Stephen
Arjen Wols
some small notes:
– a bit difficult when running ssh due to resolving host name problems.
– will only run with Chrome.
– even Chromium on RPi (localhost) won’t work (yet???)
clive — post author
This is not the case. I have tested it with both IE 10 and Firefox 23. Both work perfectly.
ramstrong
Since I have multiple Raspberry Pi, can I use one for coder and the other for browsing?
konrad roeder
Sure. The Coder Pi is running a service which runs the web server. You can see this on the coder Pi by running the command ps -aux | grep coder which looks through all of the services and shows the ones that contain the string coder.
The “regular” Pi is not running this service.
AndrewS
Hmm, that seems a bit short-sighted given that Eben’s said several times that the RaspberryPi was designed to be usable “standalone” (unlike Arduino) and not be reliant on other computers.
AndrewS
Turns out this has already been asked for ;)
https://github.com/googlecreativelab/coder/issues/3
Ian Barton
I got it to work on my Linux PC using this post:
http://chrismcleod.me/2013/09/13/run-coder-for-raspberry-pi-on-your-linux-pc/
The same procedure should work on your Pi.
Greg Havenga
You don’t need bonjour – it just is a way to resolve http://coder.local. If you have netscan or some other scanner for your network, you can discover the IP address of the pi. If you hook up a monitor, the IP address is displayed when it boots. In either case, from Windows 8 – or anything that can run Chrome, you can simply go to that IP address (http://192.168.1.28 on my network). I even used my Nexus 7 tablet!
clive — post author
Thanks Greg, you’re right of course. We are just going with the flow based on the official instructions that are aimed at beginners (although if you are hooked up to a monitor I personally find the IP address two lines before the login much easier than downloading petulant software ;))
Rich Shumaker
This is a general question not specific to this post but does include this post as it has an Embedded YouTube.
Any chance the foundation could create a YouTube playlist for all the stuff that gets posted?
The embedded YouTube videos don’t play for me so I have to play them in YouTube but I have to find them first.
Thanks for all the computing awesomeness.
3xBackup’s
right click on the video and click on “Copy video URL”, press Control-T (to open a new tab) and paste it in works for me.
RobV
This is your bank speaking.
Naughty Naughty. You know why.
Bill Oldroyd
Please could you say which forum should be used to discuss Coder as there is a danger discussions could be placed in many forums.
Could there be a forum in Programming for Web development – HTML, CSS, Javascript ?.
Gadgetoid
I used the GitHub repo and got Coder running on my Mac in a couple of minutes and my Pi in a few more.
Here’s the guide: http://pi.gadgetoid.com/article/running-google-coder-on-your-existing-raspberry-pi-or-desktop-pc
Richard Jones
Love this. Just suck it in, and embrace. Off to buy a 4gb sd tomorrow. Our boys just going to love it.
Keshav@Salentro.in
It really looks interesting. I can’t wait to try it on for some of our new projects.
InverseSandwich
This should be included in NOOBS!
Todd Cudaback
I second that motion
Andy
If I write a program using separate html, CSS and JS sections in Coder, how can I translate that into a format that I can upload to my hosted website so it can be run from there anywhere in the world? Is it as simple as putting the code from all three sections into one file?
Anyone have a suggestion?
americanpi
The FAQ has the answer on this. You can export your projects as a zip file, and up load them elsewhere.
WesDu
I’m new to RIP and new to LINUX…
…and my experience is like this:
Started Google Coder, got to this blue screen, but before I did network setup I exited, and got to command line. Now every time I reboot I getting command line, and have no idea how to setup my network to be able to see CODER from my other computer. Can anybody help. Thanks
Dave Auld
Here is my article written about Coder on the Raspi.
Article
Enjoy!
Scott
Word is spreading… My 15 year old just started a Raspberry PI club at his La Costa Canyon High School here in Carlsbad Calif. Don’t know what they are doing yet but sure is a great start. 8 members wanting to learn and explore. Anyone out there willing to donate a few Raspberry Pi boards for the group?
vini
how can i connect raspberry-pi to a webserver to upload my image that was captured by a camera. if you can please share the code of that?
Groc
Can coder run chrome extensions?
Merlin Spiers
add to noobs.. im losing squeeze and risc os for this
Ash
So its made to handle client side script like JS very well. But can I use PHP using this coder and the SD card on Raspberry Pi ?
Dominique Cave
Wow, this is awsome! Going to offer an html after school club next term and this is definitely a good contender for making it happen. Can’t wait to try it out on the school network tomorrow. Excellent product, thanks.
Comments are closed