NativeScript - คู่มือฉบับย่อ

โดยทั่วไปการพัฒนาแอปพลิเคชันมือถือเป็นงานที่ซับซ้อนและท้าทาย มีกรอบมากมายสำหรับพัฒนาแอปพลิเคชันมือถือ Android มีเฟรมเวิร์กดั้งเดิมที่ใช้ภาษา Java และ iOS จัดเตรียมเฟรมเวิร์กดั้งเดิมตามภาษา Objective-C / Shift อย่างไรก็ตามในการพัฒนาแอปพลิเคชันที่รองรับระบบปฏิบัติการทั้งสองระบบเราจำเป็นต้องเขียนโค้ดในภาษาที่แตกต่างกันสองภาษาโดยใช้สองกรอบงานที่แตกต่างกัน

เพื่อเอาชนะความซับซ้อนนี้เฟรมเวิร์กมือถือรองรับคุณสมบัตินี้ เหตุผลหลักในการใช้เฟรมเวิร์กข้ามแพลตฟอร์มหรือไฮบริดคือการรักษาฐานรหัสเดียวได้ง่ายกว่า เฟรมเวิร์กยอดนิยมบางส่วน ได้แก่ NativeScript, Apache Cordova, Xamarin เป็นต้น

ภาพรวมของ JavaScript Frameworks

JavaScript เป็นภาษาที่มีหลายกระบวนทัศน์ รองรับการเขียนโปรแกรมเชิงฟังก์ชันการเขียนโปรแกรมเชิงวัตถุและต้นแบบ เริ่มแรกใช้ JavaScript สำหรับฝั่งไคลเอ็นต์ ปัจจุบัน JavaScript ถูกใช้เป็นภาษาการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์เช่นกัน เฟรมเวิร์ก JavaScript เป็นเครื่องมือประเภทหนึ่งที่ทำให้การทำงานกับ JavaScript ง่ายขึ้นและราบรื่นขึ้น

การใช้เฟรมเวิร์กนี้โปรแกรมเมอร์สามารถเขียนโค้ดให้แอปพลิเคชันเป็นอุปกรณ์ที่ตอบสนองได้อย่างง่ายดาย การตอบสนองเป็นสาเหตุหนึ่งที่ทำให้กรอบนี้เป็นที่นิยมอย่างมาก

ให้เราดูเฟรมเวิร์ก JS ยอดนิยมบางส่วน -

เชิงมุม

หนึ่งในเฟรมเวิร์ก JavaScript แบบโอเพนซอร์สที่ทรงพลังมีประสิทธิภาพที่สุดคือ Angular เราสามารถสร้างแอปพลิเคชันมือถือและเดสก์ท็อป Google ใช้กรอบนี้ ใช้สำหรับการพัฒนาแอปพลิเคชันหน้าเดียว (SPA)

Vue.js

VueJS เป็นเฟรมเวิร์ก JavaScript แบบโปรเกรสซีฟที่ใช้ในการพัฒนาเว็บอินเตอร์เฟสแบบโต้ตอบ เป็นหนึ่งในกรอบที่มีชื่อเสียงที่ใช้เพื่อลดความซับซ้อนในการพัฒนาเว็บ สามารถรวมเข้ากับโครงการขนาดใหญ่สำหรับการพัฒนาส่วนหน้าได้อย่างง่ายดายโดยไม่มีปัญหาใด ๆ เป็นโหมดการรวมแบบคู่เป็นหนึ่งในคุณสมบัติที่น่าสนใจที่สุดสำหรับการสร้าง SPA ระดับไฮเอนด์หรือแอปพลิเคชันหน้าเดียว

ตอบสนอง

ReactJS คือไลบรารี JavaScript ที่ใช้สำหรับสร้างคอมโพเนนต์ UI ที่ใช้ซ้ำได้ พัฒนาโดย Facebook ปัจจุบันเป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดและมีรากฐานที่แข็งแกร่งและมีชุมชนขนาดใหญ่อยู่เบื้องหลัง

โหนด js

Node.js เป็นสภาพแวดล้อมรันไทม์แบบโอเพนซอร์สข้ามแพลตฟอร์มสำหรับการพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์และระบบเครือข่าย สร้างขึ้นจาก JavaScript Engine (V8 Engine) ของ Google Chrome แอปพลิเคชัน Node.js เขียนด้วย JavaScript และสามารถทำงานบน OS X, Microsoft Windows และ Linux มีไลบรารีที่หลากหลายของโมดูล JavaScript ต่างๆซึ่งช่วยลดความยุ่งยากในการพัฒนาเว็บแอปพลิเคชัน

ภาพรวมของ NativeScript

NativeScript เป็นเฟรมเวิร์กโอเพนซอร์สที่ใช้สำหรับสร้างแอปพลิเคชันมือถือ iOS และ Android เป็นกรอบที่รวบรวม JIT โค้ด NativeScript ทำงานบนเครื่องเสมือน JS ใช้รันไทม์เครื่องยนต์ V8 สำหรับทั้งแพลตฟอร์ม Android และ iOS NativeScript ใช้ XML, JS และ CSS ในการพัฒนา มี WebIDE ที่เรียกว่า PlayGround PlayGround นี้รองรับอินเทอร์เฟซที่ใช้งานง่ายจัดการโปรเจ็กต์ได้ง่ายโหลดใหม่และดีบักบนอุปกรณ์

NativeScript ช่วยให้นักพัฒนาสร้างแอปแบบเนทีฟข้ามแพลตฟอร์มได้อย่างรวดเร็วและมีประสิทธิภาพและประหยัดค่าใช้จ่ายในการพัฒนาทดสอบและฝึกอบรม ดังนั้นแอป Native จะยังคงร่ำรวยและแข็งแกร่งต่อไปในอีกหลายปีข้างหน้าเพื่อให้ดีขึ้นและใช้งานง่ายขึ้น

คุณสมบัติ

NativeScript มีการสนับสนุนชุมชนที่มีชีวิตชีวา คุณสมบัติเด่นบางประการของ NativeScript ตามรายการด้านล่าง -

• Extensible

• การเปลี่ยนโมดูลร้อน

• ติดตั้งง่าย

• เราสามารถสร้างภาพเคลื่อนไหวกราฟแผนภูมิและรายการที่หลากหลาย

• นักพัฒนาสามารถใช้มุมมองใดก็ได้เป็นรากของแอปพลิเคชัน

• ขี้เกียจเข้ารหัส

สิทธิประโยชน์

NativeScript ช่วย บริษัท ขนาดเล็กหรือขนาดใหญ่ในการสร้างแอพมือถือข้ามแพลตฟอร์ม ประโยชน์หลักบางประการ ได้แก่ -

• นักพัฒนาสามารถนำเครื่องมือและโค้ดที่มีอยู่กลับมาใช้ใหม่ได้

• แก้ไขแก้ไขและอัปเดตเวอร์ชันที่ใหม่กว่าได้ง่าย

• ประสบการณ์ในการพัฒนาเป็นสิ่งที่ดีเราจึงไม่ต้องเสียเวลาเรียนรู้เครื่องมือใหม่ ๆ

• API เฉพาะแพลตฟอร์มจาก JavaScript ทำให้ไม่จำเป็นต้องเรียนรู้ปลั๊กอิน Cordova

• ง่ายต่อการตรวจสอบสิทธิ์กับผู้ให้บริการการลงชื่อเข้าใช้ที่แตกต่างกัน

ส่วนนี้อธิบายเกี่ยวกับวิธีการติดตั้ง NativeScript บนเครื่องของคุณ

ข้อกำหนดเบื้องต้น

ก่อนที่จะย้ายไปติดตั้งเราจำเป็นต้องมีข้อกำหนดเบื้องต้นดังต่อไปนี้ -

• Node.js

• Android

• iOS

ตรวจสอบ Node.js

Node.jsเป็นโปรแกรมรันไทม์ JavaScript ที่สร้างขึ้นจากเอ็นจิ้น JavaScript ภายในของ Google Chrome v8 NativeScript ใช้ Node.js อย่างกว้างขวางเพื่อวัตถุประสงค์ต่างๆเช่นการสร้างแอปพลิเคชันเทมเพลตเริ่มต้นการรวบรวมแอปพลิเคชัน ฯลฯ จำเป็นต้องมีNode.jsในเครื่องของคุณ

หวังว่าคุณได้ติดตั้ง Node.js บนเครื่องของคุณแล้ว หากยังไม่ได้ติดตั้งให้ไปที่ลิงค์https://nodejs.org/ และดาวน์โหลดแพ็คเกจ LTS ล่าสุดและติดตั้ง

ในการตรวจสอบว่า Node.js ได้รับการติดตั้งอย่างถูกต้องหรือไม่ให้พิมพ์คำสั่งด้านล่างบนเทอร์มินัลของคุณ -

node --version

คุณสามารถดูเวอร์ชัน ณ ตอนนี้โหนดเวอร์ชัน“ LTS” ที่เสถียรในปัจจุบันคือ 12.14.0

การตั้งค่า CLI

NativeScript CLI เป็นแอปพลิเคชันที่ใช้เทอร์มินัล / บรรทัดคำสั่งและอนุญาตให้คุณสร้างและพัฒนาแอปพลิเคชัน NativeScript Node.js package manager npm ใช้เพื่อติดตั้ง NativeScript CLI บนเครื่องของคุณ

ใช้คำสั่งด้านล่างเพื่อติดตั้ง NativeScript CLI -

npm install -g nativescript

หลังจากดำเนินการคำสั่งนี้เราจะเห็นผลลัพธ์ต่อไปนี้ -

setupcli

เราได้ติดตั้ง NativeScript CLI ล่าสุด tns ในระบบของเราแล้ว ตอนนี้พิมพ์คำสั่งด้านล่างในเทอร์มินัลของคุณ -

tns

นี่จะแสดงรายการคู่มือเริ่มใช้งานฉบับย่อ คุณสามารถดูผลลัพธ์ต่อไปนี้ -

cli

เราสามารถใช้ tns เพื่อสร้างและพัฒนาแอปพลิเคชันได้โดยไม่ต้องตั้งค่าเพิ่มเติมใด ๆ แต่เราไม่สามารถปรับใช้แอปพลิเคชันในอุปกรณ์จริงได้ แต่เราสามารถเรียกใช้แอปพลิเคชันโดยใช้แอปพลิเคชันNativeScript PlayGround iOS / Android เราจะตรวจสอบในบทต่อ ๆ ไป

การติดตั้งแอป NativeScript Playground

ไปที่ iOS App store หรือ Google Play Store แล้วค้นหาแอป NativeScript Playground เมื่อแอปพลิเคชันปรากฏในผลการค้นหาให้คลิกตัวเลือกการติดตั้ง มันจะติดตั้งแอพNativeScript Playgroundในเครื่องของเรา

แอปพลิเคชันNativeScript Playgroundจะเป็นประโยชน์สำหรับการทดสอบแอปของคุณในอุปกรณ์ Android หรือ iOS โดยไม่ต้องปรับใช้แอปพลิเคชันในอุปกรณ์จริงหรือโปรแกรมจำลอง ซึ่งจะช่วยลดเวลาในการพัฒนาแอปพลิเคชันและวิธีง่ายๆในการเริ่มต้นการพัฒนาแอปพลิเคชันมือถือของเรา

การตั้งค่า Android และ iOS

ในบทนี้ให้เราเรียนรู้วิธีตั้งค่าระบบเพื่อสร้างและเรียกใช้แอป iOS และ Android ทั้งในโปรแกรมจำลองหรือในอุปกรณ์จริง

ขั้นตอนที่ 1: การพึ่งพา Windows

ดำเนินการคำสั่งด้านล่างในพรอมต์คำสั่ง windows ของคุณและเรียกใช้ในฐานะผู้ดูแลระบบ -

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

หลังจากคำสั่งนี้สคริปต์จะถูกดาวน์โหลดจากนั้นติดตั้งการอ้างอิงและกำหนดค่า

ขั้นตอนที่ 2: การพึ่งพา macOS

ในการติดตั้งใน macOS คุณต้องแน่ใจว่าติดตั้ง Xcode แล้วหรือไม่ Xcode จำเป็นสำหรับ NativeScript หากไม่ได้ติดตั้ง Xcode ให้ไปที่ลิงค์ต่อไปนี้https://developer.apple.com/xcode/และดาวน์โหลด; จากนั้นติดตั้ง

ตอนนี้ดำเนินการคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ -

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

หลังจากดำเนินการคำสั่งข้างต้นสคริปต์จะติดตั้งการอ้างอิงสำหรับการพัฒนา iOS และ Android เมื่อเสร็จแล้วให้ปิดและรีสตาร์ทเทอร์มินัลของคุณ

ขั้นตอนที่ 3: การพึ่งพา Android

หวังว่าคุณได้กำหนดค่าข้อกำหนดเบื้องต้นต่อไปนี้แล้ว -

• JDK 8 หรือสูงกว่า

• Android SDK

• ที่เก็บการสนับสนุน Android

• ที่เก็บของ Google

• Android SDK Build-tools 28.0.3 หรือสูงกว่า

• Android Studio

หากไม่ได้กำหนดค่าข้อกำหนดเบื้องต้นข้างต้นให้ไปที่ลิงค์ต่อไปนี้ https://developer.android.com/studio/ติดตั้งและติดตั้ง สุดท้ายเพิ่ม JAVA_HOME และ ANDROID_HOME ในตัวแปรสภาพแวดล้อมของคุณ

ขั้นตอนที่ 4: ตรวจสอบการอ้างอิง

ตอนนี้ทุกอย่างเรียบร้อย คุณสามารถตรวจสอบการอ้างอิงโดยใช้คำสั่งด้านล่าง -

tns doctor

สิ่งนี้จะตรวจสอบการพึ่งพาทั้งหมดและสรุปผลดังต่อไปนี้ -

√ Getting environment information 
No issues were detected. 
√ Your ANDROID_HOME environment variable is set and points to correct directory. 
√ Your adb from the Android SDK is correctly installed. 
√ The Android SDK is installed. 
√ A compatible Android SDK for compilation is found. 
√ Javac is installed and is configured properly. 
√ The Java Development Kit (JDK) is installed and is configured properly. 
√ Local builds for iOS can be executed only on a macOS system. 
   To build for iOS on a different operating system, you can use the
   NativeScript cloud infrastructure. 
√ Getting NativeScript components versions information... 
√ Component nativescript has 6.3.0 version and is up to date. 
√ Component tns-core-modules has 6.3.2 version and is up to date. 
√ Component tns-android has 6.3.1 version and is up to date. 
√ Component tns-ios has 6.3.0 version and is up to date.

หากคุณพบปัญหาใด ๆ โปรดแก้ไขปัญหาก่อนที่จะดำเนินการพัฒนาแอปพลิเคชัน

NativeScript เป็นเฟรมเวิร์กขั้นสูงในการสร้างแอปพลิเคชันมือถือ มันซ่อนความซับซ้อนของการสร้างแอปพลิเคชันมือถือและเปิดเผย API ที่ค่อนข้างเรียบง่ายเพื่อสร้างแอปพลิเคชันมือถือที่ได้รับการปรับให้เหมาะสมและทันสมัย NativeScript ช่วยให้แม้แต่นักพัฒนาระดับเริ่มต้นสามารถสร้างแอปพลิเคชันมือถือทั้งใน Android และ iOS ได้อย่างง่ายดาย

ให้เราเข้าใจสถาปัตยกรรมของกรอบงาน NativeScript ในบทนี้

บทนำ

แนวคิดหลักของกรอบงาน NativeScript คือการช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันมือถือสไตล์ไฮบริด แอปพลิเคชันไฮบริดใช้ API เบราว์เซอร์เฉพาะแพลตฟอร์มเพื่อโฮสต์เว็บแอปพลิเคชันภายในแอปพลิเคชันมือถือปกติและให้ระบบเข้าถึงแอปพลิเคชันผ่าน JavaScript API

NativeScript ลงทุนอย่างมากในไฟล์ JavaScript languageเพื่อมอบกรอบการทำงานที่มีประสิทธิภาพสำหรับนักพัฒนา ตั้งแต่JavaScriptเป็นมาตรฐานโดยพฤตินัยสำหรับการเขียนโปรแกรมฝั่งไคลเอ็นต์ (การพัฒนาเว็บ) และนักพัฒนาทุกคนตระหนักดีถึงภาษา JavaScript ซึ่งจะช่วยให้นักพัฒนาเข้าสู่กรอบงาน NativeScript ได้อย่างง่ายดาย ในระดับต่ำ NativeScript จะเปิดเผย API ดั้งเดิมผ่านชุดปลั๊กอิน JavaScript ที่เรียกว่าNative plugins.

NativeScript สร้างขึ้นบนรากฐานของปลั๊กอินพื้นเมืองและให้ระดับสูงจำนวนมากและง่ายต่อการใช้งานจาวาสคริปต์โมดูล แต่ละโมดูลทำหน้าที่เฉพาะเช่นการเข้าถึงกล้องการออกแบบหน้าจอ ฯลฯ โมดูลทั้งหมดเหล่านี้สามารถรวมกันได้หลายวิธีเพื่อออกแบบแอปพลิเคชันมือถือที่ซับซ้อน

แผนภาพด้านล่างแสดงภาพรวมระดับสูงของกรอบงาน NativeScript -

NativeScript Application - กรอบงาน NativeScript ช่วยให้นักพัฒนาสามารถใช้แอปพลิเคชันสไตล์ Angular หรือแอปพลิเคชัน Vue Style

JavaScript Modules - กรอบงาน NativeScript มีชุดโมดูล JavaScript ที่หลากหลายซึ่งแบ่งประเภทอย่างชัดเจนเป็นโมดูล UI, โมดูลแอปพลิเคชัน, โมดูลหลัก ฯลฯ โมดูลทั้งหมดสามารถเข้าถึงได้โดยแอปพลิเคชันตลอดเวลาเพื่อเขียนแอปพลิเคชันที่ซับซ้อนในระดับใดก็ได้

JavaScript plugins- กรอบงาน NativeScript มีปลั๊กอิน JavaScript จำนวนมากเพื่อเข้าถึงฟังก์ชันที่เกี่ยวข้องกับแพลตฟอร์ม โมดูลใช้ปลั๊กอิน JavaScript เพื่อจัดเตรียมฟังก์ชันการทำงานเฉพาะแพลตฟอร์ม

Native plugins- ปลั๊กอินเนทีฟเขียนด้วยภาษาเฉพาะแพลตฟอร์มเพื่อห่อหุ้มการทำงานของระบบซึ่งจะใช้ต่อไปโดยปลั๊กอิน JavaScript

Platform API - API จัดทำโดยผู้ขายแพลตฟอร์ม

ในระยะสั้นแอปพลิเคชัน NativeScript ถูกเขียนและจัดระเบียบโดยใช้โมดูล โมดูลถูกเขียนด้วย JavaScript บริสุทธิ์และโมดูลจะเข้าถึงฟังก์ชันการทำงานที่เกี่ยวข้องกับแพลตฟอร์ม (เมื่อใดก็ตามที่จำเป็น) ผ่านปลั๊กอินและสุดท้ายปลั๊กอินจะเชื่อมโยงแพลตฟอร์ม API และ JavaScript API

เวิร์กโฟลว์ของแอปพลิเคชัน NativeScript

ดังที่เราได้เรียนรู้ไปก่อนหน้านี้แอปพลิเคชัน NativeScript ประกอบด้วยโมดูล แต่ละโมดูลเปิดใช้งานคุณลักษณะเฉพาะ โมดูลที่สำคัญสองประเภทในการบูตแอปพลิเคชัน NativeScript มีดังนี้ -

• โมดูลรูท

• โมดูลหน้า

โมดูลรูทและเพจสามารถแบ่งประเภทเป็นโมดูลแอ็พพลิเคชัน โมดูลแอ็พพลิเคชันเป็นจุดเริ่มต้นของแอ็พพลิเคชัน NativeScript มันบูตหน้าเว็บช่วยให้นักพัฒนาสร้างอินเทอร์เฟซผู้ใช้ของเพจและในที่สุดก็อนุญาตให้เรียกใช้ตรรกะทางธุรกิจของเพจ โมดูลแอปพลิเคชันประกอบด้วยสามรายการด้านล่าง -

• การออกแบบส่วนต่อประสานผู้ใช้ที่เข้ารหัสใน XML (เช่น page.xml / page.component.html)

• สไตล์ที่เข้ารหัสใน CSS (เช่น page.css / page.component.css)

• ตรรกะทางธุรกิจจริงของโมดูลใน JavaScript (เช่น page.js / page.component.ts)

NativeScript มีองค์ประกอบ UI จำนวนมาก (ภายใต้โมดูล UI) เพื่อออกแบบหน้าแอปพลิเคชัน องค์ประกอบ UI สามารถแสดงในรูปแบบ XML หรือรูปแบบ HTML ในแอปพลิเคชันที่ใช้เชิงมุม โมดูลการประยุกต์ใช้ชิ้นส่วนในการออกแบบ UI หน้าและการจัดเก็บการออกแบบในรูปแบบ XML ที่แยกจากกันpage.xml / page.component.html การออกแบบสามารถกำหนดสไตล์โดยใช้ CSS มาตรฐาน

โมดูลแอปพลิเคชันจะจัดเก็บรูปแบบของการออกแบบใน CSS แยกต่างหากpage.css / page.component.css ฟังก์ชันการทำงานของเพจสามารถทำได้โดยใช้ JavaScript / TypeScript ซึ่งสามารถเข้าถึงการออกแบบและคุณลักษณะของแพลตฟอร์มได้อย่างสมบูรณ์ โมดูลแอปพลิเคชันใช้ไฟล์แยก page.js / page.component.ts เพื่อเขียนโค้ดการทำงานจริงของเพจ

โมดูลรูท

NativeScript จัดการอินเทอร์เฟซผู้ใช้และการโต้ตอบกับผู้ใช้ผ่านคอนเทนเนอร์ UI คอนเทนเนอร์ UI ทุกตัวควรมีโมดูลรูทและคอนเทนเนอร์ UI จัดการ UI แอปพลิเคชัน NativeScript มีคอนเทนเนอร์ UI สองประเภท -

Application Container- ทุกแอปพลิเคชัน NativeScript ควรมีคอนเทนเนอร์แอปพลิเคชันเดียวและจะตั้งค่าโดยใช้วิธีการ application.run () เริ่มต้น UI ของแอปพลิเคชัน

Model View Container- NativeScript จัดการกล่องโต้ตอบ Modal โดยใช้ model view container แอปพลิเคชัน NativeScript สามารถมีคอนเทนเนอร์มุมมองแบบจำลองจำนวนเท่าใดก็ได้

ทุกโมดูลรูทควรมีส่วนประกอบ UI เพียงรายการเดียวเป็นเนื้อหา ในทางกลับกันคอมโพเนนต์ UI สามารถมีส่วนประกอบ UI อื่น ๆ เป็นลูก ๆ ได้ NativeScript มีองค์ประกอบ UI มากมายเช่น TabView, ScrollView และอื่น ๆ พร้อมคุณสมบัติลูก เราสามารถใช้สิ่งเหล่านี้เป็นองค์ประกอบ UI รูท ข้อยกเว้นประการหนึ่งคือFrameซึ่งไม่มีตัวเลือกลูก แต่สามารถใช้เป็นองค์ประกอบหลักได้ Frame มีตัวเลือกในการโหลด Page Modules และตัวเลือกเพื่อนำทางไปยังโมดูลเพจอื่น ๆด้วย

โมดูลหน้า

ใน NativeScript แต่ละและทุกหน้าเป็นพื้นหน้าโมดูล โมดูลเพจได้รับการออกแบบโดยใช้ชุดส่วนประกอบ UI ที่มีให้โดย NativeScript โมดูลเพจถูกโหลดเข้าสู่แอปพลิเคชันผ่านส่วนประกอบFrame (โดยใช้แอ็ตทริบิวต์ defaultPage หรือใช้วิธีการnav ()) ซึ่งจะโหลดโดยใช้Root Modulesซึ่งจะโหลดอีกครั้งโดยใช้ application.run () ในขณะที่แอปพลิเคชันเริ่มทำงาน

ขั้นตอนการทำงานของแอปพลิเคชันสามารถแสดงได้ดังแผนภาพด้านล่าง -

แผนภาพข้างต้นอธิบายโดยละเอียดตามขั้นตอนต่อไปนี้ -

• NativeScript Application เริ่มต้นและเรียกใช้เมธอด application.run ()

• application.run () โหลดโมดูลราก

• Root Moduleได้รับการออกแบบโดยใช้ส่วนประกอบ UI ใด ๆ ตามที่ระบุด้านล่าง -

  • Frame

  • TabView

  • SideDrawer

  • มุมมองเค้าโครงใด ๆ

• ส่วนประกอบเฟรมโหลดเพจที่ระบุ (โมดูลเพจ) และได้รับการแสดงผล UI ส่วนประกอบอื่น ๆ จะแสดงผลตามที่ระบุไว้ในรากโมดูล ส่วนประกอบ UI อื่น ๆ ยังมีตัวเลือกในการโหลดPage Modulesเป็นเนื้อหาหลัก

เวิร์กโฟลว์ของแอปพลิเคชัน NativeScript ที่ใช้ Angular

ดังที่เราได้เรียนรู้ไปก่อนหน้านี้กรอบงาน NativeScript มีวิธีการที่หลากหลายเพื่อรองรับนักพัฒนาประเภทต่างๆ วิธีการที่รองรับโดย NativeScript มีดังต่อไปนี้ -

• NativeScript Core - แนวคิดพื้นฐานหรือหลักของ NativeScript Framework

• Angular + NativeScript - วิธีการเชิงมุม

• Vuejs + NativeScript - วิธีการตาม Vue.js

ให้เราเรียนรู้ว่า Angular framework รวมอยู่ในกรอบงาน NativeScript อย่างไร

ขั้นตอนที่ 1

NativeScript จัดเตรียมอ็อบเจ็กต์ (platformNativeScriptDynamic) เพื่อบูตแอปพลิเคชัน Angular platformNativeScriptDynamic มีเมธอด bootstrapModule ซึ่งใช้ในการเริ่มต้นแอปพลิเคชัน

ไวยากรณ์ในการบูตแอปพลิเคชันโดยใช้ Angular framework มีดังนี้ -

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

ที่นี่

AppModule คือโมดูลรูทของเรา

ขั้นตอนที่ 2

การใช้งานอย่างง่าย (ด้านล่างรหัสที่ระบุ) ของโมดูลแอป

import { NgModule } from "@angular/core"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { AppRoutingModule } from "./app-routing.module"; 
import { AppComponent } from "./app.component"; 
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], imports: [
         NativeScriptModule,
         AppRoutingModule
      ], declarations: [
         AppComponent
      ]
   }
) export class AppModule { }

ที่นี่

AppModuleเริ่มแอปพลิเคชันโดยการโหลดส่วนประกอบ AppComponent ส่วนประกอบเชิงมุมคล้ายกับเพจและใช้สำหรับตรรกะการออกแบบและการเขียนโปรแกรม

การใช้งาน AppComponent (app.component.ts) อย่างง่ายและตรรกะการนำเสนอ (app.component.css) มีดังต่อไปนี้ -

app.component.ts

import { Component } from "@angular/core"; 
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.component.html"
   }
)
export class AppComponent { }

ที่นี่

templateUrlหมายถึงการออกแบบส่วนประกอบ

app.component.html

<page-router-outlet></page-router-outlet>

ที่นี่

page-router-outlet เป็นสถานที่ที่แนบแอปพลิเคชัน Angular

โดยสรุป Angular framework ประกอบด้วยโมดูลที่คล้ายกับ NativeScript framework ที่มีความแตกต่างเล็กน้อย แต่ละโมดูลใน Angular จะมีส่วนประกอบ Angular และไฟล์ติดตั้งเราเตอร์ (page-Routing.mocdule.ts) เราเตอร์ถูกตั้งค่าต่อโมดูลและดูแลการนำทาง ส่วนประกอบเชิงมุมเป็นแอนะล็อกกับเพจในแกน NativeSctipt

แต่ละองค์ประกอบจะมีการออกแบบ UI (page.component.html) สไตล์ชีต (page.component.css) และไฟล์โค้ด JavaScript / TypeScript (page.component.ts)

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

การสร้างแอปพลิเคชัน

ให้เราเรียนรู้วิธีสร้างแอปพลิเคชันง่ายๆโดยใช้ NativeScript CLI, tns tns จัดเตรียมคำสั่ง create เพื่อใช้ในการสร้างโปรเจ็กต์ใหม่ใน NativeScript

ไวยากรณ์พื้นฐานในการสร้างแอปพลิเคชันใหม่มีดังต่อไปนี้ -

tns create <projectname> --template <template_name>

ที่ไหน

• Projectname คือชื่อของโครงการ

• template_nameคือเทมเพลตโครงการ NativeScript มีเทมเพลตเริ่มต้นจำนวนมากเพื่อสร้างแอปพลิเคชันประเภทต่างๆ ใช้เทมเพลตเชิงมุม

ให้เราสร้างไดเร็กทอรีใหม่ชื่อ NativeScriptSamples เพื่อทำงานกับแอปพลิเคชันใหม่ของเรา ตอนนี้เปิดเทอร์มินัลใหม่จากนั้นย้ายไปที่ไดเร็กทอรีของเราและพิมพ์คำสั่งด้านล่าง -

tns create BlankNgApp --template tns-template-blank-ng

ที่ไหน tns-template-blank-ng หมายถึงแอปพลิเคชันมือถือเปล่าที่ใช้ AngularJS

เอาต์พุต

..... 
..... 
..... 
Project BlankNgApp was successfully created. 
Now you can navigate to your project with $ cd BlankNgApp 
After that you can preview it on device by executing $ tns preview

ตอนนี้แอปพลิเคชั่นมือถือแรกของเราBlankNgAppถูกสร้างขึ้น

โครงสร้างของแอปพลิเคชัน

ให้เราเข้าใจโครงสร้างของแอปพลิเคชัน NativeScript โดยการวิเคราะห์ BlankNgApp แอปพลิเคชันแรกของเราในบทนี้ แอปพลิเคชัน NativeScript ถูกจัดระเบียบเป็นหลายส่วนและมีดังนี้ -

• ส่วนการกำหนดค่า

• โมดูลโหนด

• แหล่งที่มาของ Android

• แหล่งที่มาของ iOS

• ซอร์สโค้ดของแอปพลิเคชัน

โครงสร้างทั่วไปของแอปพลิเคชันมีดังนี้ -

│ angular.json 
│ LICENSE 
│ nsconfig.json 
│ package-lock.json 
│ package.json 
│ tsconfig.json 
│ tsconfig.tns.json 
│ tsfmt.json 
│ webpack.config.js 
│
├───App_Resources 
│  ├───Android 
│  │ 
│  └───iOS 
│ 
├───hooks 
│ 
├───node_modules 
| 
└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
      │  app-routing.module.ts 
      │  app.component.html 
      │  app.component.ts 
      │  app.module.ts 
      │ 
      └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

ให้เราเข้าใจแต่ละส่วนของแอปพลิเคชันและวิธีที่ช่วยในการสร้างแอปพลิเคชันของเรา

ส่วนการกำหนดค่า

ไฟล์ทั้งหมดในรูทของแอ็พพลิเคชันคือไฟล์คอนฟิกูเรชัน รูปแบบของไฟล์การกำหนดค่าอยู่ในรูปแบบ JSON ซึ่งช่วยให้ผู้พัฒนาเข้าใจรายละเอียดการกำหนดค่าได้ง่าย แอปพลิเคชัน NativeScript อาศัยไฟล์เหล่านี้เพื่อรับข้อมูลการกำหนดค่าที่มีอยู่ทั้งหมด ให้เราดูไฟล์การกำหนดค่าทั้งหมดในส่วนนี้

package.json

ไฟล์ package.json ตั้งค่าเอกลักษณ์ (id) ของแอปพลิเคชันและโมดูลทั้งหมดที่แอปพลิเคชันขึ้นอยู่กับการทำงานที่เหมาะสม ด้านล่างนี้คือ package.json ของเรา -

{ 
   "nativescript": {
      "id": "org.nativescript.BlankNgApp",
      "tns-android": {
         "version": "6.3.1"
      }, "tns-ios": {
         "version": "6.3.0"
      } 
   }, "description": "NativeScript Application", 
   "license": "SEE LICENSE IN <your-license-filename>", 
   "repository": "<fill-your-repository-here>", 
   "dependencies": { 
      "@angular/animations": "~8.2.0", 
      "@angular/common": "~8.2.0", 
      "@angular/compiler": "~8.2.0", 
      "@angular/core": "~8.2.0", 
      "@angular/forms": "~8.2.0", 
      "@angular/platform-browser": "~8.2.0", 
      "@angular/platform-browser-dynamic": "~8.2.0", 
      "@angular/router": "~8.2.0", 
      "@nativescript/theme": "~2.2.1", 
      "nativescript-angular": "~8.20.3", 
      "reflect-metadata": "~0.1.12", 
      "rxjs": "^6.4.0", 
      "tns-core-modules": "~6.3.0", 
      "zone.js": "~0.9.1" 
   }, 
   "devDependencies": { 
      "@angular/compiler-cli": "~8.2.0", 
      "@ngtools/webpack": "~8.2.0", 
      "nativescript-dev-webpack": "~1.4.0", 
      "typescript": "~3.5.3" 
   }, 
   "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", 
   "readme": "NativeScript Application" 
}

ที่นี่

Identity of the application (nativescript/id)- ตั้งค่า id ของแอปพลิเคชันเป็น org.nativescript.BlankNgApp รหัสนี้ใช้เพื่อเผยแพร่แอปของเราไปยัง Play Store หรือ iTunes รหัสนี้จะเป็นตัวระบุแอปพลิเคชันหรือชื่อแพ็กเกจ

Dependencies (dependencies)- ระบุโมดูลโหนดที่เกี่ยวข้องทั้งหมดของเรา เนื่องจากการใช้งาน NativeScript เริ่มต้นขึ้นอยู่กับ Angular Framework จึงรวมโมดูล Angular ไว้ด้วย

Development dependencies- ระบุเครื่องมือทั้งหมดที่แอปพลิเคชันขึ้นอยู่ เนื่องจากเรากำลังพัฒนาแอปพลิเคชันของเราใน TypeScript จึงมี typescript เป็นหนึ่งในโมดูลที่ต้องพึ่งพา

angular.json - ข้อมูลการกำหนดค่ากรอบเชิงมุม

nsconfig.json - ข้อมูลการกำหนดค่ากรอบงาน NativeScript

tsconfig.json, tsfmt.json & tsconfig.tns.json - ข้อมูลการกำหนดค่าภาษา TypeScript

webpack.config.js - การกำหนดค่า WebPack ที่เขียนด้วย JavaScript

โมดูลโหนด

เนื่องจากโปรเจ็กต์ NativeScript เป็นโปรเจ็กต์ที่ใช้โหนดจึงเก็บการอ้างอิงทั้งหมดไว้ในโฟลเดอร์ node_modules เราสามารถใช้ npm (npm install) หรือ tns เพื่อดาวน์โหลดและติดตั้งการพึ่งพาแอปพลิเคชันทั้งหมดใน node_moduels

ซอร์สโค้ด Android

NativeScript จะสร้างซอร์สโค้ด android โดยอัตโนมัติและวางไว้ในโฟลเดอร์ App_Resources \ Android จะใช้ในการสร้างแอปพลิเคชันAndroidโดยใช้Android SDK

ซอร์สโค้ด iOS

NativeScript จะสร้างซอร์สโค้ด iOS โดยอัตโนมัติและวางไว้ในโฟลเดอร์ App_Resources \ iOS จะใช้ในการสร้างแอปพลิเคชัน iOS โดยใช้ iOS SDK และ XCode

ซอร์สโค้ดของแอปพลิเคชัน

รหัสแอปพลิเคชันจริงจะอยู่ในโฟลเดอร์ src แอปพลิเคชันของเรามีไฟล์ด้านล่างในโฟลเดอร์ src

└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
   │ app-routing.module.ts 
   │ app.component.html 
   │ app.component.ts 
   │ app.module.ts 
   │ 
   └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

ให้เราเข้าใจจุดประสงค์ของไฟล์ทั้งหมดและวิธีจัดระเบียบในส่วนนี้ -

ขั้นตอนที่ 1

main.ts - จุดเริ่มต้นของแอปพลิเคชัน

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

ที่นี่เราได้ตั้ง AppModule เป็นโมดูล bootstrapping ของแอปพลิเคชัน

ขั้นตอนที่ 2

app.css - สไตล์ชีตหลักของแอปพลิเคชันดังแสดงด้านล่าง -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

ที่นี่

app.css นำเข้าสไตล์ชีตหลักและสไตล์ชีตธีมสีน้ำตาลของกรอบงาน NativeScript

ขั้นตอนที่ 3

app \ app.module.ts - โมดูลรูทของแอปพลิเคชัน

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], 
      imports: [
         NativeScriptModule,
         AppRoutingModule
      ], 
      declarations: [
         AppComponent
      ], schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class AppModule { }

ที่นี่

AppModule สร้างขึ้นตาม NgModule และตั้งค่าส่วนประกอบและโมดูลของแอปพลิเคชัน มันนำเข้าสองโมดูล NativeScriptModule และ AppRoutingModule และส่วนประกอบ AppComponent นอกจากนี้ยังตั้ง AppComponent เป็นส่วนประกอบหลักของแอปพลิเคชัน

ขั้นตอนที่ 4

app.component.ts - ส่วนประกอบรูทของแอปพลิเคชัน

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

ที่นี่

AppComponent ตั้งค่าเทมเพลตและสไตล์ชีตของคอมโพเนนต์ เทมเพลตได้รับการออกแบบใน HMTL ธรรมดาโดยใช้ส่วนประกอบ NativeScript UI

ขั้นตอนที่ 5

app-Routing.module.ts - โมดูลการกำหนดเส้นทางสำหรับ AppModule

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: () =>
   import("~/app/home/home.module").then((m) => m.HomeModule) } 
];
@NgModule(
   {
      imports: [NativeScriptRouterModule.forRoot(routes)], 
      exports: [NativeScriptRouterModule] 
   }
)
export class AppRoutingModule { }

ที่นี่

AppRoutingModule ใช้ NativeScriptRouterModule และกำหนดเส้นทางของ AppModule โดยทั่วไปจะเปลี่ยนเส้นทางที่ว่างเปล่าไปยัง / home และจุด / home ไปยัง HomeModule

ขั้นตอนที่ 6

app \ home \ home.module.ts - กำหนดโมดูลใหม่ HomeModule

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
   {
      imports: [
         NativeScriptCommonModule,
         HomeRoutingModule
      ],
      declarations: [
         HomeComponent
      ],
      schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class HomeModule { }

ที่นี่

HomeModule นำเข้าสองโมดูล HomeRoutingModule และ NativeScriptCommonModule และส่วนประกอบ HomeComponent หนึ่งส่วนประกอบ

ขั้นตอนที่ 7

app \ home \ home.component.ts - กำหนดส่วนประกอบ Home และใช้เป็นโฮมเพจของแอปพลิเคชัน

import { Component, OnInit } from "@angular/core";
@Component(
   {
      selector: "Home", templateUrl: "./home.component.html" 
   }
) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
}

ที่นี่

HomeComponent ตั้งค่าแม่แบบและตัวเลือกของส่วนประกอบบ้าน

ขั้นตอนที่ 8

app \ home \ home-routeing.module.ts - โมดูลการกำหนดเส้นทางสำหรับ HomeModule และใช้เพื่อกำหนดการกำหนดเส้นทางสำหรับโมดูลภายในบ้าน

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
const routes: Routes = [
   { path: "", component: HomeComponent } 
]; 
@NgModule(
   { 
      imports: [NativeScriptRouterModule.forChild(routes)], 
      exports: [NativeScriptRouterModule] 
   }
) 
export class HomeRoutingModule { }

ที่นี่

HomeRoutingModule ตั้งค่าพา ธ ว่างไปยัง HomeComponent

ขั้นตอนที่ 9

app.component.html และ home.component.html - ใช้ในการออกแบบ UI ของแอปพลิเคชันโดยใช้คอมโพเนนต์ NativeScript UI

เรียกใช้แอปของคุณ

หากคุณต้องการเรียกใช้แอปของคุณโดยไม่ต้องใช้อุปกรณ์ใด ๆ ให้พิมพ์คำสั่งด้านล่าง -

tns preview

หลังจากดำเนินการคำสั่งนี้สิ่งนี้จะสร้างรหัส QR เพื่อสแกนและเชื่อมต่อกับอุปกรณ์ของคุณ

เอาต์พุต

QRCode

ตอนนี้รหัส QR ถูกสร้างขึ้นและเชื่อมต่อกับ PlayGround ในขั้นตอนต่อไป

NativeScript PlayGround

แอปเปิด NativeScript สนามเด็กเล่น iOS หรือ Android มือถือของคุณแล้วเลือกสแกนรหัส QRตัวเลือก มันจะเปิดกล้อง เน้นรหัส QR ที่แสดงบนคอนโซล เพื่อสแกน QR Code การสแกน QR Code จะเรียกการสร้างแอปพลิเคชันจากนั้นซิงค์แอปพลิเคชันกับอุปกรณ์ตามที่ระบุด้านล่าง -

Copying template files... 
Platform android successfully added. v6.3.1 
Preparing project... 
File change detected. Starting incremental webpack compilation... 
webpack is watching the files… 
Hash: 1f38aaf6fcda4e082b88 
Version: webpack 4.27.1 
Time: 9333ms 
Built at: 01/04/2020 4:22:31 PM
               Asset          Size        Chunks         Chunk Names 
               0.js           8.32 KiB     0     [emitted] 
          bundle.js           22.9 KiB    bundle [emitted] bundle 
       package.json          112 bytes           [emitted] 
         runtime.js             73 KiB   runtime [emitted] runtime 
tns-java-classes.js            0 bytes  [emitted] 
          vendor.js            345 KiB   vendor  [emitted] vendor 
Entrypoint bundle = runtime.js vendor.js bundle.js 
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy 
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built] 
[./app/app.component.html] 62 bytes {bundle} [built] 
[./app/app.component.ts] 354 bytes {bundle} [built] 
[./app/app.module.ts] 3.22 KiB {bundle} [built] 
[./app/home/home.module.ts] 710 bytes {0} [built] 
[./main.ts] 1.84 KiB {bundle} [built] 
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built] 
[nativescript-angular/platform] external "nativescript-angular/platform" 42 
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built] 
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42 
bytes {bundle} [built] 
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built] 
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built] 
   + 15 hidden modules Webpack compilation complete. Watching for file changes. 
Webpack build done! 
Project successfully prepared (android) 
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f). 
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f). 
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal. 
LOG from device Bala Honor Holly: Angular is running in the development mode. 
Call enableProdMode() to enable the production mode.

เอาต์พุต

หลังจากสแกนคุณจะเห็น BlankNgApp บนอุปกรณ์ของคุณ ดังแสดงด้านล่าง -

เรียกใช้แอปของคุณบนอุปกรณ์

หากคุณต้องการทดสอบอุปกรณ์ที่เชื่อมต่อในแอปพลิเคชันของคุณคุณสามารถตรวจสอบได้โดยใช้ไวยากรณ์ด้านล่าง -

'tns device <Platform> --available-devices'

หลังจากนั้นคุณสามารถเรียกใช้แอพของคุณโดยใช้คำสั่งด้านล่าง -

tns run

คำสั่งดังกล่าวใช้เพื่อสร้างแอปของคุณในเครื่องและติดตั้งบนอุปกรณ์ Andriod หรือ iOS หากคุณต้องการเรียกใช้แอปของคุณบนโปรแกรมจำลอง Android ให้พิมพ์คำสั่งด้านล่าง -

tns run android

สำหรับอุปกรณ์ iOS คุณสามารถทำตามคำสั่งด้านล่าง -

tns run ios

การดำเนินการนี้จะเริ่มต้นแอปในอุปกรณ์ Android / iOS เราจะพูดถึงเรื่องนี้โดยละเอียดในบทต่อ ๆ ไป

LiveSync

NativeScript ให้การซิงค์แบบเรียลไทม์ของการเปลี่ยนแปลงในแอปพลิเคชันกับแอปพลิเคชันการแสดงตัวอย่าง ให้เราเปิดโครงการโดยใช้โปรแกรมแก้ไขที่คุณชื่นชอบ (Visual Studio Code จะเป็นตัวเลือกที่เหมาะสำหรับการแสดงภาพที่ดีขึ้น) ให้เราเพิ่มการเปลี่ยนแปลงบางอย่างในโค้ดของเราและดูว่าจะตรวจพบใน LiveSync ได้อย่างไร

ตอนนี้เปิดไฟล์ app.css และจะมีเนื้อหาด้านล่าง -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/blue.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

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

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

แอปพลิเคชันในอุปกรณ์ของเราจะรีเฟรชและคุณจะเห็น ActionBar สีน้ำตาลดังที่แสดงด้านล่าง -

เอาต์พุต

ด้านล่างนี้คือหน้าแรกของ BlankNgApp - ธีมสีน้ำตาล

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

ใช้เทมเพลต

ตามที่เรียนไว้ก่อนหน้านี้สามารถสร้างแอปพลิเคชันใหม่โดยใช้ไฟล์ create คำสั่งย่อยของคำสั่ง tns

tns create <app-name> --template <tns-template-name>

ที่นี่

tns-template-name คือชื่อของเทมเพลต

หากคุณต้องการสร้างเทมเพลตด้วยหน้าเดียวและไม่มีสไตล์ที่กำหนดเองโดยใช้ JavaScript ให้ใช้คำสั่งด้านล่าง -

tns create <app-name> --template tns-template-blank

เทมเพลตเดียวกันข้างต้นสามารถสร้างได้โดยใช้ TypeScript ดังนี้ -

tns create <app-name> --template tns-template-blank-ts

เทมเพลตการนำทาง

เทมเพลตการนำทางใช้เพื่อสร้างแอปพลิเคชันระดับปานกลางถึงซับซ้อน มาพร้อมกับการกำหนดค่าล่วงหน้าSideDrawer คอมโพเนนต์ที่มีหลายหน้า SideDrawerคอมโพเนนต์มีมุมมองที่ซ่อนอยู่สำหรับ UI การนำทางหรือการตั้งค่าทั่วไป ใช้คำสั่งด้านล่างเพื่อสร้างแอปพลิเคชันตามการนำทาง -

tns create <app-name> --template tns-template-drawer-navigation

เทมเพลตการนำทางของแท็บ

เทมเพลตการนำทางของแท็บใช้เพื่อสร้างแอปพลิเคชันตามแท็บ มาพร้อมกับการกำหนดค่าล่วงหน้าTabViewคอมโพเนนต์ที่มีหลายหน้า ใช้คำสั่งด้านล่างเพื่อสร้างแอปพลิเคชันตามแท็บ -

tns create <app-name> --template tns-template-tab-navigation

เทมเพลตรายละเอียดหลัก

เทมเพลต Master-Detail ใช้เพื่อสร้างแอปพลิเคชันตามรายการพร้อมกับหน้ารายละเอียดสำหรับทุกรายการในรายการ

tns create <app-name> --template tns-template-master-detail

เทมเพลตที่กำหนดเอง

ในการสร้างเทมเพลตที่กำหนดเองอย่างง่ายเราจำเป็นต้องโคลนเทมเพลตเปล่า ดังที่คุณทราบแล้ว NativeScript รองรับเทมเพลต JavaScript, TypeScript, Angular และ Vue.js เพื่อให้คุณสามารถเลือกภาษาใดก็ได้และสร้างแบบกำหนดเองของคุณ

ตัวอย่างเช่นโคลนเทมเพลตที่เรียบง่ายและกำหนดเองจากที่เก็บ git โดยใช้คำสั่งด้านล่าง -

git clone https://github.com/NativeScript/template-blank-ts.git

ตอนนี้มันจะสร้างโครงสร้างแอพมือถือเพื่อให้คุณสามารถทำการเปลี่ยนแปลงใด ๆ และเรียกใช้อุปกรณ์ Android / iOS ของคุณ โครงสร้างนี้เป็นไปตามรายการแนวทาง ให้เราดูแนวทางโดยสังเขป

โครงสร้าง

เทมเพลตที่กำหนดเองของคุณต้องเป็นไปตามข้อกำหนดต่อไปนี้ -

• อย่าวางโค้ดของคุณไว้ในโฟลเดอร์รูทของแอพ

• สร้างโฟลเดอร์แยกต่างหากและเพิ่มพื้นที่คุณลักษณะภายใน

• ควรวางหน้าดูรุ่นและบริการในพื้นที่คุณลักษณะ ซึ่งจะช่วยในการสร้างรหัสที่เรียบร้อยและสะอาด

• สร้างโฟลเดอร์หน้าและขึ้นภายใน.ts, .xml .scss css / ฯลฯไฟล์

package.json

วางไฟล์ package.json ในโฟลเดอร์รูทของเทมเพลตแอปของคุณ ระบุค่าสำหรับคุณสมบัติ name โดยใช้รูปแบบ -

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

กำหนดค่าสำหรับคุณสมบัติเวอร์ชัน มีการกำหนดไว้ด้านล่าง -

"version": "3.2.1",

กำหนดค่าสำหรับคุณสมบัติหลักที่ระบุจุดเริ่มต้นของแอปของคุณ มีการกำหนดไว้ด้านล่าง -

"main": "app.js",

กำหนดค่าสำหรับคุณสมบัติ android มีการกำหนดไว้ด้านล่าง -

"android": { 
   "v8Flags": "--expose_gc" 
},

ควรระบุคุณสมบัติที่เก็บไว้ในโค้ดของคุณดังนี้ -

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

สไตล์

นำเข้าสไตล์และธีมในเทมเพลตแอปของคุณโดยใช้ไวยากรณ์ด้านล่าง -

@import '~nativescript-theme-core/scss/light';

นอกจากนี้เรายังสามารถกำหนดสีพื้นหลังที่กำหนดเองได้โดยใช้รหัสด้านล่าง -

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);

NativeScript จัดเตรียมคอมโพเนนต์ส่วนติดต่อผู้ใช้จำนวนมากและเรียกว่า 'วิดเจ็ต' แต่ละวิดเจ็ตทำงานพิเศษและมาพร้อมกับชุดวิธีการ มาทำความเข้าใจกับวิดเจ็ต NativeScript โดยละเอียดในส่วนนี้

ปุ่ม

ปุ่มเป็นส่วนประกอบในการดำเนินการแตะเหตุการณ์ เมื่อผู้ใช้แตะปุ่มจะดำเนินการตามนั้น มีการกำหนดไว้ด้านล่าง -

<Button text="Click here!" tap="onTap"></Button>

ให้เราเพิ่มปุ่มใน BlankNgApp ของเราดังต่อไปนี้ -

ขั้นตอนที่ 1

เปิด src\app\home\home.component.html. นี่คือหน้าออกแบบ UI ของส่วนประกอบบ้านของเรา

ขั้นตอนที่ 2

เพิ่มปุ่มภายในไฟล์ GirdLayoutส่วนประกอบ. รหัสที่สมบูรณ์มีดังนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของปุ่ม -

ขั้นตอนที่ 3

เราสามารถจัดรูปแบบปุ่มโดยใช้ CSS ตามที่ระบุด้านล่าง -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>

ที่นี่ -primary คลาสใช้แทนปุ่มหลัก

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ ButtonPrimary -

ขั้นตอนที่ 4

NativeScript มีตัวเลือกที่จัดรูปแบบเพื่อให้ไอคอนที่กำหนดเองในปุ่ม โค้ดตัวอย่างมีดังนี้ -

<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

ที่นี่

& # xf099 ระบุตำแหน่งของไอคอนในแบบอักษร FontAwesome ดาวน์โหลดฟอนต์ Font Awesome ล่าสุดและวาง fontawesome-webfont.ttf ในโฟลเดอร์ src \ ฟอนต์

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ ButtonPrimary -

ขั้นตอนที่ 5

ปุ่มโค้งมนสามารถสร้างได้โดยใช้ไวยากรณ์ด้านล่าง -

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ ButtonPrimary -

ฉลาก

ส่วนประกอบฉลากใช้เพื่อแสดงข้อความคงที่ เปลี่ยนโฮมเพจตามด้านล่าง -

<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>

ที่นี่ textWrap จะตัดเนื้อหาของป้ายกำกับหากฉลากขยายเกินความกว้างของหน้าจอ

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ Label -

ช่องข้อความ

ส่วนประกอบ TextFieldใช้เพื่อรับข้อมูลจากผู้ใช้ ให้เราเปลี่ยนหน้าแรกของเราตามที่ระบุด้านล่าง -

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

ที่นี่

• สีแทนสีข้อความ

• backgroundColor แสดงพื้นหลังของกล่องข้อความ

• ความสูงแสดงถึงความสูงของกล่องข้อความ

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของฟิลด์ข้อความ -

TextView

TextView Componentใช้เพื่อรับเนื้อหาข้อความหลายบรรทัดจากผู้ใช้ ให้เราเปลี่ยนหน้าแรกของเราตามที่ระบุด้านล่าง -

<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>

นี่ maxLength แทนความยาวสูงสุดรับการยอมรับจากTextView

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ TextView -

SearchBar

คอมโพเนนต์นี้ใช้สำหรับค้นหาข้อสงสัยหรือส่งคำขอใด ๆ มีการกำหนดไว้ด้านล่าง -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>

เราสามารถใช้รูปแบบ -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>

ด้านล่างนี้คือผลลัพธ์ของ SearchBarStyle -

สวิตซ์

สวิตช์จะขึ้นอยู่กับการสลับเพื่อเลือกระหว่างตัวเลือกต่างๆ สถานะเริ่มต้นเป็นเท็จ มีการกำหนดไว้ด้านล่าง -

<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>

ผลลัพธ์สำหรับโปรแกรมข้างต้นแสดงไว้ด้านล่าง -

ตัวเลื่อน

Slider เป็นส่วนประกอบแบบเลื่อนเพื่อเลือกช่วงตัวเลข มีการกำหนดไว้ด้านล่าง -

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

ผลลัพธ์สำหรับโปรแกรมข้างต้นแสดงไว้ด้านล่าง -

ความคืบหน้า

วิดเจ็ตความคืบหน้าบ่งชี้ความคืบหน้าในการดำเนินการ ความคืบหน้าปัจจุบันแสดงเป็นแถบ มีการกำหนดไว้ด้านล่าง -

<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

ด้านล่างนี้คือผลลัพธ์ของวิดเจ็ต Progress -

ActivityIndicator

ActivityIndicator แสดงงานที่กำลังดำเนินการ มีการกำหนดไว้ด้านล่าง -

<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>

ด้านล่างนี้คือผลลัพธ์สำหรับ ActivityIndicator -

ภาพ

วิดเจ็ตรูปภาพใช้เพื่อแสดงรูปภาพ สามารถโหลดได้โดยใช้ URL "ImageSource" มีการกำหนดไว้ด้านล่าง -

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>

ผลลัพธ์สำหรับ Image Widget มีดังที่แสดงด้านล่าง -

WebView

WebView แสดงหน้าเว็บ สามารถโหลดหน้าเว็บได้โดยใช้ URL มีการกำหนดไว้ด้านล่าง -

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

ผลลัพธ์สำหรับโค้ดด้านบนมีดังที่แสดงด้านล่าง -

เลือกวันที่

คอมโพเนนต์ DatePicker ใช้เพื่อเลือกวันที่ มีการกำหนดไว้ด้านล่าง -

<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>

ผลลัพธ์ของคอมโพเนนต์ DatePicker ดังแสดงด้านล่าง -

TimePicker

ส่วนประกอบ TimePicker ใช้เพื่อเลือกเวลา มีการกำหนดไว้ด้านล่าง -

<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>

ด้านล่างนี้เป็นผลลัพธ์ของส่วนประกอบ TimePicker -

NativeScript จัดเตรียมคอลเลกชันของส่วนประกอบคอนเทนเนอร์เพื่อจุดประสงค์เดียวในการจัดวางองค์ประกอบวิดเจ็ต UI คอนเทนเนอร์เค้าโครงทำหน้าที่เป็นองค์ประกอบหลักและสามารถมีองค์ประกอบลูกอย่างน้อยหนึ่งรายการ องค์ประกอบลูกทั้งหมดของคอนเทนเนอร์โครงร่างสามารถจัดเรียงตามเทคนิคที่จัดเตรียมโดยคอนเทนเนอร์โครงร่างหลัก

NativeScript รองรับคอนเทนเนอร์เลย์เอาต์หกแบบและมีดังต่อไปนี้ -

• คอนเทนเนอร์เค้าโครงแน่นอน

• คอนเทนเนอร์เค้าโครงท่าเรือ

• คอนเทนเนอร์เค้าโครงตาราง

• คอนเทนเนอร์เค้าโครงสแต็ก

• ห่อเค้าโครงคอนเทนเนอร์

• คอนเทนเนอร์เค้าโครง FlexBox

ให้เราเรียนรู้แนวคิดคอนเทนเนอร์โครงร่างทั้งหมดโดยละเอียดในบทนี้

เค้าโครงแน่นอน

AbsoluteLayoutcontainer เป็นคอนเทนเนอร์โครงร่างที่ง่ายที่สุดใน NativeScript AbsoluteLayout ไม่บังคับใช้ข้อ จำกัด ใด ๆ กับลูกของมันและจะวางลูกไว้ข้างในโดยใช้ระบบพิกัด 2 มิติที่มีมุมบนซ้ายเป็นจุดเริ่มต้น

AbsoluteLayout ใช้คุณสมบัติสี่ประการของลูก ๆ เพื่อวางตำแหน่งและมีดังนี้ -

top - กำหนดตำแหน่งของเด็กจากจุดเริ่มต้นเคลื่อนลงไปในทิศทาง y

left - กำหนดตำแหน่งของเด็กจากจุดเริ่มต้นที่เคลื่อนที่ไปด้านข้างในทิศทาง x

width - กำหนดความกว้างของเด็ก

height - กำหนดความสูงของเด็ก

ให้เราเพิ่มคอนเทนเนอร์ AbsoluteLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

เอาต์พุต

ผลลัพธ์ของ AbsoluteLayout มีดังต่อไปนี้ -

DockLayout

Docklayoutส่วนประกอบคอนเทนเนอร์ช่วยให้เด็ก ๆ สามารถเทียบท่าภายในได้ แต่ละด้านของคอนเทนเนอร์ (บนล่างซ้ายขวา) สามารถเชื่อมต่อส่วนประกอบย่อยได้ คอนเทนเนอร์ DockLayout ใช้คุณสมบัติท่าเรือของลูก ๆ เพื่อเชื่อมต่ออย่างถูกต้อง

ค่าที่เป็นไปได้ของคุณสมบัติท่าเรือมีดังนี้ -

top - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมด้านบน

bottom - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมด้านล่าง

left - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมซ้าย

right - โครงร่างคอนเทนเนอร์เชื่อมต่อส่วนประกอบลูกที่มุมขวา

โดยค่าเริ่มต้น, DockLayoutคอนเทนเนอร์เชื่อมต่อกับคอมโพเนนต์ลูกสุดท้าย สามารถแทนที่ได้โดยการตั้งค่าคุณสมบัติ stretchLastChild เป็นศูนย์

ให้เราเพิ่ม DockLayout คอนเทนเนอร์ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

เอาต์พุต

ด้านล่างนี้คือเอาต์พุตสำหรับ DockLayout -

GridLayout

คอมโพเนนต์คอนเทนเนอร์ GridLayout เป็นหนึ่งในคอนเทนเนอร์โครงร่างที่ซับซ้อนและจัดเรียงองค์ประกอบลูกในรูปแบบตารางด้วยแถวและคอลัมน์ โดยค่าเริ่มต้นจะมีหนึ่งแถวและหนึ่งคอลัมน์ มีคุณสมบัติดังต่อไปนี้ -

columns- ใช้เพื่อแสดงความกว้างเริ่มต้นของแต่ละคอลัมน์โดยคั่นด้วย. ค่าที่เป็นไปได้คือตัวเลข * และคำหลักอัตโนมัติ

ที่ไหน

• ตัวเลขระบุความกว้างของคอลัมน์สัมบูรณ์

• ระบุความกว้างของคอลัมน์ที่สัมพันธ์กับคอลัมน์อื่น ๆ สามารถนำหน้าด้วยตัวเลขเพื่อระบุจำนวนครั้งที่ความกว้างของคอลัมน์ควรสัมพันธ์กับคอลัมน์อื่น ตัวอย่างเช่น 2 * ระบุความกว้างคอลัมน์ควรเป็น 2 เท่าของความกว้างของคอลัมน์ที่เล็กที่สุด

• อัตโนมัติระบุความกว้างของคอลัมน์ที่กว้างเท่ากับลูกที่กว้างที่สุด

ตัวอย่างเช่น *, 2 * หมายถึงสองคอลัมน์และวินาทีจะมีขนาดเป็นสองเท่าของคอลัมน์แรก

rows - ใช้เพื่อแสดงความสูงเริ่มต้นของแต่ละแถวที่คั่นด้วย. การแทนค่าจะคล้ายกับคอลัมน์

GridLayout ใช้คุณสมบัติที่ระบุด้านล่างของลูกเพื่อจัดวาง -

row - หมายเลขแถว

col - หมายเลขคอลัมน์

rowSpan - จำนวนแถวทั้งหมดที่เนื้อหาย่อยครอบคลุมภายในเค้าโครง

colSpan - จำนวนคอลัมน์ทั้งหมดที่เนื้อหาย่อยครอบคลุมภายในเค้าโครง

ให้เราเพิ่มคอนเทนเนอร์ GridLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์สำหรับ GridLayout -

StackLayout

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

ให้เราเพิ่มคอนเทนเนอร์ StackLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

เอาต์พุต

ผลลัพธ์สำหรับ StackLayout เป็นดังที่แสดงด้านล่าง -

WrapLayout

WrapLayout ใช้เพื่อรวมเนื้อหาในแถวหรือคอลัมน์ใหม่

มีคุณสมบัติสามประการดังต่อไปนี้ -

orientation - แสดงทั้งในแนวนอนหรือแนวตั้ง

itemWidth - ความกว้างของเค้าโครงสำหรับเด็กแต่ละคน

itemHeight - ความสูงของเค้าโครงสำหรับเด็กแต่ละคน

ให้เราเพิ่มคอนเทนเนอร์ WrapLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

เอาต์พุต

เค้าโครง Flexbox

ส่วนประกอบคอนเทนเนอร์ FlexboxLayout เป็นหนึ่งในคอนเทนเนอร์โครงร่างขั้นสูง มีตัวเลือกในการแสดงเค้าโครงที่เรียบง่ายไปจนถึงเค้าโครงที่ซับซ้อนและซับซ้อนมาก มันขึ้นอยู่กับ CSS Flexbox

ส่วนประกอบ FlexboxLayout มีคุณสมบัติมากมายและมีดังนี้ -

flexDirection

แสดงถึงทิศทางในการจัดเรียงส่วนประกอบย่อย ค่าที่เป็นไปได้ของ flexDirection มีดังนี้ -

row - ส่วนประกอบของเด็กจัดเรียงเคียงข้างกัน

row-reverse - ส่วนประกอบของลูกถูกจัดเรียงเคียงข้างกัน แต่กลับกัน

column - ส่วนประกอบย่อยจัดเรียงไว้ด้านล่างอีกชิ้นหนึ่ง

column-reverse - ส่วนประกอบย่อยถูกจัดเรียงไว้ด้านล่างอีกชิ้นหนึ่ง แต่อยู่ในทิศทางกลับกัน

ให้เราเพิ่มคอนเทนเนอร์ FlexLayout ในหน้าแรกของแอปพลิเคชันของเราดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ FlexLayout - Row -

ตอนนี้ให้เราเปลี่ยนค่า flexDirection จาก row เป็น row-reverse และตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ Flex Layout - Row Reverse -

ให้เราเปลี่ยนค่า flexDirection จาก row-reverse เป็น column และตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ผลลัพธ์สำหรับ FlexLayout - คอลัมน์ได้รับด้านล่าง -

ให้เราเปลี่ยนค่า flexDirection จากคอลัมน์เป็นคอลัมน์ย้อนกลับและตรวจสอบว่ามีผลต่อเลย์เอาต์อย่างไร

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ FlexLayout - Column Reverse -

flexWrap

แสดงว่าคอมโพเนนต์ลูกจะแสดงผลในแถว / คอลัมน์เดียวหรือไหลเป็นหลายแถวโดยการห่อตามทิศทางที่กำหนดโดย flexDirection

ค่าที่เป็นไปได้มีดังนี้ -

wrap - ห่อส่วนประกอบลูกถ้าไม่มีที่ว่างในทิศทางที่กำหนด (flexDirection)

wrap-reverse - เหมือนกับการห่อยกเว้นการไหลของส่วนประกอบในทิศทางตรงกันข้าม

ให้เราเพิ่มคุณสมบัติ flexWrap แล้วตั้งค่าเป็น wrap เพิ่มลูกอีกสามคนตามที่ระบุด้านล่าง -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์สำหรับ flexWrap -

JustifyContent

มันแสดงถึงการจัดเรียงองค์ประกอบย่อยโดยเคารพซึ่งกันและกันและโครงสร้างโดยรวม มีคุณสมบัติสามประการตามที่ระบุไว้ด้านล่าง -

flex-end - บรรจุส่วนประกอบลูกไว้ที่ท้ายบรรทัด

space-between - บรรจุส่วนประกอบลูกโดยกระจายอย่างสม่ำเสมอในบรรทัด

space-around - คล้ายกับช่องว่างระหว่างยกเว้นจะบรรจุองค์ประกอบลูกโดยการกระจายอย่างสม่ำเสมอในแนวเดียวกันและพื้นที่รอบ ๆ เท่า ๆ กัน

ให้เราเพิ่ม justifyContent ด้วยและตรวจสอบว่ามันทำงานอย่างไร -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

เอาต์พุต

ด้านล่างนี้คือผลลัพธ์ของ Flex Layout - JustifyContent -

คอนเทนเนอร์ FlexLayout มีคุณสมบัติอีกสองอย่างสำหรับชายด์ในการระบุลำดับและความสามารถในการย่อขนาด มีดังนี้ -

order - กำหนดลำดับที่จะแสดงผลลูกของคอนเทนเนอร์ FlexLayout

flexShrink - กำหนดความสามารถของเด็กที่จะลดระดับเป็น 0

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

การนำทางแตกต่างกันอย่างมากระหว่าง NativeScript เวอร์ชันหลักและเชิงมุม ในขณะที่การนำทางเฟรมเวิร์กหลักเป็นรากฐานสำหรับกระบวนการการนำทางโมเดล Angular ของ NativeScript ใช้แนวคิดการนำทางหลักและขยายออกไปเพื่อให้เข้ากันได้กับเฟรมเวิร์กเชิงมุม

ให้เราดูทั้งแนวคิดการนำทางหลักและการนำทางเชิงมุมมาใช้ในบทนี้

แนวคิดหลัก

ให้เราเข้าใจว่าการนำทางทำงานอย่างไรใน NativeScript หลักในบทนี้

ใน NativeScript การนำทางแบ่งออกเป็นสี่ประเภทที่แตกต่างกันตามทิศทางที่ใช้ตามที่ระบุด้านล่าง -

• นำทางไปข้างหน้า

• การนำทางย้อนกลับ

• การนำทางด้านข้าง

• การนำทางด้านล่าง

นำทางไปข้างหน้า

การนำทางไปข้างหน้าหมายถึงการนำทางผู้ใช้ไปยังหน้าจอในลำดับชั้นระดับถัดไป มันขึ้นอยู่กับสององค์ประกอบ NativeScriptFrame และ Page.

Frame

เฟรมเป็นส่วนประกอบระดับรูทสำหรับการนำทาง ไม่ใช่คอนเทนเนอร์ที่มองเห็นได้ แต่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับการเปลี่ยนระหว่างเพจ

ตัวอย่างง่ายๆมีดังนี้ -

<Frame id="featured" defaultPage="featured-page" />

ที่นี่

เฟรมนำทางไปยัง (หรือโหลด) คอมโพเนนต์ของเพจแนะนำและแสดงผล

Page

เพจอยู่ถัดจากองค์ประกอบเฟรมและทำหน้าที่เป็นคอนเทนเนอร์สำหรับคอมโพเนนต์ UI ตัวอย่างง่ายๆถูกกำหนดไว้ด้านล่าง -

<Page loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <AbsoluteLayout> 
      <Label text="Label"/< 
      <Button text="navigate('another-page')" tap="onTap"/> 
   </AbsoluteLayout> 
</Page>

ที่นี่

• ในขั้นต้น Page จะโหลดส่วนประกอบ UI ทั้งหมดของหน้าจอและแสดงผล

• เมื่อผู้ใช้คลิกปุ่มก็จะนำทางผู้ใช้ไป another-page หน้า.

การนำทางย้อนกลับ

วิธีการนำทางย้อนกลับช่วยให้สามารถเคลื่อนถอยหลังผ่านหน้าจอภายในแอพเดียวหรือข้ามแอพต่างๆ มันเป็นทิศทางตรงกันข้ามกับการนำทางไปข้างหน้า วิธีง่ายๆ goBack () ใช้เพื่อย้อนกลับไปยังหน้าที่แล้ว

มีการกำหนดไว้ด้านล่าง -

<Page class="page" loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Back" tap="goBack"/> 
   </StackLayout> 
</Page>

ที่นี่

goBack() วิธีการจะถูกเรียกใช้เมื่อผู้ใช้แตะปุ่ม goBack() นำทางผู้ใช้ไปยังเพจก่อนหน้าหากมีอยู่

การนำทางด้านข้าง

การนำทางด้านข้างหมายถึงการนำทางระหว่างหน้าจอที่ลำดับชั้นระดับเดียวกัน มันขึ้นอยู่กับรูปแบบฮับ เปิดใช้งานผ่านส่วนประกอบการนำทางเฉพาะเช่น BottomNavigation, Tabs, TabView, SideDrawer และ Modal View

ตัวอย่างง่ายๆถูกกำหนดไว้ดังต่อไปนี้ -

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd"> 
   <ActionBar title="Hub" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" /> 
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
   </StackLayout> 
</Page>

ที่นี่

• navigateToFeatured ฟังก์ชันใช้วิธีการนำทาง () เพื่อนำทางผู้ใช้ไปยังหน้าแนะนำ

• ในทำนองเดียวกัน navigateToSearch ฟังก์ชันจะนำทางผู้ใช้ไปยังหน้าค้นหา

นอกจากนี้ยังสามารถเข้าถึงเพจฮับโดยใช้วิธีการนำทางที่มีอยู่ในหน้าจอเพจและสามารถย้ายออกจากเพจฮับโดยใช้วิธี goBack ()

ตัวอย่างง่ายๆมีดังนี้ -

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

การนำทางด้านล่างและแท็บ

รูปแบบการนำทางที่พบบ่อยที่สุดในแอปบนอุปกรณ์เคลื่อนที่คือการนำทางโดยใช้แท็บ การนำทางของแท็บจะจัดเรียงไว้ที่ด้านล่างของหน้าจอหรือด้านบนด้านล่างส่วนหัว ทำได้โดยใช้องค์ประกอบTabViewและBottomNavigation

การนำทางตามมุม

NativeScript ขยายแนวคิดการนำทางเพื่อรองรับแนวคิดการกำหนดเส้นทางเชิงมุม NativeScript มีโมดูลใหม่ NativeScriptRouterModule โดยการขยาย Angular RouterModule

แนวคิดการนำทางเชิงมุมของ NativeScript สามารถแบ่งออกเป็นส่วนต่างๆดังนี้ -

• แท็ก page-router-outlet

• nsRouterLink น่าสนใจ

• คลาสRouterExtension

• เราเตอร์แบบกำหนดเองReuseStrategy

ให้เราเรียนรู้การนำทางเชิงมุมข้างต้นทั้งหมดในส่วนนี้

เพจเราเตอร์เอาท์เล็ท

ตามที่เรียนไว้ก่อนหน้านี้ page-router-outlet คือการเปลี่ยนเราเตอร์เต้าเสียบของ Angular page-router-outlet จะรวมกลยุทธ์ Frame และ Page ของ Nativescript core navigation framework แต่ละหน้าเราเตอร์เต้าเสียบจะสร้างส่วนประกอบเฟรมใหม่และส่วนประกอบที่กำหนดค่าไว้ในเต้าเสียบแต่ละชิ้นจะถูกห่อโดยใช้ส่วนประกอบของหน้า จากนั้นวิธีการนำทางดั้งเดิมจะใช้เพื่อนำทางไปยังหน้า / เส้นทางอื่น

ลิงค์เราเตอร์ (nsRouterLink)

nsRouterLink เป็นการแทนที่ RouterLink ของ Angular ช่วยให้คอมโพเนนต์ UI เชื่อมโยงไปยังเพจอื่นโดยใช้เส้นทาง nsRouterLink ยังมีสองตัวเลือกด้านล่าง -

pageTransition- ใช้เพื่อตั้งค่าภาพเคลื่อนไหวการเปลี่ยนหน้า true เปิดใช้งานการเปลี่ยนค่าเริ่มต้น เท็จปิดใช้งานการเปลี่ยน ค่าเฉพาะเช่นสไลด์เฟดอิน ฯลฯ ตั้งค่าการเปลี่ยนเฉพาะ

clearHistory - true ล้างประวัติการนำทางของ nsRouterLink

โค้ดตัวอย่างง่ายๆมีดังนี้ -

<Button text="Go to Home" [nsRouterLink]="['/home']" 
   pageTransition="slide" clearHistory="true"></Button>

ส่วนขยายเราเตอร์

NativeScript มีคลาส RouterExtensions และแสดงฟังก์ชันการนำทางของ NativeScript หลัก

วิธีการที่เปิดเผยโดย RouterExtensions มีดังนี้ -

• navigate

• navigateByUrl

• back

• canGoBack

• backToPreviousPage

• canGoBackToPreviousPage

ตัวอย่างโค้ดง่ายๆโดยใช้ RouterExtensions มีดังนี้ -

import { RouterExtensions } from "nativescript-angular/router"; 
@Component({ 
   // ... 
}) 
export class HomeComponent { 
   constructor(private routerExtensions: RouterExtensions) { } 
}

กลยุทธ์การใช้เส้นทางที่กำหนดเอง

NativeScript ใช้กลยุทธ์การใช้เส้นทางซ้ำแบบกำหนดเอง (RouterReuseStrategy) เพื่อรองรับสถาปัตยกรรมของแอปพลิเคชันมือถือ แอปพลิเคชันมือถือมีความแตกต่างกันในบางแง่มุมเมื่อเปรียบเทียบกับแอปพลิเคชันบนเว็บ

ตัวอย่างเช่นเพจอาจถูกทำลายในเว็บแอปพลิเคชันเมื่อผู้ใช้ออกจากเพจและสร้างใหม่เมื่อผู้ใช้ไปที่เพจ แต่ในแอปพลิเคชันมือถือหน้าจะถูกเก็บรักษาและนำกลับมาใช้ใหม่ แนวคิดเหล่านี้ถูกนำมาพิจารณาในขณะออกแบบแนวคิดการกำหนดเส้นทาง

เส้นทาง

โมดูลการกำหนดเส้นทางอย่างง่ายในแอปพลิเคชัน NativeScript Angular จะเป็นดังต่อไปนี้ -

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
import { SearchComponent } from "./search.component"; 
const routes: Routes = [ 
   { path: "", redirectTo: "/home", pathMatch: "full" }, 
   { path: "home", component: HomeComponent }, 
   { path: "search", component: SearchComponent }, 
];
@NgModule({ 
   imports: [NativeScriptRouterModule.forRoot(routes)], 
   exports: [NativeScriptRouterModule] 
}) 
export class AppRoutingModule { }

ที่นี่

โมดูลการกำหนดเส้นทางคล้ายกับเวอร์ชันเชิงมุมมากยกเว้นข้อยกเว้นบางประการ ในความเป็นจริง NativeScript ใช้กลยุทธ์การนำทางหลักโดยเปิดเผยในลักษณะที่คล้ายกับ Angular framework

ในทุกแอปพลิเคชัน GUI เหตุการณ์มีบทบาทสำคัญมากในการเปิดใช้งานการโต้ตอบกับผู้ใช้ เมื่อใดก็ตามที่ผู้ใช้โต้ตอบกับแอปพลิเคชันเหตุการณ์จะเริ่มทำงานและการดำเนินการที่เกี่ยวข้องจะดำเนินการ

ตัวอย่างเช่นเมื่อผู้ใช้คลิกปุ่มเข้าสู่ระบบในหน้าเข้าสู่ระบบของแอปพลิเคชันจะเรียกกระบวนการเข้าสู่ระบบ

เหตุการณ์เกี่ยวข้องกับนักแสดงสองคน -

• Event sender - วัตถุที่เพิ่มเหตุการณ์จริง

• Event listener - ฟังก์ชั่นที่รับฟังเหตุการณ์เฉพาะและดำเนินการเมื่อเหตุการณ์เริ่มทำงาน

ระดับที่สังเกตได้

เป็นคลาสที่กำหนดไว้ล่วงหน้าเพื่อจัดการกับเหตุการณ์ต่างๆ มีการกำหนดไว้ด้านล่าง -

const Observable = require("tns-core-modules/data/observable").Observable;

ใน NativeScript เกือบทุกอ็อบเจ็กต์มาจากคลาส Observable และอ็อบเจ็กต์ทุกตัวรองรับเหตุการณ์

Listener เหตุการณ์

ให้เราเข้าใจวิธีการสร้างวัตถุและเพิ่มตัวฟังเหตุการณ์ให้กับวัตถุในบทนี้

ขั้นตอนที่ 1

สร้างปุ่มที่ใช้สร้างเหตุการณ์ตามที่ระบุด้านล่าง -

const Button = require("tns-core-modules/ui/button").Button; 
const testButton = new Button();

ขั้นตอนที่ 2

ถัดไปเพิ่มข้อความลงในปุ่มตามที่ระบุด้านล่าง -

testButton.text = "Click";

ขั้นตอนที่ 3

สร้างฟังก์ชัน onTap ตามที่ระบุด้านล่าง -

let onTap = function(args) {
   console.log("you clicked!"); 
};

ขั้นตอนที่ 4

ตอนนี้แนบเหตุการณ์การแตะเข้ากับฟังก์ชัน onTap ตามที่ระบุด้านล่าง -

testButton.on("tap", onTap, this);

วิธีอื่นในการเพิ่มผู้ฟังเหตุการณ์มีดังนี้ -

testButton.addEventListener("tap", onTap, this);

ขั้นตอนที่ 5

อีกวิธีหนึ่งในการแนบเหตุการณ์คือผ่าน UI ตามที่ระบุด้านล่าง -

<Button text="click" (tap)="onTap($event)"></Button>

ที่นี่

$ event เป็นประเภท EventData EventData มีคุณสมบัติสองอย่างและมีดังต่อไปนี้ -

Object- อินสแตนซ์ที่สังเกตได้ซึ่งใช้เพื่อเพิ่มเหตุการณ์ ในสถานการณ์นี้เป็นวัตถุปุ่ม

EventName- เป็นชื่อเหตุการณ์ ในสถานการณ์นี้เป็นเหตุการณ์การแตะ

ขั้นตอนที่ 6

ในที่สุดผู้ฟังเหตุการณ์สามารถถอด / ถอดออกได้ตลอดเวลาตามที่ระบุด้านล่าง -

testButton.off(Button.onTap);

คุณยังสามารถใช้รูปแบบอื่นได้ตามที่แสดงด้านล่าง -

testButton.removeEventListener(Button.onTap);

การแก้ไข BlankNgApp

ให้เราแก้ไขแอปพลิเคชัน BlankNgApp เพื่อให้เข้าใจเหตุการณ์ใน NativeScript ได้ดีขึ้น

ขั้นตอนที่ 1

เปิด UI ของส่วนประกอบภายในบ้าน src/app/home/home.component.html และเพิ่มรหัสด้านล่าง -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

ที่นี่

• แตะคือเหตุการณ์และปุ่มคือตัวเพิ่มเหตุการณ์

• onButtonTap เป็นตัวฟังเหตุการณ์

ขั้นตอนที่ 2

เปิดรหัสของส่วนประกอบบ้าน ‘src/app/home/home.component.ts’ และอัปเดตรหัสด้านล่าง -

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@Component({ 
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

ที่นี่

• เพิ่มตัวฟังเหตุการณ์ใหม่ onButtonTap

• พิมพ์ชื่อเหตุการณ์แตะและปุ่มข้อความเริ่มเหตุการณ์ในคอนโซล

ขั้นตอนที่ 3

เรียกใช้แอปพลิเคชันและแตะปุ่ม มันพิมพ์บรรทัดด้านล่างในคอนโซล

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event

การผูกข้อมูลเป็นหนึ่งในแนวคิดขั้นสูงที่สนับสนุนโดย NativeScript NativeScript เป็นไปตามแนวคิดการผูกข้อมูลเชิงมุมอย่างใกล้ชิดที่สุด การผูกข้อมูลทำให้คอมโพเนนต์ UI แสดง / อัปเดตค่าปัจจุบันของโมเดลข้อมูลแอปพลิเคชันโดยไม่ต้องใช้ความพยายามในการเขียนโปรแกรมใด ๆ

NativeScript รองรับการผูกข้อมูลสองประเภท มีดังนี้ -

One-Way data binding - อัปเดต UI ทุกครั้งที่มีการเปลี่ยนแปลงโมเดล

Two-Way data binding- ซิงค์ UI และรุ่น เมื่อใดก็ตามที่มีการอัปเดตโมเดล UI จะได้รับการอัปเดตโดยอัตโนมัติและเมื่อใดก็ตามที่ UI ได้รับข้อมูลจากผู้ใช้ (UI ได้รับการอัปเดต) โมเดลจะได้รับการอัปเดต

ให้เราเรียนรู้ทั้งสองแนวคิดในส่วนนี้

การผูกข้อมูลทางเดียว

NativeScript มีตัวเลือกง่ายๆในการเปิดใช้งานการเชื่อมข้อมูลทางเดียวในคอมโพเนนต์ UI ในการเปิดใช้งานการเชื่อมข้อมูลทางเดียวเพียงเพิ่มวงเล็บเหลี่ยมในคุณสมบัติของ UI เป้าหมายจากนั้นกำหนดคุณสมบัติของโมเดลที่จำเป็น

ตัวอย่างเช่นหากต้องการอัปเดตเนื้อหาข้อความขององค์ประกอบฉลากเพียงแค่เปลี่ยนรหัส UI ดังต่อไปนี้ -

<Label [text]='this.model.prop' />

ที่นี่

this.model.prop หมายถึงคุณสมบัติของโมเดล this.model

ให้เราเปลี่ยน BlankNgApp ของเราเพื่อทำความเข้าใจการผูกข้อมูลทางเดียว

ขั้นตอนที่ 1

เพิ่มรุ่นใหม่ User (src / model / user.ts) ดังนี้ -

export class User { 
   name: string 
}

ขั้นตอนที่ 2

เปิด UI ของส่วนประกอบของเรา src/app/home/home.component.html และอัปเดตโค้ดดังต่อไปนี้ -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto"> 
   <Button text="Click here to greet" class="-primary" color='gray' 
      (tap)='onButtonTap($event)' row='1' column='0'>
   </Button> 
   <Label [text]='this.user.name' row='2' column='0' 
      height="50px" textAlignment='center' style='font-size: 16px; 
      font-weight: bold; margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

ที่นี่

• ข้อความของป้ายกำกับถูกตั้งค่าเป็นชื่อคุณสมบัติของโมเดลผู้ใช้

• เหตุการณ์การแตะปุ่มถูกแนบมากับเมธอด onButtonTap

ขั้นตอนที่ 3

เปิดรหัสของส่วนประกอบบ้าน src/app/home/home.component.ts และอัปเดตโค้ดดังต่อไปนี้ -

import { Component, OnInit } from "@angular/core"; 
import { User } from "../../model/user" 
@Component({
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   public user: User; 
   constructor() {
      // Use the component constructor to inject providers. 
      this.user = new User(); 
      this.user.name = "User1"; 
   }
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData) { 
      this.user.name = 'User2'; 
   } 
}

ที่นี่

• มีการนำเข้ารูปแบบผู้ใช้

• วัตถุผู้ใช้ถูกสร้างขึ้นในตัวสร้างของคอมโพเนนต์

• onButtonTap เหตุการณ์ถูกนำมาใช้ การใช้งาน onButtonTap อัพเดตวัตถุ User และตั้งชื่อคุณสมบัติเป็น User2

ขั้นตอนที่ 4

รวบรวมและเรียกใช้แอปพลิเคชันและคลิกปุ่มเพื่อเปลี่ยนรุ่นและจะเปลี่ยนไฟล์ Label ข้อความ

สถานะเริ่มต้นและขั้นสุดท้ายของแอปพลิเคชันมีดังนี้ -

สถานะเริ่มต้น

สถานะเริ่มต้นการผูกข้อมูลทางเดียวแสดงอยู่ด้านล่าง -

สถานะสุดท้าย

สถานะสุดท้ายของการผูกข้อมูลทางเดียวแสดงอยู่ด้านล่าง -

การผูกข้อมูลสองทาง

NativeScript ยังมีการเชื่อมโยงข้อมูลสองทางสำหรับฟังก์ชันขั้นสูง มันผูกข้อมูลโมเดลกับ UI และยังรวมข้อมูลที่อัปเดตใน UI เข้ากับโมเดล

ในการทำการผูกข้อมูลสองทางให้ใช้คุณสมบัติ ngModel จากนั้นล้อมรอบด้วย [] และ () ดังต่อไปนี้ -

<TextField [(ngModel)] = 'this.user.name'></TextField>

ให้เราเปลี่ยนแอปพลิเคชัน BlankNgApp เพื่อให้เข้าใจการผูกข้อมูลสองทางได้ดีขึ้น

ขั้นตอนที่ 1

นำเข้า NativeScriptFormsModule ไปยัง HomeModule (src/app/home/home.module.ts) ตามที่ระบุด้านล่าง -

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 
import { NativeScriptCommonModule } from "nativescript-angular/common"; 
import { HomeRoutingModule } from "./home-routing.module"; 
import { HomeComponent } from "./home.component"; 
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({ 
   imports: [ 
      NativeScriptCommonModule, 
      HomeRoutingModule, 
      NativeScriptFormsModule 
   ], 
   declarations: [ 
      HomeComponent 
   ], 
   schemas: [ 
      NO_ERRORS_SCHEMA 
   ]
}) 
export class HomeModule { }

ที่นี่

NativeScriptFormsModule เปิดใช้งานการเชื่อมโยงข้อมูลสองทาง มิฉะนั้นการเชื่อมข้อมูลสองทางจะไม่ทำงานตามที่คาดไว้

ขั้นตอนที่ 2

เปลี่ยน UI ของส่วนประกอบหลักตามที่ระบุด้านล่าง -

<ActionBar> <Label text="Home"></Label></ActionBar> 
<GridLayout columns="*" rows="auto, auto"> 
   <TextField hint="Username" row='0' column='0' color="gray" 
      backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
   </TextField> 
   <Label [text]='this.user.name' row='1' column='0' height="50px" 
      textAlignment='center' style='font-size: 16px; font-weight: bold; 
      margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

ที่นี่

คุณสมบัติข้อความขององค์ประกอบป้ายกำกับถูกตั้งค่าด้วยการผูกข้อมูลทางเดียว หากผู้ใช้โมเดลได้รับการอัพเดตคุณสมบัติข้อความจะได้รับการอัพเดตโดยอัตโนมัติ

คอมโพเนนต์ TextField ตั้งค่า ngModel เป็น this.user.name หากผู้ใช้โมเดลได้รับการอัปเดตคุณสมบัติข้อความจะได้รับการอัปเดตโดยอัตโนมัติ ในขณะเดียวกันหากผู้ใช้เปลี่ยนค่าของ TextField โมเดลก็จะได้รับการอัปเดตเช่นกัน หากโมเดลได้รับการอัปเดตโมเดลจะทำให้คุณสมบัติข้อความของ Label มีการเปลี่ยนแปลงเช่นกัน ดังนั้นหากผู้ใช้เปลี่ยนแปลงข้อมูลข้อมูลจะแสดงในคุณสมบัติข้อความของป้ายกำกับ

ขั้นตอนที่ 3

เรียกใช้แอปพลิเคชันและลองเปลี่ยนค่าของกล่องข้อความ

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

สถานะเริ่มต้น

การผูกข้อมูลสองทาง - สถานะเริ่มต้นได้รับด้านล่าง -

สถานะสุดท้าย

การผูกข้อมูลสองทาง - สถานะสุดท้ายแสดงด้านล่าง -

NativeScript โมดูลมีชุดของฟังก์ชันการทำงานที่เกี่ยวข้องกับการบรรจุเป็นห้องสมุดเดียว ให้เราเรียนรู้โมดูลที่จัดทำโดย NativeScript framework

ประกอบด้วยฟังก์ชันหลักของกรอบงาน NativeScript ให้เราเข้าใจโมดูลหลักในบทนี้

ใบสมัคร

แอปพลิเคชันประกอบด้วยการใช้งานแอปพลิเคชันมือถือเฉพาะแพลตฟอร์ม โมดูลหลักอย่างง่ายถูกกำหนดไว้ด้านล่าง -

const applicationModule = require("tns-core-modules/application");

คอนโซล

โมดูลคอนโซลใช้เพื่อบันทึกข้อความ มีวิธีการดังต่อไปนี้ -

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

การตั้งค่าแอปพลิเคชัน

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

const appSettings = require("tns-core-modules/application-settings");

วิธีการไม่กี่วิธีที่สามารถใช้ได้ในการตั้งค่าแอปพลิเคชันมีดังนี้:

• setBoolean (คีย์: สตริง, ค่า: บูลีน) - ตั้งค่าวัตถุบูลีน

• setNumber (คีย์: สตริงค่า: ตัวเลข) - ตั้งค่าอ็อบเจ็กต์ตัวเลข

• setString (คีย์: สตริง, ค่า: สตริง) - ตั้งค่าวัตถุสตริง

• getAllKeys () - มีคีย์ที่เก็บไว้ทั้งหมด

• hasKey (คีย์: สตริง) - ตรวจสอบว่ามีคีย์อยู่หรือไม่

• ชัดเจน - ล้างค่าที่เก็บไว้

• ลบ - ลบรายการใด ๆ ตามคีย์

ตัวอย่างง่ายๆโดยใช้การตั้งค่าแอปพลิเคชันมีดังนี้ -

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

โมดูลนี้ใช้สำหรับการจัดการ httpคำขอและการตอบสนอง ในการเพิ่มโมดูลนี้ในแอปพลิเคชันของคุณให้เพิ่มรหัสต่อไปนี้ -

const httpModule = require("tns-core-modules/http");

เราสามารถส่งข้อมูลโดยใช้วิธีการดังต่อไปนี้ -

getString- ใช้ในการร้องขอและดาวน์โหลดข้อมูลจาก URL เป็นสตริง มีการกำหนดไว้ด้านล่าง -

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON- ใช้เพื่อเข้าถึงข้อมูลจาก JSON มีการกำหนดไว้ด้านล่าง -

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage- ดาวน์โหลดเนื้อหาจาก URL ที่ระบุและส่งคืนออบเจ็กต์ ImageSource มีการกำหนดไว้ด้านล่าง -

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile - มี URL อาร์กิวเมนต์สองรายการและเส้นทางไฟล์

• URL - ดาวน์โหลดข้อมูล

• File path- บันทึกข้อมูล URL ลงในไฟล์ มีการกำหนดไว้ด้านล่าง -

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request- มีอาร์กิวเมนต์ตัวเลือก ใช้เพื่อร้องขออ็อพชันและส่งคืนอ็อบเจ็กต์ HttpResponse มีการกำหนดไว้ด้านล่าง -

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

แหล่งที่มาของภาพ

โมดูลแหล่งที่มาของภาพใช้บันทึกภาพ เราสามารถเพิ่มโมดูลนี้โดยใช้คำสั่งด้านล่าง -

const imageSourceModule = require("tns-core-modules/image-source");

หากคุณต้องการโหลดภาพจากทรัพยากรให้ใช้รหัสด้านล่าง -

const imgFromResources = imageSourceModule.fromResource("icon");

ในการเพิ่มรูปภาพจากไฟล์ในเครื่องให้ใช้คำสั่งด้านล่าง -

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

ในการบันทึกภาพไปยังเส้นทางไฟล์ให้ใช้คำสั่งด้านล่าง -

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

จับเวลา

โมดูลนี้ใช้เพื่อรันโค้ดในช่วงเวลาที่กำหนด ในการเพิ่มสิ่งนี้เราจำเป็นต้องใช้require -

const timerModule = require("tns-core-modules/timer");

มันขึ้นอยู่กับสองวิธี -

setTimeout- ใช้เพื่อชะลอการดำเนินการ มันแสดงเป็นมิลลิวินาที

setInterval - ใช้เพื่อใช้เป็นประจำในช่วงเวลาที่กำหนด

ติดตาม

โมดูลนี้มีประโยชน์สำหรับการดีบัก จะให้ข้อมูลการบันทึก โมดูลนี้สามารถแสดงเป็น -

const traceModule = require("tns-core-modules/trace");

หากคุณต้องการเปิดใช้งานในแอปพลิเคชันของคุณให้ใช้คำสั่งด้านล่าง -

traceModule.enable();

ui / รูปภาพแคช

โมดูลแคชรูปภาพใช้เพื่อจัดการคำขอดาวน์โหลดรูปภาพและแคชรูปภาพที่ดาวน์โหลด โมดูลนี้สามารถแสดงได้ดังที่แสดงด้านล่าง -

const Cache = require("tns-core-modules/ui/image-cache").Cache;

การเชื่อมต่อ

โมดูลนี้ใช้เพื่อรับข้อมูลการเชื่อมต่อของเครือข่ายที่เชื่อมต่อ สามารถแสดงเป็น -

const connectivityModule = require("tns-core-modules/connectivity");

โมดูลการทำงาน

โมดูลฟังก์ชันการทำงานประกอบด้วยโมดูลเฉพาะระบบ / แพลตฟอร์มจำนวนมาก โมดูลที่สำคัญบางส่วนมีดังนี้ -

platform- ใช้เพื่อแสดงข้อมูลเกี่ยวกับอุปกรณ์ของคุณ สามารถกำหนดได้ตามที่ระบุด้านล่าง -

const platformModule = require("tns-core-modules/platform");

fps-meter- ใช้เพื่อจับภาพเฟรมต่อวินาที สามารถกำหนดได้ตามที่ระบุด้านล่าง -

const fpsMeter = require("tns-core-modules/fps-meter");

file-system- ใช้เพื่อทำงานกับระบบไฟล์อุปกรณ์ของคุณ มีการกำหนดไว้ด้านล่าง -

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures - ใช้เพื่อทำงานกับท่าทาง UI

โมดูล UI

โมดูล UI ประกอบด้วยส่วนประกอบ UI และฟังก์ชันที่เกี่ยวข้อง โมดูล UI ที่สำคัญบางส่วนมีดังนี้ -

• frame

• page

• color

• text/formatted-string

• xml

• styling

• animation

แพ็กเกจ npm ใช้สำหรับการเพิ่มฟังก์ชันดั้งเดิม เมื่อใช้แพ็คเกจนี้เราสามารถติดตั้งหรือค้นหาหรือลบปลั๊กอินใด ๆ ส่วนนี้จะอธิบายเกี่ยวกับปลั๊กอินโดยละเอียด

คำสั่ง

add - ใช้ในการติดตั้งปลั๊กอิน

update - อัปเดตปลั๊กอินที่ระบุและแก้ไขการอ้างอิง

remove - ลบปลั๊กอิน

build - ใช้เพื่อสร้างปลั๊กอินสำหรับโครงการ iOS หรือ Android

create - สร้างปลั๊กอินสำหรับโครงการของคุณ

การเพิ่มปลั๊กอิน

ไวยากรณ์ด้านล่างใช้เพื่อเพิ่มปลั๊กอินใหม่ -

tns plugin add <plugin-name>

ตัวอย่างเช่นหากคุณต้องการเพิ่ม nativescript-barcodescanner คุณสามารถใช้รหัสต่อไปนี้ -

tns plugin add nativescript-barcodescanner

คุณจะเห็นคำตอบต่อไปนี้ -

+ [email protected] 
added 1 package from 1 contributor and audited 11704 packages in 8.76s

คุณยังสามารถใช้โมดูล npm เพื่อเพิ่มปลั๊กอินด้านบน -

npm install nativescript-barcodescanner

ตอนนี้ NativeScript CLI จะดาวน์โหลดปลั๊กอินจาก npm และเพิ่มเข้าไปในโฟลเดอร์ node_modules ของคุณ

หากคุณต้องการเพิ่มปลั๊กอินลงในไฟล์ package.json และแก้ไขปัญหาการพึ่งพาทั้งหมดคุณสามารถใช้คำสั่งด้านล่างแทนคำสั่งก่อนหน้า -

npm i nativescript-barcodescanner

หากคุณต้องการติดตั้งการอ้างอิงของนักพัฒนาในระหว่างการพัฒนาให้ใช้รหัสด้านล่าง -

npm i tns-platform-declarations --save-dev

ที่นี่

tns-platform-declarations คือการพึ่งพาของนักพัฒนาที่จำเป็นสำหรับ intelliSense เท่านั้นในระหว่างกระบวนการพัฒนา

การนำเข้าปลั๊กอิน

ตอนนี้เราได้ติดตั้ง nativescript-barcodescanner plugin. ให้เราเพิ่มภายในโครงการของคุณโดยใช้คำสั่งด้านล่าง -

const maps = require("nativescript-barcodescanner"); 
maps.requestPermissions();

การอัปเดตปลั๊กอิน

วิธีนี้ใช้เพื่ออัปเดตปลั๊กอินที่ระบุดังนั้นจึงถอนการติดตั้งก่อนหน้านี้และติดตั้งเวอร์ชันใหม่และแก้ไขการอ้างอิง มีการกำหนดไว้ด้านล่าง -

tns plugin update <Plugin name version>

การลบปลั๊กอิน

หากคุณต้องการลบปลั๊กอินหากไม่ต้องการคุณสามารถใช้ไวยากรณ์ด้านล่าง -

tns plugin remove <plugin-name>

ตัวอย่างเช่นหากคุณต้องการลบ nativescript-google-maps-sdk ที่ติดตั้งไว้ด้านบนให้ใช้คำสั่งด้านล่าง -

tns plugin remove nativescript-barcodescanner

คุณจะเห็นคำตอบต่อไปนี้ -

Successfully removed plugin nativescript-barcodescanner

การสร้างปลั๊กอิน

ใช้เพื่อสร้างไฟล์โปรเจ็กต์เฉพาะ Android ของปลั๊กอินที่อยู่ในแพลตฟอร์ม / Android ให้เราสร้าง Nativescript-barcodescanner pugin โดยใช้คำสั่งด้านล่าง -

tns plugin build nativescript-barcodescanner

การสร้างปลั๊กอิน

ปลั๊กอิน NativeScript เป็นโมดูล JavaScript ที่เรียบง่าย มันถูกกำหนดไว้ในไฟล์ src \ package.json ของแอปพลิเคชันของคุณ โมดูลนี้ใช้เพื่อสร้างโปรเจ็กต์ใหม่สำหรับการพัฒนาปลั๊กอิน NativeScript มีการกำหนดไว้ด้านล่าง -

tns plugin create <Plugin Repository Name> [--path <Directory>]

ส่วนนี้จะอธิบายเกี่ยวกับภาพรวมของการเข้าถึง Native API โดยใช้ JavaScript

มาร์แชลลิง

NativeScript Runtime ให้การแปลงประเภทโดยนัยสำหรับทั้งแพลตฟอร์ม Android และ iOS แนวคิดนี้เรียกว่ามาร์แชลลิ่ง ตัวอย่างเช่น NativeScript- iOS paltform สามารถแปลงชนิดข้อมูล JavaScript และ Objective-C โดยปริยายได้เช่นเดียวกัน Java / Kotlin สามารถแมปกับประเภทและค่าโครงการ JavaScript ได้อย่างง่ายดาย ขอให้เราเข้าใจวิธีการทำมาร์แชลในแต่ละประเภทโดยสังเขป

ค่าตัวเลข

เราสามารถแปลงประเภทข้อมูลตัวเลข iOS และ android เป็นหมายเลข JavaScript ได้อย่างง่ายดาย การแปลงตัวเลขอย่างง่ายสำหรับ iOS เป็น JavaScript ถูกกำหนดไว้ด้านล่าง -

console.log(`max(7,9) = ${max(7,9)}`);

ที่นี่

ฟังก์ชัน native max () ถูกแปลงเป็นหมายเลข JavaScript

สภาพแวดล้อม Android

Java รองรับประเภทตัวเลขที่แตกต่างกันเช่น byte, short, int, float, double และ long JavaScript มีเฉพาะประเภทตัวเลข

พิจารณาคลาส Java ง่ายๆที่แสดงด้านล่าง -

class Demo extends java.lang.Object {
   public int maxMethod(int a,int b) {
      if(a>b) {
         return a;
      } else {
         return b;
      }
   }
}

ที่นี่

โค้ดด้านบนประกอบด้วยอาร์กิวเมนต์จำนวนเต็มสองอาร์กิวเมนต์ เราสามารถเรียก code object ด้านบนโดยใช้ JavaScript ดังรูปด้านล่าง -

//Create an instance for Demo class 
var obj = new Demo(); 

//implicit integer conversion for calling the above method 
obj.maxMethod(7,9);

สตริง

สตริง Android ถูกกำหนดใน java.lang.string และสตริง iOS ถูกกำหนดใน NSSring ให้เราดูวิธีดำเนินการมาร์แชลในทั้งสองแพลตฟอร์ม

Android

สตริงไม่เปลี่ยนรูป แต่บัฟเฟอร์สตริงรองรับสตริงที่เปลี่ยนแปลงได้

โค้ดด้านล่างนี้เป็นตัวอย่างสำหรับการทำแผนที่อย่างง่าย -

//Create android label widget 
var label = new android.widget.Label(); 

//Create JavaScript string 
var str = "Label1";  

//Convert JavaScript string into java label.setText(str); 
// text is converted to java.lang.String

คลาสบูลีนถูกกำหนดใน java.lang.Boolean คลาสนี้รวมค่าบูลีนในอ็อบเจ็กต์ เราสามารถแปลงบูลีนเป็น String และในทางกลับกันได้อย่างง่ายดาย ตัวอย่างง่ายๆถูกกำหนดตามที่ระบุด้านล่าง -

//create java string 
let data = new java.lang.String('NativeScript'); 

//map java String to JavaScript string, 
let result = data.startsWith('N'); 

//return result 
console.log(result);// true

สภาพแวดล้อม iOS

คลาส NSString ไม่เปลี่ยนรูป แต่คลาสย่อย NSMutableString ไม่เปลี่ยนรูป คลาสนี้ประกอบด้วยชุดวิธีการทำงานกับสตริง มีการประกาศดังต่อไปนี้ -

class NSString : NSObject

พิจารณาการประกาศวัตถุประสงค์ -c ง่ายๆดังที่แสดงด้านล่าง -

NSString *str = @"nativescript"; 
//convert the string to uppercase
NSString *str1; 
str1 = [str uppercaseString]; 
NSLog(@"Uppercase String : %@\n", str1 );

NSStrings สามารถแมปกับสตริง JavaScript ได้อย่างง่ายดาย

อาร์เรย์

ส่วนนี้จะอธิบายเกี่ยวกับวิธีดำเนินการมาร์แชลในอาร์เรย์ มาดูตัวอย่างสภาพแวดล้อมของ iOS กันก่อน

การประกาศอาร์เรย์

class NSArray : NSObject

ที่นี่

NSArray ใช้เพื่อจัดการคอลเลกชันของอ็อบเจ็กต์ตามลำดับที่เรียกว่าอาร์เรย์ ใช้เพื่อสร้างอาร์เรย์แบบคงที่ คลาสย่อยของมันNSMutableArray ใช้เพื่อสร้างอาร์เรย์แบบไดนามิก

พิจารณาวัตถุ NSArray ที่สามารถสร้างได้โดยใช้ตัวอักษรอาร์เรย์ดังที่แสดงด้านล่าง -

let array: NSArray = ["React","Vue","TypeScript"]

ตอนนี้เราสามารถแมปอาร์เรย์นี้กับ JavaScript ดังที่แสดงด้านล่าง -

//create native array 
let nsArr = NSArray.arrayWithArray("React","Vue","TypeScript"]); 

//create simple javascript array 
let jsArr = ["Hello,World","NativeScript"]; 

//Now compare the two arrays, 
let compare = nsArr.isEqual(jsArr); 
console.log(comapre);

สิ่งนี้จะส่งคืนผลลัพธ์เป็นเท็จ

การประกาศอาร์เรย์ Android

อาร์เรย์ Java ถูกกำหนดไว้ใน java.util.Arrays. คลาสนี้ประกอบด้วยเมธอดต่างๆในการจัดการอาร์เรย์ ตัวอย่างแสดงด้านล่าง -

//javascript array 
let data = [12,45,23,56,34,78,50]; 

//create java array 
let result = ns.example.Math.maxElement(data);
console.log(result);

คลาสและวัตถุ

Classes and Objects เป็นแนวคิดพื้นฐานของ Object Oriented Programming คลาสคือต้นแบบที่ผู้ใช้กำหนดเอง วัตถุเป็นตัวอย่างของคลาส คลาสแสดงถึงชุดของคุณสมบัติหรือวิธีการที่ใช้ร่วมกันกับอ็อบเจ็กต์ทั้งหมดประเภทหนึ่ง ให้เราเข้าใจคลาสดั้งเดิมและอ็อบเจ็กต์สำหรับทั้งสภาพแวดล้อมการพัฒนาอุปกรณ์เคลื่อนที่

สภาพแวดล้อม Android

คลาส Java และ Kotlin มีตัวระบุเฉพาะที่แสดงโดยชื่อแพ็กเกจแบบเต็ม

ตัวอย่างเช่น,

android.view.View- เป็นคลาสอินเทอร์เฟซผู้ใช้พื้นฐานสำหรับการจัดวางหน้าจอและการโต้ตอบกับผู้ใช้ เราสามารถเข้าถึงคลาสนี้ได้ใน JavaScript ดังภาพด้านล่าง -

const View = android.view.View;

ขั้นแรกเรานำเข้าคลาสโดยใช้คำสั่งด้านล่าง -

import android.view.View;

ถัดไปสร้างคลาสตามที่ระบุด้านล่าง -

public class MyClass {
   public static void staticMethod(context) {
      //create view instance
      android.view.View myview = new android.view.View(context);
   }
}

ในคลาสเดียวกันข้างต้นเราสามารถเข้าถึงฟังก์ชัน JavaScript โดยใช้รหัสด้านล่าง -

const myview = new android.view.View(context);

ในทำนองเดียวกันเราสามารถเข้าถึงอินเทอร์เฟซค่าคงที่และการแจงนับภายในแพ็คเกจ java.lang

สภาพแวดล้อม iOS

คลาส Objective-C ถูกกำหนดเป็นสองส่วน @interface และ @implementation นิยามคลาสเริ่มต้นด้วยคีย์เวิร์ด@interface ตามด้วย interface(class)ชื่อ. ใน Objective-C คลาสทั้งหมดมาจากคลาสพื้นฐานที่เรียกว่า NSObject

เป็นซูเปอร์คลาสของคลาส Objective-C ทั้งหมด คลาส Simple Circle ถูกกำหนดตามที่แสดงด้านล่าง -

@interface Circle:NSObject {
   //Instance variable
   int radius;
}
@end

พิจารณาคลาสด้วยวิธีการเดียวดังที่แสดงด้านล่าง -

@interface MyClass : NSObject 
+ (void)baseStaticMethod; 
@end

คลาสนี้สามารถแปลงเป็นจาวาสคริปต์โดยใช้โค้ดด้านล่าง -

function MyClass() { /* native call */ }; 
Object.setPrototypeOf(MyClass, NSObject); 
BaseClass.baseStaticMethod = function () { /* native call */ };

JavaScript instanceofตัวดำเนินการถูกใช้เพื่อตรวจสอบว่าวัตถุสืบทอดมาจากคลาสที่กำหนดหรือไม่ สามารถกำหนดได้ว่า -

var obj = MyClass.alloc().init(); // object creation 
console.log(obj instanceof NSObject); //return true

ที่นี่

อินสแตนซ์ Objective-C ถูกสร้างขึ้นโดยใช้การจัดสรรเริ่มต้นหรือวิธีการใหม่ ในตัวอย่างข้างต้นเราสามารถสร้างการเริ่มต้นวัตถุโดยใช้วิธีการใหม่ดังต่อไปนี้ -

var obj = MyClass.new();

ในทำนองเดียวกันคุณสามารถเข้าถึงวิธีการและคุณสมบัติแบบคงที่

สร้างและเผยแพร่แอปของคุณทำให้แอปพลิเคชัน Android ของคุณพร้อมใช้งานสำหรับผู้ใช้ทุกคน Google Play เป็นแพลตฟอร์มการเผยแพร่ที่แข็งแกร่ง ช่วยให้คุณเผยแพร่และเผยแพร่แอปพลิเคชัน Android ของคุณไปยังผู้ใช้ทั่วโลก บทนี้จะอธิบายเกี่ยวกับวิธีการเผยแพร่แอป Native ของคุณใน Google Play

NativeScript Sidekick

SideKick เป็นไคลเอนต์ GUI และรองรับระบบปฏิบัติการทุกประเภท ช่วยลดความซับซ้อนของกระบวนการ NativeScript CLI และช่วยในการสร้างแอปพลิเคชันมือถือ

เผยแพร่แอปของคุณจาก Sidekick ไปยัง Google Play Console

การดาวน์โหลดและติดตั้ง Sidekick ขึ้นอยู่กับระบบปฏิบัติการของคุณ ทำตามขั้นตอนด้านล่างเพื่อเรียกใช้แอปของคุณใน Sidekick

Step 1: Launch Sidekick

ให้เราเปิด Sidekick ดูเหมือนกับภาพด้านล่าง -

Step 2: Build your device

ตอนนี้เปิดแอปของคุณจากอุปกรณ์ของคุณและเลือกตัวเลือกการสร้างจากแถบเครื่องมือและเลือก Android คุณจะได้รับคำตอบคล้ายกับภาพด้านล่าง -

Step 3: Properties

คลิกแท็บคุณสมบัติและเพิ่มการกำหนดค่า Android ของคุณ หน้าจอมีลักษณะคล้ายกับด้านล่าง -

Step 4: Plugins

Sidekick ช่วยค้นหาปลั๊กอินที่คุณใช้สำหรับแอปพลิเคชันของคุณ คลิกที่แท็บปลั๊กอินและจะแสดงรายการต่อไปนี้ -

Step 5: Android Certificates

คลิกไอคอนล้อเฟืองจาก android แล้วเลือกตัวเลือกเรียกดูจากนั้นเลือกใบรับรองที่เก็บไว้ในระบบไฟล์ของคุณ ดังแสดงด้านล่าง -

หลังจากเลือกแล้วให้ปิดกล่องโต้ตอบ

Step 6: Build your application

สุดท้ายคลิกตัวเลือกการสร้างในเครื่องจากประเภทการสร้างและเลือกตัวเลือกรุ่นจากการกำหนดค่า หลังจากนั้นสร้างแอปพลิเคชันของคุณ

Step 7: Application package

เมื่อสร้างเสร็จแล้วจะสร้างเส้นทางและ apkไฟล์. บันทึกตำแหน่งของแพ็คเกจแอปพลิเคชัน ไฟล์ apk นี้ใช้เพื่ออัปโหลดไปยัง Google Play Store

Step 8: Publish in Google Play

เลือกตัวเลือกเผยแพร่จากแถบเครื่องมือและเลือก Google Play จากนั้นเพิ่มกล่องโต้ตอบจัดการใบรับรอง Android สำหรับ Google Play Store ดังแสดงด้านล่าง -

หลังจากนั้นให้เลือกประเภทการสร้างและระบุคีย์ JSON ของบัญชีบริการจากนั้นเลือกแทร็กอัลฟ่าเบต้าหรือเวอร์ชันที่ใช้งานจริงจากนั้นคลิกอัปโหลด

เผยแพร่แอปของคุณใน Google Play

ในการเผยแพร่แอปของคุณในคอนโซล Google Play คุณต้องมีคุณสมบัติตามข้อกำหนดเบื้องต้นต่อไปนี้

ข้อกำหนดเบื้องต้น

• คุณต้องลงทะเบียนใน Google Play

• คุณมีข้อมูลประจำตัวในการลงนามรหัสด้วยตนเองของ Google Play ที่ถูกต้อง

ขั้นตอนการเผยแพร่แอปของคุณ

ขั้นตอนด้านล่างนี้เป็นประโยชน์ในการทำความเข้าใจวิธีการเผยแพร่แอปของคุณใน Google Play Store

Step 1: Login Google Play console

เปิดคอนโซล Google Play และเข้าสู่ระบบด้วยบัญชีของคุณ

Step 2: Create an app

ไปที่แท็บแอปพลิเคชันทั้งหมดแล้วคลิกสร้างแอปพลิเคชันและสร้างแอปใหม่ ตอนนี้เพิ่มภาษาเริ่มต้นชื่อแอปพลิเคชันในที่สุดก็คลิกดำเนินการต่อเพื่อไปต่อ

Step 3: Fill required fields

ย้ายไปที่แท็บรายชื่อร้านค้าและกรอกข้อมูลในฟิลด์ที่จำเป็นจากนั้นกรอกข้อมูลที่จำเป็นและบันทึกการเปลี่ยนแปลงทั้งหมด

Step 4: Price and distribution

ไปที่แท็บการกำหนดราคาและการจัดจำหน่ายดำเนินการตั้งค่าทั้งหมดและบันทึกการเปลี่ยนแปลงทั้งหมด

Step 5: Release your app

เลือกแท็บการเผยแพร่แอปแล้วเลือกอัลฟ่าเบต้า ใช้สำหรับทดสอบแอปพลิเคชันของคุณ และเลือกแทร็กการผลิต ใช้สำหรับเผยแพร่แอปของคุณไปยัง Google Play สุดท้ายเพิ่มแพ็คเกจแอปพลิเคชัน (apk)

Step 6: Review your app

นี่คือขั้นตอนสุดท้ายของคุณ ในการตรวจสอบตรวจสอบว่ามีปัญหาหรือไม่ หากไม่มีปัญหาให้ยืนยันการเปิดตัวเพื่อเผยแพร่แอปของคุณ

บทนี้อธิบายเกี่ยวกับวิธีการเผยแพร่แอป Native ของคุณใน App Store ทำตามขั้นตอนด้านล่างเพื่อเผยแพร่แอปของคุณ

ข้อกำหนดเบื้องต้น

ในการดำเนินการนี้คุณต้องมีข้อกำหนดเบื้องต้นดังต่อไปนี้ -

• ใบรับรองการจำหน่าย

• โปรไฟล์การจัดเตรียมการแจกจ่าย

• รหัสบันเดิลที่ลงทะเบียนในศูนย์ iOS Dev

• บันทึกแอพใน iTunes Connect

ขั้นตอนในการเผยแพร่แอปของคุณ

ด้านล่างนี้คือขั้นตอนในการเผยแพร่แอปของคุณ -

ขั้นตอนที่ 1: เปิด NativeScript Sidekick

เปิด NativeScript Sidekick และเปิดแอปของคุณใน Sidekick

ขั้นตอนที่ 2: เลือกเผยแพร่

ไปที่แถบเครื่องมือและเลือกตัวเลือกเผยแพร่จากแถบเครื่องมือ ดังแสดงด้านล่าง -

ตอนนี้เลือกตัวเลือก Apple App Store ดูเหมือนกับภาพด้านล่าง -

ขั้นตอนที่ 3: จัดการการจัดเตรียมและใบรับรอง iOS

คลิกไอคอนล้อเฟืองของ Apple App Store แล้วเลือกตัวเลือกเรียกดูและเพิ่มรายละเอียด

ขั้นตอนที่ 4: สร้างแอปของคุณ

จากนั้นคลิกสร้างตัวเลือกและสร้างแอปของคุณและรอจนกว่ากระบวนการจะเสร็จสมบูรณ์

ขั้นตอนที่ 5: ระบุข้อมูลรับรอง

นี่คือขั้นตอนสุดท้ายของคุณ ระบุชื่อผู้ใช้และรหัสผ่าน Apple ในบัญชีของคุณแล้วคลิกอัปโหลดและตรวจสอบข้อความยืนยัน หากคุณต้องการส่งแอปของคุณเพื่อรับการตรวจสอบให้ไปที่ iTunes Connect แล้วส่ง

การทดสอบเป็นขั้นตอนที่สำคัญมากในวงจรชีวิตการพัฒนาของแอปพลิเคชัน ช่วยให้มั่นใจได้ถึงคุณภาพการใช้งาน ต้องมีการวางแผนและดำเนินการอย่างรอบคอบ นอกจากนี้ยังเป็นขั้นตอนที่ใช้เวลานานที่สุดในการพัฒนา กรอบงาน NativeScript ให้การสนับสนุนอย่างกว้างขวางสำหรับการทดสอบแอปพลิเคชันอัตโนมัติ

ประเภทของการทดสอบ

โดยทั่วไปกระบวนการทดสอบมีสามประเภทเพื่อทดสอบแอปพลิเคชัน มีดังนี้ -

การทดสอบหน่วย

การทดสอบหน่วยเป็นวิธีที่ง่ายที่สุดในการทดสอบแอปพลิเคชัน มันขึ้นอยู่กับการตรวจสอบความถูกต้องของโค้ด (ฟังก์ชันโดยทั่วไป) หรือวิธีการของคลาส แต่ไม่ได้สะท้อนถึงสภาพแวดล้อมจริงและต่อมา เป็นตัวเลือกที่น้อยที่สุดในการค้นหาจุดบกพร่อง

โดยทั่วไป NativeScript ใช้กรอบการทดสอบหน่วย Jasmine, Mocha with Chai และ QUnit

ในการดำเนินการนี้ก่อนอื่นคุณต้องกำหนดค่าในโครงการของคุณโดยใช้คำสั่งด้านล่าง -

tns test init

ตอนนี้คุณจะได้รับคำตอบดังต่อไปนี้ -

? Select testing framework: (Use arrow keys) 
> jasmine 
   mocha 
   qunit

ตอนนี้เลือก jasmine กรอบและหน้าจอของคุณมีลักษณะคล้ายกับสิ่งนี้ -

? Select testing framework: jasmine 
+ [email protected] 
added 90 packages from 432 contributors and audited 11944 packages in 8.753s 

+ [email protected] 
added 2 packages from 1 contributor and audited 11946 packages in 7.299s 

> [email protected] postinstall 
/Users/workspace/NativeScript/NativeApp/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript standard library! 
The project needs your help! Please consider supporting of core-js on Open 
Collective or Patreon:

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) is looking for a 
good job -) 
npm WARN [email protected] requires a peer of webpack@^2.0.0 
|| ^3.0.0 but none is installed. You must install peer dependencies yourself. 

+ [email protected] 
added 19 packages from 52 contributors and audited 12012 packages in 9.368s 

+ [email protected] 
added 2 packages from 35 contributors and audited 12014 packages in 6.925s 

+ [email protected] 
updated 1 package and audited 12014 packages in 7.328s 
+ @types/[email protected] 

> [email protected] postinstall /Users/deiva/workspace/NativeScript/NativeApp/node_modules/nativescript-unit
-test-runner 

> node postinstall.js 
+ [email protected] 

added 1 package from 1 contributor and audited 12032 packages in 7.14s 
Successfully installed plugin nativescript-unit-test-runner. 

Example test file created in src/tests 
Run your tests using the "$ tns test <platform>" command.

ตอนนี้ไฟล์ทดสอบถูกสร้างขึ้นใน src \ testing \ example.ts

สร้างการทดสอบของคุณ

ให้เราเพิ่มการทดสอบง่ายๆภายในไฟล์ example.ts ดังที่แสดงด้านล่าง -

describe("NativeApp test:", function() { 
   it("Check counter.", function() { 
      expect(mainViewModel.createViewModel().counter).toEqual(10); 
   }); 
   it("Check message.", function () { 
      expect(mainViewModel.createViewModel().message).toBe("10 taps left"); 
   }); 
});

ที่นี่

ขั้นแรกตรวจสอบว่าตัวนับเท่ากับ 10 หรือไม่และตรวจสอบว่าข้อความเหลือ 10 ก๊อกหรือไม่

ให้เราทำการทดสอบในขั้นตอนต่อไป

ทำการทดสอบของคุณ

ตอนนี้เรียกใช้การทดสอบในอุปกรณ์ที่เชื่อมต่อ Android หรือ iOS โดยใช้คำสั่งด้านล่าง -

tns test android

สิ่งนี้จะคืนสถานะต่อไปนี้ -

? To continue, choose one of the following options: (Use arrow keys) 
> Configure for Cloud Builds 
   Configure for Local Builds 
   Configure for Both Local and Cloud Builds 
   Skip Step and Configure Manually

จากนั้นเลือกตัวเลือกด้านล่าง -

? To continue, choose one of the following options: Configure for Local Builds 
Running the setup script to try and automatically configure your environment. 
These scripts require sudo permissions 
.....

ในการเรียกใช้ชุดทดสอบของคุณในโปรแกรมจำลอง Android ให้เรียกใช้คำสั่งต่อไปนี้ -

tns test android --emulator

ตอนนี้เซิร์ฟเวอร์กรรมเตรียมการสร้างและปรับใช้โครงการของคุณ

การทดสอบ End To End (E2E)

การทดสอบหน่วยเป็นกระบวนการขนาดเล็กง่ายและรวดเร็วในขณะที่การทดสอบ E2E มีหลายองค์ประกอบที่เกี่ยวข้องและทำงานร่วมกันซึ่งครอบคลุมโฟลว์ในแอปพลิเคชัน ไม่สามารถทำได้โดยการทดสอบหน่วยและการรวม

NativeScript Appiumปลั๊กอินใช้เพื่อทำการทดสอบระบบอัตโนมัติ E2E Appium เป็นกรอบการทดสอบโอเพ่นซอร์สสำหรับแอพมือถือ ในการเพิ่มเฟรมเวิร์กนี้ในโปรเจ็กต์ของคุณคุณต้องมี XCode หรือ Android SDK เวอร์ชันล่าสุดที่สูงกว่า 25.3.0

ติดตั้ง Appium

ให้เราติดตั้ง Appium ทั่วโลกโดยใช้โมดูล npm -

npm install -g appium

ตอนนี้คุณสามารถเห็นคำตอบต่อไปนี้ -

npm install -g appium 
/Users/.npm-global/bin/authorize-ios -> 
/Users/.npm-global/lib/node_modules/ appium/node_modules/.bin/authorize-ios 

> [email protected] install 
/Users/.npm-global/lib/node_modules/ appium/node_modules/appium-windows-driver

> node install-npm.js 
Not installing WinAppDriver since did not detect a Windows system 

> [email protected] postinstall /Users/.npm-
global/lib/node_modules/appium/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript 
standard library! 
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) 
is looking for a good job -) 

> [email protected] postinstall/Users/.npm-
global/lib/node_modules/appium/node_modules 
/appium-chromedriver 

> node install-npm.js 
............................................ 
............................................. 
+ [email protected] 
added 671 packages from 487 contributors in 28.889s

เพิ่มปลั๊กอิน

ให้เราเพิ่ม nativescript-dev-appium ปลั๊กอินเป็น devDependency สำหรับโครงการของคุณโดยใช้คำสั่งด้านล่าง -

$ npm install -D nativescript-dev-appium

หลังจากดำเนินการแล้วให้เลือก mocha กรอบและคุณจะได้รับคำตอบที่คล้ายกับสิ่งนี้ -

> node ./postinstall.js 
? What kind of project do you use
? javascript ? Which testing framework do you prefer? mocha 
+ [email protected]

ตอนนี้ไฟล์จะถูกเก็บไว้ในโฟลเดอร์โครงการของคุณ

สร้างอุปกรณ์ของคุณ

ให้เราสร้างอุปกรณ์ Android โดยใช้คำสั่งด้านล่าง -

tns build android

คำสั่งดังกล่าวจะเรียกใช้การทดสอบควรระบุความสามารถที่กำหนดเป้าหมาย หากคุณมีอุปกรณ์ iOS คุณสามารถสร้างโดยใช้ไฟล์iOS อุปกรณ์

เรียกใช้การทดสอบ

ตอนนี้เราได้กำหนดค่าอุปกรณ์แล้ว ให้เราทำการทดสอบโดยใช้คำสั่งด้านล่าง -

npm run e2e -- --runType <capability-name>

ที่นี่

ชื่อความสามารถถูกกำหนดไว้ในแอปพลิเคชันของคุณ e2e/config/appium.capabilities.json.

เอาต์พุต

NativeScript - บทสรุป

NativeScript เป็นแอพมือถือที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บในการทดสอบแอปพลิเคชันของพวกเขาอย่างสมบูรณ์ด้วยวิธีที่ง่ายมากโดยไม่ต้องออกแรงมาก นักพัฒนาสามารถพัฒนาแอปพลิเคชันที่ดูดีและประสบความสำเร็จได้อย่างมั่นใจโดยไม่มีปัญหาใด ๆ ในช่วงเวลาสั้น ๆ