NativeScript ตอนที่ 3 เริ่มต้นจากศูนย์

ตอนที่แล้วเราพอรู้จักโครงสร้างของ NativeScript แล้ว แต่ดูเหมือนว่ามันจะเข้าใจยากใช่ไหมครับ คราวนี้เราลองมาเริ่มต้นแอพใหม่กันตั้งแต่แรกดีกว่า

แอพที่เราจะทำจะมีหน้าตาง่ายๆแบบนี้

เริ่มต้นจากการสร้างโปรเจคกันก่อน สมมติว่าเราอยู่ในโฟเดอร์ที่ต้องการแล้ว เช่น D:\codes\nativescript

รัน Command prompt แล้วย้ายไปยังโฟลเดอร์ดังกล่าว แล้วใช้คำสั่ง
tns create MyApp
เพื่อสร้างโปรเจคชื่อ MyApp

ย้ายเข้าไปในโฟลเดอร์โปรเจคโดย
cd MyApp

ต่อจากนั้น เราจะกำหนดแพลตฟอร์มให้เป็น Android
tns platform add android

ในโฟลเดอร์โปรเจค เข้าไปแก้ไขไฟล์ app.js โดยเปลี่ยนไฟล์ที่จะเป็นหน้าหลักเป็น hello

var application = require("application");
application.start({ moduleName: "hello" });

จากนั้นก็สร้างไฟล์เปล่าเพิ่มอีกสองไฟล์ คือ hello.xml และ hello.js

ใน hello.xml ซึ่งจะเป็นหน้า interface หลัก เราจะลองเขียนแค่

<Page>
    <Label text="Hello World" class="title" />
</Page>

เราจะลองรันแอพนี้ ให้เชื่อต่อกับ Android device (หรือ emulator) แล้วทดสอบว่ามองเห็นอุปกรณ์นั้นหรือไม่ด้วยคำสั่ง
tns device

อย่าลืมยืนยันการเชื่อมต่อกับอุปกรณ์ในกรณีที่มีการถาม

สมมติว่าตอนนี้การเชื่อมต่อกับอุปกรณ์สำเร็จ เราจะลองรันแอพโดยใช้คำสั่ง
tns run android
แล้วก็รอกันไป

ก็น่าจะเห็นผลลัพธ์เป็นคำว่า Hello World กลางหน้าจอ



ใน command prompt ให้กด CTRL+C แล้วเลือก y เพื่อสิ้นสุดการทำงานของคำสั่ง

จากนั้น เราจะลองรันแอพแบบ livesync นั่นคือ เมื่อเราแก้ไขโค้ด ตัว nativescript จะ build และ patch เข้ากับโปรแกรมที่รันอยู่บนอุปกรณ์ ซึ่งจะทำให้การรันรวดเร็วขึนมาก ไม่ต้อง build ใหม่ทั้งหมดและติดตั้ง

พิมพ์คำสั่ง
tns livesync android --watch

เมื่อผลลัพธ์แสดงในอุปกรณ์แล้ว ให้ลองกลับมาแก้โค้ดในไฟล์ hello.xml เป็น

<Page>
    <Label text="My First Mobile App" class="title" />
</Page>

ทันทีที่เรากด save ไฟล์นี้ ผลลัพธ์ในอุปกรณ์จะเปลี่ยนไปทันที สะดวกมากๆเลยครับ



ตอนนี้เราคงทดสอบกันแค่นี้ก่อน ตอนต่อไปเราจะลองมาเขียนโค้ดเพิ่มปุ่มกันครับ