Monthly Archives: September 2015

Upgrading to NativeScript v1.3 from earlier versions.

To update you need to upgrade a couple items, recommended that you do it in order.   Also, a word of caution once you upgrade your NativeScript CLI, you need to upgrade your platform and common modules for any of your other projects.   It is supposed to be backwards compatible; but I was not successful in getting the new version of TNS CLI to compile an older project properly.  Rather than spend any amount of time trying to get it to work, it was simpler just to upgrade the platform and common core modules...

Make sure you are NOT running Node v4.00; The current v4.00 version of Node does NOT work.   If you need to downgrade node, I recommend you grab the latest version of Node v0.12.x from https://nodejs.org/download/release/latest-v0.12.x/.   If you are already running node and it is working for you; you don't need to upgrade it.  This note is just to make sure you DON'T upgrade node to v4.00.

Next thing if you are doing anything with Android; you want to do is type "gradle --version" and see if it runs.  If it doesn't run from the command line you need to either install gradle or set your path to use it.   If you have Android Studio installed; gradle is including with Android Studio, so you don't have to install it again.  For example on my Windows machine; my gradle is located at: C:\Program Files (x86)\Android\android-studio\gradle\gradle-2.4\bin.   So I added that to my path, so now gradle can run from anywhere.  If you are using Ubuntu, the version included is really old and you will need to install a ppa from: https://launchpad.net/~cwchien/+archive/ubuntu/gradle Then you will be able to do a sudo apt-get update && sudo apt-get install gradle and get a much more recent version.   On a Macintosh, it is recommended you install brew, and then do a brew install gradle.   You can alternatively download and install it directly from https://gradle.org/.   You must be running at least v2.3 of Gradle.

Edit 2015/09/17: The new version of the build system uses gradle and the gradle configuration file REQURIES that you are running v22.0.1 of the Android Build tools. In the grunt based build system you could use v21 or v23.0.1. Since this has caught a few people; you will want to open up the Android SDK installer, and make sure to install Build Tools v22.0.1

The next thing you need to make sure is that you have your ANDROID_HOME and JAVA_HOME environmental variables set.   If you don't have them set you will get error messages about these needing to be set.  On Windows you can do echo %ANDROID_HOME%  %JAVA_HOME% to see if they are set.  On Macintosh and Linux you can do echo $ANDROID_HOME $JAVA_HOME to see them.

So, now that you have your environment all setup; we need to upgrade the NativeScript Command Line utility, first.  This is very important, before you even attempt to upgrade the platform modules you MUST be running the new version of the NativeScript CLI.

The easiest way is to do a: npm remove nativescript -g   Yes, we want to de-install the current version; trust me it is easier this way.  You can do a in-place update; but the times I tried it it threw errors; and I had to do it a couple times to get it installed.   So, it is much easier just to de-install it. Then you just type:  npm install nativescript  -g to re-install it.

If everything worked fine; you should be able to do: tns --version and you will see v1.3.0

The next piece you need to do is upgrade your platform.  Before you upgrade; you will want to make sure you backup any changes you made in the platform folder as both methods can overwrite the project files.  You can do it one of two ways; my way or the simpler way.   Telerik recommends the simpler way; you do a tns platform update android or tns platform update ios.    In most cases this works great.   However, in some of the past updates it has left you with a broken platform and then you still had to do it my way to fix it.    So rather than have the chance that you will get a broken platform, I of course will recommend my way.

My way is the nuclear option!  tns platform remove android and then tns platform add android.   I remove and then re-add back the platform.   Now, this will totally DELETE your platform/android or platform/ios folders.  So if you made any customization to your project files; I'm going to re-stress this -- you will want to back them up first.

The final piece is updating the common core tns-core-modules; in past versions of nativescript this was a bit of a pain to upgrade.  No more, it is now very simple!   The first thing you can do is just totally delete your app/tns_modules folder.  It is not used any more, totally ignored and now a waste of disk space.   Then you just type npm install tns-core-modules --save from inside your root project folder.    This will install the core modules in the node_modules folder like any other nativescript plugin.  So now in the future you can do a simple npm update tns-core-modules and have the latest version.

And finally after everything is all done; you can do a:
tns prepare android
and/or
tns prepare ios

And you should see it confirm everything is good to go...   Happy hacking on your NativeScript application.

Upgrading to NativeScript v.Next (From pre-release nightly masters)

Please note these are how to install the newest pre-release; based on my experience with the current nightly pre-release masters available at http://nativescripts.rocks.

The first thing you MUST do is upgrade your NativeScript Command Line utility, first.     The easist way is to do a: npm remove nativescript -g

Yes, we need to de-install the current version; trust me it is easier this way.

Next thing if you are doing anything with Android; you want to do is type "gradle" and see if it runs.  If it doesn't run from the command line you need to either install gradle or set your path to use it.   If you have Android Studio installed; gradle is including with Android Studio, so you don't have to install it again.  For example on my Windows machine; my gradle is located at: C:\Program Files (x86)\Android\android-studio\gradle\gradle-2.4\bin.   If you are using Ubuntu, the version included is really old and you will need to install a ppa from: https://launchpad.net/~cwchien/+archive/ubuntu/gradle Then you will be able to do a sudo apt-get update && sudo apt-get install gradle and get a much more recent version.   On a Macintosh, it is recommended you install brew, and then do a brew install gradle.   You can alternatively download and install it directly from https://gradle.org/

The next thing you need to make sure is that you have your ANDROID_HOME and JAVA_HOME environmental variables set.   If you don't have them set you will get WEIRD unrelated errors when trying to do things with the new version of the NativeScript command line tool.

Then you download the latest master nativescript-cli-master.tgz from nativescript.rocks.  Then type:  npm install nativescript-cli-master.tgz -g

If everything worked fine; you should be able to do: tns --version and you will see  the next version number plus "non-ci".

Now that you have your updated command line; you next want to download your platform(s); tns-android-master.tgz and/or tns-ios-master.tgz.   You will next need to do a
tns platform remove android ----- WARNING!!!  THIS WILL DELETE EVERYTHING IN YOUR platform/android folder.   If you have anything you customized (i.e. like the androidmanifest.xml file); you will want to copy it out first... WARNING!!!!

Then you can run tns platform add android --frameworkPath=tns-android-master.tgz assuming the tns-android-master.tgz file is in the same folder where you are running the tns command.    Please note the --frameworkPath is case sensitive; and you need to point it to the entire path wherever the tns-android-master.tgz or tns-ios-master.tgz files are located at.   I typically put them in the parent folder that contains all my nativescript project folders, so then I can do tns platform add android --frameworkPath=../tns-android-master.tgz from any of the projects.

The final piece is updating the common core (tns-core-modules-master.tgz).  Now in some cases you can skip installing the new CLI & Runtimes and just use the core.  I haven't tried to see if the new common core library is compatible with the older runtimes; but I in a lot of cases initially they are compatible, but close to the middle of the development they typically are now relying on a new feature exposed in the the runtimes.   So it is always safer to keep the updated together.

In version 1.3 the tns_module folder in the app folder has been depreciated and is no longer used.   So you can just delete the app/tns_modules folder.   The new location is in the node_modules folder; so you can now do a npm install tns-core-modules-master.tgz

And finally after everything is all done; you do a:
tns prepare android
and/or
tns prepare ios

And you are now running on the latest masters!

NativeScript Nightly Masters

For those who would like to live on the bleeding edge; I have started the process of having one of my servers build each of the different NativeScript repo's nightly from the master branch. You can now download any of these from NativeScript.rocks.

Currently done are:

  • NativeScript Common/Core Library
  • NativeScript Command Line Interface
  • NativeScript TypeScript Declarations
  • NativeScrtip Android Runtime

The Android runtime does automatically have my LiveSync patches; so you will be able to use any of the masters with my LiveSync plugin.

I am in the process of getting the iOS runtime building (I believe I have pretty much everything I need to make it to work). However, I still need to purchase a Apple Developer Key for the server, to hopefully complete it. Since I am a contract developer; this last part will have to wait until I have some extra funds to fund this part of the project (which hopefully will be in the next couple of weeks)...

Update (2015-14-09): I may have a way to build the iOS without a key thanks to Yavor Georgiev; I will be testing this soon...

Fonter - A Simple NativeScript Font Application for iOS and Android

[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here. ]]

Since the subject of Fonts has been causing issues for multiple people in the NativeScript community I figured I would write up a post on how to do it.

Attached to this post is the completed project.    First thing you need to do is a
tns create project fonter -- then cd fonter and tns platform add android or tns platform add ios.   Now your project is ready to go.  I deleted the app/main-page.js and the app/main-view-model.js in this sample app, since they are not needed.

Next thing we need are some fonts.   So I go to https://Google.com/fonts and look at several fonts and pick a couple fonts and download them.  (Please note you actually have to download the fonts from https://github.com/google/fonts)   To keep things simple, all three fonts are under the SIL Open Font License: http://scripts.sil.org/OFL

font-folder

Second thing we need to do navigate to your app folder, and create a new "fonts" folder like so:

This folder MUST be named the exactly "fonts", no upper case letters.  It must be all lower case letters, exactly "fonts".

 

font-list

The next thing we will do is copy the fonts you downloaded into your fonts folder.   In my case I downloaded Indie Flower, Josefin Sans, and Lobster.  So my folder looks like this:
So we have three fonts that we want to add to the CSS.  In my case I want these fonts globally in the application so I will open up the app.css file; and add the three following changes:


.Lobster {
font-family: Lobster-Regular;
}

.IndieFlower {
font-family: IndieFlower;
}

.JosefinSans {
font-family: JosefinSans-Regular;
}

You might notice; the font-family name is the EXACT SAME SPELLING and EXACT SAME CASE of each of the file names.  The only thing that is removed is the .ttf extension.   This is REQUIRED for Android.  Android will automatically load the file (with the .ttf) referenced in the font-family from the fonts folder.

On iOS we have to do something slightly different; we have to register them before use.  If you open up the app.js file, you need to add the following code to it, as you see just BEFORE the application.start().


if (application.ios) {
var fontModule = require("ui/styling/font");
fontModule.ios.registerFont("IndieFlower.ttf");
fontModule.ios.registerFont("JosefinSans-Regular.ttf");
fontModule.ios.registerFont("Lobster-Regular.ttf");
}
application.start();

Again, you will notice the file name is spelled and cased exactly the same as the file name on in your fonts folder.   This is important!    However you name the file; both the iOS registration and the android css declarations MUST be exactly the same.

At this moment, the fonts are registered and usable on both iOS and Android.   So lets show them.   Open up your main-page.xml and here is the code I used:



<label></label>
<label></label>
<label></label>

fonts-androidSo now we want to try the code.  tns run ios --emulator or tns run android --emulator.  On Android everything should work perfectly and you should see something like this.

 

 

 

Unfortunately on iOS it isn't as simple, when you run this project you will see that Lobster and Indie Flower work properly, but Josefin Sans is defaulting to the default font...

font-titlebar-osxHere is the "small gotcha" on iOS.   The font is registered under its actual font name, not under the file name.   So we have one more step you need to do; and you can do it in either OSX or Windows.  Go to your fonts folder and double click on the JosefinSans-Regular.ttf and you should see a window like either of these (depending on your platform).  Notice the part I highlighted in Red.  That is the actual font name.   So, the last piece to this puzzle is you need re-open the app.css file and change the .JosefinSans class declaration to:font-titlebar-win

.JosefinSans {
font-family: JosefinSans-Regular,Josefin Sans;
}

Do you see what I added.  I appended the actual font name to the font-family.  The ORDER is important.   On Android because it does auto-registration of the fonts, it will load and register the FIRST font, and then it is happy.   On iOS it doesn't see the first font so it just ignores it and then sees the SECOND font and then it is happy.

fonts-iosSo now when you do a tns run ios --emulator you should see this.

 

 

 

 

You can download the complete project (including fonts) here: fonter.zip

The fonts/fonts.json file is just the font information for the fonts from the google code project; I wanted to make sure the copyrights information was in the same folder as the fonts in case someone finds the sample elsewhere.

[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here. ]]

Adding External Resource Security

lock-143616_1280In a lot of larger web sites it is pretty common that you use several third party resources like JavaScript.   However, this is a potential malicious door into your customers computer via your website.   What happens if the third party resource is changed by someone who does not have your best interests at heart.  Your page will still happily load the malware right onto your customers browsers.    So what can you do about this?

Well I'm glad you asked.   In the just released Chrome 45 (and soon in an upcoming Firefox release), they have added a awesome new feature to protect your customers (and your reputation).   When you link to any resources in your web page; you can now use the integrity attribute to tell the browser that this file must match this hash to load and use this file.

So <script ... integrity="sha256-some_sha256_hash"> or <link... integrity="sha384-some_sha384_hash">

The browser integrity attribute must support the sha 256, 384 and 512 hashes according to the w3 spec. For browsers that don't support this yet; then this won't do anything and the resources will load fine just like normal.  But in browsers that do support this; when the browser downloads the resource it will hash it and verify the hash matches before allowing it to be used.

On Linux you can generate the hash by doing:
cat the_file_resource | openssl dgst -sha256 -binary | openssl enc -base64 -A

On Windows if you have openssl installed you can do:
type the_file_resource | openssl dgst -sha256 -binary | openssl enc -base64 -A

Or if you don't have openssl installed; you can also easily cheat by using Chrome.   Just add the integrity with a bogus value; then reload the page.   Chrome in the developer log will show you the computed hash for the file when it blocks it.

For the full W3 Spec: https://w3c.github.io/webappsec/specs/subresourceintegrity/