Tutorial chapter 4 issue


#1

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

Hello I am just getting started with Nativescript and trying the tutorials. At the point where the grocery-list-view-model fetch the groceries my console states the following error: “The provided acces token is invalid or has expired”. I have tried to find a solution via google, SO and git but I can’t get it to work. I added my code below, it’s the same as provided in the tutorial.

I’m unable to retrieve the groceries nor add new ones

The problem occurs on Android.
CLI: 2.5.2
TNS Core modules 2.5.0

I have added a console.log before the fetch method verifying the API Url.

function GroceryListViewModel(items) {
var viewModel = new ObservableArray(items);
viewModel.load = function() {
    console.log(config.apiUrl);
    return fetch(config.apiUrl + "Groceries", {
        headers: {
            "Authorization": "Bearer " + config.token
        }
    })
    .then(handleErrors)
    .then(function(response) {
        return response.json();
    }).then(function(data) {
        data.Result.forEach(function(grocery) {
            viewModel.push({
                name: grocery.Name,
                id: grocery.Id
            });
        });
    });
};

viewModel.empty = function() {
    while (viewModel.length) {
        viewModel.pop();
    }
};
viewModel.add = function(grocery) {
    return fetch(config.apiUrl + "Groceries", {
        method: "POST",
        body: JSON.stringify({
            Name: grocery
        }),
        headers: {
            "Authorization": "Bearer " + config.token,
            "Content-Type": "application/json"
        }
    })
    .then(handleErrors)
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        viewModel.push({ name: grocery, id: data.Result.Id });
    });
};

return viewModel;
};

I would love to understand why it is not working as in the tutorial. What can I do to fix this?


#2

Looks like the access token used in the tutorial is expired (i.e. what allows you to do a post on the server), not your fault/issue – but an issue with the tutorial documentation it appears – @tjvantoll can probably get that fixed and put a new access token in the tutorial. Thanks for reporting it…

Nathanael A.


#3

Okay thank you! I hope this will be resolved soon, can I get an update when it’s solved?
I’m really enjoying the Nativescript tutorials and as a beginning new programmer with love for JS I can’t wait to get back on it.


#4

Hey @Marco,

Awesome that you’re enjoying the NativeScript tutorial, and sorry that you ran into some issues here. The tutorial itself doesn’t provide an access token, so I suspect this has something to do with the account you’re using.

Can you try registering a new account in the app, logging in with that account, and seeing if you have the same problem?

Thanks,
TJ


#5

@tjvantoll Any account, newly registered or provided by the tutorial will cause the error.


#6

@Marco Huh, ok that’s really odd. I went through this myself and didn’t run into any problems. I also haven’t seen any reports of problems come in through the NativeScript/docs issue tracker.

I’m kind of out of ideas here. Can you try hardcoding the credentials “forumtest@test.com” and “password” in the view model directly (https://github.com/NativeScript/sample-Groceries/blob/58d4cfac2782d92b9b531f2718559590f87f2143/app/shared/view-models/user-view-model.js#L19-L20), and see if that works for you?

TJ


#7

Unfortunately that didn’t work either. I tried different credentials hardcoded in the app.

Also want to mention I followed the nativescript-angular tutorial and get stuck at the same point. The solution provided works for javascript tutorial nor angular tutorial.

Is there maybe something wrong in the Api or my settings?


#8

@tjvantoll
I think I found a clue for the problem. And I conclude the problem lies within the tutorials’ code.

After comparing the code I got from the tutorial and the one on Github I found this difference:

Changing the “Authorization” to “X-Everlive-Sort” in groceryListService still gives an error in connecting but changing the same for the add function it is now possible to add items where it first wasn’t.
However, though I can add items to the list now, they will not be saved nor linked to my registered account. Logging in with the tutorial credentials gives me an empty list with the error: “Read access on type ‘groceries’ denied for anonymous user…”


#9


#10

sorry, I got limitation on one image per post


#11

Hi @Marco,

I’m really sorry that I don’t have more to offer here. I went through the tutorial again and couldn’t recreate any problems. I also haven’t seen any other issue reports come in through the forum or our issue tracker.

The last thing I can recommend trying is running the “end” branch from the NativeScript/sample-Groceries repo: https://github.com/nativescript/sample-Groceries/tree/end. That has the final version of the tutorial in it and should work just fine. I just did a fresh clone and run in that branch and had no issues.

Sorry again for the trouble here. Hoping you’ve had some luck in the last few days.