Facebook Hackathon

This weekend has been an amazing experience! 24 hours of non stop coding and fun. The Facebook team offered us the most amazing time, with great food (all the time), drinks, snacks, music and raffles, everything you ever wanted.

I met my team on the day and we quickly brainstormed ideas before the hack officially started around 12:30 on Saturday. I was very keen on developing a project for social good. So I researched before the hackathon the internet.org initiative and their commitment to make Internet accessible to everyone in the world. Their guidelines for developers suggested eligible apps should not include rich data such as video, high resolution images or anything that would require large HTTP responses. As a result, we thought, what is text only and awesome? Code!

So we decided we should make an app to teach children in developing countries to code by sending them short challenges that they could solve, either via the mobile app or offline, through text messages. So if you would send a piece of code in a text message, it would compile on the server and a reply would be sent with the output of your code or an error message if something wasn’t right.

For that, we thought we should create a new programming language, easy to understand for children. We called it Lilo (from Lilo&Stitch) and it complies to Python on server side and also maps to JavaScript on client-side. We thought of a funny and childish syntax for our new language. A variable would be a box, since you can store “things” in a box. Boxes will be labelled with names, just as a normal variable, will be manipulated and they would be able to store any type of object – numbers, strings, boolean values etc. Boxes are also resizable and can store more than one object. In terms of commands, to output something we defined say ‘..’, as a natural command to allow your code to say something. Instead of functions, we decide to call them dogs. A dog is usually called and can return something you’ve instructed it to. A dog knows how to do only one thing and when required, it “fetches” you what you need in your program. Moreover, a dog is happy to get called by you anytime you need it. Loops and conditional statements would stay the same in Lilo, while a line end will be marked by a dot, as it is easier to type in a text message than a semicolon.

The Lilo to Python compiler was written from scratch during the hack. For the SMS processing we used Twilio, a cloud service that handles this sort of interaction with the server. We’ve tested the system from multiple phone numbers and it always works, just like in my screenshot below. The hashtags #bc and #ec just stand for begin code and end code, needed in parsing the content of the text message for testing purposes.

image1

On the frontend side, when Internet was available, we created the Ionic app, with a simple interface for 9 basic lessons and Facebook authentication. Since it addresses children, we also integrated a story, based on Facebook’s sticker character, Biscuit. It would teach children how to code through funny stories. For example, to explain the loops, we imagined the student and Biscuit are playing hide and seek, so the student had to come up with a program in Lilo to count form 1 to 10. When we introduced box assignment, we said Biscuit is giving the student 2 boxes and they have to fill them in with their name and phone number and label them so that they won’t forget what’s inside. The code would be syntactically checked in a live code editor inside the app, CodeMirror, based on JavaScript. Also, the code was mapped client-side from Lilo to JS, so little to no server-side requests had to be made.

In addition to all this, on the app’s Facebook page, users can post a snippet of Lilo code and receive the output of the compiled code as a comment to their post. This is making use of Facebook APIs and scrapes the page for new Lilo code posts every 30 seconds.

Screen Shot 2016-03-14 at 14.13.16 (2)

Even though we didn’t win the hack, it was amazingly fun! My team was purely awesome and we had a great time hacking and sharing stories! The winning team developed a new Terminal experience for developers, enriched will all sorts of new features.

The project is available on GitHub and you can access the app here (it has bugs, we know, but it’s a hack!). Here are some screenshots and photos I took during the hackathon.

Screen Shot 2016-03-14 at 13.48.39 (2)

Screen Shot 2016-03-14 at 13.49.37 (2)

Screen Shot 2016-03-14 at 13.54.56 (2)

 12656380_1134440316575941_663079758_o

12837418_1134440249909281_1689714105_o

12837551_1134440193242620_400454583_o

12421960_1134440186575954_488610086_o

12381249_1134440183242621_1639220288_o

The aftermath:

12476637_1134452196574753_1834779591_o

The team:

12837637_1134440229909283_1476707630_o

12721961_1134440319909274_428935113_n