Ionic and Wordpress Integration using Wordpress REST API
Tags: ionic, angular, wordpress
Published: 2020-03-26 00:27:47

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="683c" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="d06e" class="graf graf--p graf-after--figure">This is Part-1 of two post series. In this post, you will learn how to implement Wordpress Integration using Wordpress REST in Ionic 4 app. Part 2 of the series discusses how to build a WooCommerce REST API Mobile App in Ionic 4.</p><blockquote name="e6c7" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this blog post can be found at this github repo&#8202;—&#8202;</strong><a href="https://github.com/enappd/ionic4-wordpress-integration.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-wordpress-integration</strong></a></blockquote><h3 name="412d" class="graf graf--h3 graf-after--blockquote">What is Wordpress REST&nbsp;API?</h3><p name="61e7" class="graf graf--p graf-after--h3">The WordPress REST API provides API endpoints for WordPress data types that allow developers to interact with sites remotely by sending and receiving JSON. This enables developers to create, read and update WordPress content from client-side JavaScript or from external applications.</p><p name="0cae" class="graf graf--p graf-after--p">If you are new to WP REST API, I would suggest you go through the <a href="https://developer.wordpress.org/rest-api/#key-concepts"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Key Concepts</a>.</p><h3 name="f19a" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but put this section in every blog just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><p name="89d0" class="graf graf--p graf-after--p">In this ionic tutorial, we will walk you through the process of creating an Ionic 4 app that pulls in WordPress posts and other content using the WP REST API.</p><p name="d15a" class="graf graf--p graf-after--p">Without further ado, this is what you are going to build!</p><figure tabindex="0" contenteditable="false" name="d059" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 424px; max-height: 754px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*pk2p7Py38Ft1Bjk3GpPSvA.gif" data-width="424" data-height="754" src="https://cdn-images-1.medium.com/max/720/1*pk2p7Py38Ft1Bjk3GpPSvA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Word Press&nbsp;App</figcaption></figure><h3 name="d54d" class="graf graf--h3 graf-after--figure">Structure</h3><p name="4e4f" class="graf graf--p graf-after--h3">We’ll follow a stepped approach to create a Music player app in Ionic 4. We’ll use an IONIC native plugin for music playback. Following are the steps</p><ul class="postList"><li name="06d1" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 4 app</li><li name="93d1" class="graf graf--li graf-after--li">Step 2 —Set up your app for Wordpress post</li><li name="79e9" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Get Your WordPress Posts</li><li name="a19a" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Showing The WordPress Post Details</li></ul><p name="e399" class="graf graf--p graf-after--li">So let’s dive right in!</p><h3 name="5589" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="ee25" class="graf graf--blockquote graf-after--h3"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/?source=post_page---------------------------"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="7cf9" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.1.0 currently)</li><li name="9de3" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="edf3" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-local-notifications sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="e3ab" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5c38" class="graf graf--p graf-after--pre">The app will launch on the browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. You can create a basic layout for triggering Wordpress post.</p><figure tabindex="0" contenteditable="false" name="8ec8" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*EXrI_WVtwplRUFeDr-yLVA.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*EXrI_WVtwplRUFeDr-yLVA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="39d2" class="graf graf--p graf-after--figure">Next, we’ll add the Wordpress posts our app</p><h3 name="8be6" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Set up your app for Wordpress post</h3><p name="06ca" class="graf graf--p graf-after--h3">For getting WordPress post in the Ionic app we will use Wordpress API without any plugin.</p><p name="6163" class="graf graf--p graf-after--p">Before we go into creating our views we set up the logic to retrieve all data. In our post, we will simply make a call to get a list of posts, but you can get basically all data from the <a href="https://developer.wordpress.org/rest-api/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">WordPress API</a> like categories, tags, pages…</p><p name="72ee" class="graf graf--p graf-after--p">We will also limit our calls to only retrieve <strong class="markup--strong markup--p-strong">5 posts</strong> at a time and also use the page parameter so we can later add some cool loading to our list.</p><p name="3fab" class="graf graf--p graf-after--p">In the very first step, we need to include the module to make Http calls to the API so we will import <code class="markup--code markup--p-code">HttpClientModule</code> from <code class="markup--code markup--p-code">@angular/common/http</code> which comes by default installed with IONIC package.</p><p name="c5f2" class="graf graf--p graf-after--p">so change your <strong class="markup--strong markup--p-strong">app/app.module.ts</strong> to:</p><figure tabindex="0" contenteditable="false" name="c16d" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/b0ffa957dcaff84dc44f57865fd99823.js %}</div></div></figure><p name="e967" class="graf graf--p graf-after--figure">Now we will create pages for our app. We will have a <strong class="markup--strong markup--p-strong">list of WordPress posts</strong> and also a <strong class="markup--strong markup--p-strong">details page</strong> for one post. so we will generate this page by command <code class="markup--code markup--p-code">ionic g page&#8202;—&#8202;-</code>&nbsp;. when we generate a page from this command we will not need to add routes in our <code class="markup--code markup--p-code">app/app-routing.module.ts</code>&nbsp;.<strong class="markup--strong markup--p-strong"> </strong>This command generates it automatically.</p><p name="475b" class="graf graf--p graf-after--p">so after adding routes your <code class="markup--code markup--p-code">app/app-routing.module.ts</code> something looks like this.</p><figure tabindex="0" contenteditable="false" name="08b7" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/f59daaf35f249e161eb5c99d554cf4ea.js %}</div></div></figure><h3 name="402b" class="graf graf--h3 graf-after--figure">Step 3&#8202;—&#8202;Get Your WordPress Posts</h3><p name="03bb" class="graf graf--p graf-after--h3">For getting posts from Wordpress we will use this function</p><pre name="8d27" class="graf graf--pre graf-after--p">async loadPost(url: string, page, showLoading) {<br>const loading = await this.loadingController.create({<br>message: 'Loading Your posts'<br>});<br>if (showLoading) {<br>await loading.present();<br>}<br>const route = this.url + 'wp-json/wp/v2/posts'<br>if (!page) {<br>page = '1';<br>}<br>return new Promise((resolve, reject) =&gt; {<br>var concat;<br>if (url.indexOf('?') &gt; 0) {<br>concat = '&amp;';<br>} else {<br>concat = '?';<br>}<br>this.http.get(route + concat + 'page=' + page)<br>.subscribe(data =&gt; {<br>if (showLoading) {<br>loading.dismiss();<br>}<br>this.items = data;<br>resolve(this.items);<br>},<br>error =&gt; {<br>if (showLoading) {<br>loading.dismiss();<br>}<br>reject(error);<br>this.presentToast(error.error.message)<br>})<br>});<br>}</pre><p name="8979" class="graf graf--p graf-after--pre">Here we are using two params <code class="markup--code markup--p-code">URL</code> and another one <code class="markup--code markup--p-code">page no</code>.</p><p name="1039" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">URL</code> is basically your word press URL where you have posted all of your blogs</p><p name="069c" class="graf graf--p graf-after--p">for me it is&nbsp;:</p><pre name="60d3" class="graf graf--pre graf-after--p">https://swift-footed-config.000webhostapp.com/</pre><p name="3733" class="graf graf--p graf-after--pre">you can change it with your one.</p><p name="0749" class="graf graf--p graf-after--p">and <code class="markup--code markup--p-code">pageNo</code> we have added for cool navigation with infinite scroll.</p><p name="d9ca" class="graf graf--p graf-after--p">The reason is that we implement <strong class="markup--strong markup--p-strong">infinite scrolling</strong> inside our view which will automatically load new posts once we reach (or approach) the end of the list! That looks</p><p name="e137" class="graf graf--p graf-after--p">The reason is that we implement <strong class="markup--strong markup--p-strong">infinite scrolling</strong> inside our view which will automatically load new posts once we reach (or approach) the end of the list! That looks</p><p name="53f3" class="graf graf--p graf-after--p">The reason is that we have also implemented <strong class="markup--strong markup--p-strong">ion-refresher</strong> inside our view which will allow the user to refresh post list when he wants to refresh.</p><p name="ca5f" class="graf graf--p graf-after--p">So after adding all the code your homepage.ts something looks like this.</p><figure tabindex="0" contenteditable="false" name="f828" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/4b06769d499e7463b525bff083177f68.js %}</div></div></figure><p name="c316" class="graf graf--p graf-after--figure">Some of those fields contain HTML characters, that’s why we sometimes use the <code class="markup--code markup--p-code">innerHTML</code> of elements and directly use the value which will then be displayed correctly.</p><p name="c7ad" class="graf graf--p graf-after--p">To build our simple view, go ahead and insert this code in yout <code class="markup--code markup--p-code">homepage.html</code></p><figure tabindex="0" contenteditable="false" name="7294" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a4ee805cf2e56a3de3f9bb78437c983b.js %}</div></div></figure><p name="8c11" class="graf graf--p graf-after--figure">So after adding this all this code your post page something look like this</p><figure tabindex="0" contenteditable="false" name="0c4b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*EXrI_WVtwplRUFeDr-yLVA.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*EXrI_WVtwplRUFeDr-yLVA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Post List&nbsp;Page</figcaption></figure><h3 name="5441" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Showing The WordPress Post&nbsp;Details</h3><p name="612f" class="graf graf--p graf-after--h3">So when user clicks on post link we will redirect him to Post details with ID of the post.</p><p name="6dac" class="graf graf--p graf-after--p">We could actually also pass the whole object to the next page using the state, but I still think using the ID approach is better as we don’t keep the information in the state and we actually got a URL to the post page that will work all the time, even with a refresh!</p><p name="c92e" class="graf graf--p graf-after--p">For us, this means we need to get the ID from the route snapshot and then retrieve the information for a single post using our service!</p><p name="908c" class="graf graf--p graf-after--p">so for getting post information, we will add this code in our post details file</p><pre name="a643" class="graf graf--pre graf-after--p">getPostDetails(id) {<br>const route = this.url + 'wp-json/wp/v2/' + `posts/${id}?_embed`<br>return this.http.get(route).pipe(<br>map(post =&gt; {<br>post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;<br>console.log(post);<br>return post;<br>})<br>)}</pre><p name="ff3c" class="graf graf--p graf-after--pre">so after adding this code your post details file something look like this</p><figure tabindex="0" contenteditable="false" name="9af5" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/25cf7b607673f576bb26e2bf6a5d9751.js %}</div></div></figure><p name="d46b" class="graf graf--p graf-after--figure">Regarding the view of the details page we’ll also keep it simple and just use the image (like we did before, remember the <code class="markup--code markup--p-code">media_url</code> is a field we created in the service!) and the actual post content.</p><p name="e290" class="graf graf--p graf-after--p is-selected">Again, to display the HTML correctly we need to use <code class="markup--code markup--p-code">innerHTML</code> which will render the tags correctly.</p><p name="91f5" class="graf graf--p graf-after--p">There’s really not a lot more to the page, so finish your simple Ionic WordPress app by changing your <strong class="markup--strong markup--p-strong">pages/post/post.page.html</strong> to:</p><figure tabindex="0" contenteditable="false" name="269a" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/472bef96c0d26b71c46e2f619d0cebd3.js %}</div></div></figure><p name="0bce" class="graf graf--p graf-after--figure">so after adding this code, your post details screen something look like this.</p><figure tabindex="0" contenteditable="false" name="2603" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*n2pNxnA9V7uT5YlYn1C-zA.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*n2pNxnA9V7uT5YlYn1C-zA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Post Details&nbsp;Screen</figcaption></figure><h3 name="48fa" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="e2b9" class="graf graf--p graf-after--h3">In this post, we learned how to use Wordpress post in Ionic 4 apps. And we have also learned how to get post details from specific post id and showing it to our page with the help of <code class="markup--code markup--p-code">innerHTML</code></p><blockquote name="a2c2" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete code of this blog post can be found at this github repo —</strong><a href="https://github.com/enappd/ionic4-wordpress-integration.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">ionic-wordpress-integration</strong></a></blockquote><h3 name="1858" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="7a20" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Wordpress in Ionic 4, you can also try</p><ul class="postList"><li name="aff8" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8c75" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts</a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="7763" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="2724" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="5038" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader</a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="2a38" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="5759" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="9bcf" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="1831" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="513a" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" src="https://cdn-images-1.medium.com/max/720/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">IONIC 4 Full&nbsp;App</figcaption></figure><p name="a1c9" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>