{"id":1203,"date":"2016-07-28T18:25:53","date_gmt":"2016-07-28T18:25:53","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1203"},"modified":"2016-07-28T18:25:53","modified_gmt":"2016-07-28T18:25:53","slug":"ionic-native-working-with-the-device-motion-plugin","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin","title":{"rendered":"Ionic Native: Working with the Device Motion Plugin"},"content":{"rendered":"

Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog<\/a>, where this post originally appeared.<\/em><\/p>\n

Ionic Native<\/a> is the spiritual successor to the older ngCordova project. Basically, it provides an Ionic\/Angular friendly interface to many common Apache Cordova plugins. To be clear, this isn\u2019t something you have to use in your Ionic application, but it can make using plugins a bit simpler. For today\u2019s demo, I thought I\u2019d work with the Device Motion<\/a> plugin. This plugin lets monitor the device accelerometer and do…well, whatever based on the motion of the hardware. For my demo (link at the end) I decided on a simple idea–I\u2019d build an app that loads data and then lets you shake the device to update.
\n<\/p>\n

I began by building a new Ionic 2 application based on the blank template. For the initial version, I\u2019d build out all the code to load data, display it in a list, and I\u2019d include a button that could be used to refresh the data. (While \u201cshake to update\u201d is cool, you probably want to provide a simple UI element to click as well.)<\/p>\n

The first thing I did was create a provider. I made it use hard coded data and set up a simple routine so it could easily add more data to the list. I assume this is self-explanatory, but let me know if you have any questions.<\/p>\n

import { Injectable } from '@angular\/core';\nimport 'rxjs\/add\/operator\/map';\n\n\/*\n  Generated class for the CatProvider provider.\n\n  See https:\/\/angular.io\/docs\/ts\/latest\/guide\/dependency-injection.html\n  for more info on providers and Angular 2 DI.\n*\/\n@Injectable()\nexport class CatProvider {\n  data: any;\n\n  constructor() {\n    \/\/ hard coded initial data\n    this.data = [];\n\n    for(var i=0;i<3;i++) {\n      this.data.push(this.makeCat());\n    }\n  }\n\n  makeCat() {\n    return {\n      "name":"Cat "+(this.data.length+1),\n      "id":+(this.data.length+1)\n    }\n  }\n\n  load() {\n      \/\/add a cat\n      this.data.push(this.makeCat());\n      return Promise.resolve(this.data);\n  }\n\n}\n<\/code><\/pre>\n
In my view\u2019s logic, I then added in the provider and had it set a local variable, cats, to the result of provider\u2019s load method.<\/p>\n
import {Component} from '@angular\/core';\nimport {NavController} from 'ionic-angular';\nimport {CatProvider} from '..\/..\/providers\/cat-provider\/cat-provider';\n\n@Component({\n  providers: [CatProvider],\n  templateUrl: 'build\/pages\/home\/home.html'\n})\nexport class HomePage {\n\n  public cats:Array<Object>;\n\n  constructor(public catProvider:CatProvider, private navController: NavController) {\n    this.loadCats();\n  }\n\n  loadMore() {\n    console.log('load more cats');\n    this.loadCats();\n  }\n\n  loadCats() {\n    this.catProvider.load().then(result => {\n      this.cats = result;\n    });\n  }\n\n}\n<\/code><\/pre>\n
Again – I\u2019m kinda assuming this is all relatively simple, but just let me know if it doesn\u2019t make sense. Finally, I built out my view.<\/p>\n
<ion-header>\n  <ion-navbar>\n    <ion-title>\n      Shake Demo\n    <\/ion-title>\n  <\/ion-navbar>\n<\/ion-header>\n\n<ion-content class="home" padding>\n  <ion-list inset>\n    <ion-item *ngFor="let cat of cats"> {{ cat.name }} <\/ion-item>\n  <\/ion-list>\n\n  <button danger (click)="loadMore()">Load More<\/button>\n\n<\/ion-content>\n<\/code><\/pre>\n
Here it is running in the browser:<\/p>\n
\"shakeA\"
Woot. Ok–now for the fun part. First, I have to add in the plugin. The Ionic Native docs remind you of this both on the introductory page of the feature and for each individual plugin. For me, this was done via:<\/p>\n
ionic plugin add cordova-plugin-device-motion<\/code><\/p>\n
Ok, easy enough. Next, I needed to add support to my logic. First, I imported it:<\/p>\n
import {DeviceMotion} from 'ionic-native';<\/code><\/p>\n
Cool. Then I tried the sample code…and it crapped the bed in the browser. Because–of course–this is a device-specific thing. Oops. So the first thing I did was add in support for listening for the platform ready event. Remember – your controller may actually fire before Cordova is ready to let you use hardware features. You can easily listen for this by adding in the Platform object:<\/p>\n
import {NavController,Platform} from 'ionic-angular';<\/code><\/p>\n
And then listen for ready:<\/p>\n
constructor(public catProvider:CatProvider, private navController: NavController, platform:Platform) {\n  this.loadCats();\n\n  platform.ready().then(() => {\n<\/code><\/pre>\n
That was step one. Step two was to switch to using the incredibly cool Cordova Tools extension for Visual Studio Code. This is an extension created by Microsoft that provides a whole set of awesomeness for folks doing Cordova\/Ionic apps with Code. Most recently, they added support for using Ripple within the editor. I haven\u2019t talked about Ripple in a long time, but for folks who don\u2019t remember, it was a browser based testing system for Cordova apps that included some cool extras–like being able to fake GPS and accelerometer data.<\/p>\n
So I set up my project for debugging (see the earlier link on Microsoft\u2019s blog for more information) and then fired it off. Now, it is a bit difficult to use this on a laptop, as it is a bit cramped, but I was able to debug my application and \u2018shake\u2019 it via Code:<\/p>\n
\"shake1\"
Nice. So at this point, I needed to do two things–monitor the device motion and then determine when a \u2018shake\u2019 happens. The first one is easy:<\/p>\n
var subscription = DeviceMotion.watchAcceleration({frequency:200}).subscribe(acc => {<\/code><\/p>\n
The second one\u2026 not so much. Luckily, I\u2019ve done this before in a demo. Basically, I remember the device\u2019s previous values for acceleration, compare it to the current set of values, and if it is \u201cenough\u201d, consider it a \u201cmovement\u201d. I can then keep track of movements and when enough has happened, I can consider it a shake. Obviously this can be tweaked. You would need to test on a real device and see what \u201cfeels\u201d right. Here is the updated code with that logic in place:<\/p>\n
import {Component} from '@angular\/core';\nimport {NavController,Platform} from 'ionic-angular';\nimport {CatProvider} from '..\/..\/providers\/cat-provider\/cat-provider';\nimport {DeviceMotion} from 'ionic-native';\n\n@Component({\n  providers: [CatProvider],\n  templateUrl: 'build\/pages\/home\/home.html'\n})\nexport class HomePage {\n\n  public cats:Array<Object>;\n  private lastX:number;\n  private lastY:number;\n  private lastZ:number;\n  private moveCounter:number = 0;\n\n  constructor(public catProvider:CatProvider, private navController: NavController, platform:Platform) {\n    this.loadCats();\n\n    platform.ready().then(() => {\n      var subscription = DeviceMotion.watchAcceleration({frequency:200}).subscribe(acc => {\n        \/\/console.log(acc);\n\n        if(!this.lastX) {\n          this.lastX = acc.x;\n          this.lastY = acc.y;\n          this.lastZ = acc.z;\n          return;\n        }\n\n        let deltaX:number, deltaY:number, deltaZ:number;\n        deltaX = Math.abs(acc.x-this.lastX);\n        deltaY = Math.abs(acc.y-this.lastY);\n        deltaZ = Math.abs(acc.z-this.lastZ);\n\n        if(deltaX + deltaY + deltaZ > 3) {\n          this.moveCounter++;\n        } else {\n          this.moveCounter = Math.max(0, --this.moveCounter);\n        }\n\n        if(this.moveCounter > 2) { \n          console.log('SHAKE');\n          this.loadCats(); \n          this.moveCounter=0; \n        }\n\n        this.lastX = acc.x;\n        this.lastY = acc.y;\n        this.lastZ = acc.z;\n\n      });\n    });\n\n  }\n\n  loadMore() {\n    console.log('load more cats');\n    this.loadCats();\n  }\n\n  loadCats() {\n    this.catProvider.load().then(result => {\n      this.cats = result;\n    });\n  }\n\n}\n<\/code><\/pre>\n
You can find the complete source code for this up on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. Ionic Native is the spiritual successor to the older ngCordova project. Basically, it provides an Ionic\/Angular friendly interface to many common Apache Cordova plugins. To be clear, this isn\u2019t something you have to use […]<\/p>\n","protected":false},"author":31,"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":[3,27],"class_list":["post-1203","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-native"],"acf":[],"yoast_head":"\nIonic Native: Working with the Device Motion Plugin - 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\/ionic-native-working-with-the-device-motion-plugin\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic Native: Working with the Device Motion Plugin\" \/>\n<meta property=\"og:description\" content=\"Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. Ionic Native is the spiritual successor to the older ngCordova project. Basically, it provides an Ionic\/Angular friendly interface to many common Apache Cordova plugins. To be clear, this isn\u2019t something you have to use […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-28T18:25:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg\" \/>\n<meta name=\"author\" content=\"Raymond Camden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@raymondcamden\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raymond Camden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\"},\"author\":{\"name\":\"Raymond Camden\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d\"},\"headline\":\"Ionic Native: Working with the Device Motion Plugin\",\"datePublished\":\"2016-07-28T18:25:53+00:00\",\"dateModified\":\"2016-07-28T18:25:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\"},\"wordCount\":718,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg\",\"keywords\":[\"Ionic\",\"Ionic Native\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\",\"name\":\"Ionic Native: Working with the Device Motion Plugin - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg\",\"datePublished\":\"2016-07-28T18:25:53+00:00\",\"dateModified\":\"2016-07-28T18:25:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg\",\"width\":500,\"height\":539},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic Native: Working with the Device Motion Plugin\"}]},{\"@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\/c5161ffcc855ece520266a174a1b828d\",\"name\":\"Raymond Camden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g\",\"caption\":\"Raymond Camden\"},\"sameAs\":[\"http:\/\/www.raymondcamden.com\",\"https:\/\/x.com\/raymondcamden\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/ray\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic Native: Working with the Device Motion Plugin - 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\/ionic-native-working-with-the-device-motion-plugin","og_locale":"en_US","og_type":"article","og_title":"Ionic Native: Working with the Device Motion Plugin","og_description":"Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. Ionic Native is the spiritual successor to the older ngCordova project. Basically, it provides an Ionic\/Angular friendly interface to many common Apache Cordova plugins. To be clear, this isn\u2019t something you have to use […]","og_url":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin","og_site_name":"Ionic Blog","article_published_time":"2016-07-28T18:25:53+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg"}],"author":"Raymond Camden","twitter_card":"summary_large_image","twitter_creator":"@raymondcamden","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Raymond Camden","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin"},"author":{"name":"Raymond Camden","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d"},"headline":"Ionic Native: Working with the Device Motion Plugin","datePublished":"2016-07-28T18:25:53+00:00","dateModified":"2016-07-28T18:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin"},"wordCount":718,"commentCount":17,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg","keywords":["Ionic","Ionic Native"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin","url":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin","name":"Ionic Native: Working with the Device Motion Plugin - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg","datePublished":"2016-07-28T18:25:53+00:00","dateModified":"2016-07-28T18:25:53+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/07\/shakeA.jpg","width":500,"height":539},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-native-working-with-the-device-motion-plugin#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic Native: Working with the Device Motion Plugin"}]},{"@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\/c5161ffcc855ece520266a174a1b828d","name":"Raymond Camden","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g","caption":"Raymond Camden"},"sameAs":["http:\/\/www.raymondcamden.com","https:\/\/x.com\/raymondcamden"],"url":"https:\/\/ionic.io\/blog\/author\/ray"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1203","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\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1203"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1203\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}