{"id":1143,"date":"2016-06-23T13:58:46","date_gmt":"2016-06-23T13:58:46","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1143"},"modified":"2016-09-27T18:47:05","modified_gmt":"2016-09-27T18:47:05","slug":"built-with-ionic-2-let-me-see","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see","title":{"rendered":"Built with Ionic 2: Let Me See, a Mobile App and<\/em> a Progressive Web App!"},"content":{"rendered":"

\"let-me-see-header\"

Let Me See, the app that won the Innovation Award at the 2016 Angular Attack hackathon, was built with Ionic 2 in 48 hours by Wassim Chegham<\/a>, a Developer Advocate at SFEIR<\/a> in Paris and a Google Developer Expert<\/a> in Web Technologies, with help from Attila Csanyi<\/a> and Uri Shaked<\/a>.<\/p>\n

Let Me See\u2019s main purpose is to help people with sight loss \u201csee\u201d what is around them by reading text and analyzing colors out loud.<\/p>\n

It\u2019s also a Progressive Web App<\/a>, which we were pretty psyched about, since we\u2019ve been wanting to find a great PWA example to show all of you!<\/p>\n

<\/p>\n

\u201cLet Me See is an awesome example of a PWA built with Ionic 2,\u201d says Ionic support engineer Justin Willis, who helped judge the hackathon. \u201cIt includes everything needed to be a PWA\u2014a service worker and a manifest.json\u2014which means you can use it while offline and add it to your homescreen to get that native feel. My favorite thing about Let Me See is that it shows just how easy it is to build a PWA with Ionic 2 and that it shows a major strength of hybrid apps: the ability to not only run as a native app, but run just as well as a web app.\u201d<\/p>\n

Chegham has been using Ionic 1 for several years, whenever his team needed to build robust AngularJS mobile applications for clients or for internal apps. He\u2019d been wanting to try Ionic 2 and thought the hackathon was a perfect opportunity.<\/p>\n

\"dsgn-brisb-nexus-6P\"

\u201cGetting started with Ionic 2\u2014and Ionic 1\u2014is a matter of minutes, if not seconds, thanks to the CLI, which helped us scaffold the app,\u201d says Chegham. \u201cThis is crucial for a hackathon; you don\u2019t want to spend your time debugging your build system or messing with the configuration.\u201d<\/p>\n

Chegham\u2019s application UI uses simple components, since it\u2019s a voice driven interface, so he used basic UI components, like the toolbar and card components.<\/p>\n

\u201cWe may add more features in the coming versions and may then take advantage of some more advanced UI components, like Action Sheets or Gestures, but we need to think deeply about that, because we have to offer the best UX possible for our target audience,\u201d he says. \u201cThe app uses standard HTML5 APIs, such as Navigator.getUserMedia() for capturing the user\u2019s voice, but more importantly, capturing the outside world video for image processing, which is the whole purpose of this app.\u201d<\/p>\n

The Google Cloud Vision API<\/a> made image processing possible. Let Me See also uses other graphic APIs, like Canvas and SVG, for some parts of the UI.<\/p>\n

\u201cAll those Web APIs were so easy to integrate, thanks to Ionic, since it is by design a web-friendly platform,\u201d Chegham says. \u201cAdding support for Progressive Web Apps was really straightforward.\u201d<\/p>\n

Chegham wanted the app to be installable and available offline, so he added a manifest.json file with necessary details like the app icon, theme color, name, etc., and a Service Worker for offline support.<\/p>\n

\u201cBesides, Ionic comes with Gulp as a build system and allows you to easily drop in your custom tasks,\u201d he adds. \u201cI found this really convenient because I could add my custom \u201csw-precache\u201d task to the \u201cbuild:after\u201d lifecycle, which basically generates the Service Worker after each build and keeps it up to date.\u201d<\/p>\n

For this first iteration, the team\u2019s MVP was to deliver a working, easy-to-access application, so they focused on the Web platform to make sure it worked as intended. The app is still in the proof of concept stage and not available for production use.<\/p>\n

\u201cThe innovation of Let Me See and use of modern web api\u2019s is what first impressed me,\u201d says Willis. \u201cLet Me See shows you what is possible with the modern web and how far it has come from just static web pages.\u201d<\/p>\n

If you\u2019ve built a PWA with Ionic 2, we\u2019d love to hear about it! Email us<\/a> your examples!<\/p>\n","protected":false},"excerpt":{"rendered":"

Let Me See, the app that won the Innovation Award at the 2016 Angular Attack hackathon, was built with Ionic 2 in 48 hours by Wassim Chegham, a Developer Advocate at SFEIR in Paris and a Google Developer Expert in Web Technologies, with help from Attila Csanyi and Uri Shaked. Let Me See\u2019s main purpose […]<\/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,13,22],"class_list":["post-1143","post","type-post","status-publish","format-standard","hentry","category-all","tag-built-with","tag-ionic","tag-ionic-2","tag-progressive-web-apps"],"acf":[],"yoast_head":"\nBuilt with Ionic 2: Let Me See, a Mobile App and a Progressive Web App! - 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-2-let-me-see\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!\" \/>\n<meta property=\"og:description\" content=\"Let Me See, the app that won the Innovation Award at the 2016 Angular Attack hackathon, was built with Ionic 2 in 48 hours by Wassim Chegham, a Developer Advocate at SFEIR in Paris and a Google Developer Expert in Web Technologies, with help from Attila Csanyi and Uri Shaked. Let Me See\u2019s main purpose […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-23T13:58:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-27T18:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-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=\"3 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-2-let-me-see#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\"},\"author\":{\"name\":\"Katie Ginder-Vogel\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd\"},\"headline\":\"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!\",\"datePublished\":\"2016-06-23T13:58:46+00:00\",\"dateModified\":\"2016-09-27T18:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\"},\"wordCount\":676,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg\",\"keywords\":[\"Built With\",\"Ionic\",\"Ionic 2\",\"Progressive Web Apps\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\",\"url\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\",\"name\":\"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg\",\"datePublished\":\"2016-06-23T13:58:46+00:00\",\"dateModified\":\"2016-09-27T18:47:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg\",\"width\":1400,\"height\":823},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!\"}]},{\"@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 2: Let Me See, a Mobile App and a Progressive Web App! - 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-2-let-me-see","og_locale":"en_US","og_type":"article","og_title":"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!","og_description":"Let Me See, the app that won the Innovation Award at the 2016 Angular Attack hackathon, was built with Ionic 2 in 48 hours by Wassim Chegham, a Developer Advocate at SFEIR in Paris and a Google Developer Expert in Web Technologies, with help from Attila Csanyi and Uri Shaked. Let Me See\u2019s main purpose […]","og_url":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see","og_site_name":"Ionic Blog","article_published_time":"2016-06-23T13:58:46+00:00","article_modified_time":"2016-09-27T18:47:05+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see"},"author":{"name":"Katie Ginder-Vogel","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd"},"headline":"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!","datePublished":"2016-06-23T13:58:46+00:00","dateModified":"2016-09-27T18:47:05+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see"},"wordCount":676,"commentCount":17,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg","keywords":["Built With","Ionic","Ionic 2","Progressive Web Apps"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see","url":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see","name":"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg","datePublished":"2016-06-23T13:58:46+00:00","dateModified":"2016-09-27T18:47:05+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/06\/let-me-see-header.jpg","width":1400,"height":823},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-2-let-me-see#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Built with Ionic 2: Let Me See, a Mobile App and a Progressive Web App!"}]},{"@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\/1143","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=1143"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}