{"id":1092,"date":"2016-06-09T16:05:29","date_gmt":"2016-06-09T16:05:29","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1092"},"modified":"2016-07-28T15:33:21","modified_gmt":"2016-07-28T15:33:21","slug":"built-with-ionic-untappd","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd","title":{"rendered":"Built with Ionic: Untappd"},"content":{"rendered":"

\"untappd-ionic-header\"

Untappd<\/a>, a popular social app to share and discover beer, allows users to rate, review, and share the beers they\u2019re drinking with friends.<\/p>\n

\u201cWe aim to educate users about beers out there, and beers they should try based on our recommendations and taste profile,\u201d says Greg Avola<\/a>, co-founder and CTO of Untappd. \u201cWe also have badges and achievements that users can earn by going outside their normal beers of choice.\u201d<\/p>\n

<\/p>\n

\"untappd-ios-preview\"

Ionic\u2019s Mike Hartington has been an Untappd user–and fan–since it launched.<\/p>\n

\u201cMost of the time, I use it to track what beers I\u2019ve had before, remember ones that I really like, and to find new ones based that style of beer,\u201d says Hartington. \u201cMy favorite part is just how easy and accessible it is. It\u2019s so easy to just search for a beer, snap a picture, share it. and see what other kind of beers come from that brewery.\u201d<\/p>\n

Avola heard about Ionic after looking at some UI framework libraries for a simple solution for building apps with Cordova.<\/p>\n

\u201cOur app was always built with Cordova, but our code had turned into spaghetti, as we were not really using a framework,\u201d says Avola. \u201cIonic seemed the perfect match of our need for dynamic binding and easy, simple UI elements.\u201d<\/p>\n

Avola\u2019s team took Untappd\u2019s existing UI skin and translated it, using Ionic\u2019s UI kit. Next, they used elements like Toggles and Checkmarks to help the app look more like a native app.<\/p>\n

\u201cWe used to use complex CSS and plugins to handle these, and it was nice to simplify that process,\u201d says Avola. \u201cWe used the ionicModal function very frequently in the app, and it was really easy to use, instead of building complex CSS transitions to handle this. Most importantly, using the Ionic transitions for our iOS version was the best win for us, without using a plugin.\u201d<\/p>\n

\"untappd-nexus-preview\"

Untappd is a complex enough app that Avola\u2019s team used multiple plugins to build it.<\/p>\n

\u201cWe used the standard ones that most Cordova developers use, such as SafariViewController\/InAppBrowser, Geolocation, StatusBar, and Google Analytics, as well as some non-standard ones, such as AppPreferences for keeping LocalStorage persistence, and a custom plugin to use our CameraEditor from the Adobe Creative SDK,\u201d says Avola.<\/p>\n

Avola\u2019s team is more used to Grunt, so they set up the project using Grunt, not Gulp, and compiled all their templates and minified them using Grunt, so they could be added to the template cache, which uses an npm package called html2js to minify.<\/p>\n

\u201cThis help speed up the loading of templates and reducing flicking in the WebView,\u201d says Avola.<\/p>\n

Untappd actually has two different code bases, as Avola and his team found that it was easier to copy code from one project to the other, instead of doing tons of switch statements for different UI elements and handling.<\/p>\n

\u201cFor example, we\u2019ve overridden the Android back button to do certain aspects, but that doesn\u2019t exist on iOS, and to reduce code overhead, we moved it out the project for Android,\u201d says Avola. \u201cFor the standard templates, we re-used the content templates, as they were not platform specific. The best part of Ionic was the ability to reuse code from iOS to Android, without having to rewrite anything.\u201d<\/p>\n

Avola says the best thing about developing hybrid apps is the ability to get to market quickly.<\/p>\n

\u201cWe have always been a hybrid app team because we believe in code sharing for our apps and they help us get code out there as soon as possible,\u201d he says. \u201cWe are also a very small team of web developers, so we want to use our skill set to develop high-quality apps and that we can iterate upon quickly, and Ionic and Cordova help us do that.\u201d<\/p>\n

Avola plans to make the jump to Ionic 2 in the near future.<\/p>\n

\u201cOne of the most interesting features about Untappd is that it\u2019s not just about you as a user discovering beer,\u201d says Hartington. \u201cIt\u2019s got a nice social aspect about that lets your friends see what kind of beers you like, and vice versa. With a tap of a button, you can share photo to Twitter or Facebook.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"

Untappd, a popular social app to share and discover beer, allows users to rate, review, and share the beers they\u2019re drinking with friends. \u201cWe aim to educate users about beers out there, and beers they should try based on our recommendations and taste profile,\u201d says Greg Avola, co-founder and CTO of Untappd. \u201cWe also have […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[8,3],"class_list":["post-1092","post","type-post","status-publish","format-standard","hentry","category-all","tag-built-with","tag-ionic"],"acf":[],"yoast_head":"\nBuilt with Ionic: Untappd - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Built with Ionic: Untappd\" \/>\n<meta property=\"og:description\" content=\"Untappd, a popular social app to share and discover beer, allows users to rate, review, and share the beers they\u2019re drinking with friends. \u201cWe aim to educate users about beers out there, and beers they should try based on our recommendations and taste profile,\u201d says Greg Avola, co-founder and CTO of Untappd. \u201cWe also have […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-09T16:05:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-07-28T15:33:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg\" \/>\n<meta name=\"author\" content=\"Katie Ginder-Vogel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@katiegv\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Katie Ginder-Vogel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\"},\"author\":{\"name\":\"Katie Ginder-Vogel\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd\"},\"headline\":\"Built with Ionic: Untappd\",\"datePublished\":\"2016-06-09T16:05:29+00:00\",\"dateModified\":\"2016-07-28T15:33:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\"},\"wordCount\":710,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg\",\"keywords\":[\"Built With\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\",\"url\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\",\"name\":\"Built with Ionic: Untappd - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg\",\"datePublished\":\"2016-06-09T16:05:29+00:00\",\"dateModified\":\"2016-07-28T15:33:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg\",\"width\":1400,\"height\":823},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Built with Ionic: Untappd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd\",\"name\":\"Katie Ginder-Vogel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g\",\"caption\":\"Katie Ginder-Vogel\"},\"sameAs\":[\"https:\/\/x.com\/katiegv\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/katie\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Built with Ionic: Untappd - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd","og_locale":"en_US","og_type":"article","og_title":"Built with Ionic: Untappd","og_description":"Untappd, a popular social app to share and discover beer, allows users to rate, review, and share the beers they\u2019re drinking with friends. \u201cWe aim to educate users about beers out there, and beers they should try based on our recommendations and taste profile,\u201d says Greg Avola, co-founder and CTO of Untappd. \u201cWe also have […]","og_url":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd","og_site_name":"Ionic Blog","article_published_time":"2016-06-09T16:05:29+00:00","article_modified_time":"2016-07-28T15:33:21+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg"}],"author":"Katie Ginder-Vogel","twitter_card":"summary_large_image","twitter_creator":"@katiegv","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Katie Ginder-Vogel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd"},"author":{"name":"Katie Ginder-Vogel","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd"},"headline":"Built with Ionic: Untappd","datePublished":"2016-06-09T16:05:29+00:00","dateModified":"2016-07-28T15:33:21+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd"},"wordCount":710,"commentCount":4,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg","keywords":["Built With","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/built-with-ionic-untappd#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd","url":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd","name":"Built with Ionic: Untappd - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg","datePublished":"2016-06-09T16:05:29+00:00","dateModified":"2016-07-28T15:33:21+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/built-with-ionic-untappd"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/untappd-ionic-header.jpg","width":1400,"height":823},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-untappd#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Built with Ionic: Untappd"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd","name":"Katie Ginder-Vogel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/131787f56fe4a7c430c43dc65597a3cebe4410b5c9e07b86ea7a07b30886e12b?s=96&d=mm&r=g","caption":"Katie Ginder-Vogel"},"sameAs":["https:\/\/x.com\/katiegv"],"url":"https:\/\/ionic.io\/blog\/author\/katie"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1092"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1092\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}