NativeScript – building mobile apps with NativeScript

NativeScript with JavaScript:

  1. NativeScript is a cross-platform JavaScript framework for building native mobile apps for iOS and Android.
  2. NativeScript is free and open source
  3. NS renders UIs with native platform rendering engine, no web views.
  4. Prerequisites:
    1. JavaScript
    2. CSS
    3. Terminal
    4. IDE
  5. Installation: NativeScript CLI install needed on the machine – http://docs.nativescript.org/start/quick-setup
    1. Windows installer – http://docs.nativescript.org/start/ns-setup-installer
    2. If your machine already has Android SDK installed then you’ll need to manually install NativeScript following the steps on the quick-setup page
    3. Windows intaller needs – Java Development Kit, Nodes.js, Android SDK pre-installed
  6. Complete the installation by following all the instructions above

Starting NativeScript:

  1. tns command from CLI
  2. tns create HelloWorld –template nativescript-template-tutorial to create Helloworld app
  3. Go to the app folder – cd HelloWorld
  4. Running the app:
    1. tns run android:
      1. You must have at least one AVD (Android Virtual Device) configured on your development machine for this command to run your app up on an Android emulator. If you don’t have one installed currently go ahead and set one up now.
      2. creating new virtual android emulator:
        1. Open android sdk manager from start menu – You have installed as part of the pre-requiresites for NativeScript
        2. Check all the system images are installed for future use or else click the install packages button at bottom right corner.
        3. Create Andrios virtual devices:
          1. http://docs.nativescript.org/tooling/android-virtual-devices
          2. Install HAXM for accelaration – https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager
          3. Complete the creation of emulators by clicking start button – check to see if there are any errors.
          4. If there are no errors the emulator will open up
      3. Execute the run command again to run your app on android emulator
      4. Can run multiple emulators at the same time:
        1. tns device command lists all devices
        2. choosing a device by – tns run android –device 2
        3. to run all connected devices is by – tns run android
    2. tns run ios
    3. Tns run won’t stop until ctrl+c as the app refreshes as you change the code
    4. Changing colour schemes – http://docs.nativescript.org/ui/theme#color-schemes
    5. When you add a new dependency you need rebuild the app from scratch
    6. Ref – http://docs.nativescript.org/tutorial/chapter-1

Builidng a real-world app:

  1. http://docs.nativescript.org/tutorial/chapter-2
  2. http://docs.nativescript.org/tutorial/chapter-4
  3. login.js: code-behind:
    1. frameModule for navigation
    2. UserViewModel is for the login
    3. exports.loaded page binding is important for any parameter passing to work
    4. login works from now
    5. As a best practice, testing for a platform with an if check is the way to go when you have a small number of platform-specific changes to make. If, on the contrary, you have big, entirely different chunks of code for iOS and Android, you might want to go with platform-specific code-behind files—e.g. login.ios.js and login.android.js.

Reference:

http://docs.nativescript.org/tutorial/chapter-0