100 Days of NativeScript Post Series

Today I decided to do series of post for the next 100 days focusing on NativeScript.

These posts would be ranging from tips, experiences from plugins or sample applications developed using NativeScript.

Hope you find the series useful!! Feel free to comment if you would like me to cover any areas related to NativeScript. I will try to address the same in my series.

Day -1 

NativeScript Play Ground is my favorite tool to explore and play with NativeScript. We can use play ground with out any installation to do quick development and explore the features of NativeScript.

PlayGround

By clicking the QR code we can pair NativeScript PlayGround with our device.  For this we need to install NativeScript Playground app and Preview app. They can be downloaded from Play Store for Android and App Store for Apple.

QRCode

Once the device is paired the changes will be pushed to the device and Preview app displays the changes. Cool right. So far everything is good.

At this point we can download the app from PlayGround using the Download option. This will download the contents as a zip file with name as “NSPlayGround”.

We can extract the contents from archive and open the app using Visual Studio Code.code

Visual Studio Code opens and loads the app. Notice the home-page.js file. It refers the home-view-model.

VSCode

Now let us go back to play ground and add a nativescript plugin to our app.  Let us add nativescript-camera npm package.

cameranpm

Once the package is added a folder nativescript-camera will be created. We can refer this plugin in home-page.js file. While on Play Ground we can refer the camera plugin as shown in below pictures. Both options will work and no errors will be displayed when the changes are pushed to device.

This slideshow requires JavaScript.

Now go ahead and download the playground app from website. This will create a new zip file with same as previous one. Extract the contents and open the app using Visual Studio following previous steps. In the below picture nativescript-camera plugin is referred with “../”

camera5

Now we shall build the project and deploy our app in local android emulator using tns build and tns run commands.

camera7

The app gets built successfully. Now let us execute tns run android command. This will deploy the app to emulator. I have a local android emulator which is using Android API 19 Version Image.

camera8

The app gets deployed and app loads irrespective of

var cameraModule = require("../nativescript-camera");
var cameraModule = require("nativescript-camera");
camera11
Now let us go and try to add plugin nativescript-geolocation
tns plugin add nativescript-geolocation
This will give an error message as “The plugin is already installed”.
camera12
When we observe the package.json it already has a reference to “nativescript-geolocation”
NativeScript CLI as part of the build process, downloads the required nativescript packages by referring the package.json and adds them to node_modules folder.
Now let us refer nativescript-geolocation plugin in home-page.js and build the app. The app gets built successfully. When we run the app in emulator the app fails to load.
camera14
What went wrong ?
This is because Nativescript performs JIT compilation before loading the page. When we use the below code
var locationModule = require("../nativescript-geolocation");
Nativescript will try to check if there is “nativescript-geolocation” folder inside app folder as part of compilation before loading the page. It fails to find the plugin in app folder.
Since the plugin was downloaded as part of the build process it will be present inside node modules folder. We can load plugins from node module folder using the below code.
var locationModule = require("nativescript-geolocation");
When we add plugins in PlayGround it will create a specific folder with in app folder. In case of nativescript-camera there is folder created with in app folder and node modules folder during build.
When we add plugins using the Nativescript CLI example, refer below picture the plugin is installed directly to the node modules folder. There will not be a folder created inside app folder.
camera19

All packages from node_modules folder can be referred by providing the name of the plugin.

This is the difference between how plugins are added in PlayGround and using Nativescript CLI in local development.
Thanks for reading. Hope you found this post helpful.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s