{"id":1853,"date":"2017-06-02T21:35:22","date_gmt":"2017-06-02T21:35:22","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1853"},"modified":"2017-06-02T21:35:22","modified_gmt":"2017-06-02T21:35:22","slug":"yann-braga-my-ionic-success-story","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story","title":{"rendered":"Yann Braga: My Ionic Success Story"},"content":{"rendered":"<blockquote><p>\n  This is a guest post from Yann Braga. Yann recently won our Ionic Jedi Hackster contest, so we wanted to bring him on as a guest blogger to share his story with us&#8230;\n<\/p><\/blockquote>\n<p>Greetings, folks! My name is Yann Braga and I&#8217;m a full stack developer based in Fortaleza, Brazil.<\/p>\n<h3>On a computer, in a galaxy not so far away&#8230;<\/h3>\n<p>On May 4th, 2017 Ionic invited developers to participate in a remote hackathon to <a href=\"https:\/\/ionic.io\/blog\/become-an-ionic-jedi-hackster\/\">Become an Ionic Jedi Hackster<\/a>. Of course I had to contribute to this event. We were given 48 hours to create a Star Wars themed app using the latest <a href=\"https:\/\/ionicframework.com\">Ionic<\/a> and the newly released <a href=\"https:\/\/ionic.io\/blog\/announcing-ionic-cli-v3\/\">Ionic CLI v3<\/a>.<br \/>\n<!--more--><\/p>\n<h3>Feel the force flow through you<\/h3>\n<p>To be honest, I\u2019m not a huge Star Wars fan, but the event increased my interest and inspired the idea to create a simple app providing users with: Star Wars movie information, characters appearing in each film, film trailers, film metadata, award nominations, and other data available from <a href=\"https:\/\/swapi.co\/\">SWAPI<\/a>.<\/p>\n<h3>The Features of the App<\/h3>\n<ul>\n<li>Animated(ish) splash screen<\/li>\n<li>Custom icons<\/li>\n<li>Custom side menu transition<\/li>\n<li>Switching sides (app theme)<\/li>\n<li>Fetching data<\/li>\n<li>Sound effects and Jedi Mode<\/li>\n<li>Overlaying View with Trivia<\/li>\n<li>Firebase and The Force map<\/li>\n<li>Publish as PWA <\/li>\n<\/ul>\n<h3>Use the source<\/h3>\n<p>Ionic docs are amazing, sometimes it is easier to understand how to achieve what you need to accomplish with by viewing the <a href=\"https:\/\/github.com\/ionic-team\/ionic\">source code<\/a> instead.<\/p>\n<p>I wanted the side menu transition to have a more custom effect. So I opened the <a href=\"https:\/\/github.com\/ionic-team\/ionic\/blob\/53113366e239a48d83bb70789ed64d0637f150e5\/src\/components\/menu\/menu-types.ts\">Ionic menu component types<\/a>, and found this code controlling the default side menu slide animation:<\/p>\n<pre><code>class MenuRevealType extends MenuType {\n  constructor(menu: Menu, plt: Platform) {\n    super(plt);\n\n    const openedX = (menu.width() * (menu.isRightSide ? -1 : 1)) + &#039;px&#039;;\n    const contentOpen = new Animation(plt, menu.getContentElement());\n    contentOpen.fromTo(&#039;translateX&#039;, &#039;0px&#039;, openedX);\n    this.ani.add(contentOpen);\n  }\n}\nMenuController.registerType(&#039;reveal&#039;, MenuRevealType);\n<\/code><\/pre>\n<p>It&#8217;s nice to see what you can do with a few lines of code. With some help from <a href=\"https:\/\/github.com\/EbilPanda\">EbilPanda<\/a>, I was able to adapt that approach and create this very elegant custom effect:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/media.giphy.com\/media\/6C8XLpqQDf8ic\/giphy.gif\" alt=\"custom sidemenu slide effect\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/6C8XLpqQDf8ic\/giphy.gif\" alt=\"custom sidemenu slide effect\" \/><\/noscript><\/p>\n<h3>Fetching the App Data<\/h3>\n<p>To improve load times for the data and to enable offline support, I used <a href=\"https:\/\/github.com\/Nodonisko\/ionic-cache\">Ionic Cache<\/a>. It is a module that handles request caching and uses Ionic Storage (thus supporting IndexedDB, SQLite and WebSQL). Using this allowed me to enhance user experience and reduce the app&#8217;s load time by only bootstrapping data required by initial screens, and then later loaded on-demand.<\/p>\n<p>To populate the movie data, I wrote a <a href=\"https:\/\/github.com\/yannbf\/imdb-scrapper\/blob\/master\/index.js\">simple web scraper in node<\/a> that accesses the IMDb URL of a specific movie, then used <a href=\"https:\/\/github.com\/cheeriojs\/cheerio\">Cheerio<\/a> to read the DOM elements I needed and extract some data.<\/p>\n<p>In case you&#8217;re unfamiliar, a web scraper is backend code that requests a web page and extracts the specified data. Feel free to use <a href=\"https:\/\/github.com\/yannbf\/imdb-scrapper\/blob\/master\/index.js\">my web scraper project<\/a> for your reference. It was quite fun writing it! \ud83d\ude42<\/p>\n<h3>Firebase and The Force map<\/h3>\n<p>Developing this feature excited me most. My goal was to display a map of all the app users and the side of &#8220;The Force&#8221; they indicated while using the app.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/media.giphy.com\/media\/8SxGru3XzElqg\/giphy.gif\" alt=\"come to the dark side\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/8SxGru3XzElqg\/giphy.gif\" alt=\"come to the dark side\" \/><\/noscript><\/p>\n<p>To develop this I:<\/p>\n<ul>\n<li>Created a project on firebase and integrated into the app<\/li>\n<li>On the maps page, request and register the user information (name and location)<\/li>\n<li>Fetch data from Firebase<\/li>\n<li>Allow each user to indicate their preference of the Force, either &#8220;Light&#8221; or &#8220;Dark&#8221;<\/li>\n<\/ul>\n<p>By switching sides, the user&#8217;s avatar on the map changes accordingly, and there&#8217;s an animated lightsaber duel indicating how many users choose each side. Here&#8217;s a simulation I created of multiple people registering at the same time:<br \/>\n<img decoding=\"async\" data-src=\"https:\/\/media.giphy.com\/media\/3ohzdWmi3voKoftIZ2\/giphy.gif\" alt=\"Force map demo\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/media.giphy.com\/media\/3ohzdWmi3voKoftIZ2\/giphy.gif\" alt=\"Force map demo\" \/><\/noscript><\/p>\n<h3>Converting to a PWA (Progressive Web App)<\/h3>\n<p>You can imagine my surprise when my app won the competition and I became the first Ionic Jedi Hackster! I was so excited that I decided to continue development of my application. I thought a great starting place would be to convert it to a Progressive Web App (PWA).<\/p>\n<p>If you&#8217;re unfamiliar, a Progressive Web App is a web app that behaves just like a native app. This simplifies how users install your app because they don&#8217;t have to use an app store. They simply open a url and <em>boom<\/em>, it works!<\/p>\n<p>Thankfully, <a href=\"https:\/\/ionic.io\/blog\/announcing-pwa-support-in-ionic-2\/\">Ionic supports PWA right out of the box<\/a>! It offers a service worker and a manifest file by default. The <em>service worker<\/em> is a script that enables PWA functionalities such as: push notifications, background sync, offline support and many more. The <em>manifest<\/em> is processed by the browser and includes metadata such as: name, theme, icon, and enables the browser to add the app to the home screen of the mobile device for users to open it at a later time, just like native app shortcuts!<\/p>\n<p>The project uses <code>sw-toolbox<\/code> by the Google Chrome Team, you can <a href=\"https:\/\/googlechrome.github.io\/sw-toolbox\/\">learn more about <code>sw-toolbox<\/code> here<\/a>.<\/p>\n<p><em>How do I create a production version of my app as PWA?<\/em><\/p>\n<p>Plenty of people have asked this question on the Ionic developer community. The answer is simple:<\/p>\n<p>just <code>npm run ionic:build --prod<\/code> then deploy the generated <code>\/www<\/code> folder, and it&#8217;s done!<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/media0.giphy.com\/media\/11sBLVxNs7v6WA\/giphy.gif\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/media0.giphy.com\/media\/11sBLVxNs7v6WA\/giphy.gif\" alt=\"\" \/><\/noscript><\/p>\n<p><em>How do I deploy a PWA?<\/em><\/p>\n<p>There are a couple of quick ways you to deploy your PWA:<\/p>\n<ol>\n<li>Host the app on your private server<\/li>\n<li>Use Firebase hosting services<\/li>\n<\/ol>\n<p>Firebase offers free hosting, which makes interesting if you are just trying stuff out. Using Firebase developers can ship to production in minutes. Here is a great <a href=\"https:\/\/firebase.google.com\/docs\/hosting\/deploying\">step by step guide<\/a>.<\/p>\n<p>You can view the live PWA of my winning hackathon app <a href=\"https:\/\/starwarnic.yannbraga.com\">StarWarnic here<\/a>, you can also use <a href=\"https:\/\/view.ionic.io\/\">Ionic View<\/a> and supply ID <em>6e8bd472<\/em>, or you can build the app from <a href=\"https:\/\/github.com\/yannbf\/may-the-4th\">source<\/a>.<\/p>\n<h3>May the force be with you&#8230;always<\/h3>\n<p>I was really flattered to have won the challenge, and I&#8217;m grateful to have the opportunity to share my experience here as a guest blogger. Ionic is an amazing and versatile platform that has opened opportunities for many people. I highly recommend developers to <a href=\"https:\/\/ionicframework.com\/getting-started\/\">get started with Ionic<\/a>.<\/p>\n<p>Wrapping up, I thought I would share how Ionic has improved my life as a developer:<\/p>\n<p>I was introduced to Ionic last September at a local Ionic 2 Bootcamp I attended. The event was half a day long and covered the basics of Ionic 2(still in beta!) and Firebase. Instantly I admired the framework, and after the event I immersed myself in Ionic and the developer community.<\/p>\n<p>Investing my time becoming an Ionic developer has been one of my best decisions. Knowing Ionic has allowed me to meet many wonderful developers, been a gateway into open source development, and has given me more than a job&#8230;Ionic has fueled my career!<\/p>\n<p>Looking back, when I first started participating on <a href=\"https:\/\/ionicworldwide.herokuapp.com\/\">Ionic&#8217;s worldwide slack community<\/a> I would only ask questions, but now I&#8217;m active in the community and really enjoy helping so many people and being a contributing member of the Ionic Developer Community.<\/p>\n<p>If you are interested in knowing more about my project, or if you have questions or want to chat, feel free to hit me up on <a href=\"https:\/\/ionicworldwide.herokuapp.com\/\">Ionic Worldwide Slack<\/a> or contact me through <a href=\"https:\/\/yannbraga.com\/\">my website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guest post from Yann Braga. Yann recently won our Ionic Jedi Hackster contest, so we wanted to bring him on as a guest blogger to share his story with us&#8230; Greetings, folks! My name is Yann Braga and I&#8217;m a full stack developer based in Fortaleza, Brazil. On a computer, in a [&hellip;]<\/p>\n","protected":false},"author":51,"featured_media":1866,"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":[30,29,71,22,15],"class_list":["post-1853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-built-with-ionic","tag-cli","tag-developer-success","tag-progressive-web-apps","tag-web-developer"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Yann Braga: My Ionic Success Story - 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\/yann-braga-my-ionic-success-story\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yann Braga: My Ionic Success Story\" \/>\n<meta property=\"og:description\" content=\"This is a guest post from Yann Braga. Yann recently won our Ionic Jedi Hackster contest, so we wanted to bring him on as a guest blogger to share his story with us&#8230; Greetings, folks! My name is Yann Braga and I&#8217;m a full stack developer based in Fortaleza, Brazil. On a computer, in a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-02T21:35:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48-1024x519.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"519\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Yann Braga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yann Braga\" \/>\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\/yann-braga-my-ionic-success-story#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\"},\"author\":{\"name\":\"Yann Braga\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/0dbc08c0475505fbfa76e7334b499bf9\"},\"headline\":\"Yann Braga: My Ionic Success Story\",\"datePublished\":\"2017-06-02T21:35:22+00:00\",\"dateModified\":\"2017-06-02T21:35:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\"},\"wordCount\":1138,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png\",\"keywords\":[\"Built with Ionic\",\"CLI\",\"developer success\",\"Progressive Web Apps\",\"web developer\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\",\"url\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\",\"name\":\"Yann Braga: My Ionic Success Story - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png\",\"datePublished\":\"2017-06-02T21:35:22+00:00\",\"dateModified\":\"2017-06-02T21:35:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png\",\"width\":2112,\"height\":1070},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Yann Braga: My Ionic Success Story\"}]},{\"@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\/0dbc08c0475505fbfa76e7334b499bf9\",\"name\":\"Yann Braga\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-31-at-12.02.17-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-31-at-12.02.17-150x150.png\",\"caption\":\"Yann Braga\"},\"description\":\"Full stack developer based in Fortaleza, Brazil. Love cookies!\",\"sameAs\":[\"http:\/\/yannbraga.com\/\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/yannbf\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Yann Braga: My Ionic Success Story - 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\/yann-braga-my-ionic-success-story","og_locale":"en_US","og_type":"article","og_title":"Yann Braga: My Ionic Success Story","og_description":"This is a guest post from Yann Braga. Yann recently won our Ionic Jedi Hackster contest, so we wanted to bring him on as a guest blogger to share his story with us&#8230; Greetings, folks! My name is Yann Braga and I&#8217;m a full stack developer based in Fortaleza, Brazil. On a computer, in a [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story","og_site_name":"Ionic Blog","article_published_time":"2017-06-02T21:35:22+00:00","og_image":[{"width":1024,"height":519,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48-1024x519.png","type":"image\/png"}],"author":"Yann Braga","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Yann Braga","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story"},"author":{"name":"Yann Braga","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/0dbc08c0475505fbfa76e7334b499bf9"},"headline":"Yann Braga: My Ionic Success Story","datePublished":"2017-06-02T21:35:22+00:00","dateModified":"2017-06-02T21:35:22+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story"},"wordCount":1138,"commentCount":24,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png","keywords":["Built with Ionic","CLI","developer success","Progressive Web Apps","web developer"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story","url":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story","name":"Yann Braga: My Ionic Success Story - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png","datePublished":"2017-06-02T21:35:22+00:00","dateModified":"2017-06-02T21:35:22+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png","width":2112,"height":1070},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/yann-braga-my-ionic-success-story#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Yann Braga: My Ionic Success Story"}]},{"@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\/0dbc08c0475505fbfa76e7334b499bf9","name":"Yann Braga","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-31-at-12.02.17-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-31-at-12.02.17-150x150.png","caption":"Yann Braga"},"description":"Full stack developer based in Fortaleza, Brazil. Love cookies!","sameAs":["http:\/\/yannbraga.com\/"],"url":"https:\/\/ionic.io\/blog\/author\/yannbf"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-02-at-16.32.48.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1853","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\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1853"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1866"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}