How to use Geolocation, Geocoding and Reverse Geocoding in Ionic 4
Tags: ionic, geolocation, geocoding, geofencing
Published: 2019-10-04 15:02:56

<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="aef9" 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="d5da" class="graf graf--p graf-after--figure">In this post, you will learn how to implement Geolocation in Ionic 4 apps using Ionic Native Plugins. We will also learn how to Convert Geocode in Location address (Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple Ionic 4 app and test.</p><blockquote name="0fa7" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/Geocoding.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">GeoCoding In IONIC 4 app</em></a></blockquote><h3 name="8578" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3 is-selected">You probably already know about Ionic, but I’m putting it here 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.</p><h3 name="1ad7" class="graf graf--h3 graf-after--p">What is Geolocation?</h3><p name="8825" class="graf graf--p graf-after--h3">The most famous and familiar location feature&#8202;—&#8202;Geolocation is the ability to track a device’s whereabouts using GPS, cell phone towers, WiFi access points or a combination of these. Since devices are used by individuals, geolocation uses positioning systems to track an individual’s whereabouts down to latitude and longitude coordinates, or more practically, a physical address. Both mobile and desktop devices can use geolocation.<br>Geolocation can be used to determine time zone and exact positioning coordinates, such as for tracking wildlife or cargo shipments.</p><p name="b122" class="graf graf--p graf-after--p">Some famous apps using Geolocation are</p><ul class="postList"><li name="43f4" class="graf graf--li graf-after--p">Uber / Lyft&#8202;—&#8202;Cab booking</li><li name="e8bd" class="graf graf--li graf-after--li">Google Maps (of course)&#8202;—&#8202;Map services</li><li name="90ff" class="graf graf--li graf-after--li">Swiggy / Zomato&#8202;—&#8202;Food delivery</li><li name="1801" class="graf graf--li graf-after--li">Fitbit&#8202;—&#8202;Fitness app</li><li name="fc18" class="graf graf--li graf-after--li">Instagram / Facebook&#8202;—&#8202;For tagging photos</li></ul><h3 name="116c" class="graf graf--h3 graf-after--li">What is <strong class="markup--strong markup--h3-strong">Geocoding and Reverse geocoding</strong>?</h3><p name="d0ef" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Geocoding</strong> is the process of transforming a street address or other description of a location into a (latitude, longitude) coordinate.&nbsp;<br><strong class="markup--strong markup--p-strong">Reverse geocoding</strong> is the process of transforming a (latitude, longitude) coordinate into a (partial) address. The amount of detail in a reverse geocoded location description may vary, for example, one might contain the full street address of the closest building, while another might contain only a city name and postal code.</p><h3 name="6d27" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the anonymous login feature of Firebase. This is my break-down of the blog</p><p name="87e0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="6172" class="graf graf--li graf-after--p">Create a simple Ionic 4 app</li><li name="b6ab" class="graf graf--li graf-after--li">Install Plugins for Geocoding and Geolocation and get User Location</li><li name="7e09" class="graf graf--li graf-after--li">Get User Current Location (Geocoding)</li><li name="e24a" class="graf graf--li graf-after--li">Convert User Geolocation into an address (Reverse Geocoding)</li><li name="3666" class="graf graf--li graf-after--li">Convert User Entered Address into Geocode (Geocoding)</li></ol><p name="7e71" class="graf graf--p graf-after--li">We have three major objectives</p><ol class="postList"><li name="3785" class="graf graf--li graf-after--p">Get User Current Location which we will get in latitude and longitude (Geolocation)</li><li name="6f72" class="graf graf--li graf-after--li">Convert that latitude and longitude in Street Address (Reverse Geocoding)</li><li name="4686" class="graf graf--li graf-after--li">And again convert Street address entered by the user into latitude and longitude (Geocoding)</li></ol><p name="5a63" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Let’s dive right in!</strong></p><figure tabindex="0" contenteditable="false" name="2ab6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 322px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67.10000000000001%;"></div><img class="graf-image" data-image-id="1*RvWiQig34Ff-E6vQXHJwzg.gif" data-width="480" data-height="322" src="https://cdn-images-1.medium.com/max/720/1*RvWiQig34Ff-E6vQXHJwzg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Woah! where did he dive in&nbsp;😛</figcaption></figure><h3 name="5996" class="graf graf--h3 graf-after--figure">Step1&#8202;—&#8202;Create a simple Ionic 4&nbsp;app</h3><blockquote name="0a81" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.0.0 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm</li><li name="508a" 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="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start blank</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><h3 name="3872" class="graf graf--h3 graf-after--pre">Step2&#8202;—&#8202;Install Plugins for Geocoding and Geolocation and get User&nbsp;Location</h3><h4 name="8eb1" class="graf graf--h4 graf-after--h3">Geolocation</h4><p name="b082" class="graf graf--p graf-after--h4">This plugin provides information about the device’s location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.</p><p name="97fd" class="graf graf--p graf-after--p">This API is based on the W3C Geolocation API Specification, and only executes on devices that don’t already provide an implementation.</p><p name="0859" class="graf graf--p graf-after--p">For iOS you have to add this configuration to your configuration.xml file</p><pre name="87ab" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription"&gt;<br>   &lt;string&gt;We use your location for full functionality of certain app features.&lt;/string&gt;<br>&lt;/edit-config&gt;</code></pre><h4 name="1e0c" class="graf graf--h4 graf-after--pre">Installation</h4><pre name="a47d" class="graf graf--pre graf-after--h4">ionic cordova plugin add cordova-plugin-geolocation<br>npm install @ionic-native/geolocation</pre><h4 name="a3a9" class="graf graf--h4 graf-after--pre">Geocoding</h4><p name="4abd" class="graf graf--p graf-after--h4">This plugin Used for Converting street address in Geocode and vice versa</p><h4 name="f366" class="graf graf--h4 graf-after--p">Installation</h4><pre name="5232" class="graf graf--pre graf-after--h4">ionic cordova plugin add cordova-plugin-nativegeocoder<br>npm install @ionic-native/native-geocoder</pre><h3 name="c76f" class="graf graf--h3 graf-after--pre">Step&#8202;—&#8202;3 Get User Current Location (Geocoding)</h3><p name="3b1b" class="graf graf--p graf-after--h3">Using this plugin The first step you will need to do is Add this plugin to your app’s module</p><p name="3529" class="graf graf--p graf-after--p">Import this plugin like this</p><pre name="6b2a" class="graf graf--pre graf-after--p">import { Geolocation } from "@ionic-native/geolocation/ngx";</pre><p name="79c4" class="graf graf--p graf-after--pre">and add this to Providers of your app Like this</p><pre name="1ce6" class="graf graf--pre graf-after--p">@NgModule({<br>declarations: [AppComponent],<br>entryComponents: [],<br>imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],<br>providers: [<br>StatusBar,<br>Geolocation,<br>SplashScreen,<br>{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }<br>],<br>bootstrap: [AppComponent]<br>})</pre><p name="bb6b" class="graf graf--p graf-after--pre">So after Adding Your app.module.ts look like this</p><figure tabindex="0" contenteditable="false" name="f38c" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e020f33b97b78d2e2ae43f380a155ef5.js %}</div></div></figure><p name="c53b" class="graf graf--p graf-after--figure">Now time to import this plugin in your home.ts in which we are going to take user current location</p><p name="56ba" class="graf graf--p graf-after--p">So for using this plugin in our home.ts first, we will import the plugin like this</p><pre name="255a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Geolocation } from '@ionic-native/geolocation/ngx';</code></pre><p name="3b1d" class="graf graf--p graf-after--pre">and eject it in our Constructor (Dependency injection) like this</p><pre name="34a8" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">constructor(private geolocation: Geolocation) {}</code></pre><p name="3827" class="graf graf--p graf-after--pre">And use this code for getting user location</p><pre name="36d7" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0">this.geolocation.<strong class="markup--strong markup--pre-strong">getCurrentPosition</strong>().then((resp) =&gt; {<br> // resp.coords.latitude<br> // resp.coords.longitude<br>}).catch((error) =&gt; {<br>  console.log('Error getting location', error);<br>});</code></pre><p name="0435" class="graf graf--p graf-after--pre">If you want a continuous tracking of user location, use can you this</p><pre name="1eb8" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0">let watch = this.geolocation.<strong class="markup--strong markup--pre-strong">watchPosition</strong>();<br>watch.subscribe((data) =&gt; {<br> // data can be a set of coordinates, or an error (if an error occurred).<br> // data.coords.latitude<br> // data.coords.longitude<br>});</code></pre><p name="4d2a" class="graf graf--p graf-after--pre">So this function will give you user Current Location latitude and longitude</p><p name="8bff" class="graf graf--p graf-after--p">After adding this code your home.ts will something look like this</p><figure tabindex="0" contenteditable="false" name="1563" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/84a2893d438f8a438e30a87bfdef2d60.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="cce1" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*fwJY1LdaNP7sv3K080MYYw.jpeg" data-width="1080" data-height="2160" src="https://cdn-images-1.medium.com/max/720/1*fwJY1LdaNP7sv3K080MYYw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="beb2" class="graf graf--h3 graf-after--figure">Step&#8202;—&#8202;4: Convert User Geolocation into an address (Reverse Geocoding)</h3><p name="8dac" class="graf graf--p graf-after--h3">In this step we will use Native Geocoder Plugin</p><p name="6314" class="graf graf--p graf-after--p">Using this plugin The first step you will need to do is Add this plugin to your app’s module</p><p name="0eed" class="graf graf--p graf-after--p">Import this plugin like this</p><pre name="5fed" class="graf graf--pre graf-after--p">import { NativeGeocoder, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';</pre><p name="e9d4" class="graf graf--p graf-after--pre">and add this to Providers of your app Like this</p><pre name="d140" class="graf graf--pre graf-after--p">@NgModule({<br>declarations: [AppComponent],<br>entryComponents: [],<br>imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],<br>providers: [<br>StatusBar,<br>Geolocation,<br>NativeGeocoder,<br>SplashScreen,<br>{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }<br>],<br>bootstrap: [AppComponent]<br>})</pre><p name="a74a" class="graf graf--p graf-after--pre">So after Adding Your app.module.ts look like this</p><figure tabindex="0" contenteditable="false" name="e3a2" 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/3c9f5a00ef84b17311cf41af5f782e8a.js %}</div></div></figure><p name="9d0b" class="graf graf--p graf-after--figure">Now add this plugin into your home.ts and use like this</p><p name="d5f5" class="graf graf--p graf-after--p">So for using this plugin in our home.ts first, we will import the plugin like this</p><pre name="7d09" class="graf graf--pre graf-after--p">import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';</pre><p name="64c7" class="graf graf--p graf-after--pre">and eject it in our Constructor (Dependency injection) like this</p><pre name="972f" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">constructor(</code>private nativeGeocoder: NativeGeocoder<code class="markup--code markup--pre-code">) {}</code></pre><p name="c981" class="graf graf--p graf-after--pre">And use this code to Convert Your lat-long into the street address</p><pre name="40bc" class="graf graf--pre graf-after--p">reverseGeocode(lat, lng) {<br>if (this.platform.is('cordova')) {<br>let options: NativeGeocoderOptions = {<br>useLocale: true,<br>maxResults: 5<br>};<br>this.nativeGeocoder.reverseGeocode(lat, lng, options)<br>.then((result: NativeGeocoderResult[]) =&gt; this.userLocationFromLatLng = result[0])<br>.catch((error: any) =&gt; console.log(error));<br>} else {<br>this.getGeoLocation(lat, lng, 'reverseGeocode');<br>}<br>}<br>async getGeoLocation(lat: number, lng: number, type?) {<br>if (navigator.geolocation) {<br>let geocoder = await new google.maps.Geocoder();<br>let latlng = await new google.maps.LatLng(lat, lng);<br>let request = { latLng: latlng };<br>await geocoder.geocode(request, (results, status) =&gt; {<br>if (status == google.maps.GeocoderStatus.OK) {<br>let result = results[0];<br>this.zone.run(() =&gt; {<br>if (result != null) {<br>this.userCity = result.formatted_address;<br>if (type === 'reverseGeocode') {<br>this.latLngResult = result.formatted_address;<br>}<br>}<br>})<br>}<br>});<br>}<br>}</pre><p name="2d23" class="graf graf--p graf-after--pre">In this function, we will cover two cases. Actually, Cordova plugins used for Cordova devices only So in case of PWA it will give an error to us. In the case of PWA, we will use Google Geocode Feature</p><p name="9420" class="graf graf--p graf-after--p">So after adding this code in OUR home.ts our home.ts will something look like this</p><figure tabindex="0" contenteditable="false" name="18e0" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c660a020ba4958d1c908bf2a174565d6.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="35c7" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*iaRaJPp5d578CpCHLw-h2A.jpeg" data-width="1080" data-height="2160" src="https://cdn-images-1.medium.com/max/720/1*iaRaJPp5d578CpCHLw-h2A.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="e2a3" class="graf graf--h3 graf-after--figure">Step&#8202;—&#8202;5: Convert User Entered Address into Geocode (Geocoding)</h3><p name="302c" class="graf graf--p graf-after--h3">This step is the opposite of the previous step. And this step we use the same plugin we use in the previous step.</p><p name="c503" class="graf graf--p graf-after--p">Code for Reverse Geocoding</p><pre name="198b" class="graf graf--pre graf-after--p">if (this.platform.is('cordova')) {<br>let options: NativeGeocoderOptions = {<br>useLocale: true,<br>maxResults: 5<br>};<br>this.nativeGeocoder.forwardGeocode(address, options)<br>.then((result: NativeGeocoderResult[]) =&gt; {<br>this.zone.run(() =&gt; {<br>this.lat = result[0].latitude;<br>this.lng = result[0].longitude;<br>})<br>})<br>.catch((error: any) =&gt; console.log(error));<br>} else {<br>let geocoder = new google.maps.Geocoder();<br>geocoder.geocode({ 'address': address }, (results, status) =&gt; {<br>if (status == google.maps.GeocoderStatus.OK) {<br>this.zone.run(() =&gt; {<br>this.lat = results[0].geometry.location.lat();<br>this.lng = results[0].geometry.location.lng();<br>})<br>} else {<br>alert('Error - ' + results + ' &amp; Status - ' + status)<br>}<br>});<br>}</pre><p name="9456" class="graf graf--p graf-after--pre">After adding This code you home.ts something look like this</p><figure tabindex="0" contenteditable="false" name="b3a6" 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/c660a020ba4958d1c908bf2a174565d6.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="b18c" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*dULevCFgJFqN_GA1IQoQSg.jpeg" data-width="1080" data-height="2160" src="https://cdn-images-1.medium.com/max/720/1*dULevCFgJFqN_GA1IQoQSg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="c341" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3">In this blog, we learned how to implement Geolocation Ionic 4 apps using Ionic Native Plugins. We also learnt how to Convert Geocode in Location address(Reverse Geocoding) and Location Address into Geocode(Geocoding) in a simple Ionic 4 app and test.</p><blockquote name="d788" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/Geocoding.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">GeoCoding In IONIC 4 app</em></a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learnt the implementation of Firebase anonymous login in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><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="nofollow noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><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 login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><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 login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" 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 nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6518" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>