Home
สำหรับการทำงานของทีมเรานะครับ เราจะใช้ stack ที่เรียกกันว่า MERN stack ซึ่งหาได้จากแหล่งอ้างอิงของตัวเว็ป mongoDB ซึ่งทางเว็ปแนะนำว่าถ้าใช้ FrameWork ทั้ง 4 ตัวนี้สามารถทำ Webapp ได้อย่างง่าย เพราะว่า 1.เป็นภาษา Javascript เพียงภาษาเดียว สามารถประยุกต์พัฒนาระบบต่างได้ 2.สามารถเชื่อมเข้ากันได้กับทุก Framework ที่กล่าวมาข้างต้น MERN stack ย่อมาจากอะไร MERN stack ประกอบไปด้วย 1.mongoDB 2.ExpressJs 3.NodeJs 4.ReactJS แต่ละตัวทำหน้าที่อะไรบ้าง เรามาดูและติดตั้งไปด้วยกันนะครับ
เรามาเริ่มจากการติดตั้ง NodeJs ใน mac-os กันก่อนนะครับ (เนื่องจากทีมผมใช้ mac-os ในการทำงานเป็นหลัก)
Node.JS คือสภาพแวดล้อมการทำงานของภาษา JavaScript นอกเว็บเบราว์เซอร์ สามารถใช้ Node.js ในการพัตนาแอพพลิเคชันแบบ Command line แอพพลิเคชัน Desktop หรือแม้แต่เว็บเซิร์ฟเวอร์ได้ โดยที่ Node.js จะมี APIs ที่เราสามารถใช้สำหรับทำงานกับระบบปฏิบัติการ เช่น การรับค่าและการแสดงผล การอ่านเขียนไฟล์ และการทำงานกับเน็ตเวิร์ก เป็นต้น
- เข้าไปที่เว็ปไซต์ NodeJs https://nodejs.org/en/
- ทำการเลือกหัวข้อ
- จากนั้น install ตามลำดับ
- หลังจากนั้นเข้าไปที่ Command-line แล้วพิมพ์คำสั่งดังนี้
node-v
เพื่อเป็นการเช็คเวอร์ชั่นของ NodeJs และ พิมคำสั่ง
npm-v
เพื่อเป็นการเช็คเวอร์ชั่นของ Node Package Manager
เพียงเท่านั้นก็เป็นอันเสร็จสิ้นในการติดตั้ง NodeJs และ Node Package Maneger
เป็น Front-End Framework ที่ใช้ภาษา Javascript มาประยุกต์ในการทำ ซึ่งสามารถ นำไปใช้กับการเขียน Website Webappication ได้ โดยมีข้อดีคือ 1.เรียนรู้ง่าย เป็นภาษา Javascript ที่สามารถ นำไปต่อยอดใน Framework อื่นๆ ที่ทำหน้าที่ต่างๆได้เช่น NodeJs VueJs ExpressJs AngularJs เป็นต้น 2.เรียนรู้ได้เร็วโดย ReactJs เป็นภาษาที่มี library ที่จัดการในส่วนของการแสดงผลเท่านั้น โดยเฉพาะ View ที่อยู่ใน MVC (Model, View, Controller) ทำให้นักพัฒนา ใช้เวลาศึกษาไม่นานก็สามารถพัฒนาเว็บไซต์ได้ .
- สร้าง folder ที่จะจัดเก็บงาน
ในตัวอย่างจะสาธิตการติดตั้งในโฟลเดอร์ Documents -> GitHub -> T-pak หลังจากขั้นตอนนี้ให้เปิด terminal ขึ้นมาหลังจากนั้นให้ใช้คำสั่ง cd (change directory) เพื่อเปลี่ยนตำแหน่งไฟล์ให้เป็น folder ที่เราสร้างไว้ ดังตัวอย่าง
2 จากนั้นให้พิมพ์คำสั่งดังนี้
nix create-react-app my-app
cd my-app
npm start
หลังจากนั้นเราจะได้หน้า server local ของทาง ReactJS มาเป็นที่เรียบร้อย เป็นอันเสร็จสิ้นในการติดตั้ง ReactJs เราสามารถดูโค้ดได้จาก Folder ที่เราเลือก save ไฟล์งาน
ตัวอย่างไฟล์ code ที่เกิดจากการสร้าง ReactJs สามารถเปิดเข้าไปแก้ได้โดยใช้ vs-code หลังจากนั้นเลือกเข้าถึง folder นี้ได้เลย
Express.js หรือ Express นั้นเป็นเว็บเฟรมเวิร์คจาก NPM ที่ใช้สำหรับพัฒนาเว็บแอพพลิเคชันหรือเว็บไซต์บน Node.js ที่ทำงานที่ฝั่งของ Backend ตัวของเฟรมเวิร์คนั้นถูกพัฒนามาจากโมดูล http ซึ่งเป็นโมดูลของ Node.js เอง
การติดตั้ง expressJS ให้ใช้คำสั่งดังนี้
npm install express
เพียงเท่านี้เราก็จะมี stack ทั้ง 3 ตัว nodeJS reactJs และ expressJs เดี๋ยวต่อไปเรามาลง mongoDB กันครับ
MongoDB เป็น open-source document database ประเภทหนึ่ง โดยเป็น database แบบ NoSQL Database จะไม่มีการใช้คำสั่ง SQL และจัดเก็บข้อมูลเป็นแบบ JSON (JavaScript Object Notation) ซึ่งจะเก็บค่าเป็น key และ value โดยจุดเด่นอยู่ที่ความเร็วในการทำงานเป็นหลัก
- ติดตั้ง MongoDB ในขั้นตอนนี้จะเป็นการเตรียมพร้อมสำหรับการใช้งาน MongoDB โดยการติดตั้งลงในเครื่องของเราก่อน
- Mongo DB จะมีการเก็บไฟล์ฐานข้อมูลไว้ที่โฟลเดอร์ data/db ซึ่งตอนแรกเราจะไม่มีโฟลเดอร์นี้ ให้เราRun คำสั่งนี้ใน Terminal
เพียงเท่านี้เราก็จะมีครบทุกองค์ประกอบที่จะใช้ในการพัฒนา Webappication เรียบร้อยทั้ง ReactJs,NodeJs,ExpressJs และ MongoDb หรือเรียกกันว่า MERN stack นั่นเองครับ
ในส่วนต่อไปคือส่วนการ Design หน้าตาของ Web หรือเรียกกันว่า UI ทางเราขอแนะนำ Web สำหรับการพัฒนา UI ชื่อว่า Figma
Figma เป็น Webapp ที่นักพัฒนา UI เลือกใช้เป็นส่วนหลักโดยมีข้อดีก็คือ
1.พัฒนาบนเว็ปได้ ไม่ต้องลงโปรแกรมเพิ่มหมายความว่า ไม่ว่าจะใช้ OS ใด ก็สามารถเข้ามาพัฒนา UI ได้ เพราะใช้งานบนเว็ปไซต์
2.สามารถพัฒนาพร้อมกันได้หลายคน มีการแชร์ Workspace ให้กับทีมได้ เข้ามาแก้ไขได้พร้อมกัน และแสดงผลแบบ Real-time ทำให้งานเสร็จไวขึ้น
3.สามารถ Export เป็นไฟล์ CSS HTML นำไปใช้กับการเขียนเว็ปไซต์บน ReactJs ได้ทันที
4.มีฟังก์ชั่นการจำลอง prototype สามารถทดลองวัดขนาดสเกลกับหน้าจอจริง และสามารถจำลองการเปลี่ยนหน้าต่างหรือ transition ได้
1.เพียงแค่เข้าเว็ป figma link:https://www.figma.com/
2.ทำการสมัครลงทะเบียน ฟรี
3.ไปที่หน้า New design file
4.ไปที่หน้า Frame แล้วสร้างกรอปขึ้นมา กำหนดขนาด 1920*1080 ตาม design หน้าจอ
เพียงเท่านี้เป็นอันเสร็จสิ้น การติดตั้ง และตั้งค่าเว็ปออกแบบ UI ที่ใช้งานง่าย
ทางทีมเราจะใช้ Heroku โดยข้อดีของ Heroku คือ Deploy ฟรีสำหรับการทดลอง และรองรับการใช้งานหลากหลายภาษา และรองรับการใช้งาน database ที่มากมาย
1.เข้าไปที่เว็ปไซต์ Heroku link:https://www.heroku.com/
2.สมัคร user account ฟรี
3.หลังจากนั้นเข้าสู่หน้า Deploy project ได้เลย
เพียงเท่านี้เป็นอันเสร็จสิ้นในการสมัครและพร้อมที่จะใช้งาน Cloud Heroku
การติดตั้ง Visual Studio Code
สามารถดาวนโหลดได้จาก link โดยตรงจากทางเว็ปได้เลย
https://code.visualstudio.com/
Github (GitHub Desktop) เราใช้ GitHub desktop ในการอัปเดตโค๊ดลง githubเพื่อให้เพื่อนร่วมทีม สามารถนำ code ที่เราอัพเดทแล้วไปใช้งานต่อได้เลย
