NativeScript - Build a photo album tutorial

[jmann]

I'm just working through this tutorial - just a couple of comments.

Right at the beginning it says add a new file homeView-view-model.js but the file already exists.

Quite often it seems we need to just replace the contents of existing files with code given in the tutorial, but this isn't very clear.

A lot of the files have this sort of entry:

/* START_CUSTOM_CODE_nativeScriptApp */

/* END_CUSTOM_CODE_nativeScriptApp */

But it looks like you can just delete all this now? This seems to be something not used anymore?

[jmann]

Another comment.

Section 6 of the tutorial says:

 If everyone went right, you should see the picture appear at the top of the list.

Apart from it should say "if everything went right" the picture actually appears at the end of the list, because it is using push.

I had a look at the docs and if you want the item to appear at the top of the list it should use unshift.
https://docs.nativescript.org/ApiReference/data/observable-array/HOW-TO.html

This code does what the tutorial says:

localImagesArray.unshift(item);

I'm enjoying the tutorial - it is all great stuff, just sharing what I found - say if you don't need to because you know all this already.

[jmann]

Interestingly unshift doesn't add if the array is empty - I had to go back to push when I did the part where you store images in the cloud. I found it was saving them in the cloud, but it wasn't adding them to the list on the phone.

[jmann]

I'm now on the "Working with app layouts" tutorial, but it would make sense to keep all my notes in the same thread.

The homeView.xml file by default looks like this:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:widgets="utils/widgets" loaded="pageLoaded">
    <Page.actionBar>
        <widgets:action-bar />
    </Page.actionBar>

    <StackLayout>
        <!-- additional view content -->
        <!-- START_CUSTOM_CODE_homeView -->
        <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->

        <!-- END_CUSTOM_CODE_homeView -->
    </StackLayout>
</Page>

but the tutorial says to just use this code:

<Page>

     <AbsoluteLayout>

            <Button text="Button 1" left="100" top="100" />

      </AbsoluteLayout>

</Page>

which doesn't seem to follow the same format, however it doesn't seem to cause problems.

[jmann]

Working with app layouts 8/10

homeView.port.xml - This file will be loaded if the orientation of the app is in portrain mode.

I assume it should read portrait mode.

[Tina Stancheva]

Hi John,

Please accept my apology for the delayed response. I want to start by thanking you for taking the time to share your experience with the tutorials and report any issues you encounter. We truly appreciate the effort.

Let me address each comment separately:

• Right at the beginning it says add a new file homeView-view-model.js but the file already exists - I just tried this on my side by restarting the tutorial and recreating an empty project for it. The homeView-view-model.js file was not created.
• A lot of the files have this sort of entry: /* START_CUSTOM_CODE_nativeScriptApp */ and /* END_CUSTOM_CODE_nativeScriptApp */ - indeed the tutorials you discussed don't use the Views service and this code is related to that service. Basically the Views service allows you to quickly create UI for your app and add some basic configurations and a data provider for the UI components. In order to translate that into code, the Views service writes in the XML and JS code-behind files. Every change applied in the Views section of Telerik PLatform would therefore update these files and remove any custom logic. In order to give users the option to be able to update views through the Views service functionality while still keeping custom code intact, we've exposed comments sections. The Views service code generators will leave everything inside those comments intact and will update everything outside it. Considering this information you can decide whether or not to keep the comments sections in the tutorials. We're currently keeping them in as we want to allow users like you to further experiment with the tutorials and have the option to both use the Views service in the tutorials and have a place for any custom code.
• "If everyone went right, you should see the picture appear at the top of the list." and "This file will be loaded if the orientation of the app is in portrain mode." - both typos are now fixed
• Picture actually appears at the end of the list, because it is using push - you're absolutely right, we will address that issue as well by either changing the information to note the image will be added at the bottom of this list or describing how to add it at the top (we'll internally discuss the best option but I will appreciate your further input on that as well). In regard to adding the images at the top of the observable collection, you're right that you'll have to use the unshift() method but you'll also have to update the localImagesArray with the results of the unshift() operation:

localImagesArray = localImagesArray.unshift(item);

• The homeView.xml file by default look in the "Working with app layouts" tutorial - I wasn't able to replicate this issue as well. By default on my side the file contains an empty Page entry. Can you please confirm if this is still an issue on your side?
• Quite often it seems we need to just replace the contents of existing files with code given in the tutorial, but this isn't very clear - I understand your concerns here and I want to ask if you can suggest more specific changes we can apply. For instance if you can let me know which step and instruction specifically is vague, I will make sure we discuss and update it accordingly.

Thank you again for all your input. As a small token of gratitude for sharing your feedback I've updated your Telerik points.

Let me know if you have any further questions or comments.

Regards,
Tina Stancheva
Telerik

[jmann]

Hi Tina

Thanks for replying - I just wanted to make a few notes while I was doing the tutorials in case they were useful to you. I'm sorry sometimes I don't think I was very clear - I can't really remember what I was trying to say with the second to last comment!

I would just say about the /* START_CUSTOM_CODE... */ stuff that it would just be useful in the tutorial to acknowledge it exists and suggest what to do about it. I just found it a little confusing that it wasn't in the code provided in the tutorial but it was in the code in the files, for simplicity I think just say that this code is used with the Views Service, but as this isn't covered in the tutorial it can safely be replaced with the tutorial code.

I didn't know what Telerik points were, I've looked them up and now I know so thanks!

I haven't been able to get my company to pay for a Telerik Platform licence, I'll see if I can accumulate some points to be able to afford one for my personal use.

Thanks again

John