wasankds.com

[PI-02] Node.js & Raspberry Pi : Web App Workshop

/images/pi-02-slide.jpg

[ PI-02 ] หลักสูตรอบรม "Node.js & Raspberry Pi : Web App Workshop"

รูปแบบการสอน

- ออนไลน์สอนสด ผ่าน Google Meet

- สอนครั้งละ 1 ท่านเท่านั้น

ถ้าต้องการมาเรียนกับผู้สอนโดนตรงแบบหน้าต่อหน้า เดินทางมาได้ที่ อ.หนองไผ่ จ.เพชรบูรณ์

หรือ หากต้องการเรียนเป็นกลุ่ม โดยให้ผู้สอนไปสอนถึงสถานที่ ติดต่อขอใบเสนอราคาได้ตามช่องทางที่ให้ไว้

แนะนำคอร์ส

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

แม้ในยุคที่ AI เฟื่องฟูจนสามารถเขียนโค้ดแทนเราได้เกือบทุกอย่าง หลายคนอาจตั้งคำถามว่า "เรายังต้องเรียนรู้วิธีเขียนโปรแกรมเองไปทำไม ?"

ความจริงก็คือ... หากเราไม่เข้าใจโครงสร้างของระบบ หรือต้องการปรับแต่งให้เข้ากับงานเฉพาะทาง เราจะติดแหง็กทันที! บ่อยครั้งที่เราต้องนั่งคุยกับ AI นานจนหงุดหงิด มันอาจจะพาเรา "เข้ารกเข้าพง" เพียงเพราะเราไม่มีพื้นฐานที่แน่นพอจะประเมินและตบกลับเข้าที่เข้าทางได้

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

ค่าบริการ

1,900 บ./คน

- ระยะเวลา 1 วัน(6ชม.)

- สอนครั้งละ 1 ท่านเท่านั้น

- ออกใบเสร็จฯ ให้ได้

- มีส่วนลดให้หากสมัครเรียนมากกว่า 1คอร์ส

การเตรียมพร้อมก่อนเรียน

ผู้เข้าเรียน จำเป็นต้องเตรียมตัวตามรายการดังต่อไปนี้ ติดขัดประการใด ปรึกษาผู้สอนก่อนได้

    ความรู้พื้นฐาน

  1. ต้องผ่านหลักสูตร [PI-01] Raspbery Pi Web Server มาก่อน (คลิกเพื่อดูคอร์ส)

    2. อุปกรณ์ประกอบคอร์ส

  2. Raspberry Pi ที่เซ็ตเป็น Web Server แล้ว

    3. คอมพิวเตอร์ที่ใช้เรียน

  3. คอมพิวเตอร์ที่ใช้ Windows 11
    1. ติดตั้งโปรแกรม VS Code
    2. ติดตั้งโปรแกรม Git for Windows
    3. การเรียนออนไลน์แบบสอนสด ควรมี 2 จอ จอที่ 1 สำหรับทำตาม จอที่ 2 สำหรับดูจอของผู้สอน

    4. บัญชี GitHub

  4. บัญชี GitHub ( สร้างบัญชีได้ที่ https://github.com/ )

หัวข้อการอบรม

    --- Part I : การเตรียม Workspace สำหรับสร้างโปรเจกต์ ---

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

  1. เขียนโปรแกรมบน Windows รันเว็บแอพบน Pi
    1. การสร้าง Responsitory(พื้นที่เก็บโปรเจกต์) บน GitHub
    2. การสร้างโปรเจกต์ Node.js บน Windows
      1. การใช้งาน Git จัดการเวอร์ชั่นของโปรเจกต์
      2. ไฟล์และโฟลเดอร์ในระบบของ Git
      3. การดันโปรเจกต์(push) จาก Windows ไปไว้บน GitHub
    3. การขึ้นโปรเจกต์บน Pi
      1. การโคลนโปรเจกต์จาก GitHub ที่เป็นโปรเจกต์ส่วนตัว(Private)
      2. การดึงโค้ด(pull) จาก GitHub
  2. รีโมทไปเขียนโปรแกรมบน Pi โดยตรง
    1. ทำไมต้องรีโมทไปเขียนโปรแกรมบน Pi ?
    2. การใช้ส่วนเสริม(Extension) บน VS Code เพื่อรีโมทไปเขียนโปรแรกมบน Pi(แบบเรียลไทม์)
    3. Windows รีโมทไปสร้างโปรเจกต์ Node.js บน Pi
  3. แนะนำการใช้ Docker ในการจัดการโปรเจกต์

    4. --- Part II : โปรเจกต์ ---

  4. โปรเจกต์ #1 : Static Web by Express

    คอนเซปต์: ทำความเข้าใจว่า Server ทำงานอย่างไร และการส่งไฟล์พื้นฐาน

    1. สร้างหน้าเว็บแบบ Static 2-3 หน้า เช่น หน้าแรก, หน้าเกี่ยวกับเรา, หน้าติดต่อเรา เป็นต้น ตกแต่งโดยใช้ Bootstrap หรือเขียน css/js เอง

      2. สิ่งที่จะได้เรียนรู้ในโปรเจกต์นี้

    2. การติดตั้งและเรียกใช้โมดูลยอดนิยม express
    3. ทำความเข้าใจโครงสร้าง app.js, package.json และ node_modules
    4. ระบบสร้างเส้นทางพื้นฐาน(Routing) ไปยังหน้าเว็บ
    5. การตอบกลับเป็น Text หรือ HTML
    6. การใช้ Bootstrap ในการจัดรูปแบบหน้าเว็บ
    7. การออกแบบหน้าเว็บโดยใช้ CSS และ JavaScript ที่สร้างเอง
      1. การตั้งให้ใช้งาน css และ js ได้แบบ public
      2. การลิงค์ไฟล์ css และ js
  5. โปรเจกต์ #2 : Dynamic Web by EJS (Server-Side Rendering)

    คอนเซปต์: เปลี่ยนจากเว็บ "ใบปลิว" (Static) เป็นเว็บ "กระดานข่าว" (Dynamic) ที่เปลี่ยนแปลงได้ตามข้อมูล

    1. สร้างหน้าเว็บแสดงข้อมูลสินค้า(และภาพ) จากไฟล์ JSON

      2. สิ่งที่จะได้เรียนรู้ในโปรเจกต์นี้

    2. การติดตั้งโมดูลยอดนิยม ejs และการตั้งค่า Express ให้รู้จัก
    3. การแยกส่วนหน้าเว็บ (Partials)
      1. การแยกส่วนหน้าเว็บที่ใช้ซ้ำๆ เช่น Header/Footer
      2. การนำส่วนของเว็บมาใช้ ในเว็บหน้าอื่นๆ (แก้ไขจุดเดียวมีผลทุกหน้า)
    4. ลอจิกควบคุมการแสดงผล
      1. if-else เช่น ถ้าเป็นช่วงเช้า ให้ขึ้นข้อความ "Good Morning"
      2. Loop สร้างแถวในตารางจากข้อมูลอาเรย์
    5. การแสดงภาพในหน้าเว็บ
  6. โปรเจกต์ #3 : Form Handling & Data Saving (Input/Output)

    คอนเซปต์: การโต้ตอบกับผู้ใช้และการเก็บข้อมูลถาวร (แบบไฟล์)

    1. สร้างหน้าเว็บ หน้าสั่งซื้อสินค้า
    2. สร้างหน้าเว็บ หน้าข้อมูลการสั่งซื้อ

      3. สิ่งที่จะได้เรียนรู้ในโปรเจกต์นี้

    3. การสร้างฟอร์ม HTML ("ฟอร์มสั่งซื้อสินค้า")
    4. การตั้งค่า app.use เพื่อแกะข้อมูลที่ส่งมาจากฟอร์ม
    5. การรับค่าจากฟอร์มในฝั่ง Server
    6. การเขียนค่าจากฟอร์มลงในไฟล์
      1. รับข้อความ -> อ่านไฟล์ data.json เดิม -> เพิ่มข้อความใหม่ต่อท้าย -> บันทึกทับไฟล์เดิม
      2. อ่านไฟล์ data.json มาแสดงผลหน้าเว็บ
ติดต่อ

วสันต์ คุณดิลกเศวต

Line ID : wasankds

Email : [email protected]

เว็บไซต์ : wasankds.com

โทรฯ : 081-459-8343

กลุ่มไลน์

สำหรับสอบถามหรือติดตามข่าวสารจากเรา

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