Cara Membuat Halaman Login di NativeScript

Membuat halaman login pada aplikasi android menggunakan NativeScript sangat mudah. Tutorial membuat aplikasi Android memakai NativeScript kali ini akan sedikit mengupas tentang cara membuat halaman login dengan native script dengan logika: User login memasukkan email (alinda@test.com) dan password (testing). Jika email dan password benar, maka user akan dialihkan ke halaman selanjutnya. Namun jika salah, maka akan muncul text "Error: nama dan password salah"

Halaman login

Halaman utama

Berikut adalah panduan membuat halaman login di NativeScript:

1. Untuk memudahkan proses test aplikasi dan debug pada aplikasi android ini, anda bisa langsung menyambungkan device android milik anda.
2. • Set ON developer option di menu setting, sambungkan dengan komputer anda menggunakan kabel USB,
   Jika tidak ada menu developer option di setting android anda, anda bisa membaca artikel saya panduan lengkap install nativescript di windows
   • Buka folder project android anda, kemudian buka console bash anda. Saya sendiri menggunakan GitBash, maka saya hanya perlu klik kanan, lalu memilih opsi "Git Bash Here"
   • Setelah console terbuka, jalankan perintah berikut ini:
   tns livesync android --watch
3. Langkah pertama, buat folder bernama "Views" di dalam folder App. Anda bisa lanjut ke langkah berikutnya jika sudah ada folder Views di dalam folder App.
4. Buat folder bernama "login" dan "mainmenu" di dalam folder Views yang telah dibuat.
5. Buka IDE coding anda (notepad, notepad++, sublime, atom, atau apapun itu), kemudian copy dan paste script berikut ini:
<page loaded="loadLoginView"> <stacklayout> <label text="Login" class="h2"/> <textfield id="email" hint="Email" width="200"/> <textfield id="password" secure="true" hint="Password" width="200"/> <button id="loginbutton" text="Login" width="150"/> <label id="result" text=" " textWrap="true"/> </StackLayout> </Page>
6. Simpan script dengan ekstensi .xml di dalam folder login dengan nama "login" (tanpa tanda petik. login.xml)
7. Buka file baru di IDE anda, kemudian ketik atau copy dan pasti script berikut:
var view = require("ui/core/view"); var frameModule = require("ui/frame"); var topmost = frameModule.topmost(); function onLoad(args) { var page = args.object; var emailTextField = view.getViewById(page, "email"); var passwordTextField = view.getViewById(page, "password"); var loginButton = view.getViewById(page, "loginbutton"); var resultLabel = view.getViewById(page, "result"); emailTextField.text=""; passwordTextField.text=""; loginButton.on("tap", function () { var result = ""; if(emailTextField.text !== "alinda@test.com" || passwordTextField.text !== "testing" ) result = "Error: nama dan password salah"; else frameModule.topmost().navigate({ moduleName: "./views/mainmenu/mainmenu", animated: true, navigationTransition: { transition: "slide" } }); resultLabel.text = result; }); } exports.loadLoginView = onLoad;
8. Simpan script dengan ekstensi .js di dalam folder login dengan nama "login" (tanpa tanda petik. login.js)
9. Halaman login sudah selesai dibuat. Langkah selanjutnya adalah membuat halaman mainmenu, dimana user akan dialihkan (redirect) ke halaman mainmenu ini jika user berhasil login.
10. Buka file baru di IDE anda, kemudian ketik atau copy dan pasti script berikut:
<page loaded="loadWelcomeView"> <stacklayout> <label text="Selamat datang di halam utama!" class="h2"/> <button id="welcome" text="Logout" width="150"/> </StackLayout> </Page>
11. Simpan script dengan ekstensi .xml di dalam folder mainmenu dengan nama "mainmenu" (tanpa tanda petik. mainmenu.xml)
12. Buka file baru di IDE anda, kemudian ketik atau copy dan pasti script berikut:
var view = require("ui/core/view"); var frameModule = require("ui/frame"); var topmost = frameModule.topmost(); function onLoad(args) { var page = args.object; var welcomeButton = view.getViewById(page, "welcome"); welcomeButton.on("tap", function () { frameModule.topmost().goBack(); }); } exports.loadWelcomeView = onLoad;
13. Simpan script dengan ekstensi .js di dalam folder login dengan nama "mainmenu" (tanpa tanda petik. mainmenu.js)
14. TAMBAHAN: Agar tampilan aplikasinya bagus, anda bisa membuat file css.
15. Buka file baru di IDE anda, kemudian ketik atau copy dan pasti script berikut:
.btn { font-size: 18; } @import 'nativescript-theme-core/css/core.light.css';
16. Simpan script dengan ekstensi .css di dalam folder App dengan nama "global" (tanpa tanda petik. global.css)
17. Langkah terakhir, arahkan agar halaman login langsung dijalankan saat aplikasi android dibuka. Caranya, cari file app.js, kemudian copy dan paste script berikut:
require("./bundle-config"); var application = require("application"); application.mainModule = "./views/login/login"; application.cssFile = "./global.css"; application.start();
18. Selesai. Anda bisa langsung mengetes aplikasi anda di device yang sudah anda hubungkan.
19. PELAJARI SCRIPT DI ATAS SENDIRI. Pahami logikanya, sukur-sukur bisa bikin logika sendiri. Good luck!

Demikian adalah cara membuat halaman login di aplikasi android dengan menggunakan nativescript. Semoga tutorial singkat ini bisa membantu para developer dalam membangun sebuah aplikasi android yang bagus. Terima kasih. (Alinda Surya)