User:Saul/nativescript

Nativescript is a framework for building native ios and android apps.
Nativescript and vue tutorial

Setup

Firstly ensure that npm is installed.

npm install -g nativescript # Install the nativescript cli

Android

Install

Nativescript install docs

# Install dependencies
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386 # Install dependencies
# OR (If you encounter an error showing "Unable to locate package lib32bz2-1.0")
sudo apt-get install lib32z1 lib32ncurses5 libbz2-1.0:i386 libstdc++6:i386
sudo apt-get install g++ # Install the g++ compiler

# Install JDK8/10
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:webupd8team/java
# OR JDK10 (not currently working)
# sudo add-apt-repository ppa:linuxuprising/java
sudo apt-get update
sudo apt install oracle-java8-installer
# OR JDK10 (not currently working)
# sudo apt install oracle-java10-installer
# Set the ENV varible
export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\(.*\)\/bin\/javac/\1/p')

Download the android sdk tools from https://developer.android.com/studio/#downloads
Extract it in ~/android/sdk

export ANDROID_HOME=~/android/sdk # Set the ANDROID_HOME ENV varible
# Install dependencies
sudo $ANDROID_HOME/tools/bin/sdkmanager "tools" "platform-tools" "platforms;android-25" "build-tools;27.0.3" "extras;android;m2repository" "extras;google;m2repository"

Install Emulator

Nativescript install docs

IOS

To build for IOS you will need a machine running MacOS.
Nativescript MacOS install docs

Webpack Template

Using npm

vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>
npm i

See the README.md or package.json for all commands.
Note: if you install a new package you will need to run before running live:

npm run clean

Otherwise node_modules will be cached and not update.

Using tns

Note: Then tns vue template only supports js files - no vue files.

tns create MyApp --template nativescript-vue-template
cd MyApp
tns run android # run live
tns build android

Project Structure

nativescript-vue/vue-cli-template

dist

The dist/ directory is the directory that nativescript builds the app into.
The built app can be found in dist/platforms/app/build/outputs/apk/debug/app-debug.apk

template

The template/ directory holds the data for the android application like the AndroidManifest.

Usage

Maps

The nativescript maps plugin
The nativescript maps plugin utils

npm i nativescript-google-maps-sdk
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values template/app/App_Resources/Android # copy string templates over

Then edit template/app/App_Resources/Android/values/nativescript_google_maps_api.xml:

Remove the comment tags
Replace "PUT_API_KEY_HERE" with you api key

Insert as is (Do not edit this element!) before the closing application tag in template/app/App_Resources/Android/AndroidManifest.xml:

<meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" />

Add these 2 lines in src/main.js to register the component (and yes the first import statement is needed):

import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
import { MapView } from "nativescript-google-maps-sdk";

Vue.registerElement ("MapView", () => MapView);

Then you can use the MapView component in your app like so:

<MapView width="400" height="400" @mapReady="mapReady" :latitude="lat" :longitude="lng" />

Geolocation

nativescript-geolocation

npm i nativescript-geolocation

Then you can use like this:

import * as geolocation from "nativescript-geolocation";
import { Accuracy } from "ui/enums";

geolocation.enableLocationRequest().then(() => {
	geolocation.getCurrentLocation({ desiredAccuracy: Accuracy.high, maximumAge: 5000, timeout: 20000 }).then(location => {
		console.log(location);
	}).catch(err => {
		console.error(err);
	});
}).catch(err => {
	console.error(err);
});

Note: I had an issue about java complaining that some class couldn't be found - this was a conflict with the maps plugin.
To fix you need to edit template/app/App_Resources/Android/app.gradle to specify play services version like so:

android {
  // other dependencies

  project.ext {
    googlePlayServicesVersion = "11.2.+"
  }
}