Where do I start from? I'm new to NativeScript


#1

Hi guys,

I’m new to NativeScript.
Where do I start from?

I have developed an e-commerce platform from scratch in PHP, and now I want to create a mobile version using NativeScript.
I have created my API for the request & response alread. I will be sending and receiving data to the NativeScript in Json format.

Pls show me how to set up to start coding the NativeScript. What IDE, What Libraries, What testing devices do I need?

Pls help. Thanks!


#2

You need to read this:
https://docs.nativescript.org/tutorial/chapter-0

Bit outdated, but may help:

IDE: i prefer PHPstorm with nativescript plugin.

For IOS - you need a mac.


#3

Hello and welcome to this framework,

first of all I recommand you take a look at http://docs.nativescript.org, this has been a great help for me to start.
I’m using nativescript with typescript angular, IDE Visual Studio Code, npm for the modules and android studio with an emulator for testing.

@Konrad You can test iOS without a macintosh now, with nativescript sidekick, the build will be done in the cloud and the .ipa will be available for testing with real iphones. you need an Apple developer license though


#4

Thank you very much guys!
I will try all your suggestions and revert.


#5

In case you have difficulty with Nativescript’s UI, the following discussion has some sample code that helped me to do some basic UI stuff:


#6

Hi Guys!

It’s been great experience with NativeScript so far. Thanks for your contribution.

At this point I have two main challenges:

  1. I need step by step guide to implement SideDrawer in JavaScript

  2. I want to pick an ID of an item in a listView and send it to the next page, and still carry it to a third page. I don’t know if is possible to give the item ID to a button id and post it to the next page when that button is tapped.

Please help. Is urgent, I have a deadline to meet. Thanks in advance!


#7

Hello… Please who is here to help?


#8

For Sidedraver this will help:

  1. I’m not using this, but i see similar discussion regarding itemtap index.
    Get taped item context or index in nativescript listview

I’m not using listviews but repeater as this is enought for me, i will show you my example (i’m using ID from http request, and next i’m getting this walue on getTappedId function):


<Repeater items="{{ selectedClasses }}">
  <Repeater.itemTemplate>
    <Button data-id={{ id }} tap="getTappedId"></Button>
  </Repeater.itemTemplate>
</Repeater>

You see that i’ve binded data-id attribute. Those are ID’s from http. Next:

exports.getTappedId = function(e) {
       // Yes, this below is your index (data-id of clicked button)
        var id = e.object['data-id'];
        // I'm having some array, that will now be filtered and i will search data for particular ID
        var item = arrayWithIemsToLoadInRepeater.find(item => item.id === id);
        console.log(item);
       // console print data that has ID of tapped element

       // Now use topmost to navigate to second page. You see the context right ? Context is 'reward' and this will pass my button's data to the second page.
 
        var topmost = frameModule.topmost();
        var navigationEntry = {
            moduleName: 'points/redeem/redeem',
            clearHistory: true,
            backstackVisible: true,
            context: { reward: item },
        };
        topmost.navigate(navigationEntry);
    };

On second page use:

var applicationSettings = require("application-settings");
// var page = args.object;
// console.log(page.navigationContext);
// now you have your data passed from the previous page !
// do with this all that you want.Wanna pass to the third? use topmost() with context as shown above.

You can also store you data in localstorage for later use, you can use this on very page …
https://docs.nativescript.org/cookbook/application-settings

Or use very nice and easy plugin

It’s better im my opinion rather than appliction settings beacuse this allows to store objects, arrays, and appsettings will not allow to do this.


#9

Great! Thanks very much. I will implement it today and give feedback. I’m very grateful, family.


#10
var frameModule = require('ui/frame');
var topmost = frameModule.topmost();
var Observable = require("data/observable").Observable;

var applicationSettings = require("application-settings");
var LS =require( "nativescript-localstorage" );
var http = require("http")

exports.loaded = function(args) {

    var model = new Observable();
    var page = args.object;
    model.heading = 'Achievements';

    http.request({
        url: 'https://MYAPI/api/v1.0/loyalty/achievements',
        method: 'GET',
        headers: {
            "Authorization": applicationSettings.getString("token"),
            "Content-Type": "application/x-www-form-urlencoded"
        },
    }).then(function(response) {
        result = response.content.toJSON();
        // Result of GET response is binded using model.set
       // Just to show all items on current page
      // But i will use this object later, i will get ID of tapped element, check GET response, look for entry that has this ID and pass this to second page, which will show tapped element details - check exports.showArch and context passed.
        model.set('archievements',result.entries);
    }).catch(function(error) {
        alert ('Error, please try again.');
    });

    model.goBack = function() {
        goToPage('dashboard/dashboard/dashboard','',true);
    };

    exports.showArch = function(e) {
        var id = e.object['data-id'];
        var item = model.archievements.find(item => item.id === id);
        console.log(item);

        /*var topmost = frameModule.topmost();
        var navigationEntry = {
            moduleName: 'arch/detail/detail',
            clearHistory: true,
            backstackVisible: true,
            context: { id: id },
        };
        topmost.navigate(navigationEntry);*/
    };
    page.bindingContext = model;
};

How to get item from `ListView onItemTap($event)` on TypeScript file
#11

Your solution to my problem number 2 worked. Thank you very much!
I am now left with the SideDrawer. I still does not show after I tried the example found in the tutorial: “A Deep Dive into NativeScript UI’s SideDrawer”. Please any alternative way?


#12

When I run the following command:

tns run --device 0271310791501328

I get the following error message:

Searching for devices… Devices.NotFoundDeviceByIndexErrorMessage 271310791501327 tns

Meanwhile tns can detect my Android phone because when I run:

tns device android --available-devices

It shows:

Connected devices & emulators
Searching for devices…
┌───┬─────────────┬──────────┬───────────────────┬────────┬───────────┐
│ # │ Device Name │ Platform │ Device Identifier │ Type │ Status │
│ 1 │ H5312 │ Android │ 0271310791501328 │ Device │ Connected │
└───┴─────────────┴──────────┴───────────────────┴────────┴───────────┘

Please help me to solve this problem ASAP. Is urgent for me to test an App. Thanks in advance!