Back to Blog Home
← all posts

NativeScript open source sample - Tasks

March 5, 2015 — by Valio Stoychev

We know how important it is for a new framework to have samples, so you will be able to find several good examples of open source applications built with NativeScript in our GitHub organization. Open http://github.com/nativescript and search for repositories named after the following pattern "sample-SAMPLE_NAME". All the samples are licensed under the BSD license. This repo is out of sync with the latest NativeScript framework releases. You can find an up to date list of code samples on our resources page.

This is the first article from a series of articles we are planning to release as we progress with the application implementation. The full source code of the application is here: http://github.com/nativescript/sample-Tasks.

.

Scenario

We chose an app that we know will cover a lot of useful scenarios:

  1. User management
    1. User authentication
    2. User registration
    3. User welcome email
  2. Cloud data
    1. read, update, delete and create data entry stored in the cloud
    2. Offline support for the data (not in this article, but coming soon)
  3. Modern UX
    1. Using SideBar
    2. Pull to Refresh
    3. FAB (floating action button for Android Lollipop)
    4. Load on demand for many tasks
  4. Device integration
    1. using camera
    2. using phone contacts
  5. Patterns/Technologies used
    1. MVVM
    2. CSS for styling
    3. XML and data-binding for describing the UI
    4. Platform specific targeting for the Android FAB button      
    5. 3rd party native libraries to load Telerik UI

Designs

Login screen
07.2.SignUp

Home Screen
01.TasksList

Creating/Editing a task
03.EditNewTask

Displaying a task
02.1.TaskDetails

Backend

For this application we are using the Telerik platform for the backend services. This way we get user management and cloud storage very easily integrated inside the application. If you prefer you can use any other backend for this application.
 
Go and check the source code of the application - http://github.com/nativescript/sample-tasks.

The easiest way to start playing with the sample is to get the clone URL (https://github.com/NativeScript/sample-Tasks.git) and open the project inside Telerik AppBuilder. Then you are one click away from deploy the running app on your device.

In the next article we will see how the authentication inside the app is being implemented.

Please let us know your thoughts in the comments section below. If you like what you see please share in with us on twitter @NativeScript.