How I Used Google Drive to Create and Host My Web App and Hello Oppia

Has this ever happened to you? Back when my students and I were exploring Computational Thinking and developing using Python, and Processing. We ran into a big stumbling block, which was saving, sharing, and hosting our files.

Even though I had a very supportive IT manager, it was still difficult to have students develop anything substantial. Our students accessed all of their school files on a networked drive which was tricky and slow to access from home, students were not able to create or send zip files, and sharing their work publicly was difficult for numerous reasons. Have you experienced something similar?

For a project in my Masters program we were asked to develop a learning environment. After brainstorming for a little bit, I decided to create a environment where people could determine how well they could recognize the sound of a note and perhaps improve their ability to identify a pitch.

I realized this was an opportunity for me to dangerously overcommit and accomplish four additional tasks within this project:
  • Improve my knowledge of web development by creating the environment using HTML and SVG (Scalable Vector Graphics like those created in Inkscape or Illustrator)
  • Write higher quality code than I have in the past (Physics Gizmo refactoring is at the top of my list when I graduate)
  • Develop and deploy 100% in the cloud
  • Support my colleague's 20% project Oppia (more on that later)

Leaving Behind Bad Programming Habits

I am not a professional programmer and I did not study Computer Science at college, so I've picked up some habits that make it difficult to have code that is easy to update and maintain. I recently read Code Complete which taught me a lot about how to improve how I design and write code. I realize it is a tome, but I would highly recommend it and you can skip to the parts you want or need. I'm learning a lot from my previous creations and like any art, it takes a lot of practice to become good at programming.

I have been reading up on some of the new fun features HTML5 provides, but based on some advice from my colleague Neil, I decided to use SVG rather than the canvas. This turned out to be excellent advice and it was fascinating to learn how one can programmatically create graphics. Creating shapes using Python Turtle is one of my favorite activities for students to learn how to think computationally and creating your own SVGs is a great next step. In my experience, students love creating their own works of art and will endlessly play with it until they get it just right, then they'll tweak it to see what happens.

Developing in the Cloud

Why was it so important for me to be able to develop my application using only web-based tools? Well there's the reasons I mentioned above, where my students and I found it difficult to develop, save, and host code (let alone collaborate) from their school laptops. Plus, I have become so spoiled that I like the ability to have all of my files automatically backed up and accessible from any device.

When I started looking into options for ways to develop software online, there were some high quality paid services but these were more than I needed, were cost prohibitive for a classroom, and sometimes required you to use a command line / terminal which was not an option for students at school. On the other end of the spectrum there are many great websites that allow you to code in the browser, but often lack the ability to save your work, Sage and IPython notebooks are two excellent exceptions that would be great additions to your classrooms.

Recently it was announced that you could host a website from Google Drive. I added Neutron Drive and ShiftEdit from the Chrome Web Store and enjoyed using them both. They have many awesome feautres like syntax highlighting, lint testing, and collaborative editing and are each adding new ones all the time. Best of all I was able to write 100% of my code within Google Drive which meant my work was always backed up and I could keep working on it anywhere.

I highly recommend using this process for students to easily create, save, share, and host their work. I would love to see students collaborating on code much like they do with Google Docs for writing. If your school has Google Apps for Education, your IT manager can deploy these apps to your students right away.

On the right is a screenshot of the app I created for my class, click here to try it out. I plan to continue to develop this after I graduate. I'm also sharing the Oppia Opera code if you would like to play with it yourself.



Oppia

My colleague Sean, who works on the Course Builder project, spends his 20% time working with others on a project called Oppia that allows you to create branching explorations.

Think of it like a choose your own adventure tool, but the learner can explore any topic you set up. When I first met Sean almost a year ago, he demonstrated the idea that would later become Oppia using an exploration in combinatorics using three balls. Since then, the team has added more features so you can explore language, music, and more.

When I was developing the music app for my class, I asked Sean if it would be possible to integrate content from another site into an Oppia exploration. I had the PhET tools in mind when I proposed this to Sean and I'm glad to see they were able to pull it off as it opens up many of the simulations and tools that we use and love to have added functionality so students can have a guided exploration through a topic.

Here's a screenshot of a sample exploration where Oppia provides feedback to help you find a landmark:

The team has worked hard over the last few months to make it relatively easy to create and modify an exploration so try it out and send the team your feedback and ideas. Oppia is open source so you can run your own instance or modify it to meet your needs. It will be interesting to see Oppia evolve over time and I am excited to see how we can interact with content online so it is more interactive and feels more like a conversation.



Lots of updates in this post,  I appreciate you reading to the end. I've wanted to share these updates with you for a long time but my Master's program is consuming every minute I have these days. I expect to graduate in May at which point I can continue to explore, develop, and share many other projects I am working on.