Last Friday, San Joaquin iHub, Café Coop, Restore the Delta, and IBM Bluemix hosted a learnathon/hackathon at the H2O hackathon in Stockton, California. Students, from middle schools, high schools, and colleges across the state attended the one-day hackathon to build prototypes solving challenges around water. From finding clean water to grow our food on farms to conserving water in our drought-stricken golden state, there were tons of ideas floating around.

I’ve participated in over a hundred hackathons, but this was the first time I saw a learnathon and hackathon work together. A learnathon is where the participants focus on learning how to get started with programming and discover the process of building their dreams into reality. A hackathon is more competitive and usually includes a deeper investment in coding and design.

At 8:30 on Friday morning, seven middle and high school students entered a classroom across the hall from the hackathon. They were shy, nervous, and had varying expectations. They opened up their laptops, connected to the WiFi network, and signed up for their IBM Bluemix account. Little did they know they had received the keys to a world of possibilities.

IBM Bluemix is a powerful platform that makes it easy to deploy web applications into the Cloud. The cloud development platform supports a variety of programming languages including PHP, Node.js, Ruby, Python, and Java. The platform also makes it easy to integrate with quite a number of services including IBM’s Watson to perform analytics and data processing and third-party services like Twitter and Twilio to send tweets and text messages.

Once the students signed up, they launched their first application using the Node-RED starter app. Node-RED is an open source, Internet of Things graphical flow editor that makes it pretty easy and quick to start creating a backend.

The students learned how to create a simulated water sensor that would report the amount of water used each day. This usage data is sent to the cloud at set intervals (perhaps nightly, or even more frequently) where it was processed in their Node-RED application. This application included control logic, making decisions of what to do next based on the incoming data. For example, if the water usage metric was above a specified value, it could send a tweet with Twitter and send a text message with Twilio. This is a key concept in programming, and the students tested the waters with three-way switch statements, some matching an exact amount and learning the meaning of the <, >, ==, <=, and >= symbols, found in many programming languages.

The students turned down every offer of taking a break, instead persevering through each lab and learning yet another component they could harness. After sending messages, they learned how to store the water usage metrics in a Cloudant NoSQL data store, and how to retrieve this data. This could be useful if they wanted to chart the data for historical purposes.

Lastly, they learned how to use templates in Node-RED and linked HTML templates to HTTP input and output nodes to make them accessible using a web browser. They did the traditional Hello World webpage and became true programmers!

In true hacker style, the students broke for lunch, and as they gobbled up the pizza and soda, they started brainstorming ideas they could solve. Each student suggested their ideas to the team, opening up a conversation that was truly fascinating to watch. They listed the places where water was consumed, ranging from home to school to factories and farms.

They revisited their original ideas and revised them. The team collaboration and camaraderie between the students, from the youngest to the oldest was key in keeping the ideas flowing. There was no “stupid idea”. They pulled out their mobile phones and started showing off their favorite apps to get inspiration for design ideas.

With only about two hours left, they drafted up design mockups of what their mobile application would look like. They split into two teams, a design team and a programming team. The design team created the interface wire-frames, and the programming team worked with their Node-RED flow editor to build the simulation of how their problem would be solved.

As the clock ticked down, the stress level increased. However, they worked together as a team to get tasks completed, always making sure to communicate what was being worked on and any problems they were encountering along the way.

With the last wire-frame being hastily copied and pasted into the presentation as they walked down the hallway, they entered an adjacent classroom and presented in front of a set of judges. This was the first time for many standing in front of a group of professionals and judged. They presented their wire-frames and what the problem they were solving. A team member, Jeff, provided me with a summary of their mobile app:

When it comes to visualizing this app on the market, we’d like our consumers not only to have an easy experience, but perhaps a life changing one. We will give people this challenge. Can you change your water use habits? Our goal is for our users to be aware of how much water they use per day and perhaps to help them not only keep their water costs low, but to help our water deprived environment.

The team took nearly 15 minutes to present, a pretty impressive accomplishment. The judges asked some questions about where this app could be used and what could it accomplish in the future.

The students returned to the reception where they grabbed some dinner before they were honored for their accomplishments. Unexpectedly, they were then informed that the judges were so impressed with their hard work that they would be entered into the hackathon competition as a team. The hackathon competition consisted of college students and professionals who came with programming experience.

This was really impressive to see these seven students go from no coding experience to being judged against teams who were years ahead of them in experience. But they too had experience, even if it was only recently acquired. And they deserved the recognition for making such a huge advancement.

At the reception, they were invited on stage to present in front of the audience. This can be quite intimidating even for adults to present in front of a large group of people. But again, these students took the challenge and hit the ball out of the ballpark.

The judges finished hearing all the teams pitch and deliberated for three categories: Most Creative ($2500), Most Awesome ($2500), Most Thoughtful ($500), and the grand prize the Cal Water Golden Spigot Award ($3000). They had reduced the number of prizes and increased the prize amounts.

College students took home the first three prizes. It was time for the grand prize, $3000. When the students heard their team’s name, “Sprinkles”, announced, they stood up in disbelief and walked up on stage to receive the prize and have tons of pictures taken.

They had gone from no coding experience to learning the basics of coding, to working as a team, to brainstorming and building a concept, to winning the grand prize, in less than 11 hours. Talk about an amazing achievement that they can mention when they apply for college and for a job.

I can’t wait to see what these brilliant individuals can accomplish when they face new challenges. They truly represent what we can all do when we put our minds and energy to solving problems together.