I received my Google Glass in May 8 which finally gave me access to the Mirror API. After a week of using it, I finally had an idea for what app I should be building for it.
On Glass, there are only limited options to which social networks you can share your pictures. Among them are Google+, Facebook and Twitter.
I wanted a way to share my photos to pretty much any app I wish. For me to do that is by having access to my photos on my phone.
This is why I built Glass To Phone (http://glasstophone.com). It’s a pretty simple app that acts as a Contact in your Glass.
When you share your photo to Glass To Phone, it will be downloaded to your phone and you can share it to any of your Android apps or move it to your photo gallery.
Glass To Phone has web and Android apps. The web app was developed using Python and Django and is hosted on Heroku.
Android was done natively with Google Play Services for authentication, Kevin Sawicki’s http-request for Http & Square’s Picasso for image loading. You can download the Android app on Google Play.
The database used by both the web and Android apps is powered by Parse.
Initially, I wanted it to be just an Android app. However, Google Play Services does not allow your app to request offline access so I was forced to have a web client.
The web app has the authentication to access the Glass Timeline. I also needed offline access for the callback page that the Mirror API hits when a user shares to my app.
For Part 2, I’ll go into detail on how I built the web & android apps including the code.
My co-founder Dan Kwon (@dankwonjr) & I built a small app for the FourSquare Hackathon a few weeks ago.
It ranks Popular Places for Barbecue, Fried Chicken, Wings and Burgers in different cities. Check it out!
At the start, authentication options for our site Burp (http://goburp.com) include regular email/password & Facebook Connect. For quite a while, I’ve been wanting to integrate Google Accounts Authentication.
I’ve looked at django-socialauth (http://social.matiasaguirre.net/) but it uses OpenID. I prefer a pure OAuth2 implementation similar to what Facebook & FourSquare uses.
Looking at Google’s documentation, it’s not easy to figure out. The Federated Login (http://code.google.com/apis/accounts/docs/OpenID.html) is just a pain to implement.
Google recently streamlined their API & they have libraries for every major programming language. Implementation is too complex though which includes a separate model to store credentials (see http://code.google.com/p/google-api-python-client/source/browse/oauth2client/django_orm.py).
OAuth2 implementation by FourSquare & Facebook is so simple that there must be a way to do that with Google: Get an authorization url, Get a code back & Exchange that for an access token. Then use that access token to access the API. Google has documentation for OAuth2 but it actually lacks information on how to get a user’s email address (http://code.google.com/apis/accounts/docs/OAuth2.html).
After scouring the internets, I finally stumbled into a PHP implementation. It has the scope (https://www.googleapis.com/auth/userinfo#email) that I’ve been looking for which is missing from Google’s documentation (http://code.google.com/apis/gdata/faq.html#AuthScopes). The OAuth2 steps are pretty standard except that the access token can be added to the header of the request instead of as a parameter in the url (http://code.google.com/apis/accounts/docs/OAuth2.html#CallingAnAPI).
This, however, only gets me the email address of the user. I also want to get the user’s name, location, gender, etc.
Luckily, Google just opened up an API for Google+.
By adding the scope – https://www.googleapis.com/auth/plus.me – to the OAuth2 call, our app will have access to the public info the user provided in their Google+ Profile. The People:get method (http://developers.google.com/+/api/latest/people/get) will provide you with the user’s Display Name, Location, and Profile Picture Url among others.
You can view the sample Django project at https://github.com/dannyroa/sign-in-with-google.
I’m a big user of Google Tasks. It’s barebones but I like it mainly because of its integration with GMail & Google Calendar. However, Google doesn’t have a mobile-friendly site to use Google Tasks.
Over the weekend, I built Taskyo (http://www.taskyo.com). It is not meant to replace the main Google Tasks site but instead supplement it. This is why the features for Taskyo is limited – no editing of lists, ordering of tasks among others. Being able to create a list, create a task, marking a task as ‘Complete’ and deleting a task pretty much covers everything you need when accessing it on the go.
I built this using Python on App Engine and JQuery Mobile. It works well on the phone and on the tablet too.
Developing this app also allowed to me play with the new Google APIs for the first time. I really like what Google did. All the APIs are consistent and centralized. There are libraries for Java, Python, and PHP. The API Explorer (https://code.google.com/apis/explorer/) was particularly useful.
I found some hiccups though especially how to do OAuth2. The authorization example they have for Google Tasks (http://code.google.com/apis/tasks/v1/using.html) was not for websites. But having worked on the Twitter & Foursquare API using OAuth2, I eventually figured it out. With the other issues I had, the Google Tasks Developer Forum helped me solved them (http://code.google.com/apis/tasks/forum.html).
After a week of development, my new Android app, Map My Photos, is now available on the Android Market. It comes in a Lite version (Ad-supported and only 50 photos) and Paid version ($0.99; No ads and unlimited photos).
Map My Photos lets you browse your geo-tagged photos from the camera folder by cities and on a map. This is similar to the IPhone’s built-in Photo app.
Available on the Android Market:
or if you are browsing from your Android phone, click here.
Career:
I was employed full-time 7 months out of the year which is a one-month improvement from 2009. I was supposed to work for Movity (Winter 2009 -YCombinator) and be their first employee. But right before the YC session started, I got offered a job by another startup. I consider the Movity founders good friends but I had to make an objective decision and joined Mingle.com instead. I felt bad backing out at the last-minute but it turned out really well for Movity since they got a more talented developer in Zain (@zainy).
I didn’t leave Movity completely. I helped them out during the YC session. On weekends, there were seven of us cramped in a very small office. It’s one of my most enjoyable coding experiences where I was surrounded by people who are focused on one goal.
I worked for Mingle.com for seven months. I learned a lot more about Django since I was surrounded by smart & experienced Django developers (e.g. @david_ziegler). I left Mingle last July when I decided I need to do my own startup. To pay the bills, I did a short-term, part-time gig for Votizen.com.
Health & Fitness:
Working a lot has taken a toll on my health earlier this year. Working full-time at Mingle and part-time for Movity stressed me out a lot. It weakened my immune system and this led me to get shingles. Fortunately, it wasn’t a painful experience and I just had to rest for a week.
Despite that, I was generally healthy in 2010 and able to play sports a lot. I had the motivation to work out a lot even just by myself. I don’t have the workout regimen I had back in 2008 though when I was doing ActiveX at my old company in San Diego.
I started playing water polo again but my stamina wasn’t there. I ended up ruining the game for other people. I quit after a month but I plan to be back sometime in 2011.
I did Mission Bay Tri again (my second sprint race) and improved by almost 10 minutes (From 1:29:29 to 1:20:10).
I joined the Palo Alto soccer league in the summer and started running with Burt (@burtherman) & Brian (@dustball). I had to stop running though after having some foot problems. I got an Xray and found no broken bones. Therapy helped a little bit but I basically can’t run more than 5 miles now.
Bay Area:
Hacker Dojo in Mountain View is my second home. Well, actually, I spend a lot more time there than at home. The place has great energy and I became friends with a lot of good people.
I got sick of the Bay Area for a little bit. This area is inside a bubble in both good and bad ways. Bay Area sets a lot of technology trends but it is not mainstream. What happens here is very different from the rest of the US and even the world but Bay Area people think that it is the same everywhere else.
This has led me to shun a lot of networking events because of the group-think. This is also why I decided to travel to Argentina, to get away from the area for a bit.
I still love the Bay Area though. This is where I belong and I can’t imagine being anywhere else.
Travel:
The only travel I did was Buenos Aires. I went with my cofounder Dan Kwon (@dankwonjr) for a month. It was more of a team-building for us. I learned a lot about my cofounder and also about myself. I have been a loner for the past few years and it’s refreshing to hang out with somebody a lot and hear what they think about me.
Lessons Learned:
Never settle: Time and time again, settling for something has brought me unhappiness. I have always wanted to have my own company but I tried to convince myself to stay at Mingle instead. This has led me to be unhappy at work. I finally came to my senses and resigned. I’ve been happier since. I work on projects I’m passionate about and started building a startup with @dankwonjr. There are some financial uncertainties though since I don’t have a lot of liquid savings so I do some part-time work from time to time.
Always Be Positive: It’s been tough for me since I moved from DC to the West Coast. I became a bit negative and it has held me back on a lot of things. Lately though, I make it a point to be more positive. I always try not to get angry and not complain. This is largely influenced by the people I surround myself with. I plan to continue this habit indefinitely.
Believing in Myself: I doubt myself a lot. It has gotten worse when I moved to the Bay Area. I’m surrounded by more intelligent and more experienced developers. The good thing is this motivated me to get better by learning new things. I picked up Python/Django in 2009 and it paid off for me in 2010. I also have been doing a lot of Android development. Learning a new programming language or framework doesn’t intimidate me anymore. I’m also not scared to take on projects that maybe over my head. I know that I can figure out a way to build it.
===============================================================================
2010 was a good year for me but it is actually more of a build-up for the great years to come. For the next few years, my plan is to continue learning and be more open to new experiences.
In one of the apps I’m developing at work, I wanted to make it easy for our content admins to create a new row in the Django Admin. Most of the time, they need to create a new row that is associated to their own user account. It would save them a couple of steps if the user field is set to a default value. Thanks to my coworker, Dave Ziegler, for helping me figure this out.
Extra tip:
use raw_id_fields in Django Admin. This is especially useful when you have plenty of users. What you’ll see is the id of the user in the text field with a link to look up users next to it (instead of a dropdown containing usernames of all the users).
If you don’t set the raw_id_fields, it would take a long time for Django Admin to load the ‘Change ‘ page since all the users in your database needs to be loaded.
Last Friday, I joined CodeFest2 which is part of the AddOn Conference.
I decided to create an extension that will display additional information when browsing a Craigslist Housing Ad. The additional information includes displaying the address on a Google Map and listing businesses (restaurants, bars, groceries, and gyms) nearby. You can find my extension, Craigslist Housing Helper here.
I have never developed a browser extension of any kind before. However, I wasn’t too intimidated having read that developing Google Chrome Extensions are very easy since it uses Html, Javascript, and CSS.
I started with the tutorial (link). It was very to follow and I literally had an extension running in 2 minutes.
I then proceed to working on my extension. I started with displaying the address of the Craigslist ad on a map. Luckily, one of Google’s samples, Mappy, exactly does that. I only had to tweak the code on how it finds the address.
Next, I used Ajax to access Yelp’s API. It was a simple javascript call and I was able to use JQuery.
I was able to get my extension running in less than 2 hours. I’m not sure how easy it would have been if I tried to develop one for Firefox. (Mozilla, however, will be launching Jetpack soon that would allow developing of extensions using Html, Javascript, and CSS).
Here are some tips based on what I learned while developing my first Chrome Extension:
- When testing your extension locally, there is no need to reload if you only made changes to the Html pages (e.g. background.html, popup.html). However, you need to reload if you made changes to the Javascript files.
- If you have seen an extension that does some functionality of the extension you are developing, you can easily explore their code. Go to chrome://extensions and grab the Id of the extensions. Then go to C:\Users\{ your username }\AppData\Local\Google\Chrome\User Data\Default\Extensions\{ extension id } to browse the code.
- Use Javascript frameworks. I used JQuery for my extension. JQuery has a number of functions and shortcuts that will help you in development. Same thing with using other frameworks such as Prototype, YUI, etc. You can either download the source, add it to your extension directory and include it in “content scripts” of your manifest.json file. Sample: “js”: ["jquery-1.3.2.min.js", "content_script.js"]. Alternatively, you can use Google’s Ajax Library and make sure you add “http://www.google.com/*” in the Permissions section of the Json manifest.
The next step for my extension aside from improving its UI is to have it automatically rewrite the Craiglist Ad and have Google Map and Yelp data appear in the same page. I tried it before but I had difficulty making the map work mainly because of the domain and Api Key conflict.
Also, modifying the content of the page is cumbersome since you can only do it on the content_script.js file. However, the Readibility extension seems to be doing something similar so I’ll be looking at its code shortly.
Overall, I enjoyed developing Chrome Extensions. Being able to use Html, Javascript, and CSS is a definite plus. Google will expose more of Chrome thorough the API so expect more powerful extensions in the future.
Here is Python code for integrating Google Friend Connect and Facebook Connect authentication to your site. I will be updating this post soon. For the meantime, check the source code.
Views.py
facebookconnect.py
googlefriendconnect.py
utils.py
index.html
login.html
Sunday AM and afternoon:
I was back to coding at the Microsoft office at around 10am. I looked at our domain and checked to see if it resolves to GAE. Nope, still parked at GoDaddy. I scoured the internets and it seems like most have difficulty getting domains resolve. I was not too confident that the hubb.me domain would work by the time on the demo. I told the rest of the team that there is a possibility that we would use swsf.appspot.com (GAE domain) instead of hubb.me. Fortunately, Alex had some time on his hands and were able to figure it out. Still, we were crossing our fingers that the new nameservers would propagate in time.
As demo time nears, I felt like we won’t all the functionalities that we all intended to have. We had to make some choices and drop some features. I was very confident that all the main functionalities will finish on time. However, the bells and whistles probably won’t. I told the team that we’ll drop all the fancy AJAX and UI stuff and they agreed.
I then proceeded to do our first deployment. This is my favorite feature of GAE. One command line and your code is off to Production. Painless. I had to do some tweaking for our Facebook Connect (FBC) feature though. FBC will only work for a specific domain so I had to set up 2 apps in Facebook: HubbMe (Dev) and HubbMe (Prod). I created a function that would return the Production APIKey and APISecret when it is deployed and use the Dev keys when testing locally.
One difficulty we had with GAE though was test data. Alex, Vaughn, and I separated the development tasks by functionality. Alex was in-charged with the IFrame that displays the links, Vaughn with the Dashboard to see the links you createds, and I was tasked with the add and edit links functionalities. I was fine to go ahead with development. Alex and Vaughh, however, needed some test data for their pages. GAE uses its own database called Big Table which was not easily exportable. My solution was to create a page that generates test data so they can test their code.
I made a number of deployments in the afternoon. I attempted to add more features. However, I ended up breaking the app. I didn’t want people to see errors during the demo so I decided to stop making major changes on it. Left it stable although I was still making minor tweaks.
I alos checked the domain. It was finally working. Nice!
Demo
About 30 minutes before the demo, the team met up to figure out our presentation. There were some brainstorming on what to include in the demo. We decided to cut down the number of slides and show the app more.
There were about 5 teams before us. The most notable was the Big Ponzi but they didn’t have a demo available. Then, it was our turn. Anish, Matt, and Vaughn took turns presenting the app and it was over in less than 5 minutes. The app worked app. No errors.
There were 10+ teams after us. My favorite demo of the night was from the Img.gr which allows you to tag photos on Twitter. They still don’t have a public site and I’m hoping they would push through with the app.
Dave McClure was not present on demo night. However, throughout the demos, he was consistenly tweeting about the apps (@davemcclure) which was definitely appreciated by everybody.
After the demos, we all headed to Jillians in SoMa and mingled with the other attendees.
I was glad I did Startup Weekend. In my final tweet/Facebook Status for the weekend, I said that it was the most satisfying geek experience of my life. I feel lucky with the team I ended up with. I was able to sit back and just concentrate on coding. I was able to trust that no one would make unilateral decisions to the detriment of the team. More importantly, we were able to deliver a working app – my main goal in this event. I’m looking forward to working with them in the near future.
This event has validated even more my decision to move to the Bay Area. People are driven, ambitious, and trying to come up with the next big thing.
Special thanks to Andrew Hyde and Tyler Willis for organizing the event. I can’t wait for the next one. However, I will approach the next one differently. I will be pitching an idea and recruit people for my team.
Here are some pictures of our team as well as video of the demo:
Our Ideas
The Hubb.Me team (minus Matt) L to R: Amin, Eric, Alex, Danny, Anish and Vaughn (sitting down)
Our demo started on the 28th minute.