หากใครที่กำลังต้องการติดตั้ง React.js และ TypeScript เพื่อทำงานร่วมกัน วิธีหนึ่งที่รวดเร็ว คือการติดตั้งผ่าน Vite นั่นเอง

Vite คือ Frontend Tooling ที่ช่วยอำนวยความสะดวกในการขึ้นโปรเจ็กต์อย่างรวดเร็ว โดยที่เราเลือก option แค่ไม่กี่ข้อ ก็จะได้ project bundle มาพร้อมใช้งานทันที

Vite

Next Generation Frontend Tooling

ViteMastodonTwitterDiscordGitHubMastodonTwitterDiscordGitHub

มาเริ่มต้นสร้าง Application กันที่คำสั่ง

npm create vite@latest

ต่อมา กด y ที่ Ok to proceed? แล้วเลือก choice ตามนี้

Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
✔ Project name: … typescript-react
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/washira/typescript-react...

Done. Now run:

  cd typescript-react
  npm install
  npm run dev

ในโปรเจ็กต์ เรามีการสร้างชื่อว่า typescript-react และเลือก Framework เป็น React จากนั้น เลือกภาษาที่จะใช้พัฒนา คือ TypeScript ตามลำดับ

เนื่องจาก Vite ไม่ได้ให้ node modules มาด้วย โดยมีเพียง package.json มาเท่านั้น เราจึงต้องติดตั้งเอง เข้าไปที่ directory ของโปรเจ็กต์ จากนั้น ติดตั้ง node modules ด้วยคำสั่ง

npm install

และรันโปรเจ็กต์บน local ของเราที่คำสั่ง

npm run dev

จะมีข้อความขึ้นมาประมาณนี้

VITE v4.2.1  ready in 395 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

เปิด internet browser แล้วใส่ url ที่ http://127.0.0.1:5173/ ตามที่ระบุในข้อความ เราจะเห็นหน้าเว็บออกมาเป็นดังนี้

ถ้าเราอยากเปลี่ยน port ให้เป็นเลขอื่นที่ต้องการ ให้เพื่มโค้ดที่ vite.config.ts ดังนี้

// https://vitejs.dev/config/
export default defineConfig({
  server: { port: 3000 }, 		// เพิ่มบรรทัดนี้
  plugins: [react()],
})

นี่เป็นวิธีการสร้างและตั้งค่าเบื้องต้นที่เราสามารถขึ้นโปรเจ็กต์ด้วย React ได้ไวมาก เพราะ Vite มีความเบา ทำให้ประหยัดพื้นที่ และ render ไวดี บวกกับสามารถพัฒนาด้วย TypsScript ได้ ไม่ต้องตั้งค่าเพิ่มเติมเลย ก็นับว่าเป็นอีกหนึ่งข้อดีของ Vite ที่น่าสนใจครับ

ในบทความนี้ จะบันทึกวิธีการตั้งค่า dockerfile และ docker-compose เพื่อทดสอบและฝึกใช้งาน Docker และต่อยอดเป็น Microservices ในอนาคต ซึ่งผมเห็นว่า มีความน่าสนใจที่จะเอามาแบ่งปันประสบการณ์ตรงนี้ให้ทุกคนได้อ่านกันครับ

ในกรณีนี้ เราจะไม่ใช้ Node.js เป็น Runtime บนเครื่องของตัวเองเลย รวมถึง MongoDB ด้วย ทุกอย่างจะทำงานผ่าน Docker เท่านั้น จุดประสงค์ต้องการทดสอบการรันทุก Server โดยใช้ Docker Container

ตั้งค่าโปรเจ็กต์

ในโปรเจ็กต์ตัวอย่าง เรามีการสร้าง APIs เพื่อใช้งานเกี่ยวกับ ระบบจอดรถ ขอตั้งชื่อโปรเจ็กต์ว่า parking-lot-backend-app ละกันนะฮะ

ภายในโปรเจ็กต์ มีการตั้งค่าภายในไฟล์ .env เกี่ยวกับ MongoDB ดังนี้

DB_HOST=mongo
DB_PORT=27017
DB_NAME=<DB_NAME>
DB_USER=<DB_USERNAME>
DB_PASS=<DB_PASSWORD>

ต่อมา เริ่มสร้าง dockerfile กันก่อนดีกว่า

FROM node:12
# FROM เอาไว้เลือก Base Image จาก Docker Hub ที่ต้องการใช้เป็นสภาพแวดล้อม

LABEL maintainer="admin"

LABEL description="This dockerfile for install the parking-lot-backend."

WORKDIR /app
# WORKDIR คิือการกำหนด directory ของการทำงาน 
# เพื่อให้คำสั่งอื่นๆของ Docker ไปทำงานที่นั่น ซึ่งในที่นี้เป็น /app

COPY package.json ./
# คัดลอก package.json ไปใส่ที่ ./

COPY package-lock.json ./
# คัดลอก package-lock.json ไปใส่ที่ ./

RUN npm install
# ในที่นี้ คือ จาก ./ ไปหา ./

COPY ./ ./
# COPY คือคำสั่งที่คัดลอกโค้ดจาก directory ต้นทาง ไปหา ปลายทาง 
# ในที่นี้ คือ จาก ./ ไปหา ./

ENV NODE_ENV production

CMD ["npm", "run", "dev"]
# CMD คีอ การใส่คำสั่งเพื่อรันโปรแกรม จากตัวอย่างคือ คำสั่ง "npm run dev"

ลักษณะการเขียน Dockerfile จะเป็นการเขียนเพื่อเรียงลำดับการทำงานแบบบนลงล่าง รายละเอียดเพิ่มเติมศึกษาได้ที่นี่

สร้าง docker-compose.yml ขึ้นมา โดยมีรายละเอียดดังนี้

version: '3'
services:
  app:
    container_name: parking-lot
    restart: always
    build: .
    ports:
      - '80:3000'
    external_links: 
      - mongo
  mongo: 
    container_name: mongo
    image: mongo
    ports: 
    - '27017:27017'

จากในไฟล์ Docker Compose นี้ มีการกำหนดค่าต่างๆดังนี้
- version ของ Compose file format
- services คือ การประกาศ service ที่จะรันทั้งหมด
- container-name คือ การกำหนดชื่อ container ของแต่ละ service
- image คือชื่อของ Docker Image ที่จะใช้
- ports คือการกำหนด port โดยกำหนดแบบ <external_of_container>:<internal_of_container>
- external_links คือการกำหนด ว่า app จะทำงานร่วมกันกับ container ชื่ออะไร ถ้า container นั้นอยู่ใน Compose เดียวกัน คำสั่งนี้จะถูก ignore ไป

ในกรณีนี้ เราจะมี Service อยู่ 2 ตัว คือ parking-lot และ mongo ซึ่งจะเป็น server ให้กับ MongoDB ทำหน้าที่เป็นฐานข้อมูลของ app

Start Container

มาเช็ค Container ที่มีอยู่ในเครื่องก่อนทำการสร้าง ด้วย docker-compose

docker ps -a

ดูว่าไม่มี Container

CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

จากนั้น เราทำการสร้าง Container โดยใช้คำสั่งนี้ที่ directory path ของโปรเจ็กต์

docker-compose up

เราจะได้ Result ออกมาเป็นแบบนี้

[+] Running 2/2
 ⠿ Container mongo        Created                                                                                     0.1s
 ⠿ Container parking-lot  Created                                                                                     0.1s
Attaching to mongo, parking-lot
parking-lot  |
parking-lot  | > parking-lot@0.0.1 dev /app
parking-lot  | > nodemon ./bin/www
parking-lot  |
parking-lot  | [nodemon] 2.0.21
parking-lot  | [nodemon] to restart at any time, enter `rs`
parking-lot  | [nodemon] watching path(s): *.*
parking-lot  | [nodemon] watching extensions: js,mjs,json
parking-lot  | [nodemon] starting `node ./bin/www`
mongo        | {"t":{"$date":"2023-04-09T10:07:55.820+00:00"},"s":"I",  "c":"CONTROL",  "id":23285,   "ctx":"-","msg":"Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'"}
mongo        | {"t":{"$date":"2023-04-09T10:07:55.821+00:00"},"s":"I",  "c":"NETWORK",  "id":4915701, "ctx":"-","msg":"Initialized wire specification","attr":{"spec":{"incomingExternalClient":{"minWireVersion":0,"maxWireVersion":17},"incomingInternalClient":{"minWireVersion":0,"maxWireVersion":17},"outgoing":{"minWireVersion":6,"maxWireVersion":17},"isInternalClient":true}}}

เราจะเห็นว่า Container ของโปรเจ็กต์และของ mongo image ทำงานได้แล้วเรียบร้อย

ลองเช็ค Container อีกรอบ

CONTAINER ID   IMAGE                     COMMAND                  CREATED          STATUS          PORTS                      NAMES
be6b3a88e153   parking-lot-backend-app   "docker-entrypoint.s…"   20 seconds ago   Up 19 seconds   0.0.0.0:80->3000/tcp       parking-lot
244faa10158d   mongo                     "docker-entrypoint.s…"   20 seconds ago   Up 19 seconds   0.0.0.0:27017->27017/tcp   mongo

เราจะเห็นว่า ชื่อ Container ของโปรเจ็กต์จะมีชื่อตามที่เราตั้งใน docker-compose ไฟล์ ส่วน Image จะเหมือนกับชื่อ Directory

หลังจากนี้ เราสามารถรันโปรเจ็กต์ได้แล้ว และข้อมูลที่สร้างขึ้นมาก็สามารถเก็บไว้ที่ Container ของ mongo

การ Stop Container และ Start Container อีกครั้ง

เราสามารถหยุดการทำงานของ Container ทั้งสองได้โดยการกด control + c ที่หน้า Command Line ที่เรา Start docker-compose ไว้ก่อนหน้าได้

เมื่อกลับมาเช็ค ด้วย docker ps จะเห็นว่าไม่มี Container ที่ทำงานแล้ว

CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

ซึ่ง Container ได้ถูกหยุดการทำงานไว้เท่านั้น แต่เราสามารถ Start Container ขึ้นมาได้อีกครั้ง ด้วยคำสั่ง

docker container start parking-lot mongo

จะเห็นชื่อ Container แสดงขึ้นมา ถือว่ากลับมาทำงานอีกครั้งเรียบร้อย

parking-lot
mongo

หรือว่าจะสั่งการรัน Container ด้วยวิธี docker-compose up ที่ Directory Path ก็ได้เช่นเดียวกัน

สรุป

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

อ้างอิง

Compose file versions and upgrading

Compose file reference

Docker Documentation

ช่วงขายของ

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

เกริ่นก่อนว่า บทความนี้จะเป็นบทความสั้นๆ เพื่อบันทึกการแก้ไขปัญหาในกรณี โดยก่อนหน้านี้ ผมได้มีประสบการณ์เกี่ยวกับการใช้งาน Asynchronous Function จำพวก Promise() ภายใน useEffect ซึ่งเป็น React.js Hook เพื่อเรียกข้อมูลจาก APIs มาเก็บไว้ใน State

ยกตัวอย่างจากโค้ดข้างล่างนี้ เป็นการสร้างฟังก์ชั่นขึ้นมาหนึ่งอัน การทำงานคือ เรียกใช้ฟังก์ชั่น fetch() ซึ่งเป็นหนึ่งใน Native Javascript Promise Function เพื่อเรียกข้อมูลจาก APIs ผ่าน HTTP Request ทั่วๆไป และคาย Response ออกมาเป็น Json Object

const [data, setData] = useState()
const getDataFromAPI = async () => {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    await fetch(`${process.env.REACT_APP_CUSTOM_API}`, {
      method: 'GET',
      headers: myHeaders,
    })
      .then(response => response.json())
      .then(response => setData(response))
      .catch((error) => {
        console.error('Error:', error);
      })
  }

จากนั้น เราต้องการเรียกใช้ฟังก์ชั่นดังกล่าว เพื่อเก็บข้อมูลเอาไว้ที่ State เราก็จะให้ฟังก์ชั่นมันทำงานเมื่อมีการ Render โดย React Hook Function คือ useEffect()

แต่ fetch เป็นการทำงานแบบ asynchronous จึงต้องการใช้ async await มาช่วยเพื่อเรียกข้อมูลผ่านreturn ของ callback function ดังนั้น การใช้งานบน useEffect() จึงน่าจะเป็นประมาณนี้

React.useEffect(async() => {
	await getDataFromAPI();
}, []);

แต่เมื่อลอง Render ดูแล้ว พบว่า การทำงาน เกิด Error ขึ้นบน console แบบนี้

TypeError: func.apply is not a function

เมื่อลองหาวิธีแก้ปัญหาดู จึงค้นพบว่า useEffect() จะทำงานได้ตามปกติ กับฟังก์ชั่นที่ไม่ใช่ Asynchronous ดังนั้นมันจึงมองว่า getDataFromAPI() ไม่ใช่ฟังก์ชั่น แนวทางการแก้ปัญหาคือ ต้องให้มันทำงานภายในฟังก์ชั่นอื่นก่อน โดยใช้ IIFE

IIFE ย่อมาจาก Immediately Invoked Function Expression เป็นฟังก์ชั่นหนึ่งที่มีคุณสมบัติในการรันทันทีที่ถูกสร้างขึ้นมา รูปแบบการสร้างเป็นแบบนี้

(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();

ดังนั้น เราจึงเปลี่ยน useEffect() ให้เป็นแบบนี้แทน

React.useEffect(() => {
	(async () => {
		await getDataFromAPI();
	})()
}, []);

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

อ้างอิง
https://stackoverflow.com/questions/63570597/typeerror-func-apply-is-not-a-function
https://developer.mozilla.org/en-US/docs/Glossary/IIFE
https://rapidapi.com/guides/fetch-api-async-await

ช่วงขายของ

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

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

เลยขอเสนอหนึ่งในวิธีที่เปลี่ยนเวอร์ชั่นของ Node โดยไม่ต้องลงกลับไปกลับมาให้วุ่นวาย หนึ่งในนั้น คือการใช้ package ที่ชื่อว่า n (ใช้แล้วครับ n ตัวเดียวห้วนๆนี่แหละ) ที่จริงเค้ามีชื่อเต็มคือ n – Interactively Manage Your Node.js Versions แต่เราจะเรียกมันว่า n นี่แหละ ง่ายดี

n

Interactively Manage All Your Node Versions. Latest version: 9.0.1, last published: 4 months ago. Start using n in your project by running `npm i n`. There are 23 other projects in the npm registry using n.

npm

การใช้งาน ก็ติดตั้งแบบ global ได้เลย

npm install -g n

ถ้าใช้ MacOS อยู่ ติดตั้งผ่าน brew ก็สะดวกดีเหมือนกัน

brew install n

การทำงานของ n ให้คิดว่ามันเป็นตัวเก็บลิสต์ของ Node หลายๆเวอร์ชั่นเอาไว้ เพราะฉะนั้น ตอนติดตั้ง n ครั้งแรก ตัวมันก็ยังไม่มีการบันทึกอะไรเอาไว้ เหมือนเป็นลิสต์เปล่าๆ

ติดตั้ง Node.js version

วิธีเพิ่มลิสต์ของ Node version ใน n ก็พิมพ์แค่ n แล้วตามด้วยเลขเวอร์ชั่น แบบนี้
n <NODE_VERSION>
เช่น

n 16.18.1
n 18.12.1
n 19.2.0

หรือว่า ติด Error: sudo required (or change ownership, or define N_PREFIX) ก็ใส่ sudo ข้างหน้า แล้วกรอก password

sudo n 16.18.1
Password:

เช็คลิสต์ Node version ที่มีบน n โดยเวอร์ชั่นที่เราใช้อยู่ ณ ปัจจุบันจะมี o แสดงอยู่ข้างหน้า

$ n

  node/16.18.1
  node/18.12.1
ο node/19.2.0

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit

สมมติว่า ณ ปัจจุบัน เครื่องเราใช้เวอร์ชั่น 19.2.0 แล้วอยากเปลี่ยนไปใช้อันอื่น ก็เปลี่ยนเลื่อนปุ่มลูกศรขึ้น-ลง ให้ตัว o มันเลื่อนไปอยู่หน้าเลขเวอร์ชั่นที่เราต้องการ จากนั้นกด Enter เพื่อให้เครื่องเปลี่ยนเป็นเวอร์ชั่นใหม่ แค่นี้เอง เรียบร้อยละ

หลังจากนั้น ลองเช็คเวอร์ชั่นดู ก็จะพบว่า Node ได้เปลี่ยนเป็นอันที่เราเลือกเรียบร้อยแล้ว

node -v
v18.12.1

ลบเวอร์ชั่นออก

ใช้คำสั่ง n rm <NODE_VERSION> ก็ลบออกได้เลยทันที
หรือจะลบทีละหลายๆอันก็ได้ แบบนี้

n rm 16.18.1 v19.2.0

(เราสามารถระบุเลขเวอร์ชั่น โดยใส่ v นำหน้าหรือไม่ใส่ก็ได้)

หรือว่าจะลบทุกๆอันออกก็ได้ ยกเว้นอันที่เราใช้งานอยู่

n prune

สรุป

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

การใช้งาน n เพิ่มเติม สามารถเข้าไปดูเพิ่มได้ที่หน้าเว็บได้เลย

ช่วงขายของ

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

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

ผมเป็นใคร

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

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

เริ่มต้นมาทางนี้ได้ยังไง

มันเป็นความบังเอิญที่ตอนทำงานในโรงงาน ได้มีโอกาสได้ทำเกี่ยวกับ Pivot Table ของ Excel และเริ่มเพิ่มระดับความยากของตัวเองด้วยการทำ macro ที่ต้องมีการเรียนรู้ภาษา VBA เพื่อเอามาใช้สร้าง logic บางอย่างกับขุดข้อมูลที่มี หรือจะเป็นการได้คลุกคลีกับ AS/400 ที่ใช้ในการเก็บข้อมูล Inventory นั้น ก็ได้จุดประกายความอยากทำงานในสายงานไอทีของผมมาก ดังนั้นผมจึงตั้งมั่นกับตัวเองว่า เราจะเบนเข็มชีวิตไปทำงานนี้ให้ได้!!!

การเริ่มต้นเรียนรู้วิชาต่างๆในด้านนี้ก็เริ่มต้นขึ้นทันที ผมหมกมุ่นอยู่กับการอ่านบทความของเดฟที่เก่งๆหรือ ดูยูทูปของเดฟทั้งไทยและต่างประเทศเยอะมากๆ และในคอมส่วนตัวก็เริ่มมีโปรแกรม editor เช่น Vscode, Sublime อะไรพวกนี้มากขึ้น แต่เอาจริงๆใช้อยู่ตัวเดียว ตัวอื่นๆที่ลองโหลดมาใช้แล้วไม่ถูกใจก็ลบทิ้ง ส่วนใน Internet browser ก็เริ่มมี history ของ Stackoverflow, Medium, Udemy หรือ เว็บ tutorial เก็บเป็นปึกๆ ผมมาเรียนรู้ว่า การที่จะเชี่ยวชาญในงานสายนี้ คือการฝึกทำอยู่บ่อยๆครั้ง เจอบั๊กหลากหลายรูปแบบ จะทำให้มุมมองกว้างไกลมากขึ้น ดังนั้นผมจึงต้องหาทางฝึกฝนตัวเอง และในชีวิตจริงเราไม่มีห้องกาลเวลาเพื่อเอาไว้ฝึกตนเหมือนในการ์ตูน ผมเลยตัดสินใจตื่นเช้ากว่าปกติ จากที่ตื่นหกโมง แล้วมาขึ้นรถโรงงานเวลาหกโมงครึ่งนั้น ผมเปลี่ยนมาตื่นตีสี่เพื่อฝึกเขียนโค้ด ทำให้ในแต่ละวัน ผมมีเวลาฝึกตัวเองวันละ 3 ชม. โดยทุกวันที่ผมเขียนโค้ดอะไรไป ผมก็จะ push โค้ดเก็บไว้บน Github เผื่อเอาไว้ใช้ในอนาคต

การฝึกเขียนโค้ดของผมนั้น เริ่มต้นจากการฝึกเขียนเกี่ยวกับ logic ก่อนเป็นอันดับแรก ภาษาแรกที่ผมใช้ฝึกนั้น คือ Python เพราะง่าย มี Learning Curve ต่ำ ทำให้กำแพงภาษาไม่เป็นอุปสรรคในการฝึก logic มากนัก จากนั้น ก็เริ่มฝึกภาษาอื่น เมื่อมองเห็นว่า เราต้องการจะสร้างอะไรขึ้นมา แล้วมันจำเป็นต้องใช้ภาษาหรือเครื่องมืออะไรในการสร้าง ยกตัวอย่างเช่น

• ใช้ HTML CSS Javascript ในการสร้างหน้าเว็บ ถ้าเว็บปกติทั่วไป เท่านี้ก็เพียงพอ
• ถ้าเว็บที่เราอยากให้มันเป็นอะไรเป็นมากกว่า plain HTML ก็จะเริ่มใช้ ReactJS ในการทำหน้าเว็บ เช่น การทำ Router, SPA (Single Page Application), Reusable Component ถ้าต้องการให้บาง element ของเว็บ มันถูกใช้ในที่หน้าอื่นๆด้วย โดยไม่ต้องการสร้างใหม่
• ส่วนหลังบ้าน การจัดการข้อมูล เริ่มศึกษา NodeJS และ Library ของมัน เช่น Express, Mongoose เพื่อจัดการกับฐานข้อมูลของ MongoDB
• นอกเหนือจากเรื่องเว็บ ยังมีการศึกษาเกี่ยวกับเทคโนโลยีอื่นๆอีก เช่น mobile app ฝึกใช้งาน Flutter, React Native คือ มาจนถึงตอนนี้ก็ยังไม่ได้เอามาใช้งานจริงๆซักที แต่ก็เรียนเพราะความสนใจของตัวเองล้วนๆเลย
• ฝึกใช้งาน version control ให้คล่องๆ พวก Git นี่ เป็นเรื่องพื้นฐานของเดฟเลย บางทีมมีการใช้ Docker ด้วย แต่ก็นั่นแหละ เอาแค่ Git ก่อนละกัน ถ้ามีโอกาสใช้งานค่อยฝึก

หลังจากฝึกตนมาซักพักแล้ว สเตปต่อไปคือการทำงานจริง และจากนี้คือการเปลี่ยนเส้นทางเดินชีวิตของตัวเองจริงๆจังๆแล้ว

ก่อนเริ่มทำงานเดฟจริงจัง

แต่ก่อนจะได้ทำงานเดฟจริงๆนั้น สิ่งที่ยากยิ่งกว่าการทำงาน คือการหางานครับ เพราะว่า ตามบริษัท software house หรือ บริษัทผู้ให้บริการรับทำโปรแกรมต่างๆในไทยนั้น มักจะให้ความสนใจกับผู้สมัครงานที่มีประสบการณ์การทำงานสายตรงมามากกว่า คนที่เปลี่ยนสายงาน นี่เป็นเรื่องจริงที่ผมได้เจอครับ และเป็นสิ่งที่บั่นทอนกำลังใจของผมมาก ถึงแม้ว่า ผู้สัมภาษณ์จะไม่สนใจวุฒิ แต่เค้าสนใจความสามารถ และอายุ (ส่วนใหญ่ที่เห็นคือ ไม่เกิน 35 ปีครับ แต่ ณ ตอนนั้นผม 28 ปี แปลว่าเหลือเวลาอีกไม่มากแล้ว ตอนนั้นที่นึกได้ ก็ทำให้เข้าใจสัจธรรมความหมายของคำว่า "เวลามีมูลค่า" ขึ้นมาทันที)

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

เข้าสนามสัมภาษณ์งาน

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

การสัมภาษณ์ที่แรกเป็นไปอย่างราบรื่นครับ ผู้สัมภาษณ์เป็นคนไทย อายุพอๆกันกับผม คุยง่าย ถามไม่ยาก เค้าอึ้งที่ผมเขียนโค้ดเองลง Github เยอะจนเค้าขอ follow account ผมเอาไว้เลยทีเดียว เมื่อจบการสนทนา ออกมาจากห้อง ผมค่อนข้างมีความมั่นใจว่าอาจจะได้งานที่นี่มาก แต่มีเวลาฟินกับความมั่นใจแค่แป๊บเดียวเท่านั้น ก็ต้องรีบเตรียมตัวสัมภาษณ์งานที่ที่สองต่อทันที ผมต้องรีบหาที่เงียบๆเพื่อเตรียมการ video call ความซวยก็บังเกิดขึ้นอีก เมื่อโทรศัพท์มือถือที่ต้องใช้วิดีโอดันแบตจะหมด! เพราะแบตมันเสื่อม เลยลดฮวบๆไวมาก งานหยาบทันทีครับ ผมต้องวิ่งไปหาตู้ขายมือถือแถวๆนั้น เพื่อซื้อสายชาร์จแบต เอาราคาถูกๆไวก่อน เพราะตังต์ก็ไม่ค่อยมีเหมือนกัน สรุปว่าวันนั้นทั้งวันเต็มไปด้วยการสัมภาษณ์ครับ

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

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

ทำงานไปแล้วเป็นยังไง

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

หลังจากนี้ล่ะ

เมื่อทำงานไปสักพัก เราก็มักจะหาความท้าทายใหม่ๆอยู่เสมอ ของผมเองก็เช่นกัน ผมได้ตั้งเป้าหมายไว้ว่า จะสอบ certificate ให้ได้อย่างน้อยๆหนึ่งใบขึ้นไป โดยเป็น global cert ที่เป็นรู้จักกัน อย่างเช่น AWS, GCP เพื่อให้เรามี verified skill ไปทำงานในระดับที่สูงขึ้นไป และอาจจะเพิ่มเติมความรู้ด้านอื่นๆให้มากขึ้น ทั้งในด้าน hard skill และ soft skill ครับ

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

บทความนี้ เราจะกลับมาพูดถึงโลกของ Node อีกครั้ง หลังจากที่ไปงมอยู่กับ Flutter มาพักใหญ่ๆ (ซึ่งสนุกมาก และกำลังจะมี Flutter 2 ออกมาด้วย เห็นว่าคราวนี้รองรับ web แบบเต็มสตรีม) ในบทความนี้จะเป็นการจดบันทึกการสร้าง Rest API ใช้สำหรับ สร้าง, ดึง, แก้ไข และลบข้อมูล (Create, Read, Update, Delete : CRUD)
โดยเราได้มีโอกาสนั่งดูคลิปสอนการสร้าง CRUD และใช้กับ React ของ คุณปฏิภาณ เค้าสอนค่อนข้างดีเลย เคลียร์มาก ในคลิปมีสอนวิธีสร้าง Backend Application ขึ้นมาเป็น API เพื่อรอ Request การรับ-ส่งข้อมูลจาก Frontend คือ React นั่นเอง ดังนั้น ซึ่งการสร้าง API ขอสรุปเป็นขั้นตอนดังต่อไปนี้ ไปดูกัน

ติดตั้ง Node และ Libraries

เริ่มจากเราสร้าง folder ขึ้นมาก่อน เปิด Terminal ขึ้นมา direct ไปยัง folder แล้วสร้าง json file และ library ของ Node ขึ้นมาโดยใช้คำสั่ง

npm init

หรือถ้าอยากสร้างขึ้นมาแบบ set dafault เลยก็ใช้

npm init -y

รอจนโหลดเสร็จแล้ว ให้ติดตั้ง library 4 อันคือ body-parser, cors, express, mongoose

npm i body-parser cors express mongoose

จากนั้น ทำการติดตั้ง nodemon เพื่อให้รันไฟล์ได้แบบต่อเนื่องไม่หลุด ถึงแม้ระหว่างทางที่เราโค้ด จะเจอ error ใดๆ

npm i nodemon --save-dev

ที่ใส่ --save-dev เพิ่มเข้ามาเพื่อต้องการให้ติดตั้ง nodemon ให้อยู่ในโหมด development

เมื่อเสร็จแล้ว เข้าไปเช็คการติดตั้งได้ที่ package.json

เข้าไปในส่วน scripts ให้เพิ่ม server key แบบนี้

"server": "nodemon index"

เพื่อใช้เป็นคำสั่งสำหรับสั่งรันด้วย nodemon start file index ขึ้นมานั่นเอง เวลาสั่งรันเราจะใช้คำสั่งนี้

npm run server

Node จะไปเรียกใช้ scripts ตรงส่วน sever ที่เราได้เพิ่มเข้าไปให้มาทำงาน และจะสตาร์ทตามที่ได้อธิบายไปข้างบน

เขียน API

เมื่อทำการติดตั้งเสร็จแล้ว ต่อมาเราจะทำการเขียน API เพื่อให้ client ยิงคำขอ (request) มายัง server เพื่อส่งหรือรับข้อมูล รวมทั้งยังสามารถแก้ไขข้อมูลที่ส่งมาก่อนหน้า และลบข้อมูลเมื่อไม่ต้องการได้ ซึ่ง Node ก็อนุญาตให้เขียน API แบบ free style จะเขียนทุกๆ module ไว้หน้าเดียวกันหมดก็ได้ หรือเขียนแยกแล้วค่อยเอามาประกอบร่างกันก็ได้ ซึ่งตัวอย่างนี้จะขอใช้วิธีหลัง เพราะง่ายต่อการอ่านโค้ดในภายภาคหน้า ว่าแล้วก็มาเริ่มทำตามขั้นตอนดังต่อไปนี้

สร้าง database

ต่อมาจะเป็นการสร้าง database เพื่อใช้เป็นที่เก็บข้อมูลทั้งหมดที่จะรับเข้าหรือส่งออกไปยัง client เราจะสร้างโดย สร้าง file ชื่อ db.js ภายในโฟลเดอร์ database

//db.js
module.exports = {
  db: "mongodb://localhost:27017/reactdb"
};

ในที่นี้ เราตั้งชื่อ database ชื่อว่า reactdb ซึ่งเราสามารถตั้งเป็นชื่ออะไรก็ได้

สร้าง models

ทำการตั้งโฟลเดอร์ ชื่อว่า models และสร้างไฟล์ภายใน เพื่อเป็น schema หรือโครสร้างการจัดข้อมูลในฐานข้อมูล ในที่นี้เราจะ import mongoose เข้ามาใช้งาน

//Stormtrooper.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

let StormtrooperSchema = new Schema(
  {
    name: {
      type: String,
    },
    email: {
      type: String,
    },
    rollno: {
      type: Number,
    },
  },
  { collection: "stormtrooper" }
);

module.exports = mongoose.model("stormtrooper", StormtrooperSchema);

จากตัวอย่าง เราสร้างตัวแปร StormtrooperSchema เอาไว้เก็บค่าโครงสร้างข้อมูลที่ออกแบบมา ได้แก่ name จะเก็บข้อมูลรูปแบบ String, email เก็บข้อมูลรูปแบบ String, และ rollno เก็บข้อมูลนรูปแบบ Number
ส่วนชื่อ collection เราจะใช้ชื่อว่า stormtrooper
จากนั้นให้ส่งออก (export) ฟังก์ชั่นmongoose.model() ซึ่งใส่ argument สองตัว คือ ชื่อ collection และตัวแปรที่เก็บค่า schema

สร้าง routes

เราจะทำการสร้าง route ขึ้นมาเพื่อเป็นช่องทางติดต่อกับ server ของ client โดยจะเริ่มจากการ import lib ที่จำเป็นเข้ามาก่อน และรวมถึง schema ที่เราสร้างไปก่อนหน้าด้วย

let mongoose = require("mongoose"),
  express = require("express"),
  router = express.Router();

// Stormtrooper Model
let StormtrooperSchema = require("../models/Stormtrooper");

สร้างฟังก์ชั่น post() โดยภายในมี function ที่สร้างมาจาก create() เพื่อเป็น middleware function ขึ้นมาจาก route (ในที่นี้เท่ากับ express.Router() มีศักดิ์เป็น mini object ของ app ที่นิยมใช้กันอีกที)

//Create Stormtrooper
router.route("/create-stormtrooper").post((req, res, next) => {
  StormtrooperSchema.create(req.body, (error, data) => {
    if (error) {
      return next(error);
    } else {
      console.log(data);
      res.json(data);
    }
  });
});

สร้าง api เพื่อส่งข้อมูลไปยังผู้ใช้งาน ผ่าน get() ภายในทำการสร้าง middleware function เพื่อส่งข้อมูลกลับไป โดยใช้ find()

//Read Stormtrooper
router.route("/").get((req, res) => {
  StormtrooperSchema.find((error, data) => {
    if (error) {
      return next(error);
    } else {
      res.json(data);
    }
  });
});

หรือจะหาค่าเป็นทีละ id ก็ทำได้ โดยใช้ findById()

//Get Single Stormtrooper
router.route("/edit-stormtrooper/:id").get((req, res) => {
  StormtrooperSchema.findById(req.params.id, (error, data) => {
    if (error) {
      return next(error);
    } else {
      res.json(data);
    }
  });
});

เมื่อมี create กับ read api แล้ว ก็ต้องมี api เพื่อใช้ usdate ข้อมูลใน db ด้วย การอัพเดทนั้น เราจะอัพเดททีละอัน ซึ่งใช้ function findByIdAndUpdate() สร้าง function ใน put()

//Update Stormtrooper
router.route("/update-stormtrooper/:id").put((req, res, next) => {
  StormtrooperSchema.findByIdAndUpdate(
    req.params.id,
    {
      $set: req.body,
    },
    (error, data) => {
      if (error) {
        console.log(error);
        return next(error);
      } else {
        res.json(data);
        console.log("Stormtrooper successfully updated");
      }
    }
  );
});

สุดท้ายก็สร้าง api ของการลบข้อมูลใน db ด้วย delete() เราจะลบข้อมูลทีละอัน เพราะฉะนั้นจะใช้ findByIdAndRemove() เป็น function ข้างใน middleware และสร้างเงื่อนไขเพิ่ม ถ้าการส่ง request สำเร็จ ให้ส่ง status(200) กลับมาด้วย แล้วต่อด้วย msg

//Delete Stormtrooper
router.route("/delete-stormtrooper/:id").delete((req, res, next) => {
  StormtrooperSchema.findByIdAndRemove(req.params.id, (error, data) => {
    if (error) {
      return next(error);
    } else {
      res.status(200).json({ msg: data });
    }
  });
});

ปิดท้ายที่ export

module.exports = router;

สร้าง Server

มาถึงขั้นตอนที่เราจะต้องใช้ module ต่างๆที่ได้สร้างขึ้นไปมาประกอบร่างกันเป็น server แล้ว ขึ้นตอนแรกให้ import ของที่ต้องใช้มาทั้งหมด

let express = require("express"),
  mongoose = require("mongoose"),
  cors = require("cors"),
  bodyParser = require("body-parser"),
  dbConfig = require("./database/db");

//Express Route
const stormtrooperRoute = require("./routes/stormtrooper.route");

ทำการ Config mongoose ตามตัวอย่างด้านล่าง จากนั้น ใช้ mongoose.connect() เพื่อติดต่อ server เข้ากับ db

//Connecting MongoDB Database
mongoose.Promise = global.Promise;
mongoose.connect(dbConfig.db, { 
    useNewUrlParser: true, 
    useUnifiedTopology: true 
}).then(
  () => {
    console.log("database successfully connected");
  },
  (error) => {
    console.log("Could not connect to database:" + error);
  }
);

มีการใช้ mongoose.Promise = global.Promise เพื่อให้สามารถเซต promise ของ mongoose library ขึ้นมาได้ ซึ่งใน Mongoose 4 จะใช้เป็น mpromise แต่ยกเลิกไปใน Mongoose 5 เลย Promise แทน

ต่อมา สร้าง config โดยใช้ app.use() ตามโค้ดด้านล่าง

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use("/stormtrooper", stormtrooperRoute);

และกำหนด port เพื่อใช้ติดต่อรับ-ส่งข้อมูล โดย client จะต้องยิง request เข้ามาทาง port นี้ จากนั้น สร้าง listen ขึ้นมาเพื่อรอการสั่งทำงาน

const port = process.env.PORT || 5000;
const server = app.listen(port, () => {
  console.log(`Server is running in port ${port}`);
});

ดักจับ error ที่จะเกิดขึ้นจาก server

app.use((req, res, next) => {
  next(createError(404));
});

ถ้า server ไม่ตอบสนองหรือไม่ทำงาน ให้ส่งข้อความกลับมาทาง console ด้วยนะ

app.use((err, req, res, next) => {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Send request and receive response with Postman

เมื่อสร้าง API เสร็จแล้ว ให้ทดลองยิง request ผ่าน entry point ที่เราสร้างเอาไว้ เช่น

POST

ส่ง request ไปที่ /stormtrooper/create-stormtrooper และส่ง key value เป็น body ไปด้วย ตามตัวอย่าง

จากนั้น เมื่อกดส่ง เราจะได้ข้อมูลที่ส่งไปใน body จะถูกบันทึกลงในฐานข้อมูล

GET

ส่ง request ไปที่ /stormtrooper/ จะได้ data ออกมาจากฐานข้อมูลทั้งหมด

หรือเราสามารถส่ง request ไปเพื่อขอ data ทีละ <id> ได้ จากการส่ง request ไปที่ /stormtrooper/edit-stormtrooper/<id>

UPDATE

ส่ง request ไปที่ /stormtrooper/update-stormtrooper/<id> จากนั้น ใน body ใส่ค่า key value เป็นค่าใหม่ที่เราต้องการ

DELETE

ทำได้โดย ส่ง request ไปที่ /stormtrooper/delete-stormtrooper/<id> จากนั้น backend จะส่ง response มาเป็น json object message ตาม <id> ที่โดนลบไป

Summary

จากกระบวนวิธีการสร้าง api เพื่อให้ client ได้เชื่อมต่อกับฐานข้อมูลเพื่อ ส่ง รับ แก้ไข และลบข้อมูลนั้น เป็นพื้นฐานที่ใช้ต่อยอดไปยังการสร้างแอพลิเคชั่นที่ซับซ้อนต่อไปในอนาคตได้ ซึ่งบทความนี้อาจจะไม่ได้แสดงวิธีการเขียนอย่างละเอียด เพียงแค่เป็นแนวทางและเป็นบันทึกความทรงจำไว้เท่านั้น

References

Building a Simple CRUD app with Node, Express, and MongoDB
React CRUD: How To Build React 16 CRUD Example
MERN STACK Failed to load resource: net::ERR_CONNECTION_REFUSED
Building a Restful CRUD API with Node.js, Express and MongoDB

Cover Image

Building a Simple CRUD app with Node, Express, and MongoDB

ในการพัฒนาแอพพลิเคชั่นนั้น เมื่อเหล่านักพัฒนาได้สร้างแอพใดๆขึ้นมาซักตัวเสร็จแล้ว ก็อยากจะลองเอามาลอง deploy ใน server จริงๆดูบ้าง แต่ไอครั้นจะให้เสียค่าใช้จ่าย เพื่อทดลองงานนั้นมันก็กระไรอยู่ ดังนั้นจึงต้องใช้ paltform ฟรีจึงเป็นทางเลือกที่ดูดีที่สุด
ในบริการอันหลากหลายของ Google นั้น มีการให้บริการ hosting ฟรี ของ Firebase ซึ่งเป็นทางเลือกที่น่าสนใจมาก ดังนั้นบทความนี้จะเป็นการไกด์วิธีนำโค้ดที่เราสร้างขึ้นเซิฟเวอร์ ซึ่งจะมีวิธีการดังต่อไปนี้

ก่อนหน้านั้น เราจะต้องสร้าง project ที่ Firebase ก่อน เมื่อเสร็จแล้ว ให้เราเปิด Terminal ขึ้นมา

ให้ Terminal cd ไปหา path ของ source code ของ project ที่เรากำหนด ต่อมา ทำการติดตั้ง lib ของ Firebase เสียก่อน ในที่นี่คือ firebase-tools ติดตั้งโดยใช้ npm

npm install -g firebase-tools

จากนั้น เมื่อโหลด lib เสร็จแล้ว ให้ login Firebase กับเครื่องของเรา โดยใช้คำสั่ง

firebase login

จะมีหน้าต่างเบราเซอร์ขึ้นมาให้เราใส่ email และ password บัญชี Firebase

ต่อมา ให้เชื่อมต่อโปรเจ็คต์ไฟล์บนเครื่องกับโปรเจ็คต์บน Firebase ใช้คำสั่ง

firebase init

จะมี # เรียงกันเป็นคำว่า Firebase ขึ้นมา

จะมีคำถาม Are you ready to proceed? ให้ตอบ Y หรือ Yes ไป

ถัดไปจะมีคำถามเกี่ยวกับการตั้งค่าการใช้งาน Firebase โดยจะมีตัวเลือกมาให้เราเลือก วิธีการเลือกคือ ให้กดลูกศรเลื่อนขึ้นหรือลงไปยังตัวเลือก แล้วกดปุ่ม space bar เพื่อเลือก เสร็จแล้วกดปุ่ม enter

คำถามต่อมา จะให้เราเลือกโปรเจ็คต์ที่ใช้งาน ถ้าเราสร้างแล้วก็กดเลือกที่ Use an existing project

จากนั้น จะให้เราเลือกชื่อโปรเจ็คต์

ส่วนคำถามที่เหลือ จะเป็นการตั้งค่า Hosting ให้เราเลือกตอบเพื่อตั้งค่าตามที่ต้องการ หรือกด enter รัวๆ ถ้าต้องการให้ตั้งค่า default เมื่อเสร็จแล้วก็รอให้ระบบทำการสร้าง Hosting ขึ้นมา

หมายเหตุ : สำหรับผู้ใช้ React ตรงคำถาม "What do you want to use as your public directory?" ให้พิมพ์คำว่า build ลงไป เพราะเราต้องการใช้ไฟล์ static จากโฟลเดอร์ build แทน public (รัน npm run build ก่อนขั้นตอนนี้)

จบจากขั้นตอนนี้คือ Hosting ได้ถูกสร้างขึ้นมาแล้ว ให้เราใช้คำสั่ง deploy แอพของเราไปยัง hosting

firebase deploy

ระบบจะใช้เวลาสักครู่เพื่อ deploy hosting จนมีข้อความบอกว่า Deploy complete! เราจะได้ Hosting URL จากนั้นเมื่อลองเข้า url ใน browser จะได้

อันนี้คือยังไม่มีหน้าตาของแอพที่เราสร้าง

ต่อจากนี้คือการเขียนโค้ดล้วนๆ เพื่อสร้างแอพที่จะไปรันบน hosting เราขอยกตัวอย่าง การสร้างโปรเจ็คต์ PWA (Progressive Web App) แบบง่ายๆขึ้นมา

เสร็จแล้วก็กด Save แล้วใส่คำสั่ง firebase deploy อีกครั้ง เพื่อ re deploy hosting

เสร็จแล้ว กับวิธีการ deploy hosting เพื่อใช้งาน firebase เป็น free hosting เป็นประโยชน์มากสำหรับผู้ที่สนใจจะลองเทสต์รันโปรแกรมบน production เพื่อการศึกษา หรือใช้เป็น prototype ซึ่งถ้าหากต้องการจะใช้เป็น web app รองรับโหลดเยอะๆ ก็สามารถ billing เพื่อใช้ทรัพยากรที่มากขึ้นได้ แล้วบทความนี้ก็จบเพียงเท่านี้ สวัสดีครับ

บทความนี้เราจะอธิบายขั้นตอนการสร้างส่วนหน้าแอพพลิเคชั่นของร้านค้าออนไลน์ ซึ่งมีการกำหนดหน้าตาออกมาเรียบร้อยแล้ว เหตุผลก็เพราะว่าจะต้องการบันทึกความรู้ที่ใช้ในการสร้างแอพเบื้องต้น ฝึกการออกแบบ widget ต่างๆ เช่น Row, Column, Container, Image, Icon และอีกหลายๆ widget ประกอบกับ การฝึกมองแอพให้เป็น widget ย่อยๆ และเข้าใจถึงการประกอบกันให้เป็นแอพของ widget ก็เป็นทักษะที่นักพัฒนา Flutter ต้องฝึกบ่อยๆ

ลักษณะแอพพลิเคชันที่กำหนด เป็นแบบนี้

Shopping Online App Wireframe

มีการกำหนด widget ของ UI แบ่งออกเป็นส่วนต่างๆ มีดังนี้

เมื่อมีแบบแล้ว ก็เริ่มต้นสร้างกันเลย

จาก prototype ด้านบน หน้าแรกของแอพ จะมี widget tree diagram เป็นแบบนี้

โดยจะมี widget ที่ห่อหุ้มหน้าแอพทั้งหมดเอาไว้อีกทีนึง ได้แก่

MaterialApp = widget ที่ห่อหุ้ม widget อื่นๆอยู่ กำหนดภาพรวมของแอพพลิเคชันเอาไว้ เช่น ชื่อแอพ หรือ ส่วน body แอพ

ในตัวอย่าง เราจะสร้างคลาส MyApp ที่เป็น StatelessWidget ให้คืนค่าออกมาเป็น MaterialApp เพื่อเอาไปใช้ห่อ่หุ้ม widget ต่างๆที่จะสร้างต่อจากนี้ให้แสดงผลออกมาเวลารันโค้ด

Scaffold = widget จัดการ layout อัติโนมัติของแอพพลิเคชั่น

เริ่มต้นเขียน widget ที่ห่อหุ้มหน้าแอพ แบบนี้

Contents

Page 1 : MyShoppingPage
--Column 1 / Row 1 : สร้างแถบเมนู
--Column 1 / Row 2 : ชื่อสินค้า (shoesName)
--Column 1 / Row 3 : รูปแสดงสินค้า (shoesImage)
--Column 1 / Row 4 : Rating สินค้า
--Column 1 / Row 5 : ราคาสินค้า (price)
--Column 1 / Row 6 : ปุ่มเพิ่มสินค้าในตะกร้า (addButton)
--รวม widget ของหน้าแรก
--ช่องว่างระหว่าง wiget : gapBetweenWidget
Page : MySummaryPage
--สร้างคลาสสำหรับสร้างปุ่มวงกลม : CircleButton
--Column 2 / Row 1 : สร้างแถบเมนู
--Column 2 / Row 2 : สร้างหัวข้อหน้าสรุป : summaryTitle
--สร้างคลาสรูปภาพรองเท้า
--Column 2 / Row 3 : รายละเอียดสินค้าที่เลือก
--Column 2 / Row 4 : สร้างรายละเอียดแจ้งยอดชำระ
--สร้างคลาสปุ่มสี่เหลี่ยมสำหรับ Add to cart และ Checkout
--Column 2 / Row 5 : ปุ่มเช็คเอาท์
--ประกอบร่าง Page 2
การแก้ไขความกว้างแถบเมนู
การเชื่อมกันระหว่าง MyShoppingPage กับ MySummaryPage
--เพิ่ม Navigator.push()
--Navigator.pop()

สร้างหน้าแรก : MyShoppingPage

มาพูดถึงส่วนของหน้าแรกกันบ้าง

การกำหนด widget ของหน้าแรกนั้น เราจะสร้าง StatelessWidget class ขึ้นมา ชื่อว่า MyShoppingPage ละกัน โดยให้มันพ่น Material ออกมา จากนั้นให้ MaterialApp ที่ถูกคืนค่าออกมาจาก MyApp เรียกใช้งาน MyShoppingPage ให้เป็นส่วน body ของมัน

เริ่มจาก เค้าโครง widget ของหน้าแอพแบบนี้

ตั้งชื่อ widget หน้าแรกว่า MyShoppingPage

Column 1 / Row 1 : สร้างแถบเมนู

ต่อมาเราก็ทำการสร้าง widget อื่นๆ ที่จะใช้รวมเป็นหน้าแอพออกมา

เริ่มจาก ปุ่มเมนู

สร้างปุ่มเมนู (menuButton)

var menuButton = Center(
  child: Ink(
    decoration: const ShapeDecoration(
      color: Colors.grey,
      shape: CircleBorder(),
    ),
    child: IconButton(
      icon: Icon(Icons.menu_sharp),
      color: Colors.black,
      onPressed: () {},
    ),
  ),
);

ปุ่มตะกร้าสินค้า (cartButton)

ปุ่มตะกร้าสินค้า เป็นปุ่มที่กดเพื่อเข้าไปดูสินค้าที่เราเลือกก่อนจะชำระเงิน

var cartButton = Center(
  child: Ink(
    decoration: const ShapeDecoration(
      color: Colors.grey,
      shape: CircleBorder(),
    ),
    child: IconButton(
      icon: Icon(IconData(59870, fontFamily: 'MaterialIcons')),
      color: Colors.black,
      onPressed: () {},
    ),
  ),
);

ตรง onPressed เราจะสร้างฟังก์ชั่น โดยปุ่มทั้งสองจะอยู่บนแถวเดียวกัน ดังนั้นก็สร้าง Row() มาห่อหุ่มเอาไว้

var menuBar = Row(
  children: [
    menuButton,
    cartButton,
  ],
);

ลอง debug ดูรูปร่าง widget ที่เราสร้างขึ้นมาว่าเป็นยังไงบ้าง

โอเค ได้ปุ่มเมนู และปุ่มตะกร้าสินค้ามาแล้ว ต่อมา ทำการจัดตำแหน่งให้มันอยู่มุมซ้าย และมุมขวาของหน้าจอ ขั้นตอนนี้เราจะใช้ Expanded() เข้ามาจัดการ

var menuBar = Row(
  children: [
    Expanded(child:Row(children: [menuButton], textDirection: TextDirection.ltr)),
    Expanded(child:Row(children: [cartButton], textDirection: TextDirection.rtl)),
  ],
);

ให้ Expanded() หุ้ม Row() เอาไว้ แล้วข้างในนั้นจะมี widget ปุ่มที่เราสร้างขึ้นมาอีกทีนึง จากนั้นกำหนดตำแหน่งให้แต่ละปุ่มด้วย textDirection properties
เมื่อเสร็จขั้นตอนนี้ เราจะได้แถวของปุ่มเรียบร้อยแล้ว

Column 1 / Row 2 : ชื่อสินค้า (shoesName)

ต่อมา เป็นข้อความที่เป็นชื่อสินค้า

var shoesName = Text(
  "Space Shoes",
  style: TextStyle(fontFamily: 'Sora', fontSize: 36),
);

Column 1 / Row 3 : รูปแสดงสินค้า (shoesImage)

ต่อมาเป็นรูปแสดงสินค้า

var shoesImage = Container(
  decoration: BoxDecoration(
      color: const Color.fromARGB(255, 232, 237, 243),
      image: const DecorationImage(
        image: NetworkImage(
            'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?cs=srgb&dl=pexels-melvin-buezo-2529148.jpg&fm=jpg'),
        fit: BoxFit.cover,
      ),
      border: Border.all(width: 1.0, color: Color.fromARGB(255, 232, 237, 243)),
      borderRadius: BorderRadius.circular(10)),
  width: 297,
  height: 288,
);

โครงสร้าง widget อันนี้ เราทำการสร้าง Container เพื่อห่อหุ้ม image เอาไว้ เพื่อกำหนดขอบเขตและความโค้งของขอบรูปได้ (จาก properties ที่ชื่อ borderRadius ที่อยู่ใน BoxDecoration) รวมถึง กำหนดขนาด (width และ height) ของรูปได้เช่นเดียวกัน

Column 1 / Row 4 : Rating สินค้า

ต่อมา โฟกัสกันต่อที่ส่วน Rating สินค้า ภายในจะมี widget ย่อยๆ คือ ไอค่อนรูปดาว และ ข้อความแสดงจำนวนการให้คะแนน เราก็สร้าง widget ขึ้นมาทีละอัน

เริ่มจาก ดวงดาวทั้งห้า

var starRow = Row(
  children: [
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0)),
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0)),
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0)),
    Icon(Icons.star, color: Color.fromARGB(255, 236, 234, 234)),
    Icon(Icons.star, color: Color.fromARGB(255, 236, 234, 234)),
  ],
);

จะมีดาวสีเหลืองสามดวง และสีเทาสองดวง

และก็ ข้อความ

var rating =
    Text("136 Rating", style: TextStyle(fontFamily: 'Sora', fontSize: 18));

ต่อมาก็เอา widget ทั้งสองมารวมไว้ด้วยกัน ด้วย Row()

var rowOfRating = Row(
    children: [starRow, rating], mainAxisAlignment: MainAxisAlignment.center);

ตั้งค่าให้ widget อยู่ตรงกลางด้วย mainAxisAlignment ตั้งให้เป็น center

Column 1 / Row 5 : ราคาสินค้า (price)

เสร็จจาก Rating แล้ว เราก็สร้างข้อความแสดงราคาสินค้า

var price =
    Text("2300 THB", style: TextStyle(fontFamily: 'Sora', fontSize: 18));

Column 1 / Row 6 : ปุ่มเพิ่มสินค้าในตะกร้า (addButton)

ตบท้ายด้วยปุ่มเพิ่มสินค้าในตะกร้า

var addButton = Container(
  decoration: BoxDecoration(
      color: const Color.fromARGB(255, 91, 229, 97),
      borderRadius: BorderRadius.circular(10)),
  child: new ElevatedButton(
    onPressed: () {},
    child:
        Text("Add to cart", style: TextStyle(fontFamily: 'Sora', fontSize: 18)),
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
    ),
  ),
  width: 297,
  height: 60,
);

ปุ่มจะมีข้อความ "Add to cart" พื้นสีเขียว สังเกตว่าจะใช้ Container ห่อหุ่ม ElevatedButton แทนที่จะใช้ ElevatedButton ตรงๆเลย เหตุผลเพราะ ต้องการกำหนดรัศมีของขอบปุ่มให้เป็นไปตามแบบ และกำหนดขนาดด้วยนั่นเอง

รวม widget ของหน้าแรก

เมื่อสร้าง widget ที่จะนำมารวมในหน้าแสดงสินค้าเสร็จแล้ว จากนั้นก็รวมกันลงในหน้า MyShoppingPage ได้เลย

class MyShoppingPage extends StatelessWidget {
  MyShoppingPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: Column(
          children: [
            menuBar,
            shoesName,
            shoesImage,
            rowOfRating,
            price,
            addButton,
          ],
        ),
      ),
    );
  }
}

เมื่อลองรันดู จะได้หน้าแอพออกมาเป็นดังนี้

มันก็มี widget ที่ต้องการครบแล้วนะ แต่การเว้นระยะห่างยังต้องปรับปรุง โอเค เรามาสร้าง widget ที่ใช้เว้นระยะกันดีกว่า (ใช่แล้วครับ ทุกสิ่งทุกอย่างใน Flutter สามารถมองเป็น widget ได้หมด แม้กระทั่งช่องไฟระหว่างบรรทัด) ในที่นี่เราจะใช้ widget SizedBox() เป็นตัวสร้าง

ช่องว่างระหว่าง wiget : gapBetweenWidget

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

var gapBetweenWidget =
    (double width, double height) => SizedBox(height: height, width: width);

เสร็จแล้ว เราก้เอาไปใช้กำหนดระยะห่างในหน้าแอพแบบนี้

เสร็จแล้ว ลองรันดูอีกทีนึง

จะเห็นว่ามีการกำหนดระยะห่างออกมาสวยงามตามแบบที่กำหนดเอาไว้แล้ว

สร้างหน้าที่สอง : MySummaryPage

ส่วนของหน้าแรกได้เสร็จเรียบร้อยลงไปแล้ว ต่อมาก็ทำการสร้าง widget แสดงหน้าที่สองกัน
เค้าโครง widget ก็เหมือนหน้าแรกเลย เราตั้งชื่อว่า MySummaryPage

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

สร้างคลาสสำหรับสร้างปุ่มวงกลม : CircleButton

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

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

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

var blank = () => {};

Reassignment : menuButton, cartButton

เมื่อมีคลาส CircleButton มาให้ใช้แล้ว เราก็เอามาใช้กับปุ่ม menuButton และ cartButton ของหน้าแรก ให้มันเป็นมาตรฐานเหมือนกันเลยดีฝ่า โดยการใช้คลาสมาแทนโค้ดเดิมเลยเพื่อลดบรรทัด

var menuButton = CircleButton(Icons.menu_sharp, blank);

var cartButton = CircleButton(Icons.shopping_cart, blank);

Column 2 / Row 1 : สร้างแถบเมนู

สร้างปุ่มย้อนกลับ (backButton)

var backButton = CircleButton(Icons.navigate_before, blank);

รับ argument มาสองตัวคือ Icons.navigate_before ที่เป็นเครื่องหมายหัวลูกศรชี้ไปทางซ้าย และอีกอันคือ blank คือฟังก์ชั่นเปล่าๆที่สร้างเตรียมเอาไว้นั่นเอง

สร้างปุ่มผู้ใช้งาน (userButton)

ไปค่อนจะเป็นรูปคน เพื่อให้แสดงถึงตัวของผู้ใช้งาน หรือข้อมูลผู้ใช้งาน

var userButton = CircleButton(Icons.person, blank);

เมื่อสร้างสองปุ่มเสร็จแล้ว ก็เอามารวมกัน เหมือนปุ่มในหน้าแรกอ่าแหละ ตั้งชื่อกลุ่มของปุ่มว่า menuBarInSummary

var menuBarInSummary = Row(
  children: [
    Expanded(
        child: Row(children: [backButton], textDirection: TextDirection.ltr)),
    Expanded(
        child: Row(children: [userButton], textDirection: TextDirection.rtl)),
  ],
);

Column 2 / Row 2 : สร้างหัวข้อหน้าสรุป : summaryTitle

สร้าง Text widget ขึ้นมา

var summaryTitle = Text(
  "YOUR CART",
  style: TextStyle(fontFamily: 'Sora', fontSize: 24),
);

สร้างคลาสรูปภาพรองเท้า

ใช้เพื่อเป็นคลาสไปสร้าง widget รูปสินค้ารองเท้าสำหรับใช้ในแอพทั้งสองหน้า ตั้งชื่อว่า ShoesImageItem

คลาส ShoesImageItem จะรับ argument เพียง 2 ตัว ความกว้าง (width) และความสูง (height) เพื่อเอาไว้ใช้ปรับให้เข้ากับ layout ในส่วนนั้นๆ ซึ่งรูปภาพจะกำหนดให้เป็นรูปเดียวกันไปเลยไม่ต้องเปลี่ยน การแสดงผลก็จะมีลักษณะเดียวกับ widget shoesImage ที่สร้างในหน้าแรกเลย

Reassignment : shoesImage

เมื่อสร้างคลาสมาแล้วก็ต้องเปลี่ยนการประกาศ shoesImage ซะใหม่ เพื่อความประหยัด

var shoesImage = ShoesImageItem(297, 288);

เหลือแค่นี้เอง ลดบรรทัดไปได้เยอะ

Column 2 / Row 3 : รายละเอียดสินค้าที่เลือก

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

สร้าง widget รูปภาพ ชื่อตัวแปร shoesImageInSummary

var shoesImageInSummary = ShoesImageItem(125, 121);

สร้าง widget ชื่อสินค้า เก็บค่าในตัวแปร shoesNameSummary

var shoesNameSummary = TextItem("Space Shoes", 14);

สร้าง widget ข้อความแสดงเรทติ้ง เก็บไว้ในตัวแปร ratingInSummary

var ratingInSummary = TextItem("136 Rating", 10);

สร้าง widget กลุ่มของไอค่อนดาว เหมือนในหน้าแรก แต่ขนาดจะเล็กกว่า

var starRowInSummary = Row(
  children: [
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0), size: 15),
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0), size: 15),
    Icon(Icons.star, color: Color.fromARGB(255, 255, 240, 0), size: 15),
    Icon(Icons.star, color: Color.fromARGB(255, 236, 234, 234), size: 15),
    Icon(Icons.star, color: Color.fromARGB(255, 236, 234, 234), size: 15),
  ],
);

ปรับขนาดดาวลง เป็น 15 ให้สอดคล้องกับที่จะใช้ในหน้านี้

แล้วเอา widget ที่สร้างมาประกอบกัน ภายใน widget Container

var productDetailInSummary = Container(
    child: Row(
      children: [
        Expanded(
            child: Row(
                children: [shoesImageInSummary],
                textDirection: TextDirection.ltr)),
        Expanded(
            child: Row(children: [
          Column(
              children: [
                shoesNameSummary,
                gapBetweenWidget(0, 50),
                ratingInSummary,
                gapBetweenWidget(0, 20),
                starRowInSummary
              ],
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.start)
        ], textDirection: TextDirection.rtl)),
      ],
    ),
    width: 297);

widget ถูกเก็บในตัวแปรชื่อ productDetailInSummary มีความกว้างเท่ากับ widget menuBarInSummary คือ 297 ตามแบบที่กำหนด

Column 2 / Row 4 : สร้างรายละเอียดแจ้งยอดชำระ

ประกาศตัวแปร billing เพื่อเก็บค่า widget Container ที่เราจะสร้างเพื่อเป็นส่วนพื้นที่ของรายละเอียดมูลค่า

var billing = Container(
    decoration: BoxDecoration(
        color: Colors.grey[300], borderRadius: BorderRadius.circular(10)),
    width: 297,
    height: 234);

สร้างคลาสปุ่มสี่เหลี่ยมสำหรับ Add to cart และ Checkout

สร้างคลาส ชื่อว่า AcceptButtonItem รับค่าสองค่าเข้ามา ตัวหนึ่งจะเป็นข้อความ ส่วนอีกตัวหนึ่งจะเป็น widget Colors เป็นสีที่ใช้เป็นพื้นหลังของปุ่มนั้น

Reassignment : ปุ่มกดยืนยัน

เมื่อสร้างคลาส AcceptButtonItem แล้ว ให้สร้างออบเจคที่รับค่า

var addButton = AcceptButtonItem("Add to cart", Colors.green);

Column 2 / Row 5 : ปุ่มเช็คเอาท์

สร้างออบเจคจากคลาส AcceptButtonItem แล้วเก็บในตัวแปร checkoutButton แบบนี้

var checkoutButton = AcceptButtonItem("Checkout", Colors.red);

ประกอบร่าง Page 2

นำเอา widget ทั้งหมดที่เราสร้างสำหรับ Column 2 มารวมกัน แบบนี้

ลอง debug หน้าเพจสองหน่อยเป็นไง

การแก้ไขความกว้างแถบเมนู

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

ในหน้าเพจ MyShoppingPage ให้แก้ menuBar โดยเพิ่ม Container ครอบอีกที แล้วกำหนด width ให้มัน

var menuBar = Container(
  child: Row(
    children: [
      Expanded(
          child: Row(children: [menuButton], textDirection: TextDirection.ltr)),
      Expanded(
          child: Row(children: [cartButton], textDirection: TextDirection.rtl)),
    ],
  ),
  width: 297,
);

ไหนดูซิ

ได้ละ

เช่นเดียวกันกับหน้า MySummaryPage

ทำแบบเดียวกันกับหน้า MySummaryPage ตรง menuBarInSummary ด้วย

var menuBarInSummary = Container(
  child: Row(
    children: [
      Expanded(
          child: Row(children: [backButton], textDirection: TextDirection.ltr)),
      Expanded(
          child: Row(children: [userButton], textDirection: TextDirection.rtl)),
    ],
  ),
  width: 297,
);

ตรวจสอบ

โอเค ผ่าน ต่อไป ไปดูกันต่อที่ การเชื่อมหน้าเพจทั้งสองเอาไว้ ด้วยการกดปุ่ม

การเชื่อมกันระหว่าง MyShoppingPage กับ MySummaryPage

ในการออกแบบ เราจะให้ มีการกดปุ่มตะกร้าสินค้า เพื่อนำไปยังหน้า MySummaryPage ดังนั้น เราจะกำหนดฟังก์ชั่นขึ้นมาเพื่อรอให้มีอีเวนท์เกิดขึ้น (Listening) เรียกว่า Callback Function นั่นเอง

ในการ callback เราจะใช้ widget ชื่อว่า Navigator มี 2 แบบคือ

Navigator.push() สำหรับ เชื่อมไปยัง widget หน้าถัดไป

Navigator.pop() สำหรับ เชื่อมกลับมายัง widget หน้าที่แล้ว

เพิ่ม Navigator.push()

รูปแบบการกำหนดฟังก์ชั่นใน onPressed properties

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

จะเห็นว่า ต้องมีการใช้ออบเจค context ที่สร้างมาจาก BuildContext ซึ่งจะเป็นตัวเชื่อมต่อกับ reference กับ widget ทั้งหมดในเพจนั้นๆ ดังนั้น จำเป็นที่จะต้องกำหนดฟังก์ชั่นใน widget ของเพจ แทนที่จะกำหนดภายนอก แล้วเรียกไปใช้เหมือน widget ตัวอื่นๆ

ดังนั้นจึงขอยุบตัวแปร menuBar ออกจากหน้า MyShoppingPage แล้วเอาค่าของมันมาวางแทนแบบนี้

class MyShoppingPage extends StatelessWidget {
  MyShoppingPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: Column(
          children: [
            Container(
                child: Row(
                  children: [
                    Expanded(
                        child: Row(
                            children: [menuButton],
                            textDirection: TextDirection.ltr)),
                    Expanded(
                        child: Row(children: [
                      CircleButton(Icons.shopping_cart, () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return MySummaryPage();
                        }));
                        return null;
                      })
                    ], textDirection: TextDirection.rtl)),
                  ],
                ),
                width: 297),
            gapBetweenWidget(0, 30),
            shoesName,
            gapBetweenWidget(0, 20),
            shoesImage,
            gapBetweenWidget(0, 10),
            rowOfRating,
            gapBetweenWidget(0, 10),
            price,
            gapBetweenWidget(0, 10),
            AcceptButtonItem("Add to cart", Colors.green, () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return MySummaryPage();
              }));
              return null;
            }),
          ],
        ),
        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
      ),
    );
  }
}

มีการเพิ่ม margin ให้กับ Container ของ แถบเมนูด้วย เพื่อให้ตรงกับหน้าที่สอง

ในส่วนของปุ่มตะกร้าสินค้า มีการสร้างออบเจคจากคลาส CircleButton ซึ่ง argument ตัวที่สอง กำหนดไว้ให้เป็นฟังก์ชั่น ซึ่งเราก็จะเอาฟังก์ชั่นที่ครอบ Navigator.push() ลงไป แล้วให้ฟังก์ชั่นนั้นคืนค่า null ออกมา ซึ่งถ้าเราใช้ Navigator.push() แทนลงไปตรงๆ จะเกิด error แบบนี้

The argument type 'Future<dynamic>' can't be assigned to the parameter type 'Map<dynamic, dynamic> Function()

เป็นเพราะว่า Navigator.push() นั้นไม่ใช่ Function แต่เป็นชนิด Map

จากตัวอย่าง เราก็ทำการยุบตัวแปร addButton ทิ้งไปเช่นเดียวกัน ในกรณีที่ต้องการจะให้ปุ่ม Add to cart มีการทำงานเหมือนกับปุ่มตะกร้าสินค้า คือกดแล้วจะเปลี่ยนไปยังหน้าที่สองนั่นเอง

เพิ่ม Navigator.pop()

ส่วนหน้า MySummaryPage ก็เช่นเดียวกัน ตรงส่วนตัวแปร menuBarInSummary ก็จะถูกยุบทิ้งเช่นเดียวกัน เนื่องจากเราต้องการให้ปุ่ม backButton ได้ใช้งานฟังก์ชั่น Navigator.pop() เพื่อให้กดย้อนมายังหน้าที่แล้ว (หน้าแรกนั่นแหละ)

เปลี่ยนโค้ดเป็นแบบนี้

class MySummaryPage extends StatelessWidget {
  MySummaryPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: Column(
          children: [
            Container(
                child: Row(
                  children: [
                    Expanded(
                        child: Row(children: [
                      CircleButton(Icons.navigate_before, () {
                        Navigator.pop(context);
                        return null;
                      })
                    ], textDirection: TextDirection.ltr)),
                    Expanded(
                        child: Row(
                            children: [userButton],
                            textDirection: TextDirection.rtl)),
                  ],
                ),
                width: 297),
            gapBetweenWidget(0, 30),
            summaryTitle,
            gapBetweenWidget(0, 20),
            productDetailInSummary,
            gapBetweenWidget(0, 20),
            billing,
            gapBetweenWidget(0, 10),
            checkoutButton,
          ],
        ),
        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
      ),
    );
  }
}

ลองกดรันดู จะมีหน้าแอพปรากฏขึ้น จากนั้นทดสอบกดปุ่มตะกร้าสินค้า

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

ให้เพิ่มโค้ดนี้เข้ามา ตามตัวอย่างจาก แหล่งอ้างอิง

มีการสร้างฟังก์ชั่นชื่อว่า createRoute เป็นชนิด Route ที่ภายในจะคืน widget PageRouteBuilder โดยใน properties ที่ชื่อว่า transitionsBuilder นี่แหละที่ใช้เปลี่ยนรูปแบบการสไลด์หน้าต่าง โดยสังเกตที่ค่า begin มีการใช้ Offset แล้วตั้งค่าเป็น 1.0, 0.0 ตามแกน x แกน y นั่นเอง

แล้วเปลี่ยนฟังก์ชั่นที่ครอบ Navigator.push() ของ MyShoppingPage เป็นดังนี้

ส่วน MySummaryPage เราจะไม่เปลี่ยนแปลงค่าอะไร ใช้ Navigator.pop() เหมือนเดิม

ลองกดรันดูอีกครั้ง เราจะพบว่ามันสามารถเปลี่ยนหน้าเพจแบบสไลด์ด้านข้างได้แล้ว เย้

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

References

Pub Dev

Shoes Image

Layout widget
Layout
Material
Material App
Material Class
Scaffolf Class
AppBar Class
Container Class
BoxDecoration Class
Color Class
Icon Class
ElevatedButton Class
MaterialStateProperty Class

How to change the color of elevatedbutton in Flutter

SizedBox Class
Navigation Basic
Page Route Animation

HTML Color
Summary about build context widget key in Flutter

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

และเพราะพื้นฐานมันสำคัญมากๆ ผมเลยพยายามหาข้อมูลจากหลายๆเว็บมาก โดยตัวหลักที่อ่านก็คือ doc ของ Flutter เองน่นแหละ แต่ก็พยายามหาตัวอย่างของเจ้าอื่นๆที่เข้าใจง่ายๆมาประกอบกันด้วย ไปดูกันทีละเรื่องกันเลย

Description

เริ่มจาก คำอธิบายศัพท์แสงต่างๆ ที่เราจะเจอบ่อยๆ

Material Design

คือ มาตรฐานการออกแบบ UI บนหน้าจอสมาร์ทโฟน

Widget

คือส่วนต่างๆที่นำมาประกอบร่างกันเป็น UI เช่น ปุ่ม ข้อความ สไลด์ เป็นต้น ซึ่งแต่ละ Widget ก็มี คุณสมบัติ (Properties) เป็นของตัวเอง

ใน Flutter นั้น Widget ถือว่าเป็นคลาสหลักเลยก็ว่าได้ คลาสอื่นๆ ต่างก็สืบทอดมาจาก Widget กันทั้งนั้น อาทิเช่น

-> Text
สำหรับแสดงข้อความ สามารถแสดงใช้เพื่อข้อความลงใน Widget อื่นๆได้

-> RaisedButton
สำหรับการสร้างปุ่มและกำหนดคุณสมบัติของปุ่มนั้น

-> Row และ Column
สำหรับจัดการ Layout ของหน้าแอพ แบบ Row เป็นการจัดเรียง Widget แบบซ้าย-ขวา ส่วน Column เป็นการจัดเรียงแบบบน-ล่าง

-> Stack
สร้างลำดับการซ้อนทับในหน้า Layout เวลาใช้งาน ให้มองภาพ 2D ให้เป็น 3D แล้วเรียบเรียงด้านหน้า-ด้านหลังของ Widget นั้น

-> Container
เป็น Widget ทำหน้าที่เป็น พื้นที่ที่รวบรวม Widget ต่างๆ เอาไว้
ตัว Container มี Widget ภายในสามารถแบ่งออกเป็น Layer ได้แบบนี้

เรียงลำดับที่อยู่ของ Properties จากด้านนอกเข้าสู้ด้านในจะเป็น
Margin > Border > Padding > Content
ตัว Content นั้นจะถูกกำหนดโดย Properties ที่ชื่อ child ซึ่งสามารถบรรจุ Widget ได้หลายชนิด เช่น Row, Column, Image หรือว่าเป็น Container เอง แต่บรรจุได้แค่ตัวเดียวนะ เพราะอะไร เดี๋ยวจะอธิบายภายหลัง

-> MaterialApp
เป็น Widget หลัก ที่ทำหน้าที่กำหนดส่วนต่างๆของแอพ ตั้งแต่ชื่อแอพ ไอค่อน ไปจนถึงภายในแอพทั้งหมด ถ้าเราต้องการให้แอพของเราแสดงอะไรออกมาบ้าง ให้เขียนโค้ดกำหนดค่าในรูปแบบ properties ไว้ในนี้

-> Scaffold
เป็น Widget ตัวหนึ่งที่ทำหน้าที่กำหนด Layout ของหน้าแอพ มีการกำหนดโครงสร้างหน้าต่าง เว้นระยะขอบให้โดยอัติโนมัติ

-> StatelessWidget
คือ Widget ที่ใช้สร้าง Widget อื่นแล้วแสดงผลออกมา ไม่สามารถเปลี่ยนแปลงค่าในนั้นได้ ดังนั้นจึงใช้สร้าง Widget ที่เป็นค่าคงที่ เช่น ข้อความ ไอคอน

โครงสร้าง

class <class_name> extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //to do
    );
  }
}

การสร้าง ให้เอา Widget และ Properties เข้าไปใส่ใน Container (สามารถใช้เป็น MaterialApp ถ้าต้องการกำหนดให้หน้าแอพทั้งหมดเป็น Stateless)

-> StatefulWidget
คือ Widget ที่ใช้สร้าง Widget อื่นแล้วแสดงผลออกมา แต่สามารถเปลี่ยนแปลงค่าได้ ดังนั้นจึงใช้สร้าง Widget ที่เปลี่ยนแปลงได้ เช่น Slider หรือ Check Box

โครงสร้าง

class <class_name> extends StatefulWidget {
  @override
  _<class_name>State createState() => _<class_name>State();
}

class _<class_name>State extends State<<class_name>> {
  @override
  Widget build(BuildContext context) {
    return Container(
      //to do
    );
  }
}

จะคล้ายๆกับ Stateless แต่จะเพิ่มฟังก์ชั่น setState() เพื่อให้เอา Widget และ Properties ที่ต้องการให้เปลี่ยนแปลงค่า เข้าไปใส่ใน Container หรือ MaterialApp
เมื่อมีการเปลี่ยนแปลงค่า ตัวแอพจะรันต่อได้เลยโดยไม่ต้อง build ใหม่

วิธีออกแบบโครงสร้างหน้าแอพ

เนื่องจากโครงสร้างของ Flutter นั้น มองทุกอย่างเป็น Widget แทบทั้งหมด ดังนั้น การเริ่มออกแบบหน้าแอพ เราจะเริ่มจากการออกแบบ Widget ย่อยๆออกมาก่อน

เริ่มจาก การเลือก Layout Widget ก่อน เราต้องการให้ หน้าแอพของเรามีรูปแบบไหน เช่น

มีการจัดวางให้อยู่ตรงกลาง ใช้
Center()
ดูรายละเอียด Center

จัดวางเป็นแถว ใช้
Row()
ดูรายละเอียด Row เพิ่มเติม

ต่อมาเป็นการสร้าง Widget ที่จะให้ปรากฏในหน้าแอพนั้น อาจจะสร้างแยกย่อยออกมาก่อน เช่น

-> สร้างไอคอนรูปดาว

Icon(
  Icons.star,
  color: Colors.red[500],
)

-> สร้างข้อความ

Text('Hello World')

แล้วหลังจากนั้น เอา Widget มาวางใน Layout ที่เราออกแบบเอาไว้ แล้วจับใส่ตัวแปรเพื่อให้เอาไปใช้ได้ง่ายก็ดีนะ

var text = Center(
  child: Text('Hello World'),
);

var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.red[500]),
    Icon(Icons.star, color: Colors.red[500]),
    Icon(Icons.star, color: Colors.red[500]),
  ],
);

มีการเพิ่ม Properties mainAxisSize เท่ากับ MainAxisSize.min เข้าไปด้วยเพื่อตั้งค่าให้ดาวอยู่ติดกัน

ข้อสังเกตคือ ใน Center มีการใช้ Properties ชื่อ child ส่วน Row มีการใช้ Properties ชื่อ children ซึ่งทั้งสองมีความแตกต่างกันตรงที่

child
จะอยู่ใน Widget ที่บรรจุ Widget ได้ตัวเดียว เช่น Center , Container (นี่คือคำตอบที่ว่า ทำไม Container ถึงบรรจุ Widget ได้แค่ตัวเดียวยังไงล่ะ)

children
จะอยู่ใน Widget ที่บรรจุ Widget ได้มากกว่าหนึ่งตัว เช่น Row, Column, ListView, Stack

-> แล้วเมื่อสร้าง Layout Widget เสร็จแล้ว ก็เอามาใส่ใน Page
โดย แต่ละส่วนของหน้าเพจจะถูกกำหนดด้วย StatelessWidget หรือ StatefulWidget หรือจะใช้ทั้งคู่เลยก็ได้ ถ้าในหน้าเพจต้องการส่วนที่เปลี่ยนแปลงค่าและไม่เปลี่ยนแปลงค่าไว้ด้วยกัน

การยกตัวอย่าง ขอใช้ StatelessWidget เนื่องจากไม่ต้องการเปลี่ยนค่าใดๆ
เอา Widget ที่สร้างได้ เก็บไว้ในฟังก์ชั่น buildHomePage() ซึ่งเอา MaterialApp ครอบไว้อีกที เวลาเรียกใช้ ให้เรียกผ่านคลาส MyApp

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: buildHomePage(),
    );
  }

  Widget buildHomePage() {
    final text = Center(
      child: Text('Hello World'),
    );

    final stars = Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.star, color: Colors.red[500]),
        Icon(Icons.star, color: Colors.red[500]),
        Icon(Icons.star, color: Colors.red[500]),
      ],
    );

    return Scaffold(
        body: Center(
            child: Container(
                child: Row(children: [
      stars,
      text,
    ]))));
  }
}

ถ้าใช้ VS Code ให้กด F5 เพื่อรันโค้ดแล้วดูผลที่ได้

วาดรูปอธิบายโค้ดด้านบนออกมาเป็น Widget Tree ได้แบบนี้

-> ใส่ mainAxisAlignment และ textDirection
เราจะได้รูปดาวแดงและข้อความ Hello World ออกมา แต่ก็พบว่ามันอยู่ชิดขอบเกินไป
ดังนั้น ในส่วน Row ที่อยู่ใน Container จึงใช้ Properties ชื่อ mainAxisAlignment เข้ามาช่วยปรับ alignment ของแถว ให้อยู่ตรงกลาง โดยใส่ค่าให้เท่ากับ MainAxisAlignment.center

ส่วน Widget ที่อยู่ในแถว ตั้งค่าให้มันเรียงลำดับจากซ้ายไปขวา หรือขวามาซ้ายได้ โดยใช้ textDirection แล้วใส่ค่าเป็น TextDirection.<ltr หรือ rtl>

ltr สำหรับซ้ายไปขวา
rtl สำหรับขวาไปซ้าย

โดยใน Source Code เราตั้งให้มันเรียงจากขวาไปซ้าย

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: buildHomePage(),
    );
  }

  Widget buildHomePage() {
    final text = Center(
      child: Text('Hello World'),
    );

    final stars = Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.star, color: Colors.red[500]),
        Icon(Icons.star, color: Colors.red[500]),
        Icon(Icons.star, color: Colors.red[500]),
      ],
    );

    return Scaffold(
        body: Center(
            child: Container(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    textDirection: TextDirection.rtl,
                    children: [
          stars,
          text,
        ]))));
  }
}

ลองรันอีกทีแล้วดูผลที่ได้

ข้อสรุป

แอพที่พัฒนาด้วย Flutter ทุกๆส่วนของแอพจะเป็น Widget ตัว Widget ทุกตัวจะครอบด้วย MaterialApp เพื่อใช้คุณสมบัติของมันในการแสดง UI ผ่านหน้าจอ ส่วน Widget ใดๆ สามารถบรรจุ Widget อื่นเอาไว้ภายในได้ตามการออกแบบที่เราต้องการ และสามารถอธิบายออกมาเป็นแผนผังที่เรียกว่า Widget Tree ในการเรียงลำดับชั้นของ Widget ในกรอบที่เราพิจารณา

ตัว Widget Tree นี่มีประโยชน์มาก เพราะก่อนที่เราจะสร้างแอพขึ้นมา ควรจะเรียงลำดับ Widget ผ่านการออกแบบ Widget Tree ก่อนที่จะลงมือสร้างโค้ด จะทำให้มองเห็นภาพรวม และสามารถ maintenance โค้ด หรือ Scale ได้ง่าย เพราะแอพที่ดี จะมาจากการวางแผนและออกแบบที่ดีฮะ

อ้างอิง

แหล่งเรียนรู้ Flutter ที่ถูกต้องแม่นยำที่สุด

Layouts in Flutter

ขอขอบคุณแหล่งอ้างอิงเพิ่มเติม

Flutter : สรุปเรื่อง BuildContext , Widget , State , Key ใน Flutter

เคยมั้ย เมื่อเราเปิด Android SDK และเปิดใช้งานเครื่องจำลอง (Android Emulator) เตรียมตัวจะทำงานละ เปิด VS Code พร้อม ไอเดียพร้อม แล้วซักพักหน้าจอของคุณก็เป็นแบบนี้

หมด หมดกัน
ไปละไอเดียที่คิดไว้ ฟุ้งกระจายหายหมด เออดี!!

ไม่สิ เรื่องแบบนี้มันจะต้องไม่เกิดกับเราคนเดียวแน่ มันต้องมีคนซวยแบบนี้มาก่อน
ไหนๆใครเป็นบ้าง >> เปิดดู Stackoverflow แปป

เข้าเรื่องกันเลย

ไอ้จอฟ้าเนี่ย มันมีสาเหตุที่เป็นไปได้คือ การทำ Hardware Acceleration จาก Graphic driver ไม่ support หรือว่าไม่เข้ากันกับ Android Emulator เมื่อมีการเปิดใช้งาน Emulator ตัว Hardware หรือ Software Acceleration จะถูกเรียกใช้โดยอัตโนมัติ

Hardware Acceleration คือ การใช้ GPU เรนเดอร์เพื่อที่จะให้ CPU ประมวลผลฟังก์ชั่นหรือคำสั่งใดๆออกมาได้สำเร็จ (force GPU rendering)

ส่วน Software Acceleration ก็คล้ายๆ Hardware แต่จะเปลี่ยนเป็น ใช้ Software แทน Hardware การเรนเดอร์จะเกิดบน CPU

แนวทางการแก้ไขคือ ไม่ให้ Emulator ใช้ Hardware หรือ Software Acceleration ของ GPU’s แบบอัติโนมัติซะ แล้วเมื่อเปิด Emulator ให้เรียกใช้งานได้ 2 ตัวเลือก

1. ใช้ Software Accelerator จาก CPU’s คอมพิวเตอร์โดยตรง
2. ใช้ ANGLE ซึ่งเป็น Open Source ที่ Google ออกแบบมาเพื่อให้สามารถใช้ OpenGL ร่วมกับ Windows ได้อย่างเต็มประสิทธิภาพ ดู ANGLE เพิ่มเติม

บทความนี้จะขอบันทึกวิธีแก้ปัญหาจอฟ้าบน Winows 10 ให้กลับมาใช้ AVD ได้อย่างราบรื่นอีกครั้ง มีขั้นตอนการแก้ปัญหาดังนี้

เปิด Terminal แล้ว path ไปที่โฟลเดอร์ที่ Android Emulator อยู่ เช่น
C:\Users\userName\AppData\Local\Android\sdk\emulator

cd C:\Users\userName\AppData\Local\Android\sdk\emulator

ดูลิสต์รายชื่อ Emulator ที่เราสร้างทั้งหมด

./emulator -list-avds

จะมีรายชื่อปรากฏออกมาทั้งหมด ในที่นี้มีการสร้างไว้แค่ตัวเดียว

Pixel_4_API_29

ใช้คำสั่ง ฟอร์ม

./emulator -avd <avd_name> -gpu <mode> [{-option [value]} ... ]

เพื่อรัน emulator ขึ้นมา

avdname คือชื่อ emulator ที่ต้องการรัน
mode แทนค่าที่เราต้องการให้ emulator รันในหมวดใดๆ เช่น

auto >> เร่งประมวลผลด้วย hardware (GPU) หรือ Software (CPU) ตามที่ตั้งค่าไว้

host >> ใช้ GPU เรนเดอร์ และโหลด OpenGL ลงไปประมวลผลด้วยเพื่อให้ได้กราฟฟิคที่ดีเยี่ยม

angle_indirect >> เรนเดอร์ด้วย software ใช้ ANGLE Direct3D ประมวลผลแบบ Quick boot (การบันทึกสถานะของ emulator เพื่อให้การ boot ครั้งที่สองขึ้นไปรวดเร็วขึ้น คล้ายๆ host นะ แต่ใช้ Microsoft DirectX แทน OpenGL ทำให้ไม่ต้องยุ่งเกี่ยวกับ GPU

ในที่นี้ เราลองใช้ host รัน emulator ดูก่อน เผื่อเวิร์ก

.\emulator -avd Pixel_4_API_29 -gpu host

ค้นพบว่า ขึ้นจอฟ้า เพราะว่าการเรนเดอร์ด้วย GPUไม่เหมาะกับ emulator ตามสาเหตุที่ได้บอกไปข้างบน

ลองใช้ mode เป็น angle_indirect

ใช้คำสั่ง

./emulator -avd Pixel_4_API_29 -gpu angle_indirect

รอผลยาวไปๆ

emulator: Android emulator version 30.3.5.0 (build_id 7033400) (CL:N/A)
handleCpuAcceleration: feature check for hvf
added library vulkan-1.dll
Failed to open /qemu.conf, err: 2
Windows Hypervisor Platform accelerator is operational
emulator: INFO: GrpcServices.cpp:288: Started GRPC server at 127.0.0.1:8554, security: Local

เมื่อ emulator เปิดขึ้นมาแล้ว พบว่า ไม่เกิดจอฟ้าอีก โอเค

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

References

Android Studio, Suddenly got GPU Driver Issue when running emulator

Configure hardware acceleration for the Android Emulator

What are software accelerators?

Hardware acceleration

Force GPU Rendering

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

บทความนี้จะขอพุดถึงการเริ่มใช้งานแอพเฟรมเวิร์คตัวหนึ่งที่มาแรงและผู้พัฒนาคือ Google นั่นก็คือ Flutter นี่เอง โดยเจ้า Flutter นี่เป็น UI เฟรมเวิร์ค แบบ Open Source ที่ Google เริ่มปล่อยออกมาเมื่อปี 2017 นี่เอง การพัฒนาแอพใช้ภาษา Dart สามารถรันได้บนหลาย OS เลย บทความนี้จะขอยกตัวอย่างการติดตั้ง Flutter บน windows 10 ละกันนะ (เนื่องจากผู้เขียนใช้อยู่) เพื่อไม่ให้เสียเวลา เรามาอยู่ Required Spectification ของคอมที่จะลงก่อนเลย

ขั้นตอนที่เราจะทำต่อไปนี้ จะเริ่มจากการติดตั้ง Software ต่างๆ จนไปถึง เปิดแอพ Flutter ได้สำเร็จ ขออธิบายเรียงตามลำดับขั้นตอนดังนี้

• ติดตั้ง Flutter
• ติดตั้ง Android Studio
• Android Toolchain
  • Android SDK
  • ลง Android License
• สร้าง Android Virtual Device (AVD)
• ติดตั้ง VS Code
• สร้างโปรเจค Flutter และ build บน AVD

ติดตั้ง Flutter

เมื่อเครื่องพร้อม ให้เรา Download ไฟล์ ที่นี่

Windows install

How to install on Windows.

Flutter Logo

เมื่อดาวน์โหลดมาแล้ว ให้ทำตามขั้นตอนต่อไปนี้

1.)แตกไฟล์ที่ดาวน์โหลด แล้วเข้าไปในโฟลเดอร์เพื่อเอาไฟล์ทั้งหมดออกมา (Ctrl+x ก็ได้)
2.)สร้างโฟลเดอร์ตาม path แบบนี้ เช่น C:\src\flutter แล้วเอาไฟล์ที่ได้ไปวาง (ให้สร้าง path ใหม่ ห้ามวางใน C:\Program Files\)

Tip : ถ้าไม่อยากดาวน์โหลดจากหน้าเว็บ ก็เปิด Windows PowerShell แล้วใส่คำสั่งนี้แทน

git clone https://github.com/flutter/flutter.git -b stable

3.)กดปุ่ม Start ไปที่ช่อง search หรือถ้าไม่มีก็เข้า Settings > ใส่ env ที่ช่อง search > เลือก Edit The System Environment Variables ไปที่ Advanced กดปุ่ม Environment Variables
4.)ดูตรง User variables คลิกที่ Path แล้วกดปุ่ม Edit… จากนั้น กดปุ่ม New
5.)ไปที่โฟลเดอร์ตามข้อ 2 กดเข้าไปจนถึง flutter\bin แล้วก็อป path มาวาง แล้วกด OK เท่านี้ก้เรียบร้อยสำหรับการ set up path
6.)เปิด Windows PowerShell ใส่คำสั่ง

C:\src\flutter>flutter doctor

7.)ตัว command จะเช็คสถานะการติดตั้ง Flutter ให้ แล้วจะพ่นข้อความออกประมานนี้

Downloading Material fonts...                                       0.7s
Downloading Gradle Wrapper...                                       0.3s
Downloading package sky_engine...                                   0.3s
Downloading flutter_patched_sdk tools...                            0.9s
Downloading flutter_patched_sdk_product tools...                    0.6s
Downloading windows-x64 tools...                                    1.8s
Downloading windows-x64/font-subset tools...                        0.4s
Downloading android-arm-profile/windows-x64 tools...                0.3s
Downloading android-arm-release/windows-x64 tools...                0.3s
Downloading android-arm64-profile/windows-x64 tools...              0.3s
Downloading android-arm64-release/windows-x64 tools...              0.3s
Downloading android-x64-profile/windows-x64 tools...                0.3s
Downloading android-x64-release/windows-x64 tools...                0.3s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

แปลความได้ว่า ตอนนี้มีการติดตั้ง Flutter แล้ว แต่ยังไม่มีการติดตั้ง Android SDK (Android Toolchain), Android Studio, VS Code และสร้าง Android Virtual Device หรือ AVD (Connected device) ซึ่งต่อไปเราจะทำการติดตั้ง Android Studio ลงในเครื่องก่อนเพื่อใช้งาน Android Emulator เปิดอุปกรณ์ Android จำลองขึ้นมา

ติดตั้ง Android Studio

สามารถเข้าไปดาวน์โหลดไฟล์ได้ที่นี่

Download Android Studio and SDK tools | Android Developers

<!-- hide description -->

Android Developers

เราวางแผนเอาไว้ว่าจะใช้ VS Code ในการพัฒนาแอพ ในที่นี้จึงไม่ตั้งค่า Android Studio แต่จะใช้แค่ Android Emulator แต่ก่อนอื่นต้องติดตั้ง Android SDK และยอมรับเงื่อนไขของ Android License เสียก่อน

Android Toolchain

แบ่งขั้นตอนออกมาเป็น 2 ส่วนคือ ส่วนติดตั้ง Android SDK สำหรับเป็น Platform ที่บรรจุ Library ต่างๆที่ใช้พัฒนาแอพ Flutter และส่วนติดตั้ง Android License ทำให้ machine ยอมรับเงื่อนไขของ Android

Android SDK

วิธีการตั้งค่า

เปิด Android Studio แล้ว ไปที่ Configure > SDK Manager
ตรง Appearance & Behavior กดที่ System Settings > Android SDK

เลือกเวอร์ชั่นที่ต้องการ โดยคลิกที่ Check Box

Copy path ตรง Android SDK Location เอาไว้

ตรง Plugins ให้หาปลั๊กอินที่ชื่อ Flutter แล้วกด Install

โปรแกรมจะแจ้งว่า ปลั้กอิน Flutter ต้องการให้เราลง Dart ด้วย ก็กด Install ไป

เปิดโปรแกรม Edit The System Environment Variables ขึ้นมา ไปที่ Advanced กดปุ่ม Environment Variables

ตรง User variables ถ้าหากยังไม่มีการเพิ่ม path ของ Android SDK ให้กด New

ตรง Variable name ใส่ ANDROID_SDK_ROOT และ ตรง Variable value ใส่ path ที่ copy มาจาก Android SDK Location เสร็จแล้วกด OK

ตรง User variables คลิกที่ Path แล้วกดปุ่ม Edit

วาง path ที่ copy มาจาก Android SDK Location สามอัน

อันแรก พิมพ์ \tools ต่อท้าย

อันที่สอง พิมพ์ \tools\bin ต่อท้าย

อันสุดท้าย พิมพ์ \platform-tools ต่อท้าย แล้วกด OK

เมื่อตั้งค่าเสร็จแล้ว ลองเช็คสถานะจากคำสั่ง flutter doctor อีกครั้ง จะได้สถานะแบบนี้

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

มีการลง Android SDK แล้วแต่ยังไม่มี License (Android licenses not accepted) มาติดตั้งกันต่อเลยฮะ

ลง Android License

เราต้องลง License เพื่อให้เครื่องเราสามารถเข้าถึง Android ได้ โดยต้องติดตั้งเพื่อยอมรับเงื่อนไขของ Android License ทำได้โดยการใช้คำสั่ง

flutter doctor --android-licenses

ระบบจะพ่นข้อความออกมาเยอะมากๆ โดยให้เรากด Y (Yes) ไปทุกๆครั้งที่มีคำถาม

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

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

การติดตั้ง License เป็นอันเรียบร้อย ขั้นตอนต่อไป ทำการตั้งค่าเพื่อสร้าง AVD เพื่อใช้ดป็นเครื่องจำลอง (Emulator) กันครับ

สร้าง Android Virtual Device (AVD)

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

ขั้นตอนการตั้งค่าและเปิดใช้งาน

เปิด Android Studio แล้ว แล้วไปที่ Configure > AVD Manager
คลิกที่ Create Virtual Device

ใน Category เลือก Phone แล้วเลือก pixel ที่ต้องการ จากนั้นกด Next

คลิก Download รุ่นระบบที่ต้องการ จากนั้นกด Next

รอการติดตั้งจนเสร็จ แล้วกดปุ่ม Finish

ถึงขั้นตอนนี้ เราสามารถกดใช้งานเครื่องจำลองได้แล้ว โดยกดเครื่องหมายสามเหลี่ยมที่อยู่ตรง Actions

เช็คสถานะกันหน่อยซิ ที่หน้าจอ terminal ใช้คำสั่ง flutter doctor อีกที ดูดิเป็นไง

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

แบบนี้แปลว่า สร้างและเชื่อมต่อ AVD เรียบร้อย

ติดตั้ง VS Code

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

Visual Studio Code

ทำการติดตั้ง VS Code เพื่อใช้เป็น Code Editor

เมื่อติดตั้งเสร็จแล้ว ลองใช้คำสั่ง flutter doctor เพื่อเช็คสถานะการติดตั้งอีกครั้ง

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.52.1)
[✓] Connected device (1 available)

โอเค แบบนี้ถือว่าติดตั้งด้วยความเรียบร้อยดี จากนั้นเราไปสร้างโปรเจคกันฮะ

สร้างโปรเจค Flutter และ build บน AVD

สร้างโฟลเดอร์ แล้วเข้า path ไปที่โฟลเดอร์นั้น จากนั้นใช้คำสั่ง

flutter create <project_name>

ในที่นี่ เราใช้ชื่อโปรเจคว่า mybasicapp นะ

รอจนการสร้างไฟล์ต่างๆสำเร็จเสร็จสิ้น จนเห็นข้อความขึ้นมาแบบนี้

Running "flutter pub get" in mybasicapp...                          2.6s
Wrote 71 files.

All done!
[✓] Flutter: is fully installed. (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.18363.1316], locale th-TH)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.3)
[!] Android Studio: is partially installed; more components are available. (version 4.1.0)
[✓] VS Code: is fully installed. (version 1.52.1)
[✓] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd mybasicapp
  $ flutter run

Your application code is in mybasicapp\lib\main.dart.

กดเข้าไปดูไฟล์ที่สร้าง ผ่าน VS Code

จากนั้น กด Shift + Ctrl + P เพื่อใส่คำสั่ง เลือก Flutter: Launch Emulator

จะมี list ให้เลือก Emulator เราก็เลือกอันแรก เพราะสร้างไว้แค่เดียว

จากนั้น เครื่องจะทำการเชื่อมต่อโปรเจคกับ Emulator ให้ อาจจะมีหน้าต่าง Security Alert ขึ้นแบบนี้สำหรับการใช้งานครั้งแรก ให้กด Allow access ไป

เมื่อเชื่อมต่อเสร็จแล้ว ให้กด F5 เพื่อเริ่ม build แอพ บนเครื่องจำลอง

รอจนเสร็จจะได้แอพ Flutter บนเครื่องแล้วเรียบร้อย

จบการติดตั้งไปจนถึงสร้างแอพ Flutter ครั้งแรก ต่อไปเราจะเริ่มสร้างแอพขึ้นมาเป็นรูปแบบไหน ก็ทำได้ โดยการแก้ไข Default App ให้เป็นแบบที่เราต้องการ ซึ่งเราจะเห็นว่า พื้นฐานโค้ดของแอพใช้ภาษา Dart เนอะ ดังนั้น จึงควรรู้พื้นฐานภาษาก่อนจะไปเริ่มทำแอพนะฮะ แล้วพบกันบทความหน้า

Reference

Flutter

มาต่อกันเลยกับภาคต่อของภาษา Dart ชุดเริ่มต้น ก่อนไปใช้งาน Flutter วันนี้เราจะมาพูดกันถึงเรื่องของ Class ในแง่ที่เป็นคุณสมบัติต่างๆของมัน ได้แก่ Constructor, Class Inheritance ว่าแล้วตอนนี้ ก็มาเริ่มกันเลยดีกว่า

ในบทความที่แล้ว เรามีการเกริ่นไปถึงคลาสบ้างแล้ว ในเรื่อง Getters/Setters, Private Variable และ Constructor ในส่วนนี้ จะขอขยายความ Constructor ต่อไปอีก เนื่องจาก มี syntax หลายๆอย่างที่จำเป็นต้องเรียนรู้ เพื่อนำไปสร้างแอพได้จริง

Constructor

จาก syntax ทั่วไปของ Constructor ที่มองในรูปแบบ header/body มีการแบ่งออกมาเป็นแบบนี้

//constructor head
Class_name(parameter_list) { 
   //constructor body 
}

Constructor ถูกสร้างขึ้นมาโดยไม่ต้องกำหนด data type เพื่อเป็นตัวแทนของ class ในส่วน body ใช้สร้าง statement เพื่อกำหนดค่าให้ field เมื่อสร้าง object จากคลาส จะสามารถใส่พารามิเตอร์ให้กับ object ตั้งแต่ตอนที่สร้างขึ้นมาเลย เช่น หากมีการสร้างคลาส Employee ที่มีการกำหนดตัวแปรสามตัวคือ ชื่อ อายุ และที่อยู่ แล้วสร้าง Constructor ที่ทำหน้าที่รับพารามิเตอร์แต่ละค่าเอามาเก็บไว้ในตัวแปรนั้นๆ

class Employee {
  // fields
  String name;
  int age;
  String address;

  // Constructor
  Employee(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
  }
}

การใช้ this เพราะต้องการให้ Constructor รู้ว่า ค่าพารามิเตอร์ที่รับเข้ามา ให้เอาไปเก็บที่ fields ของคลาสนะ เนื่องจากโปรแกรมจะค้นหา fields ของฟังก์ชั่นก่อน fields ของคลาส
ถ้าไม่มี this โปรแกรมจะเข้าใจว่าพารามิเตอร์ที่รับเข้ามาจะถูกกำหนดให้ local scope fields ของ Constructor ซึ่งในที่นี้เราไม่มีการสร้างเอาไว้ จะทำให้ field ทั้งหมดของคลาสยังคงเป็น null

เวลาจะสร้าง object จากคลาส Employee แล้วเก็บ object ไว้ในตัวแปรชื่อว่า employee_1 จะใช้ syntax แบบนี้

var employee_1 = new Employee(“John Doe”, 29, “Califonia”);

หรือ จะละ new ก็ได้

var employee_1 = Employee(“John Doe”, 29, “Califonia”);

คำเตือน : ต้องใส่พารามิเตอร์ให้ครบทุกค่าตามที่ฟังก์ชั่น Constructor กำหนด มิเช่นนั้น จะเกิด error!!!

นี่เป็นรูปแบบทั่วไปของการสร้าง Constructor ซึ่งเราสามารถกำหนดรูปแบบอื่นๆได้อีก เช่น

Named Parameter

สามารถนำเอาแนวคิดของ Named Parameter มาผสมกับ Constructor ได้ เมื่อพารามิเตอร์มีหลายตัว

class Employee {
  String name;
  int age;
  String address;

  Employee({this.name, this.age, this.address});
}

ตอนสร้าง object ก็ต้องใส่พารามิเตอร์แบบนี้

var man1 = Employee(name: 'John', age: 19, address: 'Bangkok');

สังเกตว่า ตอนประกาศฟังก์ชั่น ต้องใส่ {} ครอบพารามิเตอร์ ส่วนตอนใช้งานฟังก์ชั่น ไม่ต้องใส่
สามารถใส่พารามิเตอร์สลับตำแหน่งกันได้ด้วย เช่น

var man1 = Employee(address: 'Bangkok', name: 'John', age: 19);

การใช้ Named Parameter ถือว่าเป็น Optional ซึ่งถ้าไม่ใส่ค่า จะได้ null

var man1 = Employee(address: 'Bangkok', age: 19);
print(man1.name);
// output is null

สำหรับ field ที่กำหนดเป็น private ต้องประกาศฟังก์ Constructor ชั่นแบบนี้

class Employee {
  String _name;
  int _age;
  String _address;

  Employee({String name, int age, String address}) {
    this._name = name;
    this._age = age;
    this._address = address;
  }
}

หรือละ this แบบนี้

class Employee {
  String _name;
  int _age;
  String _address;

  Employee({String name, int age, String address}) {
    _name = name;
    _age = age;
    _address = address;
  }
}

จากนั้นก็สามารถประกาศตัวแปร object ได้เหมือนเดิม

แต่ถ้า field กำหนดเป็น final ล่ะ

class Employee {
  final String _name;
  final int _age;
  final String _address;

  Employee({String name, int age, String address}) {
    _name = name;
    _age = age;
    _address = address;
  }
}

จะติด error ยาวเป็นพรืดแน่นอน ถึงจะเอา final ไปใส่ใน Constructor ก็ยัง error อยู่ดี ว่าแต่ทำไมกันนะ?

เราไปหาคำตอบมาจากที่นี่ เค้าบอกว่า construction state มันจบก่อนที่จะทำงานตรง body ดังนั้น เราจึงต้อง กำหนด fianl ให้จบตั้งแต่ header ก่อนที่ body จะเริ่มทำงาน โดย initialize (ประกาศ) Constructor เป็นแบบนี้

class Employee {
  final String _name;
  final int _age;
  final String _address;

  Employee({String name, int age, String address}) :
    this._name = name,
    this._age = age,
    this._address = address;
}

สังเกตว่า เราจะเอา {} ที่ครอบ body ออก และเพิ่ม : เพื่อเชื่อม _name _age _address เนี่ย ให้เป็นเนื้อเดียวกันกับ header และใช้ , คั่นระหว่างกลาง

แน่นอนว่า เราก็สามารถละ this ได้เช่นเดียวกัน

class Employee {
  final String _name;
  final int _age;
  final String _address;

  Employee({String name, int age, String address}) :
    _name = name,
    _age = age,
    _address = address;
}

มาสร้าง object และ ปริ๊นต์ค่ากันหน่อย

var man1 = Employee(name: 'John', age: 19, address: 'Bangkok');
print(man1._name);
// output is John

Named Constructor

Dart ได้ให้ความสามารถในการสร้าง Constructor หลายๆตัว เรียกว่า Named Constructor มีรูปแบบ syntax แบบนี้

Class_name.constructor_name(param_list)

ยกตัวอย่าง

class Tourist {
  String name;
  String address;

  //Default Constructor
  Tourist(name) {
    this.name = name;
    }
  
  //Named Constructor
  Tourist.touristAddress(name, address) {
    this.name = name;
    this.address = address;
    print('I am ${this.name} and I come from ${this.address}');
  }
}

เมื่อถึงเวลาสร้าง object 2 ตัว จากคลาส Tourist

void main() {
  var tourist = Tourist('Bonnie');
  print(tourist.name);
  var touristPresentation = Tourist.touristAddress('Puppey', 'Estonia');
}
/* output
Bonnie
I am Puppey and I come from Estonia
*/

เราสามารถสร้าง object โดยใช้ Constructor ตัวไหนก็ได้ จากตัวอย่าง object tourist ใช้ default constructor ส่วน touristPresentation ใช้ named constructor ซึ่งเวลาใช้ต้องเรียกออกมาตาม syntax คือ Tourist.touristAddress('Puppey', 'Estonia'); นั่นเอง

Class Inheritance

ต่อมา เราจะพูดถึงการสืบทอดคลาส (Inheritance) ซึ่งเป็นคุณสมบัติหนึ่งของคลาส โดยสืบทอดคลาส จากคลาสแม่ (Parrent or Super Class) ไปยัง คลาสลูก (Child or Sub Class) ทำให้ คลาสลูกจะได้ คุณสมบัติ (Fields) และเมธอดทั้งหมดจากคลาสแม่มาด้วย

การ inherit จะใช้ extends เป็น keyword ซึ่งมี syntax แบบนี้

class child_class_name extends parent_class_name

ยกตัวอย่าง

class Alcohol {
  Alcohol() {
    print('Cheers!!');
  }
}

class Beer extends Alcohol {}

void main() {
  var pileOfBeer = Beer();
}

/*
Cheers!!
*/

การสืบทอดคลาส ปกติในภาษาโปรแกรมแบบ Imperative ประเภท OOP จะมีการสืบทอดคลาสใน 3 ลักษณะ ได้แก่
-Single คือ สืบทอดมาจากคลาสแม่เดียว
-Multiple คือ สืบทอดมาจากคลาสแม่หลายคลาส
-Multi-level คือ สืบทอดมาจากคลาสลูกอันอื่น

Dart ไม่สนับสนุนแบบ Multiple

Class Inheritance and Method Overriding

การใช้คุณสมบัติหนึ่งจากการสืบทอดคลาสคือ การเอา Method ของคลาสแม่มาดัดแปลงเป็นของตัวเอง เรียกว่า Method Overriding สามารถใช้ได้ผ่าน keyword @override

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

void main() { 
   Child c = new Child(); 
   c.m1(12); 
} 
class Parent { 
   void m1(int a){ print("value of a ${a}");} 
}  
class Child extends Parent { 
   @override 
   void m1(int b) { 
      print("value of b ${b}"); 
   } 
}

/*
value of b 12
*/

จากตัวอย่าง เราสร้างคลาสลูกสืบทอดจากคลาสแม่ ในคลาสแม่มี method m1 เมื่อเอามาเป็น method ของลูกแล้ว สามารถดัดแปลงได้ ใส่ @override ข้างบน ก่อนทำการแปลง
ข้อจำกัดคือ
1.data type ของ method จะต้องเหมือนกัน ทั้งของแม่ของลูก
2.จำนวณพารามิเตอร์ใน method จะต้องเหมือนกัน ทั้งของแม่ของลูก
3.data type ของพารามิเตอร์ใน method จะต้องเหมือนกัน ทั้งของแม่ของลูก

ในตัวอย่าง m1 ของแม่ เป็น void มีพารามิเตอร์ 1 ตัว เป็น int ซึ่งของลูกก็ต้องเป็น void และรับค่าพารามิเตอร์ 1 ตัว เป็น int เช่นเดียวกัน

ยกตัวอย่างกรณีที่ data type ของพารามิเตอร์ใน method แม่ลูกต่างกัน

void main() { 
   Child c = new Child(); 
   c.m1(12); 
} 
class Parent { 
   void m1(int a){ print("value of a ${a}");} 
} 
class Child extends Parent { 
   @override 
   void m1(String b) { 
      print("value of b ${b}");
   }
}
/*
Error: The parameter 'b' of the method 'Child.m1' has type 'String', which does not match the corresponding type, 'int', in the overridden method, 'Parent.m1'.
Change to a supertype of 'int', or, for a covariant parameter, a subtype.
*/

ถ้าเป็นกรณีจำนวณพารามิเตอร์ไม่เท่ากัน จะ throw error ออกมา

void main() { 
   Child c = new Child(); 
   c.m1(12); 
} 
class Parent { 
   void m1(int a){ print("value of a ${a}");} 
} 
class Child extends Parent { 
   @override 
   void m1(String b, int d) { 
      print("value of b ${b} and ${d}");
   } 
}
/*
Unhandled exception:
Class 'Child' has no instance method 'm1' with matching arguments.
NoSuchMethodError: incorrect number of arguments passed to method named 'm1'
*/

ในบทความนี้ บอกรายละเอียดพื้นฐานของคลาส ในส่วนที่เป็น Constructor และ Inheritance เนื่องจากมีรายละเอียดที่จำเป็นต้องทำความเข้าใจและยกตัวอย่างมาประกอบจำนวณมาก เลยเขียนมาซะยืดยาวเลย จึงขอยกคุณสมบัติอื่นของคลาสเช่น Static Keyword, Super Keyword และเรื่องอื่นๆ ทั้ง Library หรือ Package , Typedefs ไปจนถึง generic ไปยังบทความหน้า เพื่อไม่ให้บทความมันยืดเกินไปครับ

Reference

https://www.tutorialspoint.com/dart_programming/dart_programming_classes.htm

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

การสร้างหัวข้อ

# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header

Source Code

ใช้ ` ครอบหัว-ท้าย สำหรับโค้ดบรรทัดเดียว
ใช้ ``` ครอบหัว-ท้าย สำหรับโค้ดหลายๆบรรทัด

` Inline code `



```Multi-line code```

สามารถเพิ่ม comment ได้ด้วย

```comment
Multi-line code with comment ```

ยกตัวอย่าง

```Javascript
console.log(‘Hello World’); ```

การสร้าง Link

สมมติว่า ต้องการฝังลิงค์ไปที่ข้อความตรง “ description of link” ให้เขียน syntax แบบนี้

Text for description of link [description of link](http://…...)

จะมีค่าเท่ากับ syntax ของ HTML ดังนี้

Text for <a href=’http://…….’>description of link</a>

Anchor

Anchor คือ ลิงค์ที่ใช้เชื่อมโยงเข้ากับส่วนข้อความใดๆที่อยู่บนหน้าเว็บ
การใช้ Anchor เพื่อสร้าง link เชื่อมโยงไปหาข้อความที่ต้องการ

At URL http://yourwebsite.com

...

### <a name="title-text"></a>Title Text

...

And then later, I want to go to [title](#title-text), you create a link, just like any other.

จะได้ Link <http://yourwebsite.com#title-text> หน้าหัวข้อ Title Text สามารถเอาลิงค์ไปแปะที่ส่วนอื่นๆของหน้าเว็บ เช่น [title](#title-text)

สามารถทดสอบการทำงานโดย

กด ตรงนี้ เพื่อไปยังหัวข้อ anchor

Images

การแนบรูปภาพใน Markdown ก็ทำได้เช่นกัน

แบบไม่มี link

![Image Alt](/path/to/image.jpg)

ถ้าแนบ link ของรูปด้วย

[![Image Alt](/path/to/image.jpg)](http://........)

Escape

การยกเว้นการแสดงผลของสัญลักษณ์ใน Markdown ด้วยการใช้ \

\*Just a simple text\*

จะได้

*Just a simple text*

นอกจาก \ ยังมีเครื่องหมายอื่นๆอีกที่สามารถทำได้ ดูเพิ่มเติม

Tables

สามารถสร้างตารางได้ โดยใช้ | column และใช้ --- คั่นระหว่าง Header กับ Content และใช้ : สำหรับปรับ Align

ใช้ | ปิดหัว-ท้ายหรือไม่ก็ได้

แบบเปิด

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell 

แบบปิด

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

ถ้าต้องการปรับ Align

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

Table of Contents

สร้าง List แสดงหัวข้อรายการบนบทความเราได้ เพื่ออำนวยความสะดวกให้กับผู้อ่านได้เลือกหัวข้ออ่าน โดยไม่ต้อง scroll mouse ลงมา มี 2 แบบ คือ

แบบ Drop down

[TOCM]

แบบ List แสดงหัวข้อหลัก หัวข้อย่อย เรียงตามลำดับเนื้อหา

[TOC]

ทั้งหมดนี้เป็นเพียงส่วนหนึ่งที่ใช้บ่อยๆในงานเขียนบทความของผมเท่านั้น ซึ่ง Markdown เป็นเครื่องมือที่เหมาะสมกับงานเขียนมาก เพราะไม่ต้องพะวงกับการใช้ tag และ Attribute ต่างๆเหมือน HTML เพียงทำงานเหมือนโปรแกรมเอกสารทั่วไป เช่น MS-Word และฝึกการใช้ syntax เล็กน้อยก็สามารถผลิตบทความออกมาได้แล้วครับ

Ref :

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links

https://www.markdownguide.org/basic-syntax/

https://pandao.github.io/editor.md/en.html#Editor.md

https://dev.to/stephencweiss/named-anchors-markdown-2hm5

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

ลองเข้า Google ดู ก็พบว่า การทำแอพสมัยนี้ นิยมใช้ hybrid platfrom หรือ cross platform มากขึ้น และน่าจะเป็นเทรนด์ในอนาคตไปอีกยาวไกลแน่ๆ โดยเฉพาะเมื่อถึงปี 2020 ที่ผ่านมานั้น ยอดการใช้งานเฟรมเวิร์คมีแนวโน้มสูงขึ้นชัดเจน ด้วยความที่สะดวกต่อการพัฒนา ใช้เวลาและงบประมาณน้อย ถึงแม้ประสิทธิภาพบางอย่างอาจจะไม่เท่า native แต่ใช้ IDE ได้หลากหลาย แถมคอมมูที่ใหญ่มากขึ้นเรื่อยๆ จึงไม่น่าแปลกใจๆที่ใครก็อยากลองใช้งาน cross-platform framework ซักตัวนึงไว้ประดับเกียรติยศ

ฉะนั้นแล้ว ผมจึงขอจิ้มไปที่ Flutter ละกัน เหตุอันเนื่องมาจากข้อมูลนี้

Flutter อยู่อันดับสองของรายการ แต่เมื่อดูเปรียบเทียบ y-y จะเห็นว่า เป็นอันเดียวที่มีแนวโน้มพุ่งทะยานสุด ขณะที่หลายๆตัวแผ่วลงไป เลยขออนุญาตศึกษาตัวนี้ละกัน (ขออนุญาตใคร?)

ทำไมต้อง Dart ?

ด้วยความเป็น Flutter มันอยู่บนพื้นฐานของการใช้ Dart ในการพัฒนา ดังนั้น เราก็ต้องเรียนการใช้งานตั้งแต่ตัวภาษาไปก่อน แล้วค่อยต่อยอดไปสู่การทำแอพ ดังนั้นบทความนี้จะเป็นบันทึกจากการเรียนภาษา Dart ตั้งแต่เบื้องต้น ซึ่งผมนั้นได้เรียนจากทั้งสื่อไทยและเทศ แล้วก็เอามาสรุปตามความเข้าใจของตัวเอง ซึ่งก็ อาจจะมีส่วนผิดพลาดตามปกติวิสัยของมนุษย์ ยังไงก็ขออภัยนะครับ

เริ่มกันเลยครับ ขอข้ามส่วนพื้นฐานบางอย่างไปเพื่อจะได้ไปเน้นที่รูปแบบโครงสร้าง (paradigm) ของการทำงานเลยละกันนะครับ

เวอร์ชั่นที่เรียนรู้จะเป็น Dart 2

บทความนี้ จะขอแบ่งการเรียนรู้ของภาษาตาม syntax ออกเป็นหมวดๆ ตามนี้

1. Variables and Operators
2. Expressions
3. Decision Making and Looping Constructs
4. Comments
5. Functions
6. Classes
7. Libraries and Packages
8. Typedefs
9. Data structures represented as Collections / Generics

Variables and Operators

เริ่มต้นด้วยฟังก์ชั่น main() แบบนี้

main() {
<statements>
}

ฟังก์ชั่นนี้เป็นส่วนแสดงผลของโปรแกรม ในทุกๆการ coding ของภาษา Dart เราใช้ main() ในการกำหนดตัวแปรหรือใช้ฟังก์ชั่นใดๆก็ตาม
ตัวแปร (Variable) หมายถึง การตั้งชื่อ space ในเมโมรี่ของเครื่อง แล้วบรรจุหรือกำหนดค่า (value) ให้มัน ชื่อของตัวแปรมีศัพท์เทคนิค(จะถูกเรียก)ว่า “identifier”
กฏการตั้งชื่อตัวแปร

• ห้ามเป็น keyword
• ประกอบด้วย พยัญชนะ หรือ สระ ห้ามมีสัญลักษณ์พิเศษ ได้แก่ underscore (_) และ dollar sign ($)
• ห้ามขึ้นต้นด้วยตัวเลข
• เป็น case-sensitive ยกตัวอย่าง john จะไม่เท่ากับ John
• ห้ามมีช่องว่าง เช่น “John Doe”

Variable

การประกาศตัวแปร จะมีการใช้ keyword ก่อนเสมอ แล้วตามด้วยชื่อตัวแปร

Keyword เป็นได้ทั้ง Access Modifier (var, final, const) และ Data Type

Data Type

Dart มีการประกาศตัวแปรโดยใช้ Data Type ดังนี้

เราสามารถประกาศตัวแปรแบบใส่ type ก่อนหรือไม่ใส่ก็ได้

ถ้าระบุ type : ใช้ Data Type แล้วตามด้วยชื่อตัวแปร

data_type variable_name

หรือจะใช้ Access Modifier (final, const) ร่วมด้วยก็ได้

access_modifier data_type variable_name

ข้อควรระวัง ถ้าประกาศ var ซ้อนกันกับ Data Type จะ error!

ถ้าไม่ระบุ type : ใช้ Access Modifier (var, final, const) แล้วตามด้วยชื่อตัวแปรเลย โดย type จะเป็นไปตามชนิดของ value ที่กำหนด

access_modifier variable_name

var hero_1 = ‘Abaddon’  	//String
var id = 123 		 	//Number
final num_list = [1,2,3]; 	//Lists

ข้อควรระวัง ถ้าประกาศ Access Modifier ซ้อนกันกับ Data Type จะ error!

Note 1 : เราจะสังเกตว่า ตัว Access Modifier (var) กับ Data Type (dynamic) ต่างสามารถใช้กำหนดตัวแปรชนิดไหนก็ได้ แต่ทั้งสองมีข้อแตกต่างกันตรงที่ dynamic เปลี่ยน type ได้เรื่อยๆ เช่น

dynamic a = 1; 			// เป็น int
a = true;  			// ตอนนี้เป็น bool ละ

ส่วน var กำหนดตัวแปรเป็น type อะไรแล้ว ถ้าจะเปลี่ยนค่า ก็ต้องเป็น type เดิม เช่น

var b = 2;		// เป็น int
b = 3;			// ยังเป็น int อยู่
b = ‘handsome’;		// error เพราะเปลี่ยน type จาก int เป็น String ไม่ได้

Note 2 : ตัวแปรที่เป็น const ต่างจาก final ตรงที่ เฉพาะ const เท่านั้นจะถูกคำนวณ “compile time constant”
compile time constant เป็นค่าคงที่ที่ถูกกำหนดตอนคอมไพล์ (compile time) ใน Dart มีแค่ const ตัวเดียว ที่เหลือจะถูกสร้างตอนรัน (run time) ทั้งหมด อ่านต่อได้ที่โพสต์ของ Tamemo

Operator

คือตัวดำเนินการทางคณิตศาสตร์ที่ใช้ประเมินผล (evaluate) หรือกำหนดค่า (assign) แบ่งออกเป็นกลุ่มตามการใช้งานได้ดังนี้

Arithmetic Operators

Operator ใน Dart ก็เหมือนกับภาษาอื่นๆ คือมี + (บวก), - (ลบ), * (คูณ), / (หาร type double), ~/ (หาร type integer), % (modulo: หาเศษจากหาร) ++ (increment), -- (decrement) นอกจากนั้น ก็มี -() (Unary minus : เปลี่ยนค่าเป็นค่าตรงข้าม เช่น -(2) => 2)

Equality and Relational Operators

เอาไว้กำหนดความสัมพันธ์ระหว่างตัวแปรสองตัว เช็คค่าตัวแปร ทำให้ได้คำตอบออกมาเป็น Boolean (true, false) ได้แก่ > (มากกว่า), < (น้อยกว่า), => (เท่ากับหรือมากกว่า), =< (เท่ากับหรือน้อยกว่า), == (เท่ากับ), != (ไม่เท่ากับ)

Type test Operators

เอาไว้เช็ค type ของตัวแปร ตอน runtime ได้แก่ is และ is!

var e;
print(e is int);			// false
print(e is! int);			// true

แต่สำหรับ String ต้องใส่ค่าก่อนนะ (ไม่เป็น null) ไม่งั้นเช็ค type จะเป็น false

String a;
print(a is String);		// false
String b = 'aaa';
print(b is String);		// true

Bitwise Operators

คือ ตัวดำเนินการแบบบิต เป็นตัวดำเนินการที่ใช้กับชนิดข้อมูลเลขจำนวนเต็ม (integer) เท่านั้น โดยจะแปลงเป็นเลขฐาน 2 (8-bit) ก่อนดำเนินการ หลังจากนั้น จะแปลงค่ากลับเป็นฐาน 10 กลับมา ซึ่งมีตัวเนินการได้แก่

& (AND) เป็นการหาเลข 1 ที่ตำแหน่ง(บิด)เดียวกัน มีเงื่อนไขดังนี้
ถ้า 1&1 เป็น 1, ถ้า 1&0 เป็น 0, ถ้า 0&1 เป็น 0, ถ้า 0&0 เป็น 0
ยกตัวอย่าง

5 & 3  มีค่าเท่ากับ 1  เนื่องจาก
5 แปลงเป็นเลขฐานสองได้เป็น		0000 0101
3 แปลงเป็นเลขฐานสองได้เป็น		0000 0011
ผลลัพธ์เมื่อ AND กันแต่ละบิต ได้	0000 0001 มีค่าเท่ากับ 1 (เลขฐานสิบ)

| (Or) เป็นการตัวเลข 1 อย่างน้อย 1 ตามตำแหน่งเข้าด้วยกัน มีเงื่อนไขดังนี้
ถ้า 1|1 เป็น 1, ถ้า 1|0 เป็น 1, ถ้า 0|1 เป็น 1, ถ้า 0|0 เป็น 0
ยกตัวอย่าง

5 | 3  มีค่าเท่ากับ 7  เนื่องจาก
5 แปลงเป็นเลขฐานสองได้เป็น		0000 0101
3 แปลงเป็นเลขฐานสองได้เป็น		0000 0011
ผลลัพธ์เมื่อ OR กันแต่ละบิต ได้	0000 0111 มีค่าเท่ากับ 7 (เลขฐานสิบ)

^ (XOR) เป็นการตัวเลข 0 อย่างน้อย 1 ตามตำแหน่งเข้าด้วยกัน มีเงื่อนไขดังนี้
ถ้า 1^1 เป็น 0, ถ้า 1^0 เป็น 1, ถ้า 0^1 เป็น 1, ถ้า 0^0 เป็น 1
ยกตัวอย่าง

5 | 3  มีค่าเท่ากับ 6  เนื่องจาก
5 แปลงเป็นเลขฐานสองได้เป็น		0000 0101
3 แปลงเป็นเลขฐานสองได้เป็น		0000 0011
ผลลัพธ์เมื่อ XOR กันแต่ละบิต ได้	0000 0110 มีค่าเท่ากับ 6 (เลขฐานสิบ)

~ (NOT) เป็นการกลับค่าในแต่ละตำแหน่ง จาก 1 เป็น 0 และจาก 0 เป็น 1
ยกตัวอย่าง

~3  มีค่าเท่ากับ 4294967292  เนื่องจาก
3 แปลงเป็นเลขฐานสองได้เป็น		0000 0011
3 จะถูกกลับค่าได้เป็น		1111 1100 มีค่าเท่ากับ 4294967292 (เลขฐานสิบ)

<< (Left shift) หมายถึงการเลื่อนบิตไปทางซ้ายมือ เช่น

5<<2 มีค่าเท่ากับ 20 เนื่องจาก
5 แปลงเป็นเลขฐานสองได้เป็น       				0000 0101
เลื่อนบิตซ้ายสุดของตัวตั้งไปเป็นจำนวน 2 บิต ได้เป็น  		00 | 0001 0100
ผลลัพธ์ของการเลื่อนบิตทางขวาของ 5<<2 คือ 			0001 0100 มีค่าเท่ากับ 20
(คิดง่ายๆ คือการตัดเลขทางซ้ายสุด แล้วเอา 0 มาต่อทางขวาสุดให้ครบ 8 bit นั่นแหละ)

>> (Right shift) หมายถึงการเลื่อนบิตไปทางขวามือ เช่น

5>>2 มีค่าเท่ากับ 1 เนื่องจาก
5 แปลงเป็นเลขฐานสองได้เป็น       				0000 0101
เลื่อนบิตขวาสุดของตัวตั้งไปเป็นจำนวน 2 บิต ได้เป็น  		0000 0001 | 01
ผลลัพธ์ของการเลื่อนบิตทางขวาของ 5>>2 คือ 			0000 0001 มีค่าเท่ากับ 1
(คือการตัดเลขทางขวาสุด แล้วเอา 0 มาต่อทางซ้ายสุดให้ครบ 8 bit นั่นแหละ)

Assignment Operators

เป็นตัวดำเนินการที่เป็นการกำหนดค่าให้ตัวแปร มีดังนี้

= (Simple Assignment)
คือการกำหนดค่าตัวแปรให้เป็นค่าต่างๆ คืนค่าเป็นค่าที่กำหนดให้

??=
กำหนดค่าให้ตัวแปรถ้าตัวแปรนั้นเป็น null ถ้าตัวแปรนั้นไม่ใช่ null ค่าของตัวแปรนั้นจะคงเดิม

+= (Add and Assignment)
คือการบวกค่าตัวแปรนั้นด้วยค่าที่กำหนด คืนค่าเป็นตัวแปรที่ผ่านการบวกแล้ว

─= (Subtract and Assignment)
คือการบวกค่าตัวแปรนั้นด้วยค่าที่กำหนด คืนค่าเป็นตัวแปรที่ผ่านการลบแล้ว

*= (Multiply and Assignment)
คือการบวกค่าตัวแปรนั้นด้วยค่าที่กำหนด คืนค่าเป็นตัวแปรที่ผ่านการคูณแล้ว

/= (Divide and Assignment)
คือการบวกค่าตัวแปรนั้นด้วยค่าที่กำหนด คืนค่าเป็นตัวแปรที่ผ่านการหารแล้ว

Logical Operators

ใช้รวมเงื่อนไขสองเงื่อนไขเข้าด้วยกัน จะคืนค่าออกมาเป็น boolean ตัวดำเนินการมีดังนี้
&& (And) จะเป็น true ถ้า ทั้งสองเงื่อนไขเป็นจริง
|| (Or) จะเป็น true ถ้า เงื่อนไขใดเงื่อนไขหนึ่งเป็นจริง
! (Not) กลับค่า boolean เช่น จาก true เป็น false

Expressions and Programming Constructs

Expression

คือ statement ที่ประเมินผลที่มาจาก Operands และ Operator ได้ผลเป็น ค่า (value) ออกมา ถ้าพิมพ์ expression บน command line interpreter จะทำการประเมินผลและแสดงผลลัพธ์ เช่น

>>> 1 + 2
3

ในตัวอย่าง Operands คือ 1 กับ 2 ส่วน Operator คือ +

แม้ว่า expression จะประกอบไปด้วย Operands และ Operator แต่ไม่จำเป็นที่ทุก expression ต้องประกอบไปด้วย elements ครบทั้งสอง แค่ Operands อย่างเดียว จะถูกพิจารณาว่าเป็น expression ได้เช่นเดียวกัน เช่น

>>> 17
17

>>> x
2

และการประเมินผลของ expression นั้นจะไม่เหมือนกับการสั่ง print โดยทีเดียว
ตัวอย่าง

>>> message = " What’s up, Doc?"
>>> message
" What’s up, Doc?"

Conditional Expressions

Syntax ของการใส่เงื่อนไขเพื่อแสดง expression นอกจาก การใช้ if….else แบบทั่วไปแล้ว ยังสามารถเขียนในรูปแบบต่างๆดังต่อไปนี้ได้อีก เช่น

condition ? expr1 : expr2

ตัวอย่าง

var a = 50;
var b = a>30 ? a+12 : a;
print(b);		// output = 62

expr1 ?? expr2

ตรวจสอบว่า ถ้า expr1 ไม่ใช่ null จะคืนค่านั้นออกมา ถ้าเป็น null จะคืนค่าจาก expr2
ตัวอย่าง

var a;
var b = a ?? 800;
print(b);		// output = 800

ต่อมาจะพูดถึง syntax ที่ใช้สำหรับสร้างทางเลือกเพื่อตัดสินใจ และการใช้คำสั่งวนซ้ำ

Decision Making

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

if(boolean_expression){ 
   // statement(s) will execute if the Boolean expression is true. 
}

การใช้ if...else เพื่อสร้างทางเลือก 2 ทาง ถ้าทางเลือกแรกเป็นเท็จ ถึงจะรัน statement ทางเลือกที่สอง

if(boolean_expression){ 
   // statement(s) will execute if the Boolean expression is true. 
} else { 
   // statement(s) will execute if the Boolean expression is false. 
}

การใช้ if….if else…..else จะคล้ายกันกับ if...else แต่เป็นการสร้างทางเลือกมากกว่า 2 ทาง และจะดูเงื่อนไขเรียงลำดับไปเรื่อยๆจนถึงอันที่ถูก จากนั้นก็จะรันคำสั่ง แล้วออกจาก decision

if (boolean_expression1) { 
   //statements if the expression1 evaluates to true 
} 
else if (boolean_expression2) { 
   //statements if the expression2 evaluates to true 
} 
else { 
   //statements if both expression1 and expression2 result to false 
}

Switch Case เป็น statement ที่ใช้สร้างทางเลือกมากกว่า 2 ทาง อีกแบบหนึ่ง โดย

• ใช้ switch เป็น statement หลัก ตามด้วยตัวแปรที่เก็บค่า expression เพื่อเข้าสู่การพิจารณาเงื่อนไข
• ใช้ case เป็นทางเลือกต่างๆ และพิจารณา case ที่จะ match กับ expression กับ switch ตามลำดับ จากบนลงล่าง
• ทางเลือกสุดท้าย จะใช้เป็น default แทน โดย ไม่ต้องมี expression เหมือนกับ case
• ถ้า case ใดเป็นจริง จะรันคำสั่งที่กำหนดใน case นั้นๆ และออกจาก statement ด้วย break
• ถ้าไม่ใช้ break กำกับต่อท้ายของแต่ละ case โปรแกรมจะไม่หยุดทำงาน และดู case ต่อไปอีก

switch(variable_expression) { 
   case constant_expr1: { 
      // statements; 
   } 
   break; 
  
   case constant_expr2: { 
      //statements; 
   } 
   break; 
      
   default: { 
      //statements;  
   }
   break; 
}

ตัวอย่าง Switch Case

print('What do you do, guys?');
String bob = 'Rob a bank.';
print(bob);
  
switch(bob) {
  case 'Study English.' : {print('May you have a good future.');}
  break;
    
  case 'Do nothing.' : {print('It\'s up to you.');}
  break;
      
  case 'Rob a bank.' : {print('Please go to jail, Police!!!');}
  break;
      
  default : {print('Are you a OK?');}
  break;
}

/*
 Output
 What do you do, guys?
 Rob a bank.
 Please go to jail, Police!!!
*/

คำสั่งวนซ้ำ (Loop)

เราสามารถจำแนกรูปแบบคำสั่งวนซ้ำ ได้ 2 ประเภทใหญ่ๆคือ

1. แบบ Definite เป็นการกำหนดจำนวณรอบวนซ้ำ ซึ่งใช้กับรูปแบบ for
2. แบบ Indefinite ไม่กำหนดจำนวณรอบ ซึ่งใช้กับรูปแบบ while และ do...while

รูปแบบ for

สามารถใช้ syntax ได้ 2 แบบ คือ แบบ semicolon (;) คั่น และ แบบที่ใช้ in (เหมือนภาษา Python)

1. แบบ semicolon

for (initial_count_value; termination-condition; step) { 
   //statements 
}

initial_count_value คือ expression ระบุค่าตั้งต้น บอกให้โปรแกรมรุ้ว่าจะเริ่มที่ค่าอะไร
termination-condition คือ expression ที่เป็นจุดสิ้นสุด คำสั่งวนซ้ำจะทำงานไปจนกว่าจะเป็นเท็จ
step คือ expression ที่บอกว่าคำสั่งวนซ้ำทำงานจบลง 1 ครั้งนั้น จำนวณรอบมีการเปลี่ยนแปลงยังไง

ตัวอย่าง

var num = 5; 
var factorial = 1; 
   
for( var i = num ; i >= 1; i-- ) { 
   factorial *= i ; 
} 
print(factorial);

จากตัวอย่าง หมายความว่า คำสั่งวนซ้ำจะเริ่มทำงานที่ i = num ไปจนกว่า (i >= 1) จะเป็นเท็จ โดยที่ จำนวณรอบจะลดลงทีละ 1 (i--)

2. แบบที่ใช้ in

for (variable_name in object){  
   statement or block to execute  
}

variable_name แทนถึง สมาชิกทุกตัวที่อยู่ใน object นั้น

ตัวอย่าง

var obj = [12,13,14]; 
   
for (var prop in obj) { 
   print(prop); 
}			// output is 12 13 14

รูปแบบ while

รูปแบบการทำงาน จะดูเงื่อนไขก่อนแล้วค่อยรันคำสั่ง
ใช้ while เป็นตัวเช็คเงื่อนไข แล้วค่อยเริ่มคำสั่ง จะทำงานวนซ้ำไปเรื่อยๆจนกว่าเงื่อนไขเป็น false

while (expression) {
   Statement(s) to be executed if expression is true  
}

ยกตัวอย่าง

void main() { 
   var num = 5; 
   var factorial = 1; 
   
   while(num >=1) { 
      factorial = factorial * num; 
      num--; 
   } 
   print("The factorial  is ${factorial}"); 
} 

ได้คำตอบออกมาเป็น

The factorial is 120

รูปแบบ do...while

รูปแบบการทำงาน จะรันคำสั่งก่อนแล้วค่อยดูเงื่อนไข
ใช้ do เป็นตัวเริ่มคำสั่ง แล้วใช้ while เป็นตัวเช็คเงื่อนไข จะทำงานวนซ้ำไปเรื่อยๆจนกว่าเงื่อนไขเป็น false

do {  
   Statement(s) to be executed;  
} while (expression);

ยกตัวอย่าง

void main() { 
   var n = 10; 
   do { 
      print(n); 
      n--; 
   }
   while(n>=0); 
} 

ได้คำตอบเป็น

10 
9 
8 
7 
6 
5 
4 
3 
2 
1 
0

Comment

คือ ข้อความที่โปรแกรมไม่สนใจ (ignored) เมื่อเวลา compile โค้ด ใช้สำหรับอธิบาย หรือบอกส่วนต่างๆของโค้ดให้ผู้พัฒนาคนอื่นๆเข้าใจได้ง่ายขึ้น
เราจะใช้ // แล้วตามด้วยข้อความ เมื่อต้องการ comment บรรทัดเดียว ส่วนถ้าหลายบรรทัด จะใช้ /*.... */
เช่น

// this is single line comment  
  
/* This is a   
   Multi-line comment  
*/

Function

ฟังก์ชั่นในภาษา Dart มีความคล้ายกับ Javascript ค่อนข้างมาก เช่น

รูปแบบปกติ

int add (int a, int b) {
  return a + b;
}

void main() {
	print(add(3,5));
}    //คำตอบ 8

ตรงฟังก์ชั่น add สามารถลดรูปลงเหลือ

add (a, b) {
  return a + b;
}

Arrow Function

รูปแบบ Arrow Function ก็ทำได้

add (a, b) => a + b;

Classes

การสร้าง class ใช้ keyword class มีรูปแบบดังนี้

class class_name {  
   <fields> 
   <getters/setters> 
   <constructors> 
   <functions> 
}

ยกตัวอย่างการสร้างคลาส
สร้างไฟล์ class_public.dart แล้วสร้างคลาส Weapon ขึ้นมา

class Weapon {
  // fields
  String name;
  int volume;
  
  // getters/setters
  // getters
  String get weapon_name {
    return name;
  }
  int get weapon_volume {
    return volume;
  }
  // setters
  void set weapon_name(String name) {
    this.name = name;
  }
  void set weapon_volume(int volume) {
    if(volume<=10) {
      print('Go back home right now!');
    } else {
      this.volume = volume;
    }
  }
}

ในไฟล์ main.dart สร้าง function main() แบบนี้

import 'class_public.dart';

void main() { 
  Weapon set_1 = new Weapon();
  set_1.weapon_name = 'Rocket Flare';
  set_1.weapon_volume = 5;
  print(set_1.weapon_name); 
  print(set_1.weapon_volume); 
}

เมื่อกดรันจะได้ output เป็น

Go back home right now!
Rocket Flare
null

จะเห็นว่า มีการกำหนด getters/setters เพื่อกำหนดค่าให้กับตัวแปร และคืนค่าของตัวแปรที่กำหนดให้
ในส่วน main ก็มีการกำหนดค่าตัวแปรผ่าน setter และ statement ในนั้นจะทำงานทันที เมื่อกดรันโค้ดจะทำให้ข้อความในเงื่อนไขถูก print ออกมา ส่วน weapon_name กับ weapon_volume ก็ถูกสั่ง print ตามปกติ เพียงแต่ตัวแปร volume ไม่ได้ถูกเก็บค่าเอาไว้จาก statement เงื่อนไขที่อยู่ภายใน setter weapon_volume

ถ้าเราเปลี่ยนส่วนของ main เป็นแบบนี้ล่ะ

void main() { 
  Weapon set_1 = new Weapon();
  set_1.name = 'Rocket Flare';
  set_1.volume = 5;
  print(set_1.weapon_name); 
  print(set_1.weapon_volume); 
}

หรือว่าแบบนี้

void main() { 
  Weapon set_1 = new Weapon();
  set_1.name = 'Rocket Flare';
  set_1.volume = 5;
  print(set_1.name); 
  print(set_1.volume); 
}

จะได้ output เป็น

Rocket Flare
5

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

เราลองหา keyword ที่ใช้กำหนดความเป็นส่วนตัว ก็พบว่า ไม่มี! ทำไมอ่ะ แล้วที Java ยังมี private แล้วทำไม Dart ไม่มีแบบนั้นบ้างอ่ะ ก่อนที่จะเริ่มหัวร้อนไปมากกว่านี้ เราก็ค้นพบต่อไปอีกว่า จะเป็นตัวแปรจากสถานะ public ให้เป็น private นั้น ไม่ต้องใช้คีย์ใดๆทั้งสิ้น ใช้แค่ “_” ก็พอ เช่น

เปลี่ยน name (public) เป็น _name (private)
เปลี่ยน volume (public) เป็น _volume (private)

สร้างไฟล์ class_private.dart และเปลี่ยนโค้ดใหม่เป็น

class Weapon {
  // fields
  String _name;
  int _volume;
  
  // getters/setters
  // getters
  String get weapon_name {
    return _name;
  }
  int get weapon_volume {
    return _volume;
  }
  // setters
  void set weapon_name(String name) {
    this._name = name;
  }
  void set weapon_volume(int volume) {
    if(volume<=10) {
      print('Go back home right now!');
    } else {
      this._volume = volume;
    }
  }
}

ในไฟล์ main.dart ลองกดรันดูด้วยโค้ดเดิม

void main() { 
  Weapon set_1 = new Weapon();
  set_1.name = 'Rocket Flare';
  set_1.volume = 5;
  print(set_1.weapon_name); 
  print(set_1.weapon_volume); 
}

จะได้ output เป็น

main.dart:5:9: Error: The setter 'name' isn't defined for the class 'Weapon'.
 - 'Weapon' is from 'class_private.dart'.
Try correcting the name to the name of an existing setter, or defining a setter or field named 'name'.
  set_1.name = 'Rocket Flare';
        ^^^^
main.dart:6:9: Error: The setter 'volume' isn't defined for the class 'Weapon'.
 - 'Weapon' is from 'class_private.dart'.
Try correcting the name to the name of an existing setter, or defining a setter or field named 'volume'.
  set_1.volume = 5;
        ^^^^^^
exit status 254

นั่นแสดงว่า ตัวแปร name กับ volume ไม่สามารถกำหนดค่าได้จากภายนอกได้แล้ว ต้องใช้การกำหนดค่าผ่านทาง getters เท่านั้น

เปลี่ยนโค้ดที่ main.dart เป็น

import 'class_private.dart';

void main() {
  Weapon set_1 = new Weapon();
  set_1.weapon_name = 'Rocket Flare';
  set_1.weapon_volume = 5;
  print(set_1.weapon_name); 
  print(set_1.weapon_volume);
}

จะได้ output เป็น

Go back home right now!
Rocket Flare
null

นี่เป็นตัวอย่างการสร้างความเป็นส่วนตัวของคลาสเพื่อความปลอดภัยของข้อมูล

นอกจากนั้น เราสามารถใช้ constructor เพื่อกำหนดค่าตัวแปร แทน setter ได้เช่นกัน
ไฟล์ class_constructor.dart

class Weapon {
  // fields
  String _name;
  int _volume;
  
  // getters/setters
  // getters
  String get weapon_name {
    return _name;
  }
  int get weapon_volume {
    return _volume;
  }
  // Constructor
  Weapon(String name, int volume) {
    this._name = name;
    if(volume<=10) {
      print('Go back home right now!');
    } else {
      this._volume = volume;
    }
  }
}

ที่ไฟล์ main.dart ก็ลดโค้ดไปเหลือแค่นี้เอง

import 'class_constructor.dart';

void main() {
  Weapon set_1 = new Weapon('Rocket', 5);
  print(set_1.weapon_name); 
  print(set_1.weapon_volume);
}

จะได้ output เป็นแบบเดิม

Go back home right now!
Rocket
null

จะเห็นได้ว่า ได้คำตอบเดียวกัน แต่ลดปริมาณโค้ดลง เนื่องจากตัด setters ออกแล้วใช้ constructor ให้กำหนดค่าแทน แล้วเมื่อกำหนด object ใน main ก็เพียงใส่ parameter ให้ class ไปด้วยเลย ไม่ต้องเพิ่ม statement เพื่อกำหนดค่าอีก

ตัว constructor สามารถกำหนดค่าโดยที่ไม่ต้องใช้ this ได้

Weapon(String name, int volume) {
    _name = name;
    if(volume<=10) {
      print('Go back home right now!');
    } else {
      _volume = volume;
    }
}

สามารถแปลงได้อีกแบบนึง โดย constructor รับ parameter เข้ามาแล้วกำหนดไว้ในตัวแปรเลย
จากนั้น แปลง if statement นิดหน่อย จะได้คำตอบออกมาเหมือนเดิม

Weapon(this._name, this._volume) {
    if(_volume<=10) {
      _volume = null;
      print('Go back home right now!');
    } else {
      this._volume;
    }
}

ในส่วนของ class เอง ที่จริงก็ยังมีอีกหลายๆเรื่องที่จะต้องเรียนรู้ paradigm ในส่วนอื่นๆของภาษา เช่น Class Inheritance, Method Override, Static Keyword, Super Keyword รวมถึงหัวข้ออื่นๆอีกที่เหลือ ซึ่งจะขอเอาไปต่อใน Part หน้าครับ

อ้างอิง

https://en.wikipedia.org/wiki/Dart_(programming_language)

https://www.tutorialspoint.com/dart_programming/dart_programming_variables.htm

https://dev.to/centrilliontech/dart-101-dart-l4l

https://www.woolha.com/tutorials/dart-using-access-modifiers-private-public

https://sites.google.com/site/khasangkhwbkhumporkaermjava/taw-danein-kar-operators/2

https://th.wikibooks.org/wiki/วิธีคิดแบบนักวิทยาการคอมพิวเตอร์/Variables,_expressions_and_statements

Cover

https://commons.wikimedia.org/wiki/Category:Dart_(programming_language)#/media/File:Dart-logo-wordmark.svg

บทความฉบับนี้จะเป็นการเรียบเรียงเกี่ยวกับการใช้ฟังก์ชั่นพื้นฐานต่างๆ ในฟังก์ชั่น createServer ซึ่งก่อนอื่น ขอย้อนความไปยังใจความสำคัญของ Node.js ที่มาที่ไป และรูปแบบในกระบวนการทำงาน ซึ่งผมได้เคยกล่าวไว้ในบทความนี้

ต่อมา เราจะพูดถึงการกำหนดฟังก์ชั่นที่จำเป็นต้องใช้ในการทำ API (application Program Inrterface) ก็คือ โค้ดหรือคำสั่ง ที่ให้เครื่องคอม 2 เครื่องสื่อสารหากันได้ ในที่นี่ เครื่อง 2 เครื่องนั้นคือ Client กับ Server นั่นเอง (และการติดต่อสื่อสารกันนั้น ก็คือการโต้ตอบที่เรียกว่า request กับ response) ซึ่งเจ้า API ถูกสร้างมาเพื่อรับ request และส่ง response กันระหว่าง Client กับ Server
Client จะเป็นฝ่ายที่ส่ง request ซึ่งประกอบไปด้วย URL, พารามิเตอร์ รวมถึงข้อกำหนดอื่นๆไปหา Server เพื่อร้องขอการบริการ และ Server จะตอบสนองต่อบริการนั้น รูปแบบโครงสร้างของหน้า root directory ของ Node จะมีลักษณะแบบนี้

// Dependencies
var http = require('http');

// Configure a server
var server = http.createServer(function funcName (req, res) {
  res.end('Hello World!');
});

// Start the server
server.listen(3000, function() {
  console.log('The server is listening in port 3000')
});

อธิบายส่วนประกอบของโค้ดด้านบนออก แบ่งมาเป็น 3 ส่วน ได้แก่

1.Dependency(-ies)

คือการใช้ฟังก์ชั่น require() ดึงเอาโมดูลหรือไลบรารี่ที่มีอยู่ใน Node (หรือจะเป็นไฟล์ที่สร้างขึ้นมาเองก็ได้) มาเก็บไว้ในตัวแปรที่กำหนด
จากตัวอย่าง เรียกโมดูล http เอามาเก็บไว้ที่ตัวแปรที่ตั้งชื่อว่า http

2.Configure a server

สร้าง Function expression เป็น server ขึ้นมาโดยใช้ฟังก์ชั่น createServer() ที่เอามาจากโมดูล http ผ่านตัวแปร http เพราะเป็นฟังก์ชั่นที่อยู่ในโมดูลอื่น (หรือบางภาษาเรียกว่า method) การใช้งานต้องสั่งตาม syntax เป็น

http.createServer(requestListener);

ภายในวงเล็บจะมีพารามิเตอร์ (requestListener) เป็น Callback Function ที่จะต้องถูกเรียกใช้เมื่อฟังก์ชั่น createServer ทำงานจบ ตัว Callback จะมีออบเจ็คต์ 2 ตัว เป็นพารามิเตอร์ ภายในพารามิเตอร์แต่ละตัว จะเก็บฟังก์ชั่นต่างๆเอาไว้ ในที่นี่ พารามิเตอร์ตัวแรก เราตั้งชื่อเป็น req ส่วนพารามิเตอร์ตัวที่สอง เราตั้งชื่อเป็น res และมีการเรียกใช้ฟังก์ชั่น end() จากตัวที่สองนั่นเอง
ตัวฟังก์ชั่นที่เป็น requestListener นั่น เราสามารถกำหนดให้มันเป็น Anonymous Function หรือ Function expression ได้เช่นเดียวกัน เพื่อความสะดวกในการเขียนโปรแกรมได้ดังนี้

var server = http.createServer(function(req, res) {
  res.end('Hello World!')
});

หรือว่าจะเปลี่ยนเป็น Arrow Function ก็ได้

var server = http.createServer((req, res)=> {
  res.end('Hello World!');
});

3.Start the server

การเรียกใช้ฟังก์ชั่น listen() เพื่อเรียก server ให้รอรัน (listening) ภายในจะประกอบไปด้วยพารามิเตอร์ 2 ตัว ตัวแรกเป็น integer เป็น port ที่จะรัน ตัวที่สอง host ที่เป็น IPv4 address ส่วนตัวที่สามเป็น Callback Fuction จะทำงานต่อเนื่องจาก listen() ทำงานจบ มีรูปแบบ syntax เป็น

server.listen([port[, host[, backlog]]][, callback])

จากตัวอย่าง

server.listen(3000, function() {
  console.log('The server is listening in port 3000')
});

แปลความหมายว่า เมื่อมี request มาที่ host (ณ ที่นี้ไม่ได้ระบุเอาไว้) ผ่าน port 3000 จะทำให้ server รอทำงานและจบด้วย เรียก ฟังก์ชั่นเรียกกลับ (callback) มาทำงาน

Summary

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

แหล่งอ้างอิง

https://stackoverflow.com/questions/33769702/understanding-node-javascript-callback-functions

https://www.javascripttutorial.net/nodejs-tutorial/nodejs-http-module/

https://www.w3schools.com/nodejs/nodejs_http.asp

https://www.geeksforgeeks.org/node-js-server-listen-method/