สร้างโปรเจค React Native กัน ซีรีย์ มาเล่น React Native กันเถอะ EP.1
ห่างหายมานานมากกับการเขียนบทความวันนี้รู้สึกขี้เกียจก็เลยมาเขียนบทความสักหน่อย ยิ่งเขียนบทความก็จะได้ความรู้เพิ่มด้วย ตามหัวข้อเลยครับ จะมาพาทำ React Native (รีแอ้คท์เนทีฟ) กัน ซึ่งเป็นที่รู้กันดีอยู่แล้วว่า React Native เป็น Hybrid app พัฒนาหนึ่งได้ถึงสามแพทฟอร์มด้วยกันคือสามารถสร้างได้ทั้ง iOS Android และ Web อีกด้วย แต่บทความนี้จะขอเอา Android เป็นหลักนะครับ และระบบปฏิบัติการที่ใช้ก็จะเป็น WSL2 ของ Windows เขาครับ
ใน EP แรกนี้จะพูดถึงการสร้างโปรเจค React Native ซึ่งมีวิธีการหลากหลายหลายเกิน นี้ก็มือใหม่เหมือนกันตอนเริ่มศึกษาแรก ๆ ก็เลือกไม่ถูกซึ่งใน Document หลักจะมีสองอย่างคือ Expo CLI กับ React Native CLI ซึ่งทั้งสองอันค่อนข้างแตกต่างกันพอสมควร เอาเป็นว่าขอพูดในส่วนของตัว React Native CLI ธรรมดา ส่วนข้อแตกต่างขอไปพูดอีกบทความหนึ่งแล้วกันนะครับ (ถ้ามีโอกาส) แต่ใน Document หลักก็อวย Expo นะครับ ส่วนตัวชอบแบบธรรมดามากกว่า Expo
ก่อนอื่นสิ่งที่เราจำเป็นต้องมีคือ Nodejs และ Android SDK ครับ แต่สำหรับ WSL จะค่อนข้างแตกต่างจากทำบน Windows ปกตินะครับแต่แนะนำให้โหลด Android Studio มาด้วยก็ดีครับ สำหรับวิธีการใช้งานบน WSL ตามลิงค์นี้เลยครับ คลิ๊ก
เมื่อทุกอย่างครบแล้วก็มาเริ่มสร้างโปรเจคกันเลยครับผม ผมจะสร้างโปรเจคโดยใช้ Typescript เป็นหลักครับ
npx react-native init FunTime --template react-native-template-typescriptหลังจากเรารันคำสั่งสร้างโปรแกรมรอไปสักพัก (ใหญ่ ๆ) หลังจากเสร็จแล้ว เราก็จะได้หน้าตาแบบนี้
ทำการเปิดเข้าโฟร์เดอร์ (Path) และเปิดโฟร์เดอร์ด้วยโปรแกรม VSCode หรืออื่น ๆ ตามถนัด ผู้เขียนขอใช้ VSCode ครับ (สามารถใช้คำสั่ง code . ใน terminal ได้ครับ)
เมื่อได้แล้วทำการทดสอบรันโปรแกรมสำหรับคนที่ใช้ WSL จำเป็นต้องทำการเปิด ADB server บน Windows ใช้ Power shell หรือ Command Prompt ทำการปิด server ตัวเดิม (อย่าลืมเปิด Emulator หรือต่อเครื่องโทรศัพท์เราเข้าคอมพิวเตอร์นะครับ ในส่วนของผมขอใช้ Emulator ครับ)
adb kill-serverและทำการเปิดใหม่
adb -a nodaemon server start
หลังจากนั้นให้พิมพ์คำสั่งด้านใน WSL เพื่อตรวจสอบว่าอุปกรณ์ของเราได้เชื่อมต่อเข้ากับ WSL รึยัง
adb devices
หลังจากเราได้อุปกรณ์แล้วเรามาเริ่มทดลองรันโปรแกรมดูกันครับ ทำการเปิด Terminal บน VSCode หรือใน Terminal ปกติได้เลยนะครับ
มาเริ่มทำการรันทดสอบโดยการพิมพ์โค้ดดังนี้
yarn start --host 127.0.0.1โดย package manager ใช้ yarn เป็นหลัก แทน npm ที่เคยใช้กัน ผลที่ได้จะเป็นดังนี้
ซึ่งขั้นตอนนี้จะเป็นตัว live server ของ React Native ต่อไปจะเป็นขั้นตอนการติดตั้งลงไปยังอุปกรณ์ ทำการรันคำสั่งดังต่อไปนี้
npx react-native run-android --variant=debug --deviceId <:DeviceID>
เมื่อรันคำสั่งแล้วจะต้องรอประมาณสักพักใหญ่ ๆ (มาก ๆ)
เมื่อรันเสร็จแล้วผลลัพธ์ที่ได้ก็ดังภาพเลยครับผม
เป็นอันเสร็จแล้วสำหรับการสร้างโปรเจค React Native ไม่ยากเลยใช่ไหมละครับ สำหรับคนที่ไม่ได้ใช้ WSL ก็ทำตามได้เลยนะครับ แตกต่างแค่ตรง adb เท่านั้นเลยครับผม
สำหรับบทความนี้ก็ขอฝากไว้เท่านี้ ถ้าผิดพลาดประการใดก็ขออภัยด้วยนะครับ ถึงมีว่า React Native จะออกมาแล้วหลายปีแต่ก็ถือว่าเป็นเครื่องมือพัฒนาแอปพลิเคชันที่ทรงพลังอยู่เหมือนเดิมครับ ซึ่งผมก็เพิ่งได้มาหัดใช้ก็เพราะต้องทำ Senior Project จึงจำเป็นต้องใช้ React Native ครับผม (มาเขียนบทความนี้ไว้เผื่อตัวเองลืม) สำหรับ EP ต่อไปจะเป็นการทำ Navigation แน่นอนว่าการที่เราทำแอปพลิเคชันหนึ่งแอปพลิเคชันไม่ได้มีเพียงหน้าเดียวแน่นอน ซึ่ง Navigation จะใช้ React Navigation มาช่วยครับผม สุดท้ายอย่าลืม Follow ผมด้วยนะครับเผื่อมีบทความใหม่ ๆ ช่วงนี้ขี้เกียจเลยมาอัพบทความครับ (ฮ่า ๆ)
