Nativescript-angular: Improve Angular support

[hamorphis]

Find all tasks that make developer experience unpleasant when reading NS with Angular Tutorial:

This is not related to nativescript-angular in any way, but when I installed the latest Node.js version with homebrew by running brew install homebrew/versions/node6-lts, node was installed successfully, but homebrew could not link it and I did not have the node and npm commands available. On the other hand, by downloading node-v6.9.1.pkg from Node.js website and running it node and npm were installed successfully. Just saying.

[hamorphis]

On this page the code snippet reading cd the-folder-you-want-groceries-to-be-in does not have the Copy button in the top-right corner like all other snippets have.

• In Chapter 1, 1.4 Running your app, after I executed tns run ios --emulator I got the following from the CLI:

Command xcrun with arguments simctl launch CC9DBE24-A540-40E4-A187-E7DE3ECDA254 org.nativescript.groceries failed with exit code 4. Error output:
 An error was encountered processing the command (domain=FBSOpenApplicationErrorDomain, code=4):
The operation couldn’t be completed. (FBSOpenApplicationErrorDomain error 4.)

After issuing the command again, the app started. Some people suggest to do iOS Simulator -> Reset Contents and Settings. in order to alleviate such errors. Maybe we can include this in the tutorial.

[hamorphis]

This is not related to TNS+NG, but when I ran tns run android --emulator I got:

The system failed to delete the package for an unspecified reason.
The package manager service found that the device didn't have enough storage space to install the app.

Maybe we can add to the article that they should have at least 20MB free space on the emulator in order to run the Groceries app.

[hamorphis]

I have noticed that after checking out the angular-start branch of the Groceries app, the nativescript-angular version in package.json is hardcoded to "nativescript-angular": "1.1.2". Shouldn't we target the latest nativescript-angular version?

[hamorphis]

We should add .DS_Store to the .gitignore in all branches.

[hamorphis]

I noticed that the iOS app showed the splash/launch screen with the 3 fruits, but the Android app did not. Not a big deal, but we can align them: https://docs.nativescript.org/publishing/creating-launch-screens-android

[hamorphis]

I am constantly seeing JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.. We might add some info on where to call enableProdMode() if they want it to stop showing.

[hamorphis]

1. I ran tns run ios and was prompted by the CLI to select a development team:

Xcode 8 requires a team id to be specified when building for device.
You can specify the team id by setting the DEVELOPMENT_TEAM setting in build.xcconfig file located in App_Resources folder of your app, or by using the --teamId option when calling run, debug or livesync commnads.
? Found multiple development teams, select one: (Use arrow keys)
❯ Telerik A D (XXXXXXXXXX) 
  Telerik AD (XXXXXXXXXX) 
  Rossen Hristov (XXXXXXXXXX) 

I selected my personal development team Rossen Hristov (XXXXXXXXXX), since our users are clearly not part of the two Telerik teams. After which I got the following error:

No profiles for 'org.nativescript.groceries' were found:  Xcode couldn't find a provisioning profile matching 'org.nativescript.groceries'.
Code signing is required for product type 'Application' in SDK 'iOS 10.1'
Code signing is required for product type 'Application' in SDK 'iOS 10.1'

The only way to work around this issue was to open the xCode project with xCode and change the bundle indentifier from org.nativescript.groceries to something very unique like org.nativescript.groceriesalabala. If I chose the Telerik A D I did not have any problems, but a person following this tutorial is not part of the Telerik A D team.

It seems that you cannot deploy the app on a real device with the bundle ID org.nativescript.groceries if you do not choose the Telerik A D as the team id.

The worst thing is that exactly the same happened for a brand new project created from scratch:

No profiles for 'org.nativescript.azobichammachiboza' were found:  Xcode couldn't find a provisioning profile matching 'org.nativescript.azobichammachiboza'.
Code signing is required for product type 'Application' in SDK 'iOS 10.1'
Code signing is required for product type 'Application' in SDK 'iOS 10.1'

We have to ask someone outside Telerik to try this. Someone with his own AppleID and team and iPhone. I guess everything is fine, but I can't test it as me.

[hamorphis]

In Chapter 2 the hyperlinks at the end of section 2.3 linking to TextField and Button are broken.

[hamorphis]

In Chapter 2, in section 2.4: Layouts add a link to Layout Containers where people can see all the different layouts in action with screenshots, which is much more helpful than simply browsing their API.

[hamorphis]

In 2.7: Images it is mentioned that there is a folder App_Resources/Android/drawable-ldpi (for low-dpi) while in fact there is no such folder in the angular-start branch. Should we add the low res images?

[hamorphis]

In 3.1: Event after adding the tap event handler to the sign-in button and livesyncing the app, the Android app started printing hello on the console, but the iOS app DID NOT. After restarting the app, the console started printing hello but hitting the button several times did not produce anything because the console strips similar messages on iOS. Maybe we should tell people that if you print the same console message on iOS multiple times you will see it only once on the console. Or add a unique datetime to the hello message so it is different each time the button is clicked and people can see that the tap event is in fact working, Something along the lines of console.log(hello ${new Date()}); Another option is to change the console.log with alert.

[hamorphis]

In 3.4: Services there is an Angular 2 service which leads to the middle of the Tour of Heroes tutorial. If the user has not covered this tutorial he/she will be in the middle of nowhere. Wouldn't it be better if the link is to the Angular Services documentation just like the link to the Angular Modules? Just an idea.

[hamorphis]

The camera module source code is given as an example tns-core-module in several places throughout the article, but we deprecated the camera module and moved it to a separate plugin so the example is no longer valid. Maybe we should give an example with something else such as the file system module or the http module.

[hamorphis]

Someone logging with [email protected]:password may enter a new grocery containing explicit stuff and all other people following the tutorial will see it. We might think about resetting this users groceries automatically every day. We have had similar problems in the past where people were uploading explicit images with in our RadControls demos.

[hamorphis]

In Chapter 4, Exercise: Using CSS animations, the hyperlink Exercise: Using CSS animations is pointing to the md file in the github repo. We should change it to point to the real docs page: https://docs.nativescript.org/ui/animation-css.html

[hamorphis]

I tried to login on my personal phone while my 3G and WiFi were turned off and the alert I saw was Unfortunately we could not find your account. We might add information to tell the user that his internet connection is turned off, because the alert can be a little bit misleading.

[hamorphis]

While I was doing the tutorial, someone else was doing it too and was constantly changing the groceries. I think everyone should use his own new account and we should drop the common [email protected] account.

[hamorphis]

In Chapter 4 at the last tip, we mention location service, a file-system helper, a timer module, a camera module. The camera and location have been extracted to separate plugins:

• https://www.npmjs.com/package/nativescript-camera
• https://www.npmjs.com/package/nativescript-geolocation

[valentinstoychev]

@tjvantoll ^^

[hamorphis]

In Chapter 6 we can mention that the TextField hint color has already been implemented in tns-core-modules: https://github.com/NativeScript/NativeScript/issues/712

[hamorphis]

@tjvantoll Can you review my suggestions and approve/reject them. I will then go ahead and implement the ones you approved if you want me to.

[hamorphis]

And by the way, this is an AWESOME tutorial. I loved it!

[tjvantoll]

Hey @hamorphis. Thanks so much for going through this and for the detailed feedback. This is excellent! I ran out of time today, but I’ll respond to each of your points tomorrow when I get in.

[tjvantoll]

This is not related to nativescript-angular in any way, but when I installed the latest Node.js version with homebrew by running brew install homebrew/versions/node6-lts, node was installed successfully, but homebrew could not link it and I did not have the node and npm commands available. On the other hand, by downloading node-v6.9.1.pkg from Node.js website and running it node and npm were installed successfully. Just saying.

Interesting. I just completely removed Node and npm from my system, ran homebrew/versions/node6-lts, and the node and npm command were both available as expected. Did you have Node installed on your system previously? This is probably better handled in a new issues on the NativeScript/docs repo.

On this page the code snippet reading cd the-folder-you-want-groceries-to-be-in does not have the Copy button in the top-right corner like all other snippets have.

That was purposely done because in theory the-folder-you-want-groceries-to-be-in won’t exist on the user’s computer. I’m open to suggestions on how I could make this more clear.

In Chapter 1, 1.4 Running your app, after I executed tns run ios --emulator I got the following from the CLI:
Command xcrun with arguments simctl launch CC9DBE24-A540-40E4-A187-E7DE3ECDA254 org.nativescript.groceries failed with exit code 4. Error output: An error was encountered processing the command (domain=FBSOpenApplicationErrorDomain, code=4):
The operation couldn’t be completed. (FBSOpenApplicationErrorDomain error 4.) After issuing the command again, the app started.
Some people suggest to do iOS Simulator -> Reset Contents and Settings. in order to alleviate such errors. Maybe we can include this in the tutorial.

If we go down this route I’d love to see a new section added to Troubleshooting that discusses any of these problems related to running emulators. If that were to exist I think adding a link to the tutorial would make a lot of sense.

This is not related to TNS+NG, but when I ran tns run android --emulator I got:
The system failed to delete the package for an unspecified reason.
The package manager service found that the device didn't have enough storage space to install the app.
Maybe we can add to the article that they should have at least 20MB free space on the emulator in order to run the Groceries app.

Yeah I’ve hit this one myself. I’d again suggest putting this in the Troubleshooting page, and linking to it from the tutorial.

I have noticed that after checking out the angular-start branch of the Groceries app, the nativescript-angular version in package.json is hardcoded to "nativescript-angular": "1.1.2". Shouldn't we target the latest nativescript-angular version?

Well 1.1.3 is latest, so it’s not really all that far behind. I use explicit version numbers because I don’t want changes to the packages to break the tutorials.

We should add .DS_Store to the .gitignore in all branches.

Agreed. Feel free to add it 😄

I noticed that the iOS app showed the splash/launch screen with the 3 fruits, but the Android app did not. Not a big deal, but we can align them: https://docs.nativescript.org/publishing/creating-launch-screens-android

Good catch. I created an issue to log this: https://github.com/NativeScript/sample-Groceries/issues/187

[tjvantoll]

I ran tns run ios and was prompted by the CLI to select a development team:

I always have to change apps to use an id I have profiles already set up for, so com.tjvantoll.whatever. I would argue that this is probably outside of the scope of the tutorial, but we really don’t have any documentation on this that I know of. We have a really thorough guide to publishing on iOS, but nothing really about deploying to physical devices for testing. If that were to exist I think adding a link to it in the tutorial would make a lot of sense.

[hamorphis]

Interesting. I just completely removed Node and npm from my system, ran homebrew/versions/node6-lts, and the node and npm command were both available as expected. Did you have Node installed on your system previously? This is probably better handled in a new issues on the NativeScript/docs repo.

I completely removed node from my system too. It was 100% node-free.

That was purposely done because in theory the-folder-you-want-groceries-to-be-in won’t exist on the user’s computer. I’m open to suggestions on how I could make this more clear.
I did not notice that. Sorry. It is better the way it is.

If we go down this route I’d love to see a new section added to Troubleshooting that discusses any of these problems related to running emulators. If that were to exist I think adding a link to the tutorial would make a lot of sense.

Yeah, I will add one here.

Yeah I’ve hit this one myself. I’d again suggest putting this in the Troubleshooting page, and linking to it from the tutorial.

Same here.

Well 1.1.3 is latest, so it’s not really all that far behind. I use explicit version numbers because I don’t want changes to the packages to break the tutorials.
I understand. No problem at all.

Agreed. Feel free to add it 😄

I will.

[tjvantoll]

In Chapter 2 the hyperlinks at the end of section 2.3 linking to TextField and Button are broken.

Oops. A commit to fix those would be great 😄

In Chapter 2, in section 2.4: Layouts add a link to Layout Containers where people can see all the different layouts in action with screenshots, which is much more helpful than simply browsing their API.

Yep that’d be great. https://docs.nativescript.org/angular/code-samples/ui/layouts.html is probably the best place to link to now that we have a code example.

In 2.7: Images it is mentioned that there is a folder App_Resources/Android/drawable-ldpi (for low-dpi) while in fact there is no such folder in the angular-start branch. Should we add the low res images?

Either that, or just remove the reference from the tutorial. Are there actually devices that’ll utilize drawable-ldpi nowadays?

In 3.1: Event after adding the tap event handler to the sign-in button and livesyncing the app, the Android app started printing hello on the console, but the iOS app DID NOT. After restarting the app, the console started printing hello but hitting the button several times did not produce anything because the console strips similar messages on iOS. Maybe we should tell people that if you print the same console message on iOS multiple times you will see it only once on the console. Or add a unique datetime to the hello message so it is different each time the button is clicked and people can see that the tap event is in fact working, Something along the lines of console.log(hello ${new Date()}); Another option is to change the console.log with alert.

I’d like to keep this using console.log so people are introduced to it. I’m cool with adding a timestamp, and I kind of like using $ for the whole template literal thing. Just note that there’s a screenshot below the example that’ll need to be updated as well.

In 3.4: Services there is an Angular 2 service which leads to the middle of the Tour of Heroes tutorial. If the user has not covered this tutorial he/she will be in the middle of nowhere. Wouldn't it be better if the link is to the Angular Services documentation just like the link to the Angular Modules? Just an idea.

Yep. I like the idea of updating that link.

The camera module source code is given as an example tns-core-module in several places throughout the article, but we deprecated the camera module and moved it to a separate plugin so the example is no longer valid. Maybe we should give an example with something else such as the file system module or the http module.

Ah! Good catch. I like the idea of switching this to use the file system module. The JavaScript uses basically the exact same wording at the beginning of chapter 4, so we should try to update both at the same time.

Someone logging with [email protected]:password may enter a new grocery containing explicit stuff and all other people following the tutorial will see it. We might think about resetting this users groceries automatically every day. We have had similar problems in the past where people were uploading explicit images with in our RadControls demos.

Yeah I’ve wanted to do this for a while, and I know Backend Services has the ability to do this. What I’d like to do is drive the app off the NativeScript account in the Platform (currently it’s still on my personal account), and wipe the list daily.

In Chapter 4, Exercise: Using CSS animations, the hyperlink Exercise: Using CSS animations is pointing to the md file in the github repo. We should change it to point to the real docs page: https://docs.nativescript.org/ui/animation-css.html

👍

I tried to login on my personal phone while my 3G and WiFi were turned off and the alert I saw was Unfortunately we could not find your account. We might add information to tell the user that his internet connection is turned off, because the alert can be a little bit misleading.

I do this in master https://github.com/NativeScript/sample-Groceries/blob/7c805ca70d560850421dd9a66987da47c9aa1e87/app/login/login.component.ts#L62-L65. I’m not opposed to adding this into the tutorial, but it might be tricky to work it in because those methods change frequently throughout the chapters. I’d actually love if the handleErrors function in all the services could somehow magically handle this situation, but I’ve never been able to come up with an elegant solution.

[tjvantoll]

While I was doing the tutorial, someone else was doing it too and was constantly changing the groceries. I think everyone should use his own new account and we should drop the common [email protected] account.

Yeah I think that makes sense. The danger outweighs the small convenience. Feel free to get rid of mentions to the account.

In Chapter 4 at the last tip, we mention location service, a file-system helper, a timer module, a camera module.

Yeah let’s update this to mention modules that are still in tns-core-modules.

In Chapter 6 we can mention that the TextField hint color has already been implemented in tns-core-modules: NativeScript/NativeScript#712

Yep, you can update this wording from chapter 6: “At the time of this writing, NativeScript doesn’t expose a way to style a text field’s hint color through CSS—although there is an open issue requesting the feature”.

[tjvantoll]

@hamorphis: Ok I think I commented on all of them. If you need any other questions let me know and I’m happy to help. And thanks again!

[hamorphis]

@tjvantoll I will handle all the issues we agreed upon. Thanks.

[hamorphis]

@tjvantoll Can you give me the address and the credentials to the Everlive backend of the grocerise app? Or should I create a new project and link the app there?

[hamorphis]

@tjvantoll https://github.com/NativeScript/sample-Groceries/pull/189

[hamorphis]

@tjvantoll https://github.com/NativeScript/docs/pull/612

[tjvantoll]

@hamorphis Hey, sorry for the late reply here and thanks so much. What email address do you use for your Platform account? I can add you to mine which is where the Everlive backend is right now. Alternatively you could create a brand new app.

There is one type named “Groceries” with a permission of “Private” and the following structure.

[hamorphis]

@tjvantoll My email is rossen.[email protected]

[tjvantoll]

@hamorphis Just invited you

[tjvantoll]

Also, just fyi I pushed a few of your Angular tutorial changes over to the JS tutorial just to keep them in sync https://github.com/NativeScript/docs/commit/a2e2fd5e90bfda0eb056859615f8cb0b4261766b.

[hamorphis]

@tjvantoll Thanks.