Com Eng Workshop

Hello world !

By CP x CEDT

Computer Engineering Workshop

By CP x CEDT

Welcome to ...

• ช้าง

• แมว

• ยีราฟ

• เป็ด

รูปนี้คือเงาของอะไร ?!?

Multiple Choice

รูปเมื่อกี้ คือเงาของอะไร ?!?

• ช้าง

• แมว

• ยีราฟ

• เป็ด

สิ่งนี้คือเป็ด ก๊าบๆๆๆๆๆๆๆๆๆๆ

นี่คือเงาของ "เป็ด"

• ครัวซองค์

• ข้าวผัด

• ก๋วยเตี๋ยว

• สลัดผัก

รูปนี้คือเงาของอะไร ?!?

Multiple Choice

รูปเมื่อกี้ คือเงาของอะไร ?!?

• ครัวซองค์

• ข้าวผัด

• ก๋วยเตี๋ยว

• สลัดผัก

เอามาเพราะหิว น้องๆ อย่าลืมกินข้าวให้ครบ 8 แก้วด้วยน้าาา

นี่คือเงาของ "ครัวซองค์"

• Keyboard

• Breadboard

• Motherboard

• Databoard

รูปนี้คือเงาของอะไร ?!?

Multiple Choice

รูปเมื่อกี้ คือเงาของอะไร ?!?

• Keyboard

• Breadboard

• Motherboard

• Databoard

หรือที่อาจจะรู้จักกันในชื่อ Mainboard
เป็นบอร์ด Curcit ที่ใช้ในการเชื่อมต่ออุปกรณ์สำคัญต่าง ๆ เข้าด้วยกัน

นี่คือเงาของ "Motherboard"

หรือ Protoboard ใช้ในการต่อวงจรไฟฟ้าสำหรับทำ Prototype เพื่อใช้ทดสอบงาน

Breadboard

อุปกรณ์ Input รูปแบบหนึ่งที่ใช้การกดปุ่มเพื่อส่งข้อมูลเข้าสู่คอมพิวเตอร์

Keyboard

หรือ Protoboard ใช้ในการต่อวงจรไฟฟ้าสำหรับทำ Prototype เพื่อใช้ทดสอบงาน

Breadboard

อุปกรณ์ Input รูปแบบหนึ่งที่ใช้การกดปุ่มเพื่อส่งข้อมูลเข้าสู่คอมพิวเตอร์

Keyboard

​ส่วน Databoard ไม่มีจริงนะค้าบ

Word Cloud

พูดถึงภาคคอม น้องๆ จะนึกถึงอะไรกัน

Multiple Choice

ปีนี้ ภาคคอม ครบรอบ กี่ปี

• 111

• 50

• 51

• 49

Word Cloud

ถ้าได้มาเรียนภาคคอม คาดหวังจะได้เรียนเกี่ยวกับอะไรบ้าง

ท่องโลก Web Developement

Word Cloud

Website คืออะไร

Website คือ

• สื่อนำเสนอข้อมูลแบบ Digital ประเภทหนึ่ง

• ประกอบไปด้วย Web page หลายๆ หน้า ที่เชื่อมต่อกัน

• สามารถเข้าถึงได้ผ่าน Internet

• ถูกเปิดและแสดงผลผ่าน Web browser

• ถูกเก็บข้อมูล (Host) ไว้ใน Web server

Multiple Select

ข้อใดเป็นประเภทของ Website (มีข้อถูก 2 ข้อ)

• Static

• Elastic

• Dynamic

• Fantastic

ประเภทของ Website

• เป็น Website ที่ข้อมูลสามารถเปลี่ยนแปลงได้ เช่น Instagram

• Web จะส่งแค่หน้าตาคร่าว ๆ มาให้ browser และ browser จะต้องประมวลผลเพิ่มเติมเอง

Dynamic website

• เป็น Website ที่มีข้อมูลตายตัว

• Web server จะส่ง webpage ที่สำเร็จรูปมา แล้วเรียบร้อยมาให้ browser แสดงผลเลย

Static website

Multiple Choice

ภาษาใด ไม่ใช่ภาษาหลักที่ใช้ในการพัฒนา Website แบบ Static

• CSS

• JS

• C++

• HTML

ภาษาหลักที่ใช้พัฒนา Static Website

• เป็นภาษาที่ใช้ในการขึ้นโครงสร้างข้อมูลภายใน Website

• Syntax จะมีลักษณะเป็น Tag ซ้อนกันไปเรื่อยๆ

HTML

CSS

JS (JavaScript)

• เป็นภาษาที่ใช้ในการประดับให้เว็บไซต์สวยงาม

• Syntax จะมีลักษณะเป็น Class ที่รวม property ต่างๆ ที่ใช้ตกแต่งจัดวางไว้

• เป็นภาษาที่ใช้ประมวลผลต่าง ๆ เช่น คำนวนเลข หรือประมวลข้อมูล

• Syntax จะคล้ายกับ C และ Python ผสมกัน

เป็นเครื่องมือที่ช่วยในการออกแบบหน้าตาของ Website
ที่เรียกว่าการทำ "UI Design"

Figma!

Multiple Choice

UI ย่อมาจากอะไร

• Ultra Impact

• User Interface

• Upper Impression

• Under Idea

Multiple Choice

นอกจาก UI แล้ว มีอะไรที่ต้องออกแบบไปคู่กัน

• UK

• UA

• UX

• UU

UX / UI ต่างกันอย่างไร

• คือการทำให้ Website ใช้งานได้ง่าย

• ผู้ใช้งานเดาได้ว่าควรกดอะไรส่วนไหน

User Experience (UX)

• คือโทนสี การจัดวาง และความสวยงามของ Website

• ผู้ใช้งานเข้ามารู้สึกสบายตาไม่ใช่เปิดมาเจอสีรุ้งนีออน

User Interface (UI)

Multiple Choice

องค์ประกอบหลักๆ ของ Website แบบ Dynamic มีกี่องค์ประกอบ

• 2

• 3

• 4

• 5

Dynamic Website จะประกอบด้วย

• เป็นส่วนที่แสดงผลข้อมูล

• ไม่มีการเก็บ หรือประมวลผลข้อมูล

• ผู้ใช้งานจะเจอบ่อยที่สุด

• ง่าย ๆ อยู่สวย ๆ ก็พอ

Frontend

Backend

Database

• เป็นเหมือนมันสมองของ Website

• ใช้ในการประมวลผล หรือดึงข้อมูลจาก Database ก่อนส่งให้ Frontend

• เป็นส่วนที่ใช้เก็บข้อมูลให้เป็นระเบียบ

• เราจะเชื่อมโยงข้อมูลต่างๆ เข้าด้วยกันเพื่อให้สามารถอ่านได้ง่าย

โครงสร้างของ Dynamic Website

Web browser

Multiple Choice

สิ่งที่ทำให้ Frontend สามารถติดต่อหา Backend ได้ คืออะไร

• APX

• APM

• API

• APT

API (Application Programming Interface)

คือชุดของกฎที่จะใช้คุยกันระหว่าง Frontend และ Backend ว่าเราจะใช้ Format ไหนเหมือนคนเราเลือกภาษาที่ใช้คุยนั่นแหละ (สมัยนี้ชอบคุยกันด้วย Format ชื่อ JSON)

API มีหลายประเภท เช่น RESTful APIs, GraphQL, WebSockets
ซึ่งแต่ละตัวก็จะมีความสามารถที่แตกต่างกันไป

​ถ้าไม่มี API ก็จะสภาพประมาณนี้ ->

Multiple Choice

API ที่นิยมที่สุดในปัจจุบัน คืออะไร

• RESTful

• RPC

• WebSockets

• SOAP

Protocol

เป็นช่องทางการสื่อสารตรงกลางระหว่าง Frontend Server และ Backend Server ให้สามารถส่งข้อมูลหากันได้
หรือที่หลายๆ คนอาจจะเข้าใจว่าเป็น Internet นั่นเอง
โดยมี Protocol ที่นิยมใช้ในการส่งข้อมูลสำหรับ Website คือ HTTP (Hypertext Transfer Protocol)

Multiple Choice

สถานะการส่ง (Status code) ใด หมายถึง ไม่พบ Resource ที่ต้องการ

• 200

• 301

• 404

• 500

HTTP (Hypertext Transfer Protocol)

เป็น Protocol รูปแบบหนึ่งที่นิยมใช้ในปัจจุบัน ประกอบด้วย 2 ส่วนคือ Request (สิ่งที่ส่งไปขอข้อมูล) และ Response (สิ่งที่ตอบกับมา)
ภายใน HTTP Request / Response ก็จะมีข้อมูล 2 ส่วนหลัก ๆ

• Header : เก็บข้อมูลเกี่ยวกับการส่ง (จ่าหน้าซองจดหมายอ่ะ) เช่น สถานะการส่ง, ปลายทางที่ต้องการส่งไป, ส่งมาจากที่ไหน, ข้อมูลที่ส่งเป็นประเภทใด

• Body : เก็บข้อมูลที่ต้องการส่ง

Database

• คือส่วนที่ใช้เก็บข้อมูลต่าง ๆ ให้เป็นระเบียบ และเข้าถึง/จัดการได้ง่าย

• ในบางตัวอาจจะมีความสามารถพิเศษเฉพาะ เช่น ทำงานไวมาก, เก็บข้อมูลได้เยอะ เป็นต้น

Multiple Choice

Database ประเภทใดเหมาะกับ ข้อมูลที่มีลักษณะเป็นตาราง

• SQL

• Document-based

• Key-value

• Graph-based

Multiple Choice

Database ประเภทใดเหมาะกับ ข้อมูลที่มีการเชื่อมโยงกันเยอะ และซับซ้อน

• SQL

• Document-based

• Key-value

• Graph-based

ประเภทของ Database

• เป็นประเภทที่ไม่ต้องมีรูปแบบที่ชัดเจน จะเก็บแบบไหนก็ได้

• เน้นความสามารถเฉพาะตัว เช่น ทำเกี่ยวกับด้าน Social network เก่ง

NoSQL

• เป็นรูปแบบการเก็บข้อมูลแบบที่มีความเชื่อมโยงกัน (Relational)

• ทุกอย่างที่จะเห็นต้องมีโครงสร้างที่ชัดเจน (เป็นรูปแบบตาราง)

• ใช้งานได้หลากหลายแบบ

SQL

ประเภทของ Database NoSQL

• เก็บข้อมูลเป็นคู่ ๆ โดย key คือตัวที่ชี้ว่า value อยู่ที่ไหน และเมื่อเราเรียก key ก็จะได้ value จริงออกมา

Key-Value

• การจัดเก็บข้อมูลเป็น เอกสาร เช่นการเก็บไฟล์ txt ไว้ 1 ไฟล์คือ 1 ชุดข้อมูล

• ส่วนใหญ่เป็น Format ที่มีอยู่แล้วเช่น JSON

Document-based

ประเภทของ Database NoSQL

• เก็บข้อมูลเป็นกราฟ (จุดกับเส้นเชื่อม) ที่เชื่อมโยงถึงกัน

• เหมาะกับการเอามาทำ Database ที่ข้อมูลเชื่อมต่อกันเยอะๆ ซับซ้อน เช่นเก็บว่าคนนี้เป็นเพื่อนใครบ้าง

Graph-based

• เป็นการเก็บข้อมูลที่อยู่ Column เดียวกันเป็นชุดเดียวกัน

• มองว่า Database เป็นตาราง
  SQL จะเก็บข้อมูลในแถวเป็นชุดเดียวกัน แต่ตัวนี้จะเก็บข้อมูลใน Column เป็นชุดเดียวกันแทร

Column Oriented

WDF (Website Development Framework)

• เป็นตัวช่วยในการเขียน code ที่สามารถทำให้เราพัฒนา Website ได้สะดวก ง่าย และเป็นระเบียบมากยิ่งขึ้น

• นิยมใช้มากๆ กับการทำ Dynamic Website

Multiple Choice

ข้อใด ไม่ใช่ชื่อของ Website Development Framework

• Vue

• Express

• Tailwind

• React

• Lauriel

ตัวอย่าง WDF ที่นิยมใช้

Framework ที่ช่วยในการเขียน CSS

Express.js

Framwork สำหรับทำ Dynamic Website

React.js & Vue.js

Tailwind CSS

Framework ที่ช่วยในการเขียน Backend (REST API)

Multiple Choice

แล้วเวลาทำงานกับเพื่อนๆ เราจะใช้อะไรส่ง code กันดี

• Google drive

• Line

• Github

• Dropbox

เป็นระบบควบคุม Code ที่ทำให้การพัฒนาระบบเป็นทีมได้ง่ายและสะดวก ทั้งยังช่วยควบคุม version ของโค้ดได้ด้วย

​

Github

Multiple Choice

ข้อใดจับคู่ตำแหน่งงาน และหน้าที่ที่ต้องทำได้ถูกต้องที่สุด

• DevOps - ออกแบบโครงสร้าง

• Business Analyst - เขียนโปรแกรมทางด้านเศรษฐศาสตร์

• Tester - แก้ไข bug ในโปรแกรม

• Project manager - วางแผนการทำงาน

• Architecture - วาดรูปแปลนบ้าน

ตำแหน่งงานที่พบได้

• คนทำหน้าที่ Design โครงสรร้างระบบต่าง ๆ เช่น Database / API

• เป็นคนที่จะออกแบบก่อนให้ Developer ไปทำงานต่อ

Architecture

• คนที่จะคุยกับลูกค้า และคิดออกมาว่าลูกค้าต้องการ Feature อะไรบ้าง

• ต้องแปลภาษาคนให้เป็นภาษา Programmer เข้าใจ

Business Analyst

ตำแหน่งงานที่พบได้

• คนพัฒนาโปรแกรม

• แก้ Bug หรือปัญหาต่างๆ ที่มีคนแจ้งมา

Developer

• คนดูแลโปรเจ็คที่กำลังทำอยู่ตั้งแต่ต้นน้ำยันปลายน้ำ

• จัดแจงงานว่าใครจะทำอะไร, จะต้องออก Feature อะไรตอนไหน

Project Manager

ตำแหน่งงานที่พบได้

• คนที่ทำการนำโปรแกรมขึ้นสู่ Server และคอยดูแลให้ทำงานได้ตลอดเวลา

• ทำ Auto CI/CD

DevOps

• คนที่ทดสอบระบบต่าง ๆ ที่ Developer เป็นคนเขียน

• ตรวจสอบ Program หา Bug ที่มีและแจ้งไปหา Developer

Tester

Multiple Choice

คิดว่าในการทำงานจริง การเขียน Document สำคัญหรือไม่

• สำคัญ

• ไม่สำคัญ

• แล้วแต่จะคิด

• CODE is DOCUMENT!!!

ทำไมถึงแล้วแต่จะคิด?!?

• เนื่องจากการทำงานจริงมีปัจจัยหลากหลายอย่างมากที่จะต้องนำมาคิด เช่น เวลาที่มี, การนำงานไปใช้ต่อ, ใครเป็นผู้ใช้งาน Website ของเรา

• Document เองก็มีหลากหลายประเภทและจุดประสงค์ เช่น Requirement Document, Design Document, Scope of work (เอกสารส่งงาน)

• นอกจากนี้ การเขียน และอัพเดต Document ให้เป็นปัจจุบัน ก็เป็นงานที่ต้องใช้เวลา และเหนื่อยที่จะต้องทำ

• การเขียน Document ต่างๆ จึงอาจจะไม่ได้จำเป็นเสมอไป
  ขึ้นอยู่กับว่า Website ที่เราทำนั้น เหมาะกับแบบไหน

Hardware

Boolean values

TRUE (1)

FALSE (0)

AND gate

AND gate (และ , ∧)
เป็น TRUE เมื่อ input ทั้ง 2 ตัวเป็น TRUE

​A	B​	A.B​
​T	T​	​T
T​	F​	​F
F​	T​	F​
F​	F​	F​

OR gate

OR gate (หรือ , ∨)
เป็น TRUE เมื่อ input ตัวใดตัวหนึ่งเป็น TRUE

​A	B​	A.B​
​T	T​	​T
T​	F​	​T
F​	T​	T​
F​	F​	F​

NOT gate

NOT gate (ไม่ , ~)
เปลี่ยนค่า input เป็นค่าตรงข้าม
(เปลี่ยนจาก TRUE เป็น FALSE, เปลี่ยนจาก FALSE เป็น TRUE)

​A	~A​
T​	F​
​F	T​

Other gates

NAND gate

XNOR gate

NOR gate

XOR gate

​A	​B	~(A.B)​
​T	T​	F
​T	F​	T​
F​	T​	T​
F​	F​	T​

​A	​B	~(A⊕B)​
​T	T​	T
​T	F​	F​
F​	T​	F​
F​	F​	T​

​A	​B	A⊕B
​T	T​	F
​T	F​	T​
F​	T​	T​
F​	F​	F​

​A	​B	~(A+B)​
​T	T​	F
​T	F​	F​
F​	T​	F​
F​	F​	T​

example

Problem 1

Multiple Choice

A = ?, B = ?, C = ? (ค่าเป็น "0" หรือ "1")

• A = 1

  B = 1

  C = 1

• A = 1

  B = 1

  C = 0

• A = 1

  B = 0

  C = 0

• A = 0

  B = 1

  C = 0

Problem 1 - เฉลยย

Problem 2

Multiple Choice

A = ?, B = ? (ค่าเป็น "0" หรือ "1")

• A = 1

  B = 1

• A = 1

  B = 0

• A = 0

  B = 1

• A = 0

  B = 0

Problem 2 - เฉลยย

Problem 3

จากวงจรด้านซ้าย จะต้องกดสวิตซ์ใดบ้าง หลอด LED จึงจะติด

1. ไม่ต้องกดเลย
2. กดสวิตซ์ที่ 1
3. กดสวิตซ์ที่ 1, 2
4. กดสวิตซ์ที่ 1, 2, 3
5. กดสวิตซ์ที่ 1, 2, 3, 4

Multiple Choice

จากวงจรเมื่อครู่ จะต้องกดสวิตซ์ใดบ้าง หลอด LED จึงจะติด

• ไม่ต้องกดเลยก็ติด

• 1

• 1, 2

• 1, 2, 3

• 1, 2, 3, 4

Problem 3 - เฉลยย

คำตอบคือ
ไม่ต้องกดเลยสักอัน
ก็ติดแล้ว !!

Problem 4

จากวงจรด้านซ้าย
ถ้าต้องแปลงเป็นนิพจน์ทางคณิตศาสตร์
ค่าความจริงของหลอด LED จะตรงกับข้อใด

Multiple Choice

จากวงจรเมื่อครู่ ถ้าต้องแปลงเป็นนิพจน์ทางคณิตศาสตร์
ค่าความจริงของหลอด LED จะตรงกับข้อใด

• $$\neg\left(1\ \vee\ 2\right)\ \wedge\ \left(3\ \vee\ \neg4\right)$$

• $$\neg\left(1\ \wedge\ 2\right)\ \vee\ \left(3\ \wedge\ \neg4\right)$$

Problem 4 - เฉลยย

Problem 5

1. ​ถ้า A0 = 1, B0 = 0
   แล้ว C1 C0
   จะเท่ากับเท่าไหร่

2. ​ถ้า A0 = 1, B0 = 1
   แล้ว C1 C0
   จะเท่ากับเท่าไหร่

​เขียนเป็นตัวเลข 0 หรือ 1 ติดกัน 4 ตัว เช่น
ข้อ 1. ตอบ C1 = 0, C0 = 1 และ ข้อ 2. ตอบ C1 = 1, C0 = 0 คำตอบสุดท้าย คือ 0110

Fill in the Blanks

​

Problem 5 - เฉลยย

​เขียนเป็นตัวเลข 0 หรือ 1 ติดกัน 4 ตัว เช่น
ข้อ 1. ตอบ C1 = 0, C0 = 1 และ ข้อ 2. ตอบ C1 = 1, C0 = 0 คำตอบสุดท้าย คือ 0110

​วงจรที่น้อง ๆ เห็นใน Problem 5
แท้จริงแล้ว มันคือวงจรสำหรับการบวกเลข ในระบบเลขฐาน 2 นั่นเอง !!
โดยเป็นการบวกเลข 1 bit + 1 bit (จำนวน bit ก็คือ จำนวนของตัวเลข 0/1 )

วงจรการบวก (Adder)

วงจรการบวก (Adder)

แล้วการบวกเลขในระบบเลขฐาน 2 แบบ 2 bits + 2 bits ล่ะ ?
วงจรก็จะซับซ้อนขึ้น ตามด้านบนนี้เลยย
(จริง ๆ มันก็เอาแบบ 1 bit มาต่อกันเยอะ ๆ แหละ + วิธีนี้อาจจะไม่ได้ดีที่สุดนะ มันอาจจะทำให้ดีกว่านี้ได้)

Problem 6

Multiple Choice

จากวงจรเมื่อครู่ ค่าผลลัพธ์ที่ได้ จะเป็น 0 หรือ 1

• 0

• 1

Problem 6 - เฉลยย

7-Segment

Problem 7

Fill in the Blanks

Problem 7

ตัวอย่างวงจรอื่น ๆ ที่จะได้เรียน

​วงจร Counter
(นับเลขไปเรื่อย ๆ)

ตัวอย่างวงจรอื่น ๆ ที่จะได้เรียน

​วงจรการหาค่า ห.ร.ม.

ตัวอย่างวงจรอื่น ๆ ที่จะได้เรียน

​CPU
อย่างง่าย

The End