มาเขียน NativeScript part 1

ตั้งแต่ปี 2018 ที่ผมได้รู้จัก NativeScript ตั้งแต่นั้นมาก็ทิ้งไปถึง 2 ปี มาเถอะพวกเรา 2 ปีตั้งแต่นั้นจนบัดนี้มันต้องมีดีเพิ่มขึ้น! (อะจ๊ะบ๊ะฮู้)

https://www.nativescript.org/

ก่อนจะเริ่มผมขอไปอ่านบทความเก่ากรุที่ทิ้งไว้เบื้องหลัง

เรียนรู้ NativeScript part 1

เรียนรู้ NativeScript part 2: Install iOs and Android requirements

เรียนรู้ NativeScript part 3: NativeScript Sidekick

เรียนรู้ NativeScript part 4: NativeScript Playground

ถามว่าทำไมกลับมาศึกษาตัวนี้ มี 2 ประเด็นครับ

1. อยากทำ Mobile Application ขำๆให้กับแบงก์ใช้เป็น Demo
2. อยากทำไว้สอนน้องๆ
3. ทบทวน Angular ให้ตัวเอง

โดยเฉพาะข้อ 3. ผมคิดว่าเราต้องมีพื้นฐานก่อนและดีหน่อยที่ผมพอจะมีพื้นฐานอยู่บ้าง

ไหนๆก็คุยกันแล้วอีกตัวที่น่าสนใจก็คือ Flutter แต่นั่นต้องมีพื้นฐานภาษา Dart หากจับ Flutter มาชน NativeScript บอกเลย Flutter เติบโตเร็วกว่าเยอะครับ

สืบเนื่องจากบทความเก่ากรุข้างต้นทั้ง 4 บทความเชื่อว่าเพื่อนๆได้เข้าไปอ่านแล้วก็จะเข้าใจว่า NativeScript ว่ามีอะไรให้เล่นบ้าง ไม่ว่าจะเป็น

1. สร้าง mobile applications ได้ทั้ง ค่าย Android และ iOS
2. NativeScript CLI ติดตั้งได้ทั้งเครื่อง Windows และ Mac
3. NativeScript Sidekick เป็น editor ช่วยในการพัฒนา applications แบบ UI มี cloud ให้ build application แทนเครื่องเราได้
4. NativeScript Playground (on browser) ช่วยในการพัฒนา mobile applications จาก browser ได้เลย (ไม่ต้องติดตั้ง NativeScript CLI และ NativeScript Sidekick)
5. มี app บน Store ทั้งค่าย Google และ Apple ชื่อ NativeScript Playground กับ NativeScript Preview สำหรับ scan และ preview mobile application ตามลำดับ

ฟังแล้วรู้สึกสนุกดี ผมก็มี mobile application (ขอเรียกสั้นๆว่า app) ที่อยากพัฒนาอยู่ในใจ มาลองดูว่ามันสามารถขนาดไหน ได้เท่าที่คุยไว้หรือเปล่าครับ

NativeScript CLI

ผมขอเลือกใช้ Command Line Interface (CLI) ก็แล้วกันครับ น่าจะมันส์นิ้วมือดี แล้วตอนนี้ผมก็ได้ซื้อเครื่อง Mac (pro) ให้กับตัวเองเรียบร้อยแล้วด้วย

มาดูกันว่าเขาแนะนำให้ติดตั้งอย่างไรบ้าง

1. ติดตั้ง Node.js งานนี้เชื่อว่าเพื่อนๆทำกันเป็นหมดแล้ว ขอผ่านนะ
2. ติดตั้ง NativeScript CLI ผ่าน npm
3. เพื่อสร้าง native iOS และ Android app เครื่องจำเป็นต้องติดตั้ง native package จำนวนหนึ่ง

เครื่อง Windows

• ต้องรุ่นที่ติดตั้ง Windows 7 Service Pack 1 หรือสูงกว่า
• เปิดและรัน command prompt ด้วยสิทธิ์ administrator ด้วยคำสั่ง

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

• สำคัญมากอย่าลืมกำหนด (set path) JAVA_HOME และ ANDROID_HOME
• จากนั้นรัน tns doctor เพื่อตรวจสอบความถูกต้อง ผลต้องเป็น “No issues were detected”

เครื่อง Mac

• เปิด terminal ขึ้นมา (อาจมีการขอสิทธิ์ root ก็พิมพ์​ sudo นำ) พิมพ์คำสั่ง

ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

• จากนั้นรัน tns doctor เพื่อตรวจสอบความถูกต้อง ผลต้องเป็น “No issues were detected”

ในเมื่อผมใช้เครื่อง Mac จึงขอลงรายละเอียดการติดตั้งเฉพาะของเครื่อง Mac ในเวลานี้ครับ

หลังจากพิมพ์คำสั่ง ruby -e … ข้างต้นนั้นไปแล้ว มันถามว่า

==========

NativeScript requires Xcode.
If you do not have Xcode installed, download and install it from App Store and run it once to complete its setup.
Do you have Xcode installed? (y/n)
มันต้องการ Xcode และเพราะผมมี Xcode ติดตั้งไว้แล้ว (ใครไม่มีให้ติดตั้ง Xcode ก่อนแล้วค่อยมารันคำสั่งนี้ใหม่) ดังนั้นตอบ y

==========

ต่อไปเป็นการน้อมรับข้อตกลง (license agreement) ของ Xcode ก็เคาะ space bar ไป สุดท้ายพิมพ์​ agree

==========

1. Homebrew
2. Google Chrome
3. Open JDK 8
4. Android SDK
5. Android emulator system image
6. HAXM (Hardware accelerated Android emulator)
7. Android emulator
8. CocoaPods
9. CocoaPods setup
10. pip
11. six
12. xcodeproj
Step 1 of 12:
Allow the script to install Homebrew?
(Y)es/(N)o

ทีนี้มันจะถามการติดตั้งทั้งสิ้น 12 รายการ ทำทีละรายการ เริ่มจาก Homebrew ก่อนเพราะเป็นตัวหลักเรียก install ตัวอื่นๆ ตอบ N ถ้ามีอยู่แล้วและตอบ Y เมื่อต้องการให้มันติดตั้งให้

ตรงนี้ใช้เวลาค่อยข้างนานค่อยทำไปครับ

เสร็จแล้วมันจะบอกให้ restart terminal ก็ทำไปครับ

จากนั้น update ไฟล์ .bash_profile เพราะ config path ต่างๆที่มันทำให้อยู่ตรงนี้ ไปดูหน่อยแล้วกันมันเขียนอะไรลงไปบ้าง

cd ~
cat .bash_profile

.bash_profile

น่าสนใจเพราะ .bash_profile นี้ผมกำหนด JAVA_HOME ไว้ก่อนแล้วซึ่งชี้ไปยัง JDK ของ Oracle ไม่ใช่ JAVA_HOME ที่มันสร้างให้ซึ่งชี้ไปยัง Open JDK

ในกรอบสีแดงที่ผมแสดงข้างต้นนี้คือ 3 ตัวแปรที่มันสร้างให้ เราจำเป็นต้อง reload ไฟล์นี้ (update) สักหนเพื่อให้เครื่องเรารู้จักครับ แต่ก่อนอื่นผมจะต้องเลือกระหว่าง Oracle JDK กับ Open JDK (ถ้าเพื่อนๆเพิ่งติดตั้งครั้งแรกจะเจอแค่ Open JDK)

เอาตามใจ NativeScript แล้วกันนะ (เรากลับมาสลับได้) ขอใส่ # ไว้หน้าคำสั่ง export ของ Oracle JDK ครับ

จากนั้น update ไฟล์ .bash_profile

source .bash_profile

ตรวจสอบความถูกต้อง

tns doctor

ผล

tns doctor result

อันไหนไม่พร้อมก็ให้ reinstall ใหม่ หรือถ้าสามารถ config ได้เองภายหลังก็ปล่อยไปครับ

แล้วมันก็บอกว่าเรายังไม่ได้ติดตั้ง nativescript-cloud extension ก็จะไม่สามารถใช้ฟังก์ชัน cloud build ได้ (ง่ายๆว่าส่งคำขอไป build application บน cloud แทนเครื่องเราเอง) อันนี้ไม่เป็นไรข้ามไปก่อน

Let Get Started!

หนังสือที่อ่านผมขอใช้เล่มนี้ครับ ของอาจารย์ Nathan Walker และ nathanael Anderson (ที่นี่)

https://www.packtpub.com/web-development/nativescript-angular-mobile-development

สารภาพว่าไม่เคยอ่านมาก่อน เขียนบทความนี้และอ่านไปพร้อมกัน เล่มนี้เขานำเสนอ

• Bootstrap a NativeScript for Angular app ขั้นตอนการติดตั้งนั่นแหละ
• Best practices for project organization
• Style your app with CSS/SASS
• Use Angular together with NativeScript to create cross-platform mobile apps
• Take advantage of powerful Angular feature, ไม่ว่าจะเป็น Dependency Injection, Components, Directives, Pipes และ NgModules กับ your NativeScript apps
• Gain insight into great project organization and best practices
• Use Objective C/Swift and Java APIs directly from Typescript
• Use rich framework features and third-party plugins
• Integrate @ngrx/store + @ngrx/effects เพื่อช่วยเรื่อง state management
• Test your app with Karma and Appium

เริ่มกันเลยดีกว่า

เครื่องมือที่ต้องใช้

• Visual Studio Code (VS Code) (ที่นี่) เป็น editor

สร้างโปรเจกต์

เลือก directory ที่ชอบแล้วสร้างโปรเจกต์ชื่อ studio-recorder

tns create studio-recorder --ng

เมื่อ

tns เป็น global command สำหรับโปรเจกต์ NativeScript

create สั่งสร้าง

--ng บอกว่าโปรเจกต์ NativeScript ด้วย Angular

คอยมันเตรียมโปรเจกต์สักครู่… เมื่อเสร็จแล้วนั้น

cd studio-recorder
tns preview

คำสั่งนี้สั่งให้ tns สร้าง QR แก่เรา เราสามารถใช้ app ชื่อ NativeScript Playground (ซึ่งได้ดาวน์โหลดมาจาก Store) สแกนได้

scan ด้วย NativeScript Playground app

และแล้วผลลัพธ์จะไปปรากฏบน app ชื่อ NativeScript Preview ครับ (ดาวน์โหลดมาจาก Store เช่นกัน)

studio-recorder mobile app preview

หลักการทำงานเบื้องต้นของ NativeScript Preview คือเอาโปรเจกต์ของเรามาเล่น (play) หรือใช้คำว่า preview บนตัวมันอีกทีหนึ่ง

มันยังไม่ใช่ native!

แต่เราต้องการ native!

เราเขียน NativeScript เพราะต้องการ native app!

เอาเป็นว่าตัดจบก่อน แล้ว part ถัดไปเรามา build native app กันนะ

NativeScript แจกหนังสือครับ

Get the free 450 page book on building mobile apps with NativeScript