Repository: NativeScript/sample-Groceries Branch: master Commit: 7b0cca917754 Files: 76 Total size: 113.9 KB Directory structure: gitextract_9481lv8a/ ├── .ctags-exclude ├── .gitignore ├── .travis.yml ├── .vscode/ │ ├── launch.json │ └── settings.json ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── app/ │ ├── App_Resources/ │ │ ├── Android/ │ │ │ ├── app.gradle │ │ │ └── src/ │ │ │ └── main/ │ │ │ ├── AndroidManifest.xml │ │ │ └── res/ │ │ │ ├── drawable-nodpi/ │ │ │ │ └── splash_screen.xml │ │ │ ├── values/ │ │ │ │ ├── colors.xml │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── values-v21/ │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ └── iOS/ │ │ ├── Assets.xcassets/ │ │ │ ├── AppIcon.appiconset/ │ │ │ │ └── Contents.json │ │ │ ├── Contents.json │ │ │ ├── LaunchImage.launchimage/ │ │ │ │ └── Contents.json │ │ │ ├── LaunchScreen.AspectFill.imageset/ │ │ │ │ └── Contents.json │ │ │ └── LaunchScreen.Center.imageset/ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── build.xcconfig │ ├── app.component.ts │ ├── app.css │ ├── app.module.ngfactory.d.ts │ ├── app.module.ts │ ├── app.routing.ts │ ├── auth-guard.service.ts │ ├── groceries/ │ │ ├── groceries-common.css │ │ ├── groceries.component.android.css │ │ ├── groceries.component.html │ │ ├── groceries.component.ios.css │ │ ├── groceries.component.ts │ │ ├── groceries.module.ts │ │ ├── groceries.routing.ts │ │ ├── grocery-list/ │ │ │ ├── grocery-list.component.css │ │ │ ├── grocery-list.component.html │ │ │ ├── grocery-list.component.ts │ │ │ └── item-status.pipe.ts │ │ └── shared/ │ │ ├── grocery.model.ts │ │ ├── grocery.service.ts │ │ └── index.ts │ ├── login/ │ │ ├── login-common.css │ │ ├── login.component.android.css │ │ ├── login.component.html │ │ ├── login.component.ios.css │ │ ├── login.component.ts │ │ ├── login.module.ts │ │ └── login.routing.ts │ ├── main.aot.ts │ ├── main.ts │ ├── package.json │ ├── platform.android.css │ ├── platform.ios.css │ ├── shared/ │ │ ├── backend.service.ts │ │ ├── dialog-util.ts │ │ ├── index.ts │ │ ├── login.service.ts │ │ ├── status-bar-util.ts │ │ └── user.model.ts │ └── tests/ │ └── shared/ │ └── user/ │ └── user.spec.ts ├── e2e/ │ ├── config/ │ │ ├── appium.capabilities.json │ │ └── mocha.opts │ ├── groceries.e2e.ts │ ├── setup.ts │ └── tsconfig.json ├── karma.conf.js ├── package.json ├── references.d.ts ├── tsconfig.esm.json ├── tsconfig.json ├── tsconfig.tns.json ├── tslint.json └── webpack.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .ctags-exclude ================================================ node_modules platforms android17.d.ts ios.d.ts *.js bin ================================================ FILE: .gitignore ================================================ npm-debug.log .DS_Store *.js.map app/**/*.js e2e/**/*.js e2e/reports/ hooks/ lib/ node_modules/ platforms/ tmp/ typings/ report/ test-results.xml ================================================ FILE: .travis.yml ================================================ env: global: - ANDROID_PACKAGE='sampleGroceries.apk' - ANDROID_PACKAGE_FOLDER=$TRAVIS_BUILD_DIR/platforms/android/app/build/outputs/apk/debug/ - ANDROID_SAUCE_STORAGE="https://saucelabs.com/rest/v1/storage/$SAUCE_USER/$ANDROID_PACKAGE?overwrite=true" - IOS_PACKAGE='sampleGroceries.zip' - IOS_APP_NAME='sampleGroceries.app' - IOS_PACKAGE_FOLDER=$TRAVIS_BUILD_DIR/platforms/ios/build/Debug-iphonesimulator - IOS_SAUCE_STORAGE="https://saucelabs.com/rest/v1/storage/$SAUCE_USER/$IOS_PACKAGE?overwrite=true" branches: only: - master matrix: include: - stage: "Lint" language: node_js os: linux node_js: "10" install: true script: npm i && npm run tslint - stage: "Build" os: osx env: - BuildiOS="12" - Xcode="10.0" osx_image: xcode10 language: node_js node_js: "10" jdk: oraclejdk8 script: - tns build ios --bundle --env.aot --env.uglify - cd $IOS_PACKAGE_FOLDER && zip -r $IOS_PACKAGE $IOS_APP_NAME - "curl -u $SAUCE_USER:$SAUCE_KEY -X POST -H 'Content-Type: application/octet-stream' $IOS_SAUCE_STORAGE --data-binary @$IOS_PACKAGE_FOLDER/$IOS_PACKAGE" - language: android env: - BuildAndroid="28" os: linux jdk: oraclejdk8 before_install: nvm install 10 script: - tns build android --bundle --env.aot --env.uglify --env.snapshot - "curl -u $SAUCE_USER:$SAUCE_KEY -X POST -H 'Content-Type: application/octet-stream' $ANDROID_SAUCE_STORAGE --data-binary @$ANDROID_PACKAGE_FOLDER/app-debug.apk" - stage: "UI Tests" env: - AndroidEmulator="23" language: node_js os: linux node_js: "10" script: # - npm i -g appium@1.8.0 - npm i - travis_retry npm run e2e -- --runType android23 --sauceLab --appPath $ANDROID_PACKAGE - os: linux env: - iOS="11" language: node_js node_js: "10" script: # - npm i -g appium@1.8.0 - npm i - travis_wait travis_retry npm run e2e -- --runType sim.iPhone8 --sauceLab --appPath $IOS_PACKAGE android: components: - tools - platform-tools - build-tools-28.0.3 - android-28 - extra-android-m2repository before_cache: - rm -f $HOME/.gradle/caches/modules-2/modules-2.lock cache: directories: - .nvm - $HOME/.gradle/caches/ - $HOME/.gradle/wrapper/ install: - pip install six - echo no | npm install -g nativescript@latest --ignore-scripts - tns usage-reporting disable - tns error-reporting disable ================================================ FILE: .vscode/launch.json ================================================ { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", "args": [ "--runType", "android23", "--sauceLab", "-v", "--appPath", "sampleGroceries.apk", "--timeout", "999999", "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceFolder}/e2e" ], "internalConsoleOptions": "openOnSessionStart" }, { "name": "Sync on iOS", "type": "nativescript", "platform": "ios", "request": "launch", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false, "rebuild": false, "syncAllFiles": false }, { "name": "Launch on iOS", "type": "nativescript", "platform": "ios", "request": "launch", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false, "rebuild": true }, { "name": "Attach on iOS", "type": "nativescript", "platform": "ios", "request": "attach", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false }, { "name": "Sync on Android", "type": "nativescript", "platform": "android", "request": "launch", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false, "rebuild": false }, { "name": "Launch on Android", "type": "nativescript", "platform": "android", "request": "launch", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false, "rebuild": true }, { "name": "Attach on Android", "type": "nativescript", "platform": "android", "request": "attach", "appRoot": "${workspaceRoot}", "sourceMaps": true, "diagnosticLogging": false, "emulator": false } ] } ================================================ FILE: .vscode/settings.json ================================================ // Place your settings in this file to overwrite default and user settings. { "files.exclude": { "**/*.js": { "when": "$(basename).ts" }, "**/*.map": { "when": "$(basename).map" } } } ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # NativeScript Community Code of Conduct Our community members come from all walks of life and are all at different stages of their personal and professional journeys. To support everyone, we've prepared a short code of conduct. Our mission is best served in an environment that is friendly, safe, and accepting; free from intimidation or harassment. Towards this end, certain behaviors and practices will not be tolerated. ## tl;dr - Be respectful. - We're here to help. - Abusive behavior is never tolerated. - Violations of this code may result in swift and permanent expulsion from the NativeScript community channels. ## Administrators - Dan Wilson (@DanWilson on Slack) - Jen Looper (@jen.looper on Slack) - TJ VanToll (@tjvantoll on Slack) ## Scope We expect all members of the NativeScript community, including administrators, users, facilitators, and vendors to abide by this Code of Conduct at all times in our community venues, online and in person, and in one-on-one communications pertaining to NativeScript affairs. This policy covers the usage of the NativeScript Slack community, as well as the NativeScript support forums, NativeScript GitHub repositories, the NativeScript website, and any NativeScript-related events. This Code of Conduct is in addition to, and does not in any way nullify or invalidate, any other terms or conditions related to use of NativeScript. The definitions of various subjective terms such as "discriminatory", "hateful", or "confusing" will be decided at the sole discretion of the NativeScript administrators. ## Friendly, Harassment-Free Space We are committed to providing a friendly, safe, and welcoming environment for all, regardless of gender identity, sexual orientation, disability, ethnicity, religion, age, physical appearance, body size, race, or similar personal characteristics. We ask that you please respect that people have differences of opinion regarding technical choices, and acknowledge that every design or implementation choice carries a trade-off and numerous costs. There is seldom a single right answer. A difference of technology preferences is never a license to be rude. Any spamming, trolling, flaming, baiting, or other attention-stealing behaviour is not welcome, and will not be tolerated. Harassing other users of NativeScript is never tolerated, whether via public or private media. Avoid using offensive or harassing package names, nicknames, or other identifiers that might detract from a friendly, safe, and welcoming environment for all. Harassment includes, but is not limited to: harmful or prejudicial verbal or written comments related to gender identity, sexual orientation, disability, ethnicity, religion, age, physical appearance, body size, race, or similar personal characteristics; inappropriate use of nudity, sexual images, and/or sexually explicit language in public spaces; threats of physical or non-physical harm; deliberate intimidation, stalking or following; harassing photography or recording; sustained disruption of talks or other events; inappropriate physical contact; and unwelcome sexual attention. ## Acceptable Content The NativeScript administrators reserve the right to make judgement calls about what is and isn't appropriate in published content. These are guidelines to help you be successful in our community. Content must contain something applicable to the previously stated goals of the NativeScript community. "Spamming", that is, publishing any form of content that is not applicable, is not allowed. Content must not contain illegal or infringing content. You should only publish content to NativeScript properties if you have the right to do so. This includes complying with all software license agreements or other intellectual property restrictions. For example, redistributing an MIT-licensed module with the copyright notice removed, would not be allowed. You will be responsible for any violation of laws or others’ intellectual property rights. Content must not be malware. For example, content (code, video, pictures, words, etc.) which is designed to maliciously exploit or damage computer systems, is not allowed. Content name, description, and other visible metadata must not include abusive, inappropriate, or harassing content. ## Reporting Violations of this Code of Conduct If you believe someone is harassing you or has otherwise violated this Code of Conduct, please contact the administrators and send us an abuse report. If this is the initial report of a problem, please include as much detail as possible. It is easiest for us to address issues when we have more context. ## Consequences All content published to the NativeScript community channels is hosted at the sole discretion of the NativeScript administrators. Unacceptable behavior from any community member, including sponsors, employees, customers, or others with decision-making authority, will not be tolerated. Anyone asked to stop unacceptable behavior is expected to comply immediately. If a community member engages in unacceptable behavior, the NativeScript administrators may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event or service). ## Addressing Grievances If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify the administrators. We will do our best to ensure that your grievance is handled appropriately. In general, we will choose the course of action that we judge as being most in the interest of fostering a safe and friendly community. ## Contact Info Please contact Dan Wilson @DanWilson if you need to report a problem or address a grievance related to an abuse report. You are also encouraged to contact us if you are curious about something that might be "on the line" between appropriate and inappropriate content. We are happy to provide guidance to help you be a successful part of our community. ## Credit and License This Code of Conduct borrows heavily from the WADE Code of Conduct, which is derived from the NodeBots Code of Conduct, which in turn borrows from the npm Code of Conduct, which was derived from the Stumptown Syndicate Citizen's Code of Conduct, and the Rust Project Code of Conduct. This document may be reused under a Creative Commons Attribution-ShareAlike License. ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "{}" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright (c) 2015-2019 Progress Software Corporation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: README.md ================================================ # Groceries [![Build Status](https://travis-ci.org/NativeScript/sample-Groceries.svg?branch=master)](https://travis-ci.org/NativeScript/sample-Groceries) Groceries is a NativeScript-built iOS and Android app for managing grocery lists. You can learn how to build a version of this app from scratch using either our [JavaScript getting started guide](http://docs.nativescript.org/tutorial/chapter-0), or our [TypeScript and Angular getting started guide](http://docs.nativescript.org/angular/tutorial/ng-chapter-0). * [Screenshots](#screenshots) * [Development](#development) * [Linting](#linting) * [Unit testing](#unit-testing) * [Travis CI](#travis) * [Contributors](#contributors)

Screenshots

![](assets/screenshots/ios-1.png) ![](assets/screenshots/ios-2.png) ![](assets/screenshots/ios-3.png) ![](assets/screenshots/android-1.png) ![](assets/screenshots/android-2.png) ![](assets/screenshots/android-3.png)

Development

This app is built with the NativeScript CLI. Once you have the [CLI installed](https://docs.nativescript.org/start/quick-setup), start by cloning the repo: ``` $ git clone https://github.com/NativeScript/sample-Groceries.git $ cd sample-Groceries ``` From there you can use the `run` command to run Groceries on iOS: ``` $ tns run ios ``` And the same command to run Groceries on Android: ``` $ tns run android ```

Linting

Groceries uses [tslint](https://www.npmjs.com/package/tslint) + [codelyzer](https://github.com/mgechev/codelyzer) rules to ensure the code follows the [angular style guide](https://angular.io/docs/ts/latest/guide/style-guide.html). You can run the linter with the `tslint` npm script: ``` $ npm run tslint ```

Unit Testing

Groceries uses NativeScript’s [integrated unit test runner](http://docs.nativescript.org/core-concepts/testing) with [Jasmine](http://jasmine.github.io/). To run the tests for yourself use the `tns test` command: ``` $ tns test ios --emulator ``` ``` $ tns test android --emulator ``` For more information on unit testing NativeScript apps, refer to the [NativeScript docs on the topic](http://docs.nativescript.org/core-concepts/testing).

Travis CI

Groceries uses [Travis CI](https://travis-ci.org/) to verify all tests pass on each commit. Refer to the [`.travis.yml` configuration file](https://github.com/NativeScript/sample-Groceries/blob/release/.travis.yml) for details.

Contributors

The following is a list of all the people that have helped build Groceries. Thanks for your contributions! [tjvantoll](https://github.com/tjvantoll)[hdeshev](https://github.com/hdeshev)[vakrilov](https://github.com/vakrilov)[Mitko-Kerezov](https://github.com/Mitko-Kerezov)[jlooper](https://github.com/jlooper)[rosen-vladimirov](https://github.com/rosen-vladimirov) [SvetoslavTsenov](https://github.com/SvetoslavTsenov)[ligaz](https://github.com/ligaz)[sis0k0](https://github.com/sis0k0)[wdulin](https://github.com/wdulin)[dtopuzov](https://github.com/dtopuzov)[nadyaA](https://github.com/nadyaA) [vchimev](https://github.com/vchimev)[covex-nn](https://github.com/covex-nn)[bundyo](https://github.com/bundyo)[EddyVerbruggen](https://github.com/EddyVerbruggen)[NathanWalker](https://github.com/NathanWalker)[nsndeck](https://github.com/nsndeck) [tzraikov](https://github.com/tzraikov)[TsvetanMilanov](https://github.com/TsvetanMilanov)[bradmartin](https://github.com/bradmartin)[cmelo](https://github.com/cmelo) ![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/sample-groceries?pixel) ### Big Thanks Cross-browser Testing Platform and Open Source Provided by [Sauce Labs](https://saucelabs.com). [SauceLabs](https://saucelabs.com) ================================================ FILE: app/App_Resources/Android/app.gradle ================================================ // Add your native dependencies here: // Uncomment to add recyclerview-v7 dependency //dependencies { // compile 'com.android.support:recyclerview-v7:+' //} android { defaultConfig { generatedDensities = [] applicationId = "org.nativescript.groceries" //override supported platforms // ndk { // abiFilters.clear() // abiFilters "armeabi-v7a" // } } aaptOptions { additionalParameters "--no-version-vectors" } } ================================================ FILE: app/App_Resources/Android/src/main/AndroidManifest.xml ================================================ ================================================ FILE: app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml ================================================ ================================================ FILE: app/App_Resources/Android/src/main/res/values/colors.xml ================================================ #F5F5F5 #757575 #33B5E5 #272734 ================================================ FILE: app/App_Resources/Android/src/main/res/values/strings.xml ================================================ Groceries Groceries ================================================ FILE: app/App_Resources/Android/src/main/res/values/styles.xml ================================================ ================================================ FILE: app/App_Resources/Android/src/main/res/values-v21/colors.xml ================================================ #3d5afe ================================================ FILE: app/App_Resources/Android/src/main/res/values-v21/styles.xml ================================================ ================================================ FILE: app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json ================================================ { "images" : [ { "size" : "29x29", "idiom" : "iphone", "filename" : "icon-29.png", "scale" : "1x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon-29@2x.png", "scale" : "2x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "icon-29@3x.png", "scale" : "3x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "icon-40@2x.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "icon-40@3x.png", "scale" : "3x" }, { "size" : "57x57", "idiom" : "iphone", "filename" : "icon-57.png", "scale" : "1x" }, { "size" : "57x57", "idiom" : "iphone", "filename" : "icon-57@2x.png", "scale" : "2x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "icon-60@2x.png", "scale" : "2x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "icon-60@3x.png", "scale" : "3x" }, { "size" : "29x29", "idiom" : "ipad", "filename" : "icon-29.png", "scale" : "1x" }, { "size" : "29x29", "idiom" : "ipad", "filename" : "icon-29@2x.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "ipad", "filename" : "icon-40.png", "scale" : "1x" }, { "size" : "40x40", "idiom" : "ipad", "filename" : "icon-40@2x.png", "scale" : "2x" }, { "size" : "50x50", "idiom" : "ipad", "filename" : "icon-50.png", "scale" : "1x" }, { "size" : "50x50", "idiom" : "ipad", "filename" : "icon-50@2x.png", "scale" : "2x" }, { "size" : "72x72", "idiom" : "ipad", "filename" : "icon-72.png", "scale" : "1x" }, { "size" : "72x72", "idiom" : "ipad", "filename" : "icon-72@2x.png", "scale" : "2x" }, { "size" : "76x76", "idiom" : "ipad", "filename" : "icon-76.png", "scale" : "1x" }, { "size" : "76x76", "idiom" : "ipad", "filename" : "icon-76@2x.png", "scale" : "2x" }, { "size" : "83.5x83.5", "idiom" : "ipad", "filename" : "icon-83.5@2x.png", "scale" : "2x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: app/App_Resources/iOS/Assets.xcassets/Contents.json ================================================ { "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json ================================================ { "images" : [ { "extent" : "full-screen", "idiom" : "iphone", "subtype" : "736h", "filename" : "Default-736h@3x.png", "minimum-system-version" : "8.0", "orientation" : "portrait", "scale" : "3x" }, { "extent" : "full-screen", "idiom" : "iphone", "subtype" : "736h", "filename" : "Default-Landscape@3x.png", "minimum-system-version" : "8.0", "orientation" : "landscape", "scale" : "3x" }, { "extent" : "full-screen", "idiom" : "iphone", "subtype" : "667h", "filename" : "Default-667h@2x.png", "minimum-system-version" : "8.0", "orientation" : "portrait", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default@2x.png", "extent" : "full-screen", "minimum-system-version" : "7.0", "scale" : "2x" }, { "extent" : "full-screen", "idiom" : "iphone", "subtype" : "retina4", "filename" : "Default-568h@2x.png", "minimum-system-version" : "7.0", "orientation" : "portrait", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "ipad", "filename" : "Default-Portrait.png", "extent" : "full-screen", "minimum-system-version" : "7.0", "scale" : "1x" }, { "orientation" : "landscape", "idiom" : "ipad", "filename" : "Default-Landscape.png", "extent" : "full-screen", "minimum-system-version" : "7.0", "scale" : "1x" }, { "orientation" : "portrait", "idiom" : "ipad", "filename" : "Default-Portrait@2x.png", "extent" : "full-screen", "minimum-system-version" : "7.0", "scale" : "2x" }, { "orientation" : "landscape", "idiom" : "ipad", "filename" : "Default-Landscape@2x.png", "extent" : "full-screen", "minimum-system-version" : "7.0", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default.png", "extent" : "full-screen", "scale" : "1x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default@2x.png", "extent" : "full-screen", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "iphone", "filename" : "Default-568h@2x.png", "extent" : "full-screen", "subtype" : "retina4", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "ipad", "extent" : "to-status-bar", "scale" : "1x" }, { "orientation" : "portrait", "idiom" : "ipad", "filename" : "Default-Portrait.png", "extent" : "full-screen", "scale" : "1x" }, { "orientation" : "landscape", "idiom" : "ipad", "extent" : "to-status-bar", "scale" : "1x" }, { "orientation" : "landscape", "idiom" : "ipad", "filename" : "Default-Landscape.png", "extent" : "full-screen", "scale" : "1x" }, { "orientation" : "portrait", "idiom" : "ipad", "extent" : "to-status-bar", "scale" : "2x" }, { "orientation" : "portrait", "idiom" : "ipad", "filename" : "Default-Portrait@2x.png", "extent" : "full-screen", "scale" : "2x" }, { "orientation" : "landscape", "idiom" : "ipad", "extent" : "to-status-bar", "scale" : "2x" }, { "orientation" : "landscape", "idiom" : "ipad", "filename" : "Default-Landscape@2x.png", "extent" : "full-screen", "scale" : "2x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json ================================================ { "images" : [ { "idiom" : "universal", "filename" : "LaunchScreen-AspectFill.png", "scale" : "1x" }, { "idiom" : "universal", "filename" : "LaunchScreen-AspectFill@2x.png", "scale" : "2x" }, { "idiom" : "universal", "scale" : "3x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json ================================================ { "images" : [ { "idiom" : "universal", "filename" : "LaunchScreen-Center.png", "scale" : "1x" }, { "idiom" : "universal", "filename" : "LaunchScreen-Center@2x.png", "scale" : "2x" }, { "idiom" : "universal", "scale" : "3x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: app/App_Resources/iOS/Info.plist ================================================ CFBundleDevelopmentRegion en CFBundleDisplayName Groceries CFBundleExecutable ${EXECUTABLE_NAME} CFBundleInfoDictionaryVersion 6.0 IPHONEOS_DEPLOYMENT_TARGET 9.0 CFBundleName ${PRODUCT_NAME} CFBundlePackageType APPL CFBundleShortVersionString 1.0 CFBundleSignature ???? CFBundleVersion 1.0 LSRequiresIPhoneOS UILaunchStoryboardName LaunchScreen UIRequiresFullScreen UIRequiredDeviceCapabilities armv7 UISupportedInterfaceOrientations UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UISupportedInterfaceOrientations~ipad UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIViewControllerBasedStatusBarAppearance ================================================ FILE: app/App_Resources/iOS/LaunchScreen.storyboard ================================================ ================================================ FILE: app/App_Resources/iOS/build.xcconfig ================================================ // You can add custom settings here // for example you can uncomment the following line to force distribution code signing // CODE_SIGN_IDENTITY = iPhone Distribution // To build for device with XCode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html // DEVELOPMENT_TEAM = YOUR_TEAM_ID; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage; ================================================ FILE: app/app.component.ts ================================================ import { Component } from "@angular/core"; @Component({ selector: "gr-main", template: "" }) export class AppComponent { } ================================================ FILE: app/app.css ================================================ @import url("./platform.css"); Page { font-size: 15; background-color: black; } ActionBar { background-color: black; color: white; } TextField { padding: 10; font-size: 13; } .line-through { text-decoration: line-through; } ================================================ FILE: app/app.module.ngfactory.d.ts ================================================ export const AppModuleNgFactory: any; ================================================ FILE: app/app.module.ts ================================================ import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { authProviders, appRoutes } from "./app.routing"; import { AppComponent } from "./app.component"; import { setStatusBarColors, BackendService, LoginService } from "./shared"; import { LoginModule } from "./login/login.module"; import { GroceriesModule } from "./groceries/groceries.module"; setStatusBarColors(); @NgModule({ providers: [ BackendService, LoginService, authProviders ], imports: [ NativeScriptModule, NativeScriptHttpClientModule, NativeScriptRouterModule, NativeScriptRouterModule.forRoot(appRoutes), LoginModule, GroceriesModule, ], declarations: [ AppComponent, ], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { } ================================================ FILE: app/app.routing.ts ================================================ import { AuthGuard } from "./auth-guard.service"; export const authProviders = [ AuthGuard ]; export const appRoutes = [ { path: "", redirectTo: "/groceries", pathMatch: "full" } ]; ================================================ FILE: app/auth-guard.service.ts ================================================ import { Injectable } from "@angular/core"; import { Router, CanActivate } from "@angular/router"; import { BackendService } from "./shared/backend.service"; @Injectable() export class AuthGuard implements CanActivate { constructor(private router: Router) { } canActivate() { if (BackendService.isLoggedIn()) { return true; } else { this.router.navigate(["/login"]); return false; } } } ================================================ FILE: app/groceries/groceries-common.css ================================================ .background { background-image: url("res://bg_inner"); background-repeat: no-repeat; background-position: center; background-size: cover; } .action-bar-custom { color: white; margin-top: 26; margin-bottom: 16; } .action-bar-custom Label { font-size: 21; font-weight: bold; } .action-bar-custom GridLayout { height: 40; padding-left: 15; padding-right: 15; } .action-bar-custom GridLayout Image { vertical-align: center; } .add-bar { background-color: #CB1D00; padding-left: 16; padding-right: 16; height: 50; } .add-bar-image-container { height: 50; vertical-align: center; margin-left: -15; padding-left: 15; padding-right: 13; } .add-bar Image { height: 20; } TextField { color: white; placeholder-color: white; background-color: transparent; font-size: 15; border-width: 0; padding: 0; margin-left: 1; } .add-bar-recent-label { vertical-align: center; color: #311217; } .add-bar-recent-container { height: 50; padding-left: 10; padding-right: 10; margin-right: -10; vertical-align: center; } .add-bar-recent-toggle { color: #311217; } ActivityIndicator { horizontal-align: center; vertical-align: center; } ================================================ FILE: app/groceries/groceries.component.android.css ================================================ .add-bar-recent-toggle { text-transform: uppercase; } ================================================ FILE: app/groceries/groceries.component.html ================================================ ================================================ FILE: app/groceries/groceries.component.ios.css ================================================ .action-bar-custom { margin-top: 12; } ================================================ FILE: app/groceries/groceries.component.ts ================================================ import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; import { Router } from "@angular/router"; import { action } from "tns-core-modules/ui/dialogs"; import { Page } from "tns-core-modules/ui/page"; import { TextField } from "tns-core-modules/ui/text-field"; import * as SocialShare from "nativescript-social-share"; import { GroceryService } from "./shared"; import { LoginService, alert } from "../shared"; @Component({ selector: "gr-groceries", moduleId: module.id, templateUrl: "./groceries.component.html", styleUrls: ["./groceries-common.css", "./groceries.component.css"], providers: [GroceryService] }) export class GroceriesComponent implements OnInit { grocery: string = ""; isShowingRecent = false; isLoading = false; @ViewChild("groceryTextField", { static: false }) groceryTextField: ElementRef; constructor(private router: Router, private store: GroceryService, private loginService: LoginService, private page: Page) {} ngOnInit() { this.page.actionBarHidden = true; } // Prevent the first textfield from receiving focus on Android // See http://stackoverflow.com/questions/5056734/android-force-edittext-to-remove-focus handleAndroidFocus(textField, container) { if (container.android) { container.android.setFocusableInTouchMode(true); container.android.setFocusable(true); textField.android.clearFocus(); } } showActivityIndicator() { this.isLoading = true; } hideActivityIndicator() { this.isLoading = false; } add(target: string) { // If showing recent groceries the add button should do nothing. if (this.isShowingRecent) { return; } let textField = this.groceryTextField.nativeElement; if (this.grocery.trim() === "") { // If the user clicked the add button, and the textfield is empty, // focus the text field and return. if (target === "button") { textField.focus(); } else { // If the user clicked return with an empty text field show an error. alert("Enter a grocery item"); } return; } // Dismiss the keyboard // TODO: Is it better UX to dismiss the keyboard, or leave it up so the // user can continue to add more groceries? textField.dismissSoftInput(); this.showActivityIndicator(); this.store.add(this.grocery) .subscribe( () => { this.grocery = ""; this.hideActivityIndicator(); }, () => { alert("An error occurred while adding an item to your list."); this.hideActivityIndicator(); } ); } toggleRecent() { this.isShowingRecent = !this.isShowingRecent; } showMenu() { action({ message: "What would you like to do?", actions: ["Share", "Log Off"], cancelButtonText: "Cancel" }).then((result) => { if (result === "Share") { this.share(); } else if (result === "Log Off") { this.logoff(); } }); } share() { let items = this.store.items.value; let list = []; for (let i = 0, size = items.length; i < size ; i++) { list.push(items[i].name); } SocialShare.shareText(list.join(", ").trim()); } logoff() { this.loginService.logoff(); this.router.navigate(["/login"]); } } ================================================ FILE: app/groceries/groceries.module.ts ================================================ import { NativeScriptCommonModule } from "nativescript-angular/common"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { groceriesRouting } from "./groceries.routing"; import { GroceriesComponent } from "./groceries.component"; import { GroceryListComponent } from "./grocery-list/grocery-list.component"; import { ItemStatusPipe } from "./grocery-list/item-status.pipe"; @NgModule({ imports: [ NativeScriptFormsModule, NativeScriptCommonModule, groceriesRouting, ], declarations: [ GroceriesComponent, GroceryListComponent, ItemStatusPipe ], schemas: [NO_ERRORS_SCHEMA] }) export class GroceriesModule {} ================================================ FILE: app/groceries/groceries.routing.ts ================================================ import { ModuleWithProviders } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { GroceriesComponent } from "./groceries.component"; import { AuthGuard } from "../auth-guard.service"; const groceriesRoutes: Routes = [ { path: "groceries", component: GroceriesComponent, canActivate: [AuthGuard] }, ]; export const groceriesRouting: ModuleWithProviders = RouterModule.forChild(groceriesRoutes); ================================================ FILE: app/groceries/grocery-list/grocery-list.component.css ================================================ ListView { background-color: transparent; opacity: 0; } .visible { animation-name: show; animation-duration: 1s; animation-fill-mode: forwards; } @keyframes show { from { opacity: 0; } to { opacity: 1; } } .container { background-color: white; margin-top: 1; } .tap-target { padding-top: 13; padding-bottom: 13; padding-left: 16; } .tap-target Label { min-width: 200; } .check-box { margin-right: 10; height: 20; } .delete-container { padding: 10 15; vertical-align: middle; } .delete-container StackLayout { padding: 5; } .delete-container Image { height: 20; } ================================================ FILE: app/groceries/grocery-list/grocery-list.component.html ================================================ ================================================ FILE: app/groceries/grocery-list/grocery-list.component.ts ================================================ import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, AfterViewInit } from "@angular/core"; import { Grocery, GroceryService } from "../shared"; import { alert } from "../../shared"; declare var UIColor: any; @Component({ selector: "gr-grocery-list", moduleId: module.id, templateUrl: "./grocery-list.component.html", styleUrls: ["./grocery-list.component.css"], changeDetection: ChangeDetectionStrategy.OnPush }) export class GroceryListComponent implements AfterViewInit { @Input() showDeleted: boolean; @Input() row; @Output() loading = new EventEmitter(); @Output() loaded = new EventEmitter(); public store: GroceryService; listLoaded = false; constructor(store: GroceryService) { this.store = store; } ngAfterViewInit() { this.load(); } load() { this.loading.next(""); this.store.load() .subscribe( () => { this.loaded.next(""); this.listLoaded = true; }, () => { alert("An error occurred loading your grocery list."); } ); } // The following trick makes the background color of each cell // in the UITableView transparent as it’s created. makeBackgroundTransparent(args) { let cell = args.ios; if (cell) { // support XCode 8 cell.backgroundColor = UIColor.clearColor; } } imageSource(grocery) { if (grocery.deleted) { return "res://add"; } return grocery.done ? "res://checked" : "res://unchecked"; } toggleDone(grocery: Grocery) { if (grocery.deleted) { this.store.unsetDeleteFlag(grocery) .subscribe( () => { }, () => { alert("An error occurred managing your grocery list."); } ); } else { this.store.toggleDoneFlag(grocery) .subscribe( () => { }, () => { alert("An error occurred managing your grocery list."); } ); } } delete(grocery: Grocery) { this.loading.next(""); let successHandler = () => this.loaded.next(""); let errorHandler = () => { alert("An error occurred while deleting an item from your list."); this.loaded.next(""); }; if (grocery.deleted) { this.store.permanentlyDelete(grocery) .subscribe(successHandler, errorHandler); } else { this.store.setDeleteFlag(grocery) .subscribe(successHandler, errorHandler); } } } ================================================ FILE: app/groceries/grocery-list/item-status.pipe.ts ================================================ import { Pipe, PipeTransform } from "@angular/core"; import { Grocery } from "../shared"; @Pipe({ name: "itemStatus" }) export class ItemStatusPipe implements PipeTransform { value: Array = []; transform(items: Array, deleted: boolean) { if (items instanceof Array) { this.value = items.filter((grocery: Grocery) => { return grocery.deleted === deleted; }); } return this.value; } } ================================================ FILE: app/groceries/shared/grocery.model.ts ================================================ export class Grocery { constructor( public id: string, public name: string, public done: boolean, public deleted: boolean ) {} } ================================================ FILE: app/groceries/shared/grocery.service.ts ================================================ import { Injectable, NgZone } from "@angular/core"; import { HttpClient, HttpHeaders, HttpErrorResponse, } from "@angular/common/http"; import { BehaviorSubject, throwError } from "rxjs"; import { map, catchError } from "rxjs/operators"; import { BackendService } from "../../shared"; import { Grocery } from "./grocery.model"; @Injectable() export class GroceryService { items: BehaviorSubject> = new BehaviorSubject([]); private allItems: Array = []; baseUrl = BackendService.baseUrl + "appdata/" + BackendService.appKey + "/Groceries"; constructor(private http: HttpClient, private zone: NgZone) { } load() { return this.http.get(this.baseUrl, { headers: this.getCommonHeaders() }) .pipe( map((data: any[]) => { this.allItems = data .sort((a, b) => { return a._kmd.lmt > b._kmd.lmt ? -1 : 1; }) .map( grocery => new Grocery( grocery._id, grocery.Name, grocery.Done || false, grocery.Deleted || false ) ); this.publishUpdates(); }), catchError(this.handleErrors) ); } add(name: string) { return this.http.post( this.baseUrl, JSON.stringify({ Name: name }), { headers: this.getCommonHeaders() } ) .pipe( map((data: any) => { this.allItems.unshift(new Grocery(data._id, name, false, false)); this.publishUpdates(); }), catchError(this.handleErrors) ); } setDeleteFlag(item: Grocery) { item.deleted = true; return this.put(item) .pipe( map(data => { item.done = false; this.publishUpdates(); }) ); } unsetDeleteFlag(item: Grocery) { item.deleted = false; return this.put(item) .pipe( map(data => { item.done = false; this.publishUpdates(); }) ); } toggleDoneFlag(item: Grocery) { item.done = !item.done; this.publishUpdates(); return this.put(item); } permanentlyDelete(item: Grocery) { return this.http .delete( this.baseUrl + "/" + item.id, { headers: this.getCommonHeaders() } ) .pipe( map(data => { let index = this.allItems.indexOf(item); this.allItems.splice(index, 1); this.publishUpdates(); }), catchError(this.handleErrors) ); } private put(grocery: Grocery) { return this.http.put( this.baseUrl + "/" + grocery.id, JSON.stringify({ Name: grocery.name, Done: grocery.done, Deleted: grocery.deleted }), { headers: this.getCommonHeaders() } ) .pipe(catchError(this.handleErrors)); } private publishUpdates() { // Make sure all updates are published inside NgZone so that change detection is triggered if needed this.zone.run(() => { // must emit a *new* value (immutability!) this.items.next([...this.allItems]); }); } private getCommonHeaders() { return new HttpHeaders({ "Content-Type": "application/json", "Authorization": "Kinvey " + BackendService.token, }); } private handleErrors(error: HttpErrorResponse) { console.log(error); return throwError(error); } } ================================================ FILE: app/groceries/shared/index.ts ================================================ export { GroceryService } from "./grocery.service"; export { Grocery } from "./grocery.model"; ================================================ FILE: app/login/login-common.css ================================================ /* Hide a bunch of things to setup the initial animations */ .form-controls, .sign-up-stack { opacity: 0; } .background { background-image: url("res://bg_login"); background-repeat: no-repeat; background-size: cover; background-position: center; } /* TODO: Assigning explicit heights and applying this margin shouldn’t be necessary. */ .initial-container { margin-top: 170; } .initial-logo { horizontal-align: center; margin-bottom: 10; } .initial-label { color: white; horizontal-align: center; margin-bottom: 80; } .initial-button { background-color: white; color: #CB1D00; height: 45; width: 275; vertical-align: center; } .initial-button-label { horizontal-align: center; font-weight: bold; } .main-container { visibility: collapse; opacity: 0; margin-left: 30; margin-right: 30; background-color: white; } .main-label { horizontal-align: center; color: black; } Image { margin-top: 5; margin-bottom: 20; } Button, TextField { margin-left: 16; margin-right: 16; margin-bottom: 10; } TextField { color: black; placeholder-color: #ACA6A7; } TextField.light { color: #C4AFB4; placeholder-color: #C4AFB4; } .submit-button { background-color: #CB1D00; color: white; margin-top: 20; } .forgot-password-label { font-size: 13; margin-left: 20; margin-bottom: 45; color: black; } .sign-up-stack { background-color: #311217; } .sign-up-stack Label { color: white; text-align: center; font-size: 15; } .logo-container { visibility: collapse; horizontal-align: center; opacity: 0; } ================================================ FILE: app/login/login.component.android.css ================================================ .main-container { height: 360; width: 275; } .initial-label { font-size: 32; letter-spacing: 0.35; } .main-label { font-size: 28; margin-top: 32; margin-bottom: 32; letter-spacing: 0.3; } TextField { margin-bottom: 10; } .submit-button { margin-top: 15; } .sign-up-stack Label { padding-top: 5; height: 200; text-transform: uppercase; } .forgot-password-label { font-size: 13; text-transform: uppercase; } .logo-container Image { top: 90; } ================================================ FILE: app/login/login.component.html ================================================ ================================================ FILE: app/login/login.component.ios.css ================================================ .main-container { height: 425; width: 300; } .initial-label { font-size: 40; letter-spacing: 0.2; } .main-label { color: #311217; font-size: 32; margin-top: 45; margin-bottom: 52; letter-spacing: 0.2; } TextField { border-width: 1; border-color: #6E595C; margin-bottom: 20; } .submit-button { height: 40; margin-top: 15; } .sign-up-stack Label { height: 48; } /* A height of zero ensures that the AbsoluteLayout container doesn’t steal taps from the various button and text field controls that sit behind it. */ .logo-container { height: 0; } .logo-container Image { top: -250; } ================================================ FILE: app/login/login.component.ts ================================================ import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; import { Router } from "@angular/router"; import { Color } from "tns-core-modules/color"; import { connectionType, getConnectionType } from "tns-core-modules/connectivity"; import { Animation } from "tns-core-modules/ui/animation"; import { View } from "tns-core-modules/ui/core/view"; import { prompt } from "tns-core-modules/ui/dialogs"; import { Page } from "tns-core-modules/ui/page"; import { alert, LoginService, User } from "../shared"; @Component({ selector: "gr-login", moduleId: module.id, templateUrl: "./login.component.html", styleUrls: ["./login-common.css", "./login.component.css"], }) export class LoginComponent implements OnInit { user: User; isLoggingIn = true; isAuthenticating = false; @ViewChild("initialContainer", { static: false }) initialContainer: ElementRef; @ViewChild("mainContainer", { static: false }) mainContainer: ElementRef; @ViewChild("logoContainer", { static: false }) logoContainer: ElementRef; @ViewChild("formControls", { static: false }) formControls: ElementRef; @ViewChild("signUpStack", { static: false }) signUpStack: ElementRef; @ViewChild("password", { static: false }) password: ElementRef; constructor(private router: Router, private userService: LoginService, private page: Page) { this.user = new User(); // this.page.className = "login-page"; } ngOnInit() { this.page.actionBarHidden = true; } focusPassword() { this.password.nativeElement.focus(); } startBackgroundAnimation(background) { background.animate({ scale: { x: 1.0, y: 1.0 }, duration: 10000 }); } submit() { if (!this.user.isValidEmail()) { alert("Enter a valid email address."); return; } this.isAuthenticating = true; if (this.isLoggingIn) { this.login(); } else { this.signUp(); } } login() { if (getConnectionType() === connectionType.none) { alert("Groceries requires an internet connection to log in."); return; } this.userService.login(this.user) .subscribe( () => { this.isAuthenticating = false; this.router.navigate(["/"]); }, (error) => { alert("Unfortunately we could not find your account."); this.isAuthenticating = false; } ); } signUp() { if (getConnectionType() === connectionType.none) { alert("Groceries requires an internet connection to register."); return; } this.userService.register(this.user) .subscribe( () => { alert("Your account was successfully created."); this.isAuthenticating = false; this.toggleDisplay(); }, (errorDetails) => { if (errorDetails.error && errorDetails.error.error === "UserAlreadyExists") { alert("This email address is already in use."); } else { alert("Unfortunately we were unable to create your account."); } this.isAuthenticating = false; } ); } forgotPassword() { prompt({ title: "Forgot Password", message: "Enter the email address you used to register for Groceries to reset your password.", defaultText: "", okButtonText: "Ok", cancelButtonText: "Cancel" }).then((data) => { if (data.result) { this.userService.resetPassword(data.text.trim()) .subscribe(() => { alert("Your password was successfully reset. Please check your email for instructions on choosing a new password."); }, () => { alert("Unfortunately, an error occurred resetting your password."); }); } }); } toggleDisplay() { this.isLoggingIn = !this.isLoggingIn; let mainContainer = this.mainContainer.nativeElement; mainContainer.animate({ backgroundColor: this.isLoggingIn ? new Color("white") : new Color("#301217"), duration: 200 }); } showMainContent() { let initialContainer = this.initialContainer.nativeElement; let mainContainer = this.mainContainer.nativeElement; let logoContainer = this.logoContainer.nativeElement; let formControls = this.formControls.nativeElement; let signUpStack = this.signUpStack.nativeElement; let animations = []; // Fade out the initial content over one half second initialContainer.animate({ opacity: 0, duration: 500 }).then(function() { // After the animation completes, hide the initial container and // show the main container and logo. The main container and logo will // not immediately appear because their opacity is set to 0 in CSS. initialContainer.style.visibility = "collapse"; mainContainer.style.visibility = "visible"; logoContainer.style.visibility = "visible"; // Fade in the main container and logo over one half second. animations.push({ target: mainContainer, opacity: 1, duration: 500 }); animations.push({ target: logoContainer, opacity: 1, duration: 500 }); // Slide up the form controls and sign up container. animations.push({ target: signUpStack, translate: { x: 0, y: 0 }, opacity: 1, delay: 500, duration: 150 }); animations.push({ target: formControls, translate: { x: 0, y: 0 }, opacity: 1, delay: 650, duration: 150 }); // Kick off the animation queue new Animation(animations, false).play(); }); } } ================================================ FILE: app/login/login.module.ts ================================================ import { NativeScriptCommonModule } from "nativescript-angular/common"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { loginRouting } from "./login.routing"; import { LoginComponent } from "./login.component"; @NgModule({ imports: [ NativeScriptFormsModule, NativeScriptCommonModule, loginRouting, ], declarations: [ LoginComponent ], schemas: [NO_ERRORS_SCHEMA] }) export class LoginModule { } ================================================ FILE: app/login/login.routing.ts ================================================ import { ModuleWithProviders } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { LoginComponent } from "./login.component"; const loginRoutes: Routes = [ { path: "login", component: LoginComponent }, ]; export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes); ================================================ FILE: app/main.aot.ts ================================================ // this import should be first in order to load some required settings (like globals and reflect-metadata) import { platformNativeScript } from "nativescript-angular/platform-static"; import { AppModuleNgFactory } from "./app.module.ngfactory"; platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory); ================================================ FILE: app/main.ts ================================================ import { platformNativeScriptDynamic } from "nativescript-angular/platform"; import { AppModule } from "./app.module"; platformNativeScriptDynamic().bootstrapModule(AppModule); ================================================ FILE: app/package.json ================================================ { "android": { "v8Flags": "--expose_gc", "markingMode": "none" }, "main": "main.js" } ================================================ FILE: app/platform.android.css ================================================ ================================================ FILE: app/platform.ios.css ================================================ TextField { border-width: 1; border-color: black; } ================================================ FILE: app/shared/backend.service.ts ================================================ import { Injectable } from "@angular/core"; import { getString, setString } from "tns-core-modules/application-settings"; const tokenKey = "token"; export class BackendService { static baseUrl = "https://baas.kinvey.com/"; static appKey = "kid_HyHoT_REf"; static appUserHeader = "Basic a2lkX0h5SG9UX1JFZjo1MTkxMDJlZWFhMzQ0MzMyODFjN2MyODM3MGQ5OTIzMQ"; static apiUrl = ""; static isLoggedIn(): boolean { return !!getString(tokenKey); } static get token(): string { return getString(tokenKey); } static set token(theToken: string) { setString(tokenKey, theToken); } } ================================================ FILE: app/shared/dialog-util.ts ================================================ import * as dialogsModule from "tns-core-modules/ui/dialogs"; export function alert(message: string) { return dialogsModule.alert({ title: "Groceries", okButtonText: "OK", message: message }); } ================================================ FILE: app/shared/index.ts ================================================ export * from "./backend.service"; export * from "./user.model"; export * from "./login.service"; export * from "./dialog-util"; export * from "./status-bar-util"; ================================================ FILE: app/shared/login.service.ts ================================================ import { Injectable } from "@angular/core"; import { HttpHeaders, HttpClient, HttpErrorResponse } from "@angular/common/http"; import { throwError } from "rxjs"; import { tap, catchError } from "rxjs/operators"; import { User } from "./user.model"; import { BackendService } from "./backend.service"; @Injectable() export class LoginService { constructor(private http: HttpClient) { } register(user: User) { return this.http.post( BackendService.baseUrl + "user/" + BackendService.appKey, JSON.stringify({ username: user.email, email: user.email, password: user.password }), { headers: this.getCommonHeaders() } ) .pipe(catchError(this.handleErrors)); } login(user: User) { return this.http.post( BackendService.baseUrl + "user/" + BackendService.appKey + "/login", JSON.stringify({ username: user.email, password: user.password }), { headers: this.getCommonHeaders() } ) .pipe( tap((data: any) => { BackendService.token = data._kmd.authtoken; }), catchError(this.handleErrors) ); } logoff() { BackendService.token = ""; } resetPassword(email) { return this.http.post( BackendService.baseUrl + "rpc/" + BackendService.appKey + "/" + email + "/user-password-reset-initiate", {}, { headers: this.getCommonHeaders() } ).pipe(catchError(this.handleErrors)); } private getCommonHeaders() { return new HttpHeaders({ "Content-Type": "application/json", "Authorization": BackendService.appUserHeader, }); } private handleErrors(error: HttpErrorResponse) { console.log(JSON.stringify(error)); return throwError(error); } } ================================================ FILE: app/shared/status-bar-util.ts ================================================ import * as application from "tns-core-modules/application"; import * as platform from "tns-core-modules/platform"; declare var android: any; export function setStatusBarColors() { // Make the Android status bar transparent. // See http://bradmartin.net/2016/03/10/fullscreen-and-navigation-bar-color-in-a-nativescript-android-app/ // for details on the technique used. if (application.android && platform.device.sdkVersion >= "21") { application.android.on("activityStarted", () => { const View = android.view.View; const window = application.android.startActivity.getWindow(); window.setStatusBarColor(0x000000); const decorView = window.getDecorView(); decorView.setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); }); } } ================================================ FILE: app/shared/user.model.ts ================================================ const validator = require("email-validator"); export class User { email: string; password: string; isValidEmail() { return validator.validate(this.email); } } ================================================ FILE: app/tests/shared/user/user.spec.ts ================================================ import "reflect-metadata"; import { User } from "../../../shared"; declare var describe: any; declare var expect: any; declare var it: any; describe("Email validation", function() { let user = new User(); it("Should reject an empty email address", function () { user.email = ""; expect(user.isValidEmail()).toBe(false); }); it("Should reject a malformed email addresses", function() { user.email = "nativescript"; expect(user.isValidEmail()).toBe(false); user.email = "nativescript@"; expect(user.isValidEmail()).toBe(false); user.email = "nativescript@isawesome"; expect(user.isValidEmail()).toBe(false); }); it("Should accept valid email addresses", function() { user.email = "nativescript@isawesome.com"; expect(user.isValidEmail()).toBe(true); }); }); ================================================ FILE: e2e/config/appium.capabilities.json ================================================ { "android19": { "platformName": "Android", "platformVersion": "4.4", "deviceName": "Emulator-Api19-Default", "avd": "Emulator-Api19-Default", "lt": 60000, "appActivity": "com.tns.NativeScriptActivity", "newCommandTimeout": 720, "noReset": true, "fullReset": false, "app": "" }, "android21": { "platformName": "Android", "platformVersion": "5.0", "deviceName": "Emulator-Api21-Default", "avd": "Emulator-Api21-Default", "lt": 60000, "appActivity": "com.tns.NativeScriptActivity", "newCommandTimeout": 720, "noReset": true, "fullReset": false, "app": "" }, "android23": { "platformName": "Android", "platformVersion": "6.0", "deviceName": "Android Emulator", "appiumVersion": "1.8.0", "relaxed-security": true, "noReset": true, "resetKeyboard": true, "app": "" }, "android24": { "platformName": "Android", "platformVersion": "7.0", "deviceName": "Emulator-Api24-Default", "avd": "Emulator-Api24-Default", "lt": 60000, "appActivity": "com.tns.NativeScriptActivity", "newCommandTimeout": 720, "noReset": true, "fullReset": false, "app": "" }, "android25": { "platformName": "Android", "platformVersion": "7.1", "deviceName": "Emulator-Api25-Google", "avd": "Emulator-Api25-Google", "lt": 60000, "appActivity": "com.tns.NativeScriptActivity", "newCommandTimeout": 720, "noReset": true, "fullReset": false, "app": "" }, "android26": { "platformName": "Android", "platformVersion": "8.0", "deviceName": "Emulator-Api26-Google", "avd": "Emulator-Api26-Google", "lt": 60000, "newCommandTimeout": 720, "noReset": true, "fullReset": false, "app": "" }, "sim.iPhone6.iOS100": { "platformName": "iOS", "platformVersion": "10.0", "deviceName": "iPhone 6", "noReset": true, "fullReset": false, "app": "", "density": 2, "offsetPixels": 33 }, "sim.iPhone7": { "platformName": "iOS", "platformVersion": "11.2", "deviceName": "iPhone 7", "noReset": true, "fullReset": false, "app": "" }, "sim.iPhone8": { "platformName": "iOS", "platformVersion": "11.2", "deviceName": "iPhone 8", "noReset": true, "fullReset": false, "app": "" }, "sim.iPhoneX.iOS110": { "platformName": "iOS", "platformVersion": "11.0", "deviceName": "iPhone X", "noReset": true, "fullReset": false, "app": "" }, "android23.local": { "platformName": "Android", "platformVersion": "6.0", "deviceName": "Emulator-Api23-Default", "noReset": true, "appium-version": "1.7.1" } } ================================================ FILE: e2e/config/mocha.opts ================================================ --timeout 1000000 --recursive e2e --exit ================================================ FILE: e2e/groceries.e2e.ts ================================================ import { AppiumDriver, createDriver, SearchOptions } from "nativescript-dev-appium"; import { expect } from "chai"; describe("Groceries", async function () { let driver: AppiumDriver; const loginButtonText = "Login"; const email = "groceries@mailinator.com"; const password = "123"; const fruit = "apple"; const recentButtonText = "Recent"; const doneButtonText = "Done"; const logOffButtonText = "Log Off"; const invalidEmail = "groceries@mailinator"; const invalidEmailWarningText = "valid email"; const okButtonText = "OK"; const cancelButtonText = "Cancel"; const signUpHereButtonText = "Sign up here"; const signUpButtonText = "Sign up"; const backToLoginButtonText = "Back to login"; const forgotPasswordButtonText = "Forgot"; const forgotPasswordFormText = "reset"; const clickOnCrossOrCheckboxBtn = async () => { if (driver.isAndroid) { // First image is the menu, second is the cross button. The rest are pairs checkbox/bin per list item. const allImages = await driver.findElementsByClassName(driver.locators.image); await allImages[2].click(); // Checkbox button } else { await driver.clickPoint(26, 160); // Checkbox button } }; const clickOnBinButton = async () => { if (driver.isAndroid) { // First image is the menu, second is the cross button. The rest are pairs checkbox/bin per list item. const allImages = await driver.findElementsByClassName(driver.locators.image); for (let i = 3; i < allImages.length; i = i + 2) { await allImages[3].click(); // Bin button of the first list item } } else { const allImages = await driver.findElementsByText(fruit); for (let i = 0; i < allImages.length; i++) { await driver.clickPoint(345, 166); // Bin button of the first list item } } }; before(async () => { driver = await createDriver(); driver.defaultWaitTime = 15000; }); after(async () => { if (driver.nsCapabilities.isSauceLab) { driver.sessionId().then(function (sessionId) { console.log("Report: https://saucelabs.com/beta/tests/" + sessionId); }); } await driver.quit(); console.log("Driver quits!"); }); it("should log in", async () => { const loginButton = await driver.findElementByText(loginButtonText, SearchOptions.exact); await loginButton.click(); if (driver.isAndroid) { const allFields = await driver.findElementsByClassName(driver.locators.getElementByName("textfield")); await allFields[0].sendKeys(email); await allFields[1].sendKeys(password); if (driver.nsCapabilities.isSauceLab) { await driver.driver.hideDeviceKeyboard("Done"); } } else { const usernameField = await driver.findElementByClassName(driver.locators.getElementByName("textfield")); await usernameField.sendKeys(email); const passField = await driver.findElementByClassName(driver.locators.getElementByName("securetextfield")); await passField.sendKeys(password); const done = await driver.findElementByText("Done", SearchOptions.contains); await done.click(); } const loginBtn = await driver.findElementByText(loginButtonText, SearchOptions.exact); await loginBtn.click(); const recentButton = await driver.findElementByText(recentButtonText, SearchOptions.exact); expect(recentButton).to.exist; }); it("should add element in the list", async () => { const addField = await driver.findElementByClassName(driver.locators.getElementByName("textfield")); await addField.sendKeys(fruit); const allImages = await driver.findElementsByClassName(driver.locators.image); // First image is the menu, second is the cross adding to the list. await allImages[1].click(); // Cross image button to add the item. const appleItem = await driver.findElementByText(fruit); expect(appleItem).to.exist; }); it("should mark element as Done", async () => { await clickOnCrossOrCheckboxBtn(); const appleItem = await driver.findElementByText(fruit); const isItemDone = await driver.compareElement(appleItem, "itemDone", 0.07); expect(isItemDone).to.be.true; }); it("should delete item from the list", async () => { await clickOnBinButton(); const appleListItemXpath = await driver.elementHelper.getXPathByText(fruit, SearchOptions.exact); const appleItem = await driver.findElementByXPathIfExists(appleListItemXpath, 10000); expect(appleItem).to.be.undefined; }); it("should find deleted item in Recent", async () => { const recentButton = await driver.findElementByText(recentButtonText); await recentButton.click(); const appleItem = await driver.findElementByText(fruit); expect(appleItem).to.exist; }); it("should return back an item from the Recent list", async () => { await clickOnCrossOrCheckboxBtn(); const doneButton = await driver.findElementByText(doneButtonText); await doneButton.click(); const appleItem = await driver.findElementByText(fruit); expect(appleItem).to.exist; }); it("should delete item from the Groceries list and remove it from Recent", async () => { await clickOnBinButton(); const recentButton = await driver.findElementByText(recentButtonText); await recentButton.click(); await clickOnBinButton(); const appleListItemXpath = await driver.elementHelper.getXPathByText(fruit, SearchOptions.contains); const appleItem = await driver.findElementByXPathIfExists(appleListItemXpath, 10000); expect(appleItem).to.be.undefined; }); it("should log off", async () => { // First image is the menu, second is the clock/cross button. The rest are pairs checkbox/bin per list item. await driver.sleep(2000); const allImages = await driver.findElementsByClassName(driver.locators.image); await allImages[0].click(); // Menu button const logOffButton = await driver.findElementByText(logOffButtonText); await logOffButton.click(); const loginButton = await driver.findElementByText(loginButtonText, SearchOptions.contains); expect(loginButton).to.exist; }); it("should warn for invalid email", async () => { const loginButton = await driver.findElementByText(loginButtonText, SearchOptions.exact); await loginButton.click(); const usernameField = await driver.findElementByClassName(driver.locators.getElementByName("textfield")); await usernameField.sendKeys(invalidEmail); if (driver.isAndroid) { if (driver.nsCapabilities.isSauceLab) { await driver.driver.hideDeviceKeyboard("Done"); } } else { const done = await driver.findElementByText("Done", SearchOptions.contains); await done.click(); } const loginBtn = await driver.findElementByText(loginButtonText, SearchOptions.exact); await loginBtn.click(); const invalidEmailWarning = await driver.findElementByText(invalidEmailWarningText, SearchOptions.contains); expect(invalidEmailWarning).to.exist; const okButton = await driver.findElementByText(okButtonText); await okButton.click(); }); it("should open sign up form", async () => { const signUpHereButton = await driver.findElementByText(signUpHereButtonText); await signUpHereButton.click(); const signUpButton = await driver.findElementByText(signUpButtonText, SearchOptions.exact); expect(signUpButton).to.exist; const backToLoginButton = await driver.findElementByText(backToLoginButtonText); await backToLoginButton.click(); }); it("should open Forgot password form", async () => { const forgotPasswordButton = await driver.findElementByText(forgotPasswordButtonText, SearchOptions.contains); await forgotPasswordButton.click(); const forgotPasswordForm = await driver.findElementByText(forgotPasswordFormText, SearchOptions.contains); expect(forgotPasswordForm).to.exist; const cancelButton = await driver.findElementByText(cancelButtonText); await cancelButton.click(); }); }); ================================================ FILE: e2e/setup.ts ================================================ import { startServer, stopServer } from "nativescript-dev-appium"; before("start server", async () => { await startServer(); }); after("stop server", async () => { await stopServer(); }); ================================================ FILE: e2e/tsconfig.json ================================================ { "compilerOptions": { "module": "commonjs", "target": "es6", "experimentalDecorators": true, "emitDecoratorMetadata": true, "importHelpers": false, "types": [ "node", "mocha", "chai" ], "lib": [ "es2015", "dom" ] } } ================================================ FILE: karma.conf.js ================================================ module.exports = function (config) { const options = { // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: ['app/tests/**/*.*'], // list of files to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: [], customLaunchers: { android: { base: 'NS', platform: 'android' }, ios: { base: 'NS', platform: 'ios' }, ios_simulator: { base: 'NS', platform: 'ios', arguments: ['--emulator'] } }, // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false }; setWebpackPreprocessor(config, options); setWebpack(config, options); config.set(options); } function setWebpackPreprocessor(config, options) { if (config && config.bundle) { if (!options.preprocessors) { options.preprocessors = {}; } options.files.forEach(file => { if (!options.preprocessors[file]) { options.preprocessors[file] = []; } options.preprocessors[file].push('webpack'); }); } } function setWebpack(config, options) { if (config && config.bundle) { const env = {}; env[config.platform] = true; env.sourceMap = config.debugBrk; options.webpack = require('./webpack.config')(env); delete options.webpack.entry; delete options.webpack.output.libraryTarget; const invalidPluginsForUnitTesting = ["GenerateBundleStarterPlugin", "GenerateNativeScriptEntryPointsPlugin"]; options.webpack.plugins = options.webpack.plugins.filter(p => !invalidPluginsForUnitTesting.includes(p.constructor.name)); } } ================================================ FILE: package.json ================================================ { "name": "sample-groceries", "version": "1.0.0", "description": "A NativeScript-built iOS and Android app for managing grocery lists", "repository": { "type": "git", "url": "https://github.com/nativescript/sample-Groceries.git" }, "keywords": [ "NativeScript" ], "author": "TJ VanToll (https://www.tjvantoll.com/)", "license": "MIT", "bugs": { "url": "https://github.com/nativescript/sample-Groceries/issues" }, "homepage": "https://github.com/nativescript/sample-Groceries/groceries", "nativescript": { "id": "org.nativescript.groceries", "tns-android": { "version": "6.0.1" }, "tns-ios": { "version": "6.0.2" } }, "scripts": { "tslint": "tslint -p tsconfig.json", "ns-bundle": "ns-bundle", "start-android-bundle": "npm run ns-bundle --android --run-app", "start-ios-bundle": "npm run ns-bundle --ios --run-app", "build-android-bundle": "npm run ns-bundle --android --build-app", "build-ios-bundle": "npm run ns-bundle --ios --build-app", "publish-ios-bundle": "npm run ns-bundle --ios --publish-app", "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install", "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts", "watch-tests": "tsc -p e2e --watch", "update-app-ng-deps": "update-app-ng-deps", "ns-verify-bundle": "ns-verify-bundle", "update-ns-webpack": "update-ns-webpack" }, "dependencies": { "@angular/common": "~8.2.0", "@angular/compiler": "~8.2.0", "@angular/core": "~8.2.0", "@angular/forms": "~8.2.0", "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", "email-validator": "^2.0.4", "nativescript-angular": "~8.2.0", "nativescript-iqkeyboardmanager": "~1.3.0", "nativescript-social-share": "~1.5.1", "nativescript-unit-test-runner": "0.7.0", "reflect-metadata": "~0.1.8", "rxjs": "^6.4.0", "tns-core-modules": "~6.0.1", "zone.js": "^0.9.1" }, "devDependencies": { "@angular/compiler-cli": "8.2.0", "@ngtools/webpack": "8.2.0", "@types/chai": "~4.1.7", "@types/mocha": "~5.2.5", "@types/node": "~10.12.18", "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "codelyzer": "^4.5.0", "filewalker": "^0.1.3", "jasmine-core": "^3.3.0", "karma": "4.1.0", "karma-jasmine": "2.0.1", "karma-nativescript-launcher": "^0.4.0", "karma-webpack": "3.0.5", "lazy": "1.0.11", "mocha": "~5.2.0", "mocha-junit-reporter": "~1.18.0", "mocha-multi": "~1.0.1", "nativescript-dev-appium": "next", "nativescript-dev-webpack": "~1.1.0", "tslint": "^5.4.2", "typescript": "~3.5.3" } } ================================================ FILE: references.d.ts ================================================ /// Needed for autocompletion and compilation. ================================================ FILE: tsconfig.esm.json ================================================ { "extends": "./tsconfig", "compilerOptions": { "module": "es2015", "moduleResolution": "node" } } ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "module": "commonjs", "target": "es5", "experimentalDecorators": true, "emitDecoratorMetadata": true, "noEmitHelpers": true, "noEmitOnError": true, "lib": [ "dom", "es6", "es2015.iterable" ], "baseUrl": ".", "paths": { "*": [ "./node_modules/tns-core-modules/*", "./node_modules/*" ], "~/*": [ "app/*" ] } }, "exclude": [ "node_modules", "platforms", "e2e" ] } ================================================ FILE: tsconfig.tns.json ================================================ { "extends": "./tsconfig", "compilerOptions": { "module": "es2015", "moduleResolution": "node" } } ================================================ FILE: tslint.json ================================================ { "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "class-name": true, "comment-format": [ true, "check-space" ], "indent": [ true, "spaces" ], "no-duplicate-variable": true, "no-eval": true, "no-internal-module": true, "no-trailing-whitespace": true, "no-var-keyword": true, "one-line": [ true, "check-open-brace", "check-whitespace" ], "quotemark": [ true, "double" ], "semicolon": [ true, "always" ], "triple-equals": [ true, "allow-null-check" ], "typedef-whitespace": [ true, { "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" } ], "variable-name": [ true, "ban-keywords" ], "whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type" ], "directive-selector": [true, "attribute", "gr", "camelCase"], "component-selector": [true, "element", "gr", "kebab-case"], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, "no-attribute-parameter-decorator": true, "no-input-rename": true, "no-output-rename": true, "no-forward-ref" :true, "use-life-cycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true, "import-destructuring-spacing": true } } ================================================ FILE: webpack.config.js ================================================ const { join, relative, resolve, sep, dirname } = require("path"); const webpack = require("webpack"); const nsWebpack = require("nativescript-dev-webpack"); const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap"); const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader"); const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng"); const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); const TerserPlugin = require("terser-webpack-plugin"); const { getAngularCompilerPlugin } = require("nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin"); const hashSalt = Date.now().toString(); module.exports = env => { // Add your custom Activities, Services and other Android app components here. const appComponents = [ "tns-core-modules/ui/frame", "tns-core-modules/ui/frame/activity", ]; const platform = env && (env.android && "android" || env.ios && "ios"); if (!platform) { throw new Error("You need to provide a target platform!"); } const AngularCompilerPlugin = getAngularCompilerPlugin(platform); const projectRoot = __dirname; // Default destination inside platforms//... const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); const { // The 'appPath' and 'appResourcesPath' values are fetched from // the nsconfig.json configuration file. appPath = "src", appResourcesPath = "App_Resources", // You can provide the following flags when running 'tns run android|ios' aot, // --env.aot snapshot, // --env.snapshot, production, // --env.production uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap hiddenSourceMap, // --env.hiddenSourceMap hmr, // --env.hmr, unitTesting, // --env.unitTesting verbose, // --env.verbose } = env; const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); const appFullPath = resolve(projectRoot, appPath); const appResourcesFullPath = resolve(projectRoot, appResourcesPath); const tsConfigName = "tsconfig.tns.json"; const entryModule = `${nsWebpack.getEntryModule(appFullPath, platform)}.ts`; const entryPath = `.${sep}${entryModule}`; const entries = { bundle: entryPath }; const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1); if (platform === "ios" && !areCoreModulesExternal) { entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules"; }; const ngCompilerTransformers = []; const additionalLazyModuleResources = []; if (aot) { ngCompilerTransformers.push(nsReplaceBootstrap); } if (hmr) { ngCompilerTransformers.push(nsSupportHmrNg); } // when "@angular/core" is external, it's not included in the bundles. In this way, it will be used // directly from node_modules and the Angular modules loader won't be able to resolve the lazy routes // fixes https://github.com/NativeScript/nativescript-cli/issues/4024 if (env.externals && env.externals.indexOf("@angular/core") > -1) { const appModuleRelativePath = getMainModulePath(resolve(appFullPath, entryModule), tsConfigName); if (appModuleRelativePath) { const appModuleFolderPath = dirname(resolve(appFullPath, appModuleRelativePath)); // include the lazy loader inside app module ngCompilerTransformers.push(nsReplaceLazyLoader); // include the new lazy loader path in the allowed ones additionalLazyModuleResources.push(appModuleFolderPath); } } const ngCompilerPlugin = new AngularCompilerPlugin({ hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]), platformTransformers: ngCompilerTransformers.map(t => t(() => ngCompilerPlugin, resolve(appFullPath, entryModule), projectRoot)), mainPath: join(appFullPath, entryModule), tsConfigPath: join(__dirname, tsConfigName), skipCodeGeneration: !aot, sourceMap: !!isAnySourceMapEnabled, additionalLazyModuleResources: additionalLazyModuleResources }); let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist); const itemsToClean = [`${dist}/**/*`]; if (platform === "android") { itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`); itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`); } nsWebpack.processAppComponents(appComponents, platform); const config = { mode: production ? "production" : "development", context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files "**/.*", ] }, target: nativescriptTarget, entry: entries, output: { pathinfo: false, path: dist, sourceMapFilename, libraryTarget: "commonjs2", filename: "[name].js", globalObject: "global", hashSalt }, resolve: { extensions: [".ts", ".js", ".scss", ".css"], // Resolve {N} system modules from tns-core-modules modules: [ resolve(__dirname, "node_modules/tns-core-modules"), resolve(__dirname, "node_modules"), "node_modules/tns-core-modules", "node_modules", ], alias: { '~': appFullPath }, symlinks: true }, resolveLoader: { symlinks: false }, node: { // Disable node shims that conflict with NativeScript "http": false, "timers": false, "setImmediate": false, "fs": "empty", "__dirname": false, }, devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"), optimization: { runtimeChunk: "single", splitChunks: { cacheGroups: { vendor: { name: "vendor", chunks: "all", test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some(comp => comp === moduleName); }, enforce: true, }, } }, minimize: !!uglify, minimizer: [ new TerserPlugin({ parallel: true, cache: true, sourceMap: isAnySourceMapEnabled, terserOptions: { output: { comments: false, semicolons: !isAnySourceMapEnabled }, compress: { // The Android SBG has problems parsing the output // when these options are enabled 'collapse_vars': platform !== "android", sequences: platform !== "android", } } }) ], }, module: { rules: [ { include: join(appFullPath, entryPath), use: [ // Require all Android app components platform === "android" && { loader: "nativescript-dev-webpack/android-app-components-loader", options: { modules: appComponents } }, { loader: "nativescript-dev-webpack/bundle-config-loader", options: { angular: true, loadCss: !snapshot, // load the application css if in debug mode unitTesting, appFullPath, projectRoot, ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform) } }, ].filter(loader => !!loader) }, { test: /\.html$|\.xml$/, use: "raw-loader" }, // tns-core-modules reads the app.css and its imports using css-loader { test: /[\/|\\]app\.css$/, use: [ "nativescript-dev-webpack/style-hot-loader", { loader: "css-loader", options: { url: false } } ] }, { test: /[\/|\\]app\.scss$/, use: [ "nativescript-dev-webpack/style-hot-loader", { loader: "css-loader", options: { url: false } }, "sass-loader" ] }, // Angular components reference css files and their imports using raw-loader { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" }, { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [ "nativescript-dev-webpack/moduleid-compat-loader", "nativescript-dev-webpack/lazy-ngmodule-hot-loader", "@ngtools/webpack", ] }, // Mark files inside `@angular/core` as using SystemJS style dynamic imports. // Removing this will cause deprecation warnings to appear. { test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, parser: { system: true }, }, ], }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ "global.TNS_WEBPACK": "true", "process": "global.process", }), // Remove all files from the out dir. new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }), // Copy assets to out dir. Add your own globs as needed. new CopyWebpackPlugin([ { from: { glob: "fonts/**" } }, { from: { glob: "**/*.jpg" } }, { from: { glob: "**/*.png" } }, ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), ngCompilerPlugin, // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin(), ], }; if (report) { // Generate report files for bundles content config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: false, generateStatsFile: true, reportFilename: resolve(projectRoot, "report", `report.html`), statsFilename: resolve(projectRoot, "report", `stats.json`), })); } if (snapshot) { config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ chunk: "vendor", angular: true, requireModules: [ "reflect-metadata", "@angular/platform-browser", "@angular/core", "@angular/common", "@angular/router", "nativescript-angular/platform-static", "nativescript-angular/router", ], projectRoot, webpackConfig: config, })); } if (hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } return config; };