Difference between revisions of "User:Saul/nativescript"

From Organic Design wiki
(→‎Maps)
(→‎Geolocation)
 
(6 intermediate revisions by the same user not shown)
Line 50: Line 50:
 
vue init nativescript-vue/vue-cli-template <project-name>
 
vue init nativescript-vue/vue-cli-template <project-name>
 
cd <project-name>
 
cd <project-name>
−
npm install
+
npm i
 
</source>
 
</source>
 +
See the '''README.md''' or '''package.json''' for all commands.<br>
 +
'''Note:''' if you install a new package you will need to run before running live:
 +
<source lang="bash">
 +
npm run clean
 +
</source>
 +
Otherwise node_modules will be cached and not update.
  
 
=== Using tns ===
 
=== Using tns ===
Line 89: Line 95:
 
<meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" />
 
<meta-data android:name="com.google.android.geo.API_KEY" android:value="@string/nativescript_google_maps_api_key" />
 
</source>
 
</source>
−
Add these 2 lines in '''src/main.js''' to register the component (and yes the import statement is needed):
+
Add these 2 lines in '''src/main.js''' to register the component (and yes the first import statement is needed):
 
<source lang="javascript">
 
<source lang="javascript">
 
import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
 
import { MapViewBase } from 'nativescript-google-maps-sdk/map-view-common';
Line 98: Line 104:
 
Then you can use the MapView component in your app like so:
 
Then you can use the MapView component in your app like so:
 
<source lang="html">
 
<source lang="html">
−
<MapView width="400" height="400" @mapReady="mapReady($event)" :latitude="lat" :longitude="lng" />
+
<MapView width="400" height="400" @mapReady="mapReady" :latitude="lat" :longitude="lng" />
 
</source>
 
</source>
  
 
== Geolocation ==
 
== Geolocation ==
 
[https://github.com/NativeScript/nativescript-geolocation nativescript-geolocation]
 
[https://github.com/NativeScript/nativescript-geolocation nativescript-geolocation]
 +
<source lang="bash">
 +
npm i nativescript-geolocation
 +
</source>
 +
Then you can use like this:
 +
<source lang="javascript">
 +
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);
 +
});
 +
</source>
 +
'''Note:''' I had an issue about java complaining that some class couldn't be found - this was a conflict with the maps plugin.<br>
 +
To fix you need to edit '''template/app/App_Resources/Android/app.gradle''' to specify play services version like so:
 +
<source lang="gradle">
 +
android {
 +
  // other dependencies
 +
 +
  project.ext {
 +
    googlePlayServicesVersion = "11.2.+"
 +
  }
 +
}
 +
</source>

Latest revision as of 02:32, 11 July 2018

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.+"
  }
}
Retrieved from "https://organicdesign.nz/wiki/index.php?title=User:Saul/nativescript&oldid=124537"