Grocery List Tutorial

8 posts, 0 answers
  1. Gareth
    Gareth avatar
    1 posts
    Member since:
    Mar 2011

    Posted 16 Aug 2015 Link to this post

    Hi guys 

     

    I am on step 2 of the grocery list tutorial. 

    I added the following code(bold text) and ran the app in the ios emulator. The emulator, runs but the grocery list does not load. All I see is the loader icon.

    Also how do I see runtime errors?

    function initialize() {
            var app = new kendo.mobile.Application(document.body, {
                skin: "flat",
                transition: "slide"
            });
            
            $("#grocery-list").kendoMobileListView({
                dataSource: groceryDataSource,
                template: "#: Name #"
            });

            navigator.splashscreen.hide();
        }

  2. Toma
    Admin
    Toma avatar
    2 posts

    Posted 19 Aug 2015 Link to this post

    Hello Gareth,

    The code fragment is correct and it should work properly however I believe that the API key might not be setup correctly.  Could you check line 2 in app.js and look for var apiKey = ... If the apiKey has a value of 'YOUR API KEY' then you should change it and set your Backend Services API key. To do so please follow these steps:
    • Find and click the “Data” link on the right-hand side of the screen.
    • In the Data Navigator (the panel on the right-hand side of the screen), expand “Backend Services”, and then right click on “Grocery List Backend” (or whatever you named your Backend Services project). Select “Properties” from the context menu.
    • In the Properties menu (bottom right-hand side of the screen), find the project's API key and copy it. 
    • Click the “Solution” link on the right-hand side of the screen to switch back to this project's files  h.
    • Open app.js in the scripts folder. 
    • Replace the 'YOUR API KEY' string with your project's API key that you copied to the clipboard.
    You can see the steps I am referring to in the attachment.

    Also could you check if you have inserted groceries to your database - this is another scenario when the loading indicator could appear without displaying items. If this is indeed the case, then you should check the BackendServices project settings. Go to your project workspace and choose the project (in the tutorial it is named 'Grocery List Backend'). Then in the left-side pane chose the Data option and in the drop down select Types - that's where you can check if the database is actually populated. In case there are no entries perform these steps to add new entries:
    • Click the blue “Create a Content Type” button.
    • Type “Groceries” in the “Type name” input box.
    • Under “Add a field”, type “Name”, leave the dropdown set to “Text”, and then click the blue “Add” button.
    • Click the green “Save” button.
    • Click the blue “Add an item” button.
    • In the right pane, enter a grocery into the text box (e.g. Bananas, Apples, and so forth), and then press the green “Save” button.
    • Repeat steps the last two steps so that you have at least 5 groceries in the list.
    If both suggestions don't resolve the issue on your side, please send us the tutorial project you have on your side so we can test its behavior locally. Also, you can compare it with the completed version of the tutorial available here.

    Regards,
    Toma
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Maxime
    Maxime avatar
    1 posts
    Member since:
    Oct 2015

    Posted 18 Dec 2015 in reply to Toma Link to this post

    I have the same problem. In fact, I paste the following code ( $("#grocery-list").kendoMobileListView({
                dataSource: groceryDataSource,
                template: "#: Name #"
            });)

    in the initialize() function (after the var app = ...; line). And all I have is the loading indicator. Can you help me ?

  4. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 22 Dec 2015 Link to this post

    Hi Maxime,

    From your post I couldn't get if you tried the solutions suggested by Toma in the previous post. If you tried them and they didn't fix the problem, please send the tutorial project, so that we can take a look.

    Regards,
    Martin Yankov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Bruno
    Bruno avatar
    1 posts
    Member since:
    Jan 2016

    Posted 05 Jan Link to this post

    Hi guys,

    I'm having some trouble on step 3 of this same tutorial, when is said to replace the groceryDataSource declaration, which is:

    var groceryDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "https://api.everlive.com/v1/" + MYapiKey + "/Groceries",
                    dataType: "jsonp"
                }
            },
            schema: {
                data: function (response) {
                    return response.Result;
                }
            }
        });

    To this code:

    var groceryDataSource = new kendo.data.DataSource({
        type: "everlive",
        transport: {
            typeName: "Groceries"
        }
    });

    This causes the app to keep on waiting for information, which I suspect happens because I remove the API Key from the infos.

    Can you tell me the best way to proceed in this situation?

  6. Martin
    Admin
    Martin avatar
    67 posts

    Posted 07 Jan Link to this post

    Hi Bruno,

    You can examine the error by running the app in the Telerik Platform Simulator, pressing the F12 key on the keyboard and then selecting the "Console" tab.

    In order the DataSource  of type "everlive" to load the data from  the "Groceries" content type properly, make sure you have an Everlive instance, initialized prior to the groceryDataSource variable.

    You can read more about the Everlive instance here and about using “everlive” data source here.

    The completed code for step 3 in app.js should look like this (use your actual App ID):

    (function () {
        var apiKey = "XXXXXXXXXXXXX";
        var el = new Everlive(apiKey);
     
        var groceryDataSource = new kendo.data.DataSource({
            type: "everlive",
            transport: {
                typeName: "Groceries"
            }
        });
     
        function initialize() {
            var app = new kendo.mobile.Application(document.body, {
                skin: "flat",
                transition: "slide"
            });
            $("#grocery-list").kendoMobileListView({
                dataSource: groceryDataSource,
                template: "#: Name #"
            });
            navigator.splashscreen.hide();
        }
     
        window.addView = kendo.observable({
            add: function () {
                if (!this.grocery) {
                    navigator.notification.alert("Please provide a grocery.");
                    return;
                }
     
                groceryDataSource.add({
                    Name: this.grocery
                });
                groceryDataSource.one("sync", this.close);
                groceryDataSource.sync();
            },
            close: function () {
                $("#add").data("kendoMobileModalView").close();
                this.grocery = "";
            }
        });
     
        document.addEventListener("deviceready", initialize);
    }());

    Let me know if this helps.


    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Bruce
    Bruce avatar
    1 posts
    Member since:
    Nov 2012

    Posted 09 Jan in reply to Maxime Link to this post

    I was having the exact same issue as you were experiencing. I had gone through all of the Admin's suggested tips without success. I had finally figured out that the issue was due to the following error: "The server understood the request, but is refusing to fulfill it". I proceeded to change the URL call from a HTTPS to just HTTP. This change resolved the issue. See the final code snippet below:

    var groceryDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://api.everlive.com/v1/" + apiKey + "/Groceries",
                    dataType: "jsonp"
                }
            },
            schema: {
                data: function (response) {
                    return response.Result;
                }
            }
        });

     
     
  8. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 13 Jan Link to this post


    @Bruce

    Thanks for your input and reporting your findings.

    Perhaps the calls to the Everlive API over HTTPS is not included in the Telerik Platform subscription you are using hence the error?

    Also, the jsonp setting as shown in the tutorial (will be reported to the tutorial contributors) is not needed, json will suffice:
    var groceryDataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "https://api.everlive.com/v1/" + apiKey + "/Groceries",
                                dataType: "json"
                            }
                // ommitted for brevity


    Regards,
    Anton Dobrev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top