Membuat aplikasi TODO dengan NativeScript - Part 1

Aplikasi TODO

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. Pastikan jangan memasukkan folder /platforms dalam git, karena selain sizenya yang besar, folder ini ditujukan untuk local development saja dan jika Anda menggunakan module - module npm dalam projek ini maka anda juga harus memasukan dalam .gitignore, dan isinya akan seperti dibawah ini:
    /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:

Sebelum kita membuat TODO app, kita harus paham beberapa hal dasar sebagai berikut:

  • MVVM pattern untuk software developmentnya
  • Strukture Folder (sumber) . ├── app │ ├── app │ │ ├── app.css │ │ ├── app.js │ │ ├── images │ │ │ └── ... │ │ ├── lib │ │ │ └── ... │ │ ├── shared │ │ │ ├── css │ │ │ │ └── ... │ │ │ ├── models │ │ │ │ └── ... │ │ │ ├── utils │ │ │ │ ├── images.js │ │ │ │ └── ... │ │ │ └── ... │ │ ├── views │ │ │ └── ... │ │ └── ... │ ├── App_Resources │ │ ├── android │ │ └── ios │ └── tns_modules │ └── ... └── platforms └── ...
    Maka untuk best practices mari kita merubah susunan struktur sesuai skema di atas. Dan agar Anda tidak secara manual membuat struktur folder seperti ini tiap kali memulai project, maka Anda bisa menggunakan salah satu npm modules untuk mengerjakannya, caranya bisa Anda lihat di link ini
Langkah - langkah:
  1. Kita mulai dengan membuat Model data untuk aplikasi TODO.
    // Todo.js function Todo( name ) {
    this.name = name;
    }
    module.exports = Todo;
    Beri nama Todo.js dan simpan ke dalam folder app/shared/models/

  2. Lalu kita buat View Model untuk aplikasi TODO
    // 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;

    Beri nama todoData.js dan simpan ke dalam app/views/

  3. Selanjutnya kita tinggal membuat View dan mem-binding data todo tadi ke dalam view. Seperti tampilan layaknya sebuah aplikasi Todo pada umumnya yaitu berupa list, maka kita aka menggunakan 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. Lalu kita coba tes dan jalankan kodingan kita ini dengan emulator
    tns run ios --emulator / tns run android --emulator
    atau langsung ke smartphone Anda, dalam hal ini saya menggunakan iPhone 5 untuk menjalankan aplikasi TODO.
    tns run ios

Untuk Part 1 ini kita telah berhasil membuat basic MVVM pattern yang dibutuhkan untuk membuat aplikasi di NativeScript, dan tunggu Part 2 untuk process selanjutnya.

Cendekia P Putra

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

Jakarta, Indonesia http://cendekiapp.com