{"id":1466,"date":"2016-11-02T15:50:14","date_gmt":"2016-11-02T15:50:14","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1466"},"modified":"2016-11-02T15:50:14","modified_gmt":"2016-11-02T15:50:14","slug":"built-with-ionic-joule","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/built-with-ionic-joule","title":{"rendered":"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App"},"content":{"rendered":"

\"Built

\u201cAnyone can download the app today and check out the many sous vide guides we provide, even if you don\u2019t own a Joule,\u201d says Ryan Miller, a mobile engineer at ChefSteps. \u201cThe app talks to Joule via Bluetooth, if you\u2019re in close proximity, or over WiFi, which is useful if you\u2019re at the supermarket.\u201d
\n<\/p>\n

\"Joule

Miller and his team used EvoThings\u2019 cordova-ble library<\/a> to help the app and circulator to communicate and HTML5 WebSockets to handle WiFi communications.<\/p>\n

\u201cIonic forms the bedrock of the Joule app,\u201d says Miller. \u201cAt a fundamental level, we rely on the $ionicPlatform, $ionicHistory, and many ngCordova services to handle platform eccentricities and the state management of what is now a very complex app. We also leverage $ionicPopup, ion-slides, and a handful of other UI directives, though we\u2019ve gone over them with a completely custom theme. Ionic\u2019s seamless integration with Crosswalk has also been a tremendous help.\u201d<\/p>\n

To get a user\u2019s attention when needed, the team customized $ionicPopup into their own alert service, with three main types of alerts\/popups denoted by bold header colors and icons.<\/p>\n

Additional customization included customizing EvoThings\u2019 cordova-ble library and a custom video player.<\/p>\n

\u201cEven with EvoThings\u2019 cordova-ble library, we had to customize its source code (Objective C and Java) to fit our needs,\u201d says developer Jiamin Zhu.<\/p>\n

\u201cWe also wrote our own custom video player, as we just couldn\u2019t find a library that behaved well enough in an app environment for our needs,\u201d adds Miller. \u201cThere are so many oddities across iOS and Android video element integrations, and we had to tackle them all.\u201d<\/p>\n

\"cooking

In terms of cross-platform differentiation, the team\u2019s biggest challenge was handling the difference in how the platforms manage the back button.<\/p>\n

\u201cThe Android ecosystem has access to a hardware back button, while iOS relies totally on the UI for this functionality,\u201d explains Miller. \u201cWe made some UI affordances to handle this, but otherwise, you can expect a consistent experience across both iOS and Android.\u201d<\/p>\n

\"creme

Performance was naturally a focus of the team, especially given the size of the Joule app.<\/p>\n

\u201cThe Ionic team lent us a hand in tuning up some of our animation and view-switching infrastructure, which made a big impact,\u201d says Miller. \u201cThe Ionic team has built an incredible platform for mobile app development, and we\u2019re excited to see Ionic 2 land.\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"

Our friends at ChefSteps have a cool new cooking tool! Joule is an immersion circulator that allows you to use the sous vide cooking method, in which food is placed in airtight plastic bags, then heated in precisely controlled, low-temperature water. Because the food can never get hotter than the water, it\u2019s almost impossible to […]<\/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-1466","post","type-post","status-publish","format-standard","hentry","category-all","tag-built-with","tag-ionic"],"acf":[],"yoast_head":"\nBuilt with Ionic: Joule, a Sous Vide Cooking Tool and Companion 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-joule\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App\" \/>\n<meta property=\"og:description\" content=\"Our friends at ChefSteps have a cool new cooking tool! Joule is an immersion circulator that allows you to use the sous vide cooking method, in which food is placed in airtight plastic bags, then heated in precisely controlled, low-temperature water. Because the food can never get hotter than the water, it\u2019s almost impossible to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-02T15:50:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png\" \/>\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=\"2 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-joule#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\"},\"author\":{\"name\":\"Katie Ginder-Vogel\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd\"},\"headline\":\"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App\",\"datePublished\":\"2016-11-02T15:50:14+00:00\",\"dateModified\":\"2016-11-02T15:50:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\"},\"wordCount\":489,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png\",\"keywords\":[\"Built With\",\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\",\"url\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\",\"name\":\"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png\",\"datePublished\":\"2016-11-02T15:50:14+00:00\",\"dateModified\":\"2016-11-02T15:50:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/built-with-ionic-joule\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png\",\"width\":720,\"height\":423,\"caption\":\"Built with Ionic: Joule by ChefSteps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/built-with-ionic-joule#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion 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: Joule, a Sous Vide Cooking Tool and Companion 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-joule","og_locale":"en_US","og_type":"article","og_title":"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App","og_description":"Our friends at ChefSteps have a cool new cooking tool! Joule is an immersion circulator that allows you to use the sous vide cooking method, in which food is placed in airtight plastic bags, then heated in precisely controlled, low-temperature water. Because the food can never get hotter than the water, it\u2019s almost impossible to […]","og_url":"https:\/\/ionic.io\/blog\/built-with-ionic-joule","og_site_name":"Ionic Blog","article_published_time":"2016-11-02T15:50:14+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png"}],"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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule"},"author":{"name":"Katie Ginder-Vogel","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2910da3234dfb4b3870480300da225fd"},"headline":"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App","datePublished":"2016-11-02T15:50:14+00:00","dateModified":"2016-11-02T15:50:14+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule"},"wordCount":489,"commentCount":7,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png","keywords":["Built With","Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/built-with-ionic-joule#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule","url":"https:\/\/ionic.io\/blog\/built-with-ionic-joule","name":"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png","datePublished":"2016-11-02T15:50:14+00:00","dateModified":"2016-11-02T15:50:14+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/built-with-ionic-joule"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/10\/joul-ionic-header.png","width":720,"height":423,"caption":"Built with Ionic: Joule by ChefSteps"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/built-with-ionic-joule#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion 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\/1466","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=1466"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1466\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}