Create TODO Apps using NativeScript - Part 1

TODO Apps

Scaffolds:
  1. tns create todo
  2. cd todo
  3. tns platform add ios
  4. tns run ios
Versioning (optional)
  1. git init
  2. touch .gitignore
  3. Make sure do not include /platforms folder in git, cause the size is very big and also it's used for local development only and if you use npm modules, i think you need include it in .gitignore along side with platforms folder.
    /platforms /node_modules
  4. git remote add origin <git url>
  5. git add --all
  6. git commit -m "Initial Commit"
  7. git push -u origin master
Basic Knowledges:

Before we begin, we must understand the basic concept below:

  • MVVM pattern for developing the NativeScript apps
  • Folder Struckture (source) . ├── app │ ├── app │ │ ├── app.css │ │ ├── app.js │ │ ├── images │ │ │ └── ... │ │ ├── lib │ │ │ └── ... │ │ ├── shared │ │ │ ├── css │ │ │ │ └── ... │ │ │ ├── models │ │ │ │ └── ... │ │ │ ├── utils │ │ │ │ ├── images.js │ │ │ │ └── ... │ │ │ └── ... │ │ ├── views │ │ │ └── ... │ │ └── ... │ ├── App_Resources │ │ ├── android │ │ └── ios │ └── tns_modules │ └── ... └── platforms └── ...
    These knowledges are for the best practices when building NativeScript. And if you do not want manually create that folder structures each time you begin the project, i think you should check this link
Part 1 - Steps:
  1. Let's begin with creating TODO Model.
    // Todo.js function Todo( name ) {
    this.name = name;
    }
    module.exports = Todo;
    Name it to Todo.js and save it to app/shared/models/ folder.

  2. Then we build View Model for TODO apps
    // todoData.js var observableModule = require( "data/observable" ),
    observableArray = require( "data/observable-array" ),
    Todo = require( "../shared/models/Todo" ),
    data = new observableModule.Observable();
    data.set( "todos", new observableArray.ObservableArray([
    new Todo( "Wake up" ),
    new Todo( "Coding TODO app with NativeScript" ),
    new Todo( "Publish it on blog" ),
    new Todo( "Eat then Sleep" )
    ]));
    module.exports = data;

    name it to todoData.js and save it to app/views/ folder.

  3. The next step we create View and binding the data from todo view model into the view. And common TODO application uses list for the layout, so in this case we using ListView Binding
    <!-- todo-page.xml --> <Page navigatedTo="load"> <ListView items="{{ todos }}"> <ListView.itemTemplate> <Label text="{{ name }}" /> </ListView.itemTemplate> </ListView> </Page>// todo-page.js var todoData = require( "./todoData" );
    exports.load = function( args ) {
    args.object.bindingContext = todoData;
    }

  4. And then we should test and run the apps, you can use emulator
    tns run ios --emulator / tns run android --emulator
    or direct to your android or iOS phone using USB, in this example i did use iphone 5 to run it.
    tns run ios

For this Part 1 we did created basic MVVM pattern which is needed for building apps in NativeScript, and i know its still far to be called TODO apps, so stay tune for the Part 2.

Cendekia P Putra

< Software Developer /> | @cendekiapp | me@cendekiapp.com

Jakarta, Indonesia http://cendekiapp.com