Before that this pass through my mind I lost a half day searching for plugin to JUST works without any additional tricks to continue my journey, but I didn't, so that's why I created this plugin and I call it "A NativeScript plugin that works", just kidding I call it "nativescript-google-places-autocomplete".
In the current app that I'm working on with a Client, we just want to display autocomplete a search input, with list of place predictions so I tried some plugins and some vanilla Javascript code (not good for code maintainability) but no, I choose to create my own plugin and share it with the community.
To start off I need a kickstart project or file structures, I never start a project with plain files, it took times to implement the essential need, so I found a seed project (That I contributed to it????) on the Nativescript GitHub account: https://github.com/NativeScript/nativescript-plugin-seed
Then I created my own API key and I start implementing my own things.
So we will work on some of these files, all files are generated from the seed except this one
google-places-autocomplete.static.ts
This file holds static variable to keep the structure and the code clean.
Ok,
google-places-autocomplete.android.ts
google-places-autocomplete.common.ts
google-places-autocomplete.ios.ts
when we have a common functionality between iOS & Android, we put in: _google-places-autocomplete.common.ts, _otherwise we implement each file with the platform needs.
google-places-autocomplete.android.ts
google-places-autocomplete.common.d.ts
google-places-autocomplete.ios.d.ts
These files are auto-generated with Typescript and hold the types & definition of the TS files.
So all work will be on the google-places-autocomplete.common.ts file because we will use the Nativescript modules that support both of the platforms and here's our file.
First, let's import the module that we will use
The plugin does two things, search places from a query, and display place detail from place id.
In this two functions, we did two simple requests (using HTTP module from nativescript) to the google places API
Here's the final product and to know more about the module or to check to demo go to this link: https://github.com/labidiaymen/nativescript-google-places-autocomplete
This package is hosted on npmjs.com
https://www.npmjs.com/package/nativescript-google-places-autocomplete
**Hope it helps, **thanks