Innospring hosted a hackathon with Evernote at their office on Tasman Drive in Santa Clara and Shanghai this past weekend.

Ty from Evernote introduced their API and a suite of apps in their Trunk (aka their store). I had heard of them several years ago but was never into storing my data in the cloud at that time. Oh how times have changed.

Always on the lookout for new APIs to integrate into my existing projects, especially Read With Me App, I was interested in playing around with Evernote. Some questions I had about reading text from images in Evernote didn’t quite match with the expectations I was hoping for, so I had to scrap my first idea. From my understanding, the API gives an indication whether search queries are found in the images and the location of those words within the image, but it doesn’t return text as a whole like an OCR engine does. I want to research if there’s another way or if there’s might be a hack I can write.

My idea for this weekend started with using Evernotes and your location. My more ambitious vision was walking into a room and seeing Evernotes “posted” on walls using Augmented Reality and Google Glass. Not something that can be done in 40 hours (and with sleep!).

I simplified my vision to buckets in specific locations. A location could have multiple buckets of varying radius. If you enter the radius, you get an alert (a timeline card in Glass) that there are Evernotes available. You step out of that circle, and you don’t see them anymore.

This was relatively simple to code. I created a mobile screen to attach Evernotes to a bucket. I created a couple of buckets and attached Evernotes into them.

But the thing I really wanted to include was Google Glass. Having seen Glass a couple times this past week, it’s starting to grow on me. If I can go about my day and get alerts like my cellphone does with email, but instead have a visual interface like Glass offers, where I don’t have to dedicate one or both of my hands to the activity of holding a phone, this could really change the ease of getting immediate information based on my location.

The UI was simple for Glass. The name of the bucket, the names of a couple of Evernotes, and maybe the event info. As I move around, Glass will use my location to look for buckets (or hotspots) of Evernotes near me and trigger timeline cards to be displayed.

Why this is useful

Have you ever attended to a meeting that has an agenda. If you’re lucky, there’s a printout. For me, it’s usually in an attachment inside an email buried inside my inbox inside my phone inside my pocket. It’s four, five, ten taps to get to the agenda. Wait, let me find it! I almost have it! Same with hackathon demo order lists, event details, and related documents.

Why not give me a simple list of Evernotes (or other documents) related to where I am right now? I’m in Innospring’s office. What do they do? Tap on About {companynamehere}. You can read a brief description and look like you have done your research (not that I’m a procrastinator!). Just don’t try this before a job interview.

Information should be ready for me to consume the second I want or need it. Google has done an incredibly good job at burning search into my daily routine. Don’t know something, I Google it. Need to find an email message, I search for it. I don’t need much context to get the information, so why can’t we use location as well.

What I used

The demo was a PHP script using the Evernote PHP SDK. I expanded upon sample code and read in the Evernotes I created in my notebook. Using a shared link URL from the API, I added URL and the title into the backend database.

For the frontend, jQuery Mobile made it look good. During testing, I was trying to find a quick way to delete/disassociate Evernotes from the buckets on my phone. I used the swipe right gesture on the item in the list to remove it. The swipe functionality is going in my toolbox of tricks.

As for Glass, their Mirror API Playground was really straightforward. Being a web developer, creating a timeline card was super easy. It took longer for me to design a logo for Evernote Here than to lay out the data.

What I learned

Another hacker and I had an extensive conversation on how I approach a new project. It’s a long story, and it has become so intuitive to me that it is hard to explain. I knew exactly what he was going through, overwhelmed at everything he wanted for his project but not knowing where to start. It’s like wanting and seeing a massive castle and focusing on the chair in the corner of one of the rooms. He needed to step back and see more than just one little feature.

As I listened to myself describe my process, I realized how I visualize the product and user flow before I even write a piece of code. I focus on the outside of the castle, and how to find the front door and my way through the rooms to the reason I am in the castle. It was a great exercise in understanding how you do stuff that seems so normal that you take it for granted.

When I was a newbie, I used to code first and ask questions later. It can be a huge waste of time and lead you down a path that locks you into certain designs and failed products. Finding the right balance makes building prototypes at hackathons fun and entertaining now that I understand the process.

The venue

Innospring was a great host, with bean bags, sleeping bags and plenty of food. The Chinese food for lunch was a nice change from pizza, a staple of a hacker’s diet.

Here are pictures of places I hacked during the weekend.