├── .gitignore ├── README.md ├── cleanWeather-vue ├── 1.md ├── 2.md ├── 3.md ├── 4.md ├── images │ ├── add-folder-1.png │ ├── android.png │ ├── app-store.png │ ├── completed-app.png │ ├── design.gif │ ├── generate-qr-code.png │ ├── google-play.png │ ├── nativescript-vue-logo.jpg │ ├── npm-package-2.png │ ├── npm-package-3.png │ ├── npm-resources-1.png │ └── scan-qr-code.png ├── metadata.json └── success.md ├── getting-started-ng ├── 1.md ├── images │ ├── android-1.png │ ├── android-2.png │ ├── android-3.png │ ├── angular-logo.png │ ├── app-store.png │ ├── generate-qr-code.png │ ├── google-play.png │ ├── ios-1.png │ ├── ios-2.png │ ├── ios-3.png │ ├── nativescript-logo.png │ └── scan-qr-code.png ├── metadata.json └── success.md ├── getting-started-vue ├── 01.md ├── 02.md ├── 03.md ├── 04.md ├── 05.md ├── 06.md ├── 07.md ├── 08.md ├── 09.md ├── 10.md ├── 11.md ├── 12.md ├── images │ ├── android-1.png │ ├── android-final.gif │ ├── app-store.png │ ├── generate-qr-code.png │ ├── google-play.png │ ├── icons.zip │ ├── ios-1.png │ ├── ios-final.gif │ ├── more-options.png │ ├── nativescript-logo.png │ ├── playground-component-search.gif │ ├── playground-drag-and-drop.gif │ ├── playground-preview.gif │ └── scan-qr-code.png ├── metadata.json └── success.md ├── groceries-js ├── 1.md ├── 2.md ├── 3.md ├── 4.md ├── images │ ├── android-1.png │ ├── android-10.png │ ├── android-11.gif │ ├── android-11.mov │ ├── android-12.png │ ├── android-13.png │ ├── android-14.gif │ ├── android-14.mov │ ├── android-15.png │ ├── android-16.gif │ ├── android-16.mov │ ├── android-17.png │ ├── android-18.png │ ├── android-19.gif │ ├── android-19.mov │ ├── android-2.png │ ├── android-20.gif │ ├── android-20.mov │ ├── android-21.gif │ ├── android-21.mov │ ├── android-22.gif │ ├── android-22.mov │ ├── android-3.png │ ├── android-4.gif │ ├── android-4.png │ ├── android-5.png │ ├── android-6.png │ ├── android-7.png │ ├── android-8.png │ ├── android-9.png │ ├── android-final-1.png │ ├── android-final-2.png │ ├── android-final-3.png │ ├── angular-logo.png │ ├── app-store.png │ ├── generate-qr-code.png │ ├── google-play.png │ ├── ios-1.png │ ├── ios-10.png │ ├── ios-11.gif │ ├── ios-11.mov │ ├── ios-12.png │ ├── ios-13.png │ ├── ios-14.gif │ ├── ios-14.mov │ ├── ios-15.png │ ├── ios-16.gif │ ├── ios-16.mov │ ├── ios-17.png │ ├── ios-18.png │ ├── ios-19.gif │ ├── ios-19.mov │ ├── ios-2.png │ ├── ios-20.gif │ ├── ios-20.mov │ ├── ios-21.gif │ ├── ios-21.mov │ ├── ios-22.gif │ ├── ios-22.mov │ ├── ios-3.png │ ├── ios-4.gif │ ├── ios-4.png │ ├── ios-5.png │ ├── ios-6.png │ ├── ios-7.png │ ├── ios-8.png │ ├── ios-9.png │ ├── ios-final-1.png │ ├── ios-final-2.png │ ├── ios-final-3.png │ ├── nativescript-logo.png │ └── scan-qr-code.png ├── metadata.json └── success.md └── groceries-ng ├── 1.md ├── 2.md ├── 3.md ├── images ├── android-1.png ├── android-10.png ├── android-11.gif ├── android-11.mov ├── android-12.png ├── android-13.png ├── android-14.gif ├── android-14.mov ├── android-15.png ├── android-16.gif ├── android-16.mov ├── android-17.png ├── android-18.png ├── android-19.gif ├── android-19.mov ├── android-2.png ├── android-20.gif ├── android-20.mov ├── android-21.gif ├── android-21.mov ├── android-22.gif ├── android-22.mov ├── android-3.png ├── android-4.gif ├── android-4.png ├── android-5.png ├── android-6.png ├── android-7.png ├── android-8.png ├── android-9.png ├── android-final-1.png ├── android-final-2.png ├── android-final-3.png ├── angular-logo.png ├── app-store.png ├── generate-qr-code.png ├── google-play.png ├── ios-1.png ├── ios-10.png ├── ios-11.gif ├── ios-11.mov ├── ios-12.png ├── ios-13.png ├── ios-14.gif ├── ios-14.mov ├── ios-15.png ├── ios-16.gif ├── ios-16.mov ├── ios-17.png ├── ios-18.png ├── ios-19.gif ├── ios-19.mov ├── ios-2.png ├── ios-20.gif ├── ios-20.mov ├── ios-21.gif ├── ios-21.mov ├── ios-22.gif ├── ios-22.mov ├── ios-3.png ├── ios-4.gif ├── ios-4.png ├── ios-5.png ├── ios-6.png ├── ios-7.png ├── ios-8.png ├── ios-9.png ├── ios-final-1.png ├── ios-final-2.png ├── ios-final-3.png ├── nativescript-logo.png └── scan-qr-code.png ├── metadata.json └── success.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NativeScript Playground Tutorials 2 | 3 | This repo contains the tutorials that appear in [NativeScript Playground](https://play.nativescript.org/). 4 | 5 | ## Tutorial structure 6 | 7 | All tutorials live in the root of the repo and conform to the following structure. 8 | 9 | ``` 10 | name-of-tutorial 11 | ├── 1.md 12 | ├── 2.md 13 | ├── 3.md 14 | ├── ... 15 | ├── images 16 | │   ├── image-1.png 17 | │   └── ... 18 | ├── metadata.json 19 | └── success.md 20 | ``` 21 | 22 | Each tutorial’s content should be divided into lessons and steps, and each lesson should be placed into a sequentially named Markdown file. For example, a tutorial’s first lesson should live in a file named `1.md`, a tutorial’s second lesson should live in a file named `2.md`, and so on. 23 | 24 | The content of each lesson should follow the following pattern. 25 | 26 | ``` 27 | ## Lesson 1. Name of First Lesson 28 | 29 | [an introduction to the lesson] 30 | 31 | ### Step 1. Name of first step 32 | 33 | [the contents of the step] 34 | 35 | ### Step 2. Name of second step 36 | 37 | [the contents of the step] 38 | ``` 39 | 40 | All steps you wish a user to complete should appear within a step, and should use the following structure. 41 | 42 | ``` 43 | [text to introduce what the user needs to do in the action section] 44 | 45 |
46 | 47 | #### Action 48 | 49 | * **a.** The first step the user needs to do. 50 | 51 | * **b.** The second step the user needs to do. 52 | 53 | * **c.** ... 54 | 55 |
56 | ``` 57 | 58 | > **NOTE**: Playground gives the user the ability to copy and paste any code blocks you provide in Action sections. 59 | 60 | The last thing to note about a tutorial’s content is its `success.md` file. Playground shows the content you place in this file after the user completes the tutorial. You probably want to either link to another tutorial here, or to recommend additional resources or next steps for the reader. 61 | 62 | ## Tutorial metadata 63 | 64 | In addition to content, each tutorial should have a `metadata.json` file with the following content. 65 | 66 | ``` 67 | { 68 | "title": "The Tutorial’s Title", 69 | "description": "A short description of the tutorial", 70 | "estimateTime": "15", 71 | "displayOrder": 1, 72 | "supportedTemplates": ["play-ng"], 73 | "targetTemplate": "play-ng", 74 | "disabled": false 75 | } 76 | ``` 77 | 78 | Here is some more information on some of the additional keys. 79 | 80 | * `estimateTime`—The approximate amount of time you believe it will take a user to complete the tutorial in minutes. 81 | * `displayOrder`—The order the tutorial should appear in relation to other tutorials. Note that the JS, Angular, and Vue.js tutorials are all in separate buckets, so you want to compare the tutorial you’re working on with others for the same framework. 82 | * `supportedTemplates`—An array of templates the tutorial supports. Normally this is identical to the tutorial’s `targetTemplate`. 83 | * `targetTemplate`—The name of the template your tutorial uses as its starting point. Currently these templates are private, so work with the NativeScript team in a pull request to get the appropriate template in place. 84 | * `disabled`—Whether the tutorial should be disabled. 85 | 86 | -------------------------------------------------------------------------------- /cleanWeather-vue/1.md: -------------------------------------------------------------------------------- 1 | ## Lesson 1. Getting Started with NativeScript-Vue 2 | 3 | We know we can use Angular to build NativeScript apps, or simply build with "vanilla" NativeScript using JavaScript or TypeScript. But did you know that, due to an amazing community effort led by Developer Expert Igor Randjelovic, we can now use Vue.js as a framework around which to build our apps? 4 | 5 | Vue.js is an up-and-coming, lightweight JavaScript framework that is gaining in popularity. Learn more about Vue.js [here](https://vuejs.org) and about NativeScript-Vue [here](https://nativescript-vue.org). 6 | 7 | ![](images/nativescript-vue-logo.jpg) 8 | 9 | In this tutorial, we are going to build a simple weather app, based on a design by [Gabriel Nazoa](https://www.behance.net/gallery/22645245/Weather-app). 10 | 11 | ![](images/design.gif) 12 | 13 | This weather app, which we'll call "CleanWeather", will allow us to learn how to use geolocation in NativeScript-Vue to get latitude and longitude, and we will use the [OpenWeatherMap](https://openweathermap.org/api) REST API to get that location's weather. In the end, this app will look like this: 14 | 15 | ![](images/completed-app.png) 16 | 17 | Building a weather app is a great proof-of-concept for any mobile app framework, so let's get started. 18 | 19 | > **TIP**: 20 | > * If you run into problems working through this guide, [Stack Overflow](https://stackoverflow.com/tags/nativescript/info) is a great place to reach out for help. 21 | 22 | 23 | ### Step 1. Getting Started with NativeScript-Vue Playground 24 | 25 | NativeScript Playground is a browser-based environment for developing simple NativeScript apps. It’s a great place to get started learning NativeScript, as you can develop apps without needing to install the various SDKs and tools needed for native iOS and Android development. All you need to complete this guide is an iOS or Android device. 26 | 27 | Let’s see the Playground in action. 28 | 29 |
30 | 31 | #### Action 32 | 33 | * **a.** Get out an Android or iOS device. You need at least one device to complete this tutorial. 34 | 35 | * **b.** Download and install the **NativeScript Playground** app on your device by either searching for “NativeScript Playground” in the iOS App Store or Google Play, or by using the links below. 36 | 37 | [![](images/app-store.png)](https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1) 38 | [![](images/google-play.png)](https://play.google.com/store/apps/details?id=org.nativescript.play) 39 | 40 | * **c.** Download and install the **NativeScript Preview** app on your device by either searching for “NativeScript Preview” in the iOS App Store or Google Play, or by using the links below. 41 | 42 | [![](images/app-store.png)](https://itunes.apple.com/us/app/nativescript-preview/id1264484702?mt=8) 43 | [![](images/google-play.png)](https://play.google.com/store/apps/details?id=org.nativescript.preview) 44 | 45 | * **d.** Open the **NativeScript Playground** app on your device(s), and click the **Scan QR code** action. 46 | 47 | ![](images/scan-qr-code.png) 48 | 49 | * **e.** In your web browser, click the **QR Code** button at the top of the Playground interface. 50 | 51 | ![](images/generate-qr-code.png) 52 | 53 | * **f.** Scan the QR code in your browser with your device; you should see an app that looks like the screenshots below. 54 | 55 | ![](images/android.png) 56 | 57 |
58 | 59 | One of the biggest benefits of using NativeScript is the fast development workflow. You have the ability to change your code and see those changes instantly—even on multiple devices. 60 | 61 | > **TIP**: 62 | > * You can save your current Playground work by clicking the **Save** button at the top. This will generate a URL that you can bookmark for future use. 63 | > * If you want to continue developing this app locally, you can use the **Download** button at the top of the screen. After you download the app, you should install the NativeScript CLI by running the `npm i nativescript -g` command, and then execute the `tns preview` command to preview your work - just as you do in Playground. 64 | 65 | And with that, you’re running your first NativeScript app on your device! Now that you have your app up and running, let’s proceed to build our CleanWeather app. 66 | -------------------------------------------------------------------------------- /cleanWeather-vue/2.md: -------------------------------------------------------------------------------- 1 | ## Lesson 2. Building HelloWorld.vue 2 | 3 | Now that you know how to get started with the NativeScript Playground, you can see the folder structure of the existing hello-world project. As you can see in the HelloWorld.vue file listed in components folder, there are three sections in the file, namely template, script and style. 4 | 5 | * The template defines the user interface much like we see in a HTML page for the web. 6 | * The script is the JavaScript code we write to define our business logic. 7 | * The style is used to give our user interface further styling using CSS. 8 | 9 | We can start by writing the template for the user interface. 10 | 11 | ### Step 2. Build the Interface 12 | 13 |
14 | 15 | #### Action 16 | 17 | * **a.** Replace the existing `