Click on any phrase to play the video from that point.
[Greg Avola, Untappd] [Adobe PhoneGap Day US 2012]
Our next presenter is Greg Avola.
[Man in audience] Wooo!
And he's the creator of one of my favorite apps,
and probably a favorite app of a lot of people here,
especially on the PhoneGap team: Untappd.
[Audience applause and cheering] [Greg Avola] All right. Okay. Let's start this thing. All right. So who here has heard of Untappd? Raise your hand. Wow. My mom's going to be really happy about that. So what I want to talk about today is how PhoneGap pretty much made Untappd what it is today. As I've called it, "The Perfect Pint." So who is this goofball? With 3 'l's in a ball, but that doesn't matter. I'm the co-founder and the lead developer of Untappd. We found this service last--in 2010. I live in New York City, but I'm born and raised in Boston. That doesn't really make any relevance here. I could say things like Red Sox, but that doesn't really fit here so we'll skip that. I specialize in PHP, JavaScript, and MySQL, which is the technology stack for Untappd. We also used Memcache and Redis. And my claim to fame, if Untappd wasn't my claim to fame, I was on "Man v. Food" for 9 seconds in 2010 with a line that my friends still text me from time to time today: "I don't know if they're going to finish this pizza. It looks too big." That was my line, right there. That's what it was. If you want to see it, if you're that bored with your life, you just go to my website, gregavola.me; it's right there. So that's all I have to say about that. So first of all, what is Untappd? It's basically--coined by the community as the "Foursquare for beer." It's an app that allows you to check in your beer, optionally add your location, and then share with all your friends, make them extremely jealous that you're drinking during the day. So it's a great, great tool. We launched in October of 2010. We're only a team of 2; we're both part-time on this project. Well, I say we're part-time. We don't do it full-time, although it seems like we do it sometimes. There are over 200,000 registered users on the application. And we just recently crossed 10 million check-ins. So we have a lot of people that love to drink. I think I pulled a report last month. The average user on Untappd, in the last month, drinks 18 beers a month. That's a lot. Well, I mean, to some people. Not to me. With PhoneGap we were able to add in uploaded photos, which was a major requested feature. We added that in about 7 months ago, when we launched in October. Already more than a half-million photos have been uploaded of "beer-related" photos. I stress that. We're a mobile web first, and then we're a native platform. As I mentioned, we launched in October of 2011, and just on Tuesday we launched Version 2 of our product, which has gotten a lot of positive feedback. So it's really much better than the first one. Social integration with Foursquare, Twitter, and Facebook. If you're an app and you don't have these in your platform, it's not really an app. And then the big thing that everyone loves is our social achievement with badges. Just like Foursquare, we give you badges for doing certain activities:
drinking at a beach, drinking at a college, stuff like that to really kind of drive the engagement on the site. So I want to talk a little bit about our story and how we got into PhoneGap and how we got into Untappd. I found this really weird, creepy picture of this kid, so we had this idea that we wanted to think about industries that needed to be disruptive. And beer was a very social industry, but it never really came to fruition. So we said, "Why don't we make something like Twitter and Facebook for beer?" And that's how it started. And then I add that because everybody else has stuff on their slides about stuff like that. So we started out--we launched in October of 2010 with a basic--this was the first version we came out with, Web only. Mobile web. So we started out with an HTML5-powered web app. The best thing about this is that we worked on BlackBerry 6, iOS, WebOS, Android on day 1. A lot of apps come out on 1 platform, and unless you're Instagram, it doesn't work. So we were able to find a really good median of people that wanted to use our product and could open up their phone and quickly go to the site. When I first met Brian, actually, he told me this really good story about how the Web is your biggest marketplace. There's other stores out there, app store and marketplace, but the Web is something that you just tell someone, have a Web app, just go to the address, and you're there and you're done. So it's a good opportunity for us to reach multiple platforms on day 1. We didn't use any custom design--I mean, we didn't use any predefined style sheets like jQuery Mobile or Sencha Touch, because honestly, when we first built this it wasn't ready yet. They were still in early, early alpha, and we weren't comfortable with it. We actually used jQuery on our mobile, which is not a good thing to use on a mobile browser, because of all the IE stuff that's in there that you'll never really need to touch. But it was a mistake, and it worked out. Social integration on day 1, Twitter and Facebook, as you can see by the screen shot helped us get the word out. And then my favorite thing is that we have these badges that are a little bit extraneous at this point. But on day 1, you only had to do one of the requirements to get all of the badges, so you pretty much pissed off a lot of people on the Twitter feed by unlocking these things left and right. People testing the app in the morning, and they get the "Top of the Morning Badge," really early, so it was not a good idea. So growth is good. We're gaining the user base on Untappd over the course of almost a full year. The big blip in the front was a "Mashable" article that was written about Untappd, and it happened at 2 in the morning, Eastern time. I did not get any sleep that night at all. I maintained the service. We were still on shared hosting with that. The growth is good. We're really happy about it. But people want native apps. There's all these that came in from users on our support site saying things like, "You don't have an app in this store." "I want offline access mode." All this ridiculous stuff, like the first one, "Gay. No app in store." I mean, I don't understand that one. Anyway, people wanted native apps. Then the other problem, people were confused about web apps. They're not really sure what is the idea here. They love web apps, but where can I download it. That's the biggest problem we have. I met somebody at a party, at a networking event, we said to them, "We're Untappd. This is how you get to it. You just open up your browser, type in untappd.com," and I've already lost them. I've already lost them at that point. So they're confused on how to do it. If it's an app, everyone thinks you need to download it. And the other problem is that we're developers. We're not iOS developers, we're not Androids, we just love to code. And that's just the way that we roll in a small company. We don't have the people on staff to have all these different development platforms like iOS or Android. And, like I mentioned, we're a small team with no funding. People come up to us and say, we want to build you an Android app. I know you guys are new, but we're going to cut you a deal: 35 grand. You've got to be kidding me. 35 grand? I said, "No, no. Okay, maybe it has to be a little cheaper. What's your quote for that?" 45 grand. Even more. Can't afford that. Can't even afford to pay my rent sometimes. I mean, this is ridiculous. So we put the pros and cons together of why we want to have mobile web, why we don't want to have mobile web. And this has kind of been talked about today. It's easy development for us, it was cheaper, because we just did it. Multiple platforms. Some native components. You have HTML5 to drive the some of the geolocation elements. Fast updates, which I love, being able to push out features right then and there. You don't have to worry about apps for submission. But then you have the cons side: the lack of exposure that I talked about. People weren't knowing how to find you, how to discover you. You can't connect to the camera, the contacts, and some of the network connections sometimes. That's a big feature for us. We wanted to be able to pull in photos. And then the knowledge barrier, like I talked about before. People just don't understand web apps. I wish that it would be more common terminology, but it's just not there yet. So obviously, our solution was none other than the popular folks at PhoneGap to provide their solution to help us build our product on the native platform. So what we were able to do is take all of our code. This took, literally, 36 hours of coding sessions to take our entire web app and put it on a native platform. And just like some of the other people that have talked today, the first step is the easiest. You can get your app out there. People can use it. You're going to run into bugs here and there with the different versions of Android, which has already been discussed. But it was really easy for us to do, and the residual effect of this was amazing, which I'll talk about in a little bit. Now, people always ask why PhoneGap. Why should I use PhoneGap? There's a lot of other ones out there that we won't discuss because they're not even worth discussing. PhoneGap is open source and free. For someone that can't afford to pay his rent every month, this is very important when you're building a business. Open source and free is very important. Using your existing knowledge without hiring multiple teams for each platform. Another important piece. I already know HTML5. I wrote the mobile app, so let's decide to move that to different platforms. And it's really that easy. Obviously, a thriving community. We wouldn't be here today if there wasn't a thriving community. And plugins. This is one of my favorite things about PhoneGap. You can easily add plugins such as native controls, different things to make it look and feel more native to add more functionality to it. So what happened after we put our native app out? That blip in the middle, that was the day we released Untappd 1.0 in the PhoneGap Android and iPhone. We signed up 25,000 users in that month alone, October of last year. We averaged around 400 a month before that. So an amazing amount of exposure. We increased our check-in count per day, every single day, by 300% for the next 4 months. It was pretty crazy. And then my fiance took a screen shot, which I can't find, but she said that Untappd was a top 50 app, in social networks online today. I don't believe her. I think she's trying to make me feel better. But that's what she said, and I'm going to put it on the slide to make myself feel better. So--thank you. Thank you. After all this process and we've talked about some of the buzz with the web kit and whatnot, some of the lessons that I have learned from moving from a mobile web version to a native application is really along the idea of you're building an app, not a website. And what I mean by that is that most people build websites with module loading screens. You're dependent upon WiFi connection. You really have to build an app like Instagram or other apps that do a lot of other stuff in the background. If you focus your attention on that and not showing up loading symbols every 5 seconds to the user, you're going to have a much better experience. One of the mistakes we made with Untappd, the mobile version, is that we actually didn't have an API. We just kind of threw HTML together and served it back to the client. This was not good. It was very bad. So I'd recommend using JavaScript template engines, and then being able to restore stuff with JSON and then put it into the actual Web view. Understand the platform before designing. This is really important. You keep the kind of design standards that you have for the different platforms. For iOS, or Android version on the left, you see here, this is how it looks normally on Android apps. You have a top navigation or an action bar, and then you also have your very top navigation point. On iOS, we flipped it down so there's a bottom tab bar. That kept it consistent with the design. Most times you see a lot of people that want to say, "Oh, PhoneGap. Great. I'm just going to take the same code, and I'm going to put it all across my 4 platforms that I want to do." Take a little consideration. Try to change up your design a little bit. Users will be a lot more participating with this, and they'll thank you for making their app look and feel just like the other ones they have on their phone. And most importantly, because I made a lot of mistakes, and I'm sure other developers have as well, you've got to test, test, test. A lot of programmers, or a lot of developers, say, "Hey, a Web app. I can just fix it when I want." Apple's taking about 5 business days to approve your request. We got rejected at least 4 or 5 times before this went out. So you have to make sure that you really test your product fully before you get out, obviously. People notice that. So that's the end of my presentation. If anyone has any questions, I tweeted a couple days ago that I'm giving away free Untappd stickers so if you see me or--now that you know what I look like-- just hound me. Run me over, and I'll get you some stickers. And if you're interested in any other questions, I'll be around. And when you're drinking the beer, make sure you check in on Untappd, okay? Thank you very much. [Clapping] [Sponsors: Intel, Adobe, OneTok, Breaking Development, AT&T] [PhoneGap Day US 2012]
especially on the PhoneGap team: Untappd.
[Audience applause and cheering] [Greg Avola] All right. Okay. Let's start this thing. All right. So who here has heard of Untappd? Raise your hand. Wow. My mom's going to be really happy about that. So what I want to talk about today is how PhoneGap pretty much made Untappd what it is today. As I've called it, "The Perfect Pint." So who is this goofball? With 3 'l's in a ball, but that doesn't matter. I'm the co-founder and the lead developer of Untappd. We found this service last--in 2010. I live in New York City, but I'm born and raised in Boston. That doesn't really make any relevance here. I could say things like Red Sox, but that doesn't really fit here so we'll skip that. I specialize in PHP, JavaScript, and MySQL, which is the technology stack for Untappd. We also used Memcache and Redis. And my claim to fame, if Untappd wasn't my claim to fame, I was on "Man v. Food" for 9 seconds in 2010 with a line that my friends still text me from time to time today: "I don't know if they're going to finish this pizza. It looks too big." That was my line, right there. That's what it was. If you want to see it, if you're that bored with your life, you just go to my website, gregavola.me; it's right there. So that's all I have to say about that. So first of all, what is Untappd? It's basically--coined by the community as the "Foursquare for beer." It's an app that allows you to check in your beer, optionally add your location, and then share with all your friends, make them extremely jealous that you're drinking during the day. So it's a great, great tool. We launched in October of 2010. We're only a team of 2; we're both part-time on this project. Well, I say we're part-time. We don't do it full-time, although it seems like we do it sometimes. There are over 200,000 registered users on the application. And we just recently crossed 10 million check-ins. So we have a lot of people that love to drink. I think I pulled a report last month. The average user on Untappd, in the last month, drinks 18 beers a month. That's a lot. Well, I mean, to some people. Not to me. With PhoneGap we were able to add in uploaded photos, which was a major requested feature. We added that in about 7 months ago, when we launched in October. Already more than a half-million photos have been uploaded of "beer-related" photos. I stress that. We're a mobile web first, and then we're a native platform. As I mentioned, we launched in October of 2011, and just on Tuesday we launched Version 2 of our product, which has gotten a lot of positive feedback. So it's really much better than the first one. Social integration with Foursquare, Twitter, and Facebook. If you're an app and you don't have these in your platform, it's not really an app. And then the big thing that everyone loves is our social achievement with badges. Just like Foursquare, we give you badges for doing certain activities:
drinking at a beach, drinking at a college, stuff like that to really kind of drive the engagement on the site. So I want to talk a little bit about our story and how we got into PhoneGap and how we got into Untappd. I found this really weird, creepy picture of this kid, so we had this idea that we wanted to think about industries that needed to be disruptive. And beer was a very social industry, but it never really came to fruition. So we said, "Why don't we make something like Twitter and Facebook for beer?" And that's how it started. And then I add that because everybody else has stuff on their slides about stuff like that. So we started out--we launched in October of 2010 with a basic--this was the first version we came out with, Web only. Mobile web. So we started out with an HTML5-powered web app. The best thing about this is that we worked on BlackBerry 6, iOS, WebOS, Android on day 1. A lot of apps come out on 1 platform, and unless you're Instagram, it doesn't work. So we were able to find a really good median of people that wanted to use our product and could open up their phone and quickly go to the site. When I first met Brian, actually, he told me this really good story about how the Web is your biggest marketplace. There's other stores out there, app store and marketplace, but the Web is something that you just tell someone, have a Web app, just go to the address, and you're there and you're done. So it's a good opportunity for us to reach multiple platforms on day 1. We didn't use any custom design--I mean, we didn't use any predefined style sheets like jQuery Mobile or Sencha Touch, because honestly, when we first built this it wasn't ready yet. They were still in early, early alpha, and we weren't comfortable with it. We actually used jQuery on our mobile, which is not a good thing to use on a mobile browser, because of all the IE stuff that's in there that you'll never really need to touch. But it was a mistake, and it worked out. Social integration on day 1, Twitter and Facebook, as you can see by the screen shot helped us get the word out. And then my favorite thing is that we have these badges that are a little bit extraneous at this point. But on day 1, you only had to do one of the requirements to get all of the badges, so you pretty much pissed off a lot of people on the Twitter feed by unlocking these things left and right. People testing the app in the morning, and they get the "Top of the Morning Badge," really early, so it was not a good idea. So growth is good. We're gaining the user base on Untappd over the course of almost a full year. The big blip in the front was a "Mashable" article that was written about Untappd, and it happened at 2 in the morning, Eastern time. I did not get any sleep that night at all. I maintained the service. We were still on shared hosting with that. The growth is good. We're really happy about it. But people want native apps. There's all these that came in from users on our support site saying things like, "You don't have an app in this store." "I want offline access mode." All this ridiculous stuff, like the first one, "Gay. No app in store." I mean, I don't understand that one. Anyway, people wanted native apps. Then the other problem, people were confused about web apps. They're not really sure what is the idea here. They love web apps, but where can I download it. That's the biggest problem we have. I met somebody at a party, at a networking event, we said to them, "We're Untappd. This is how you get to it. You just open up your browser, type in untappd.com," and I've already lost them. I've already lost them at that point. So they're confused on how to do it. If it's an app, everyone thinks you need to download it. And the other problem is that we're developers. We're not iOS developers, we're not Androids, we just love to code. And that's just the way that we roll in a small company. We don't have the people on staff to have all these different development platforms like iOS or Android. And, like I mentioned, we're a small team with no funding. People come up to us and say, we want to build you an Android app. I know you guys are new, but we're going to cut you a deal: 35 grand. You've got to be kidding me. 35 grand? I said, "No, no. Okay, maybe it has to be a little cheaper. What's your quote for that?" 45 grand. Even more. Can't afford that. Can't even afford to pay my rent sometimes. I mean, this is ridiculous. So we put the pros and cons together of why we want to have mobile web, why we don't want to have mobile web. And this has kind of been talked about today. It's easy development for us, it was cheaper, because we just did it. Multiple platforms. Some native components. You have HTML5 to drive the some of the geolocation elements. Fast updates, which I love, being able to push out features right then and there. You don't have to worry about apps for submission. But then you have the cons side: the lack of exposure that I talked about. People weren't knowing how to find you, how to discover you. You can't connect to the camera, the contacts, and some of the network connections sometimes. That's a big feature for us. We wanted to be able to pull in photos. And then the knowledge barrier, like I talked about before. People just don't understand web apps. I wish that it would be more common terminology, but it's just not there yet. So obviously, our solution was none other than the popular folks at PhoneGap to provide their solution to help us build our product on the native platform. So what we were able to do is take all of our code. This took, literally, 36 hours of coding sessions to take our entire web app and put it on a native platform. And just like some of the other people that have talked today, the first step is the easiest. You can get your app out there. People can use it. You're going to run into bugs here and there with the different versions of Android, which has already been discussed. But it was really easy for us to do, and the residual effect of this was amazing, which I'll talk about in a little bit. Now, people always ask why PhoneGap. Why should I use PhoneGap? There's a lot of other ones out there that we won't discuss because they're not even worth discussing. PhoneGap is open source and free. For someone that can't afford to pay his rent every month, this is very important when you're building a business. Open source and free is very important. Using your existing knowledge without hiring multiple teams for each platform. Another important piece. I already know HTML5. I wrote the mobile app, so let's decide to move that to different platforms. And it's really that easy. Obviously, a thriving community. We wouldn't be here today if there wasn't a thriving community. And plugins. This is one of my favorite things about PhoneGap. You can easily add plugins such as native controls, different things to make it look and feel more native to add more functionality to it. So what happened after we put our native app out? That blip in the middle, that was the day we released Untappd 1.0 in the PhoneGap Android and iPhone. We signed up 25,000 users in that month alone, October of last year. We averaged around 400 a month before that. So an amazing amount of exposure. We increased our check-in count per day, every single day, by 300% for the next 4 months. It was pretty crazy. And then my fiance took a screen shot, which I can't find, but she said that Untappd was a top 50 app, in social networks online today. I don't believe her. I think she's trying to make me feel better. But that's what she said, and I'm going to put it on the slide to make myself feel better. So--thank you. Thank you. After all this process and we've talked about some of the buzz with the web kit and whatnot, some of the lessons that I have learned from moving from a mobile web version to a native application is really along the idea of you're building an app, not a website. And what I mean by that is that most people build websites with module loading screens. You're dependent upon WiFi connection. You really have to build an app like Instagram or other apps that do a lot of other stuff in the background. If you focus your attention on that and not showing up loading symbols every 5 seconds to the user, you're going to have a much better experience. One of the mistakes we made with Untappd, the mobile version, is that we actually didn't have an API. We just kind of threw HTML together and served it back to the client. This was not good. It was very bad. So I'd recommend using JavaScript template engines, and then being able to restore stuff with JSON and then put it into the actual Web view. Understand the platform before designing. This is really important. You keep the kind of design standards that you have for the different platforms. For iOS, or Android version on the left, you see here, this is how it looks normally on Android apps. You have a top navigation or an action bar, and then you also have your very top navigation point. On iOS, we flipped it down so there's a bottom tab bar. That kept it consistent with the design. Most times you see a lot of people that want to say, "Oh, PhoneGap. Great. I'm just going to take the same code, and I'm going to put it all across my 4 platforms that I want to do." Take a little consideration. Try to change up your design a little bit. Users will be a lot more participating with this, and they'll thank you for making their app look and feel just like the other ones they have on their phone. And most importantly, because I made a lot of mistakes, and I'm sure other developers have as well, you've got to test, test, test. A lot of programmers, or a lot of developers, say, "Hey, a Web app. I can just fix it when I want." Apple's taking about 5 business days to approve your request. We got rejected at least 4 or 5 times before this went out. So you have to make sure that you really test your product fully before you get out, obviously. People notice that. So that's the end of my presentation. If anyone has any questions, I tweeted a couple days ago that I'm giving away free Untappd stickers so if you see me or--now that you know what I look like-- just hound me. Run me over, and I'll get you some stickers. And if you're interested in any other questions, I'll be around. And when you're drinking the beer, make sure you check in on Untappd, okay? Thank you very much. [Clapping] [Sponsors: Intel, Adobe, OneTok, Breaking Development, AT&T] [PhoneGap Day US 2012]
