mentor2code

กลับหน้าแรกของคอร์ส

# การพัฒนาเว็บแอปพลิเคชัน

ในส่วนนี้จะกล่าวถึง Web application & Web architecture รวมไปถึงองค์ประกอบของการพัฒนา web application นอกจากนี้ยังมีเรื่องราวของการทำ version control และการเข้าถึง code ของ framework, tools, และ components ต่าง ๆ ที่มีการแบ่งปันผ่าน GitHub ซึ่งครอบคลุมถึงการติดตั้งและใช้งาน Visual Studio Code และทำความรู้จักกับ JavaScript Framework

# แบบฝึกหัดก่อนเริ่มบทเรียน

# ติดตั้งโปรแกรมที่ต้องใช้

  1. VsCode เวอร์ชั่นล่าสุด (opens new window) ==> ติดตั้งที่ d:\toolb\code
  2. Node v12 (opens new window) ==> ติดตั้งที่ d:\toolb\nodejs
  3. Git เวอร์ชั่นล่าสุด (opens new window) ==> ติดตั้งที่ d:\toolb\git
  4. Putty เวอร์ชั่นล่าสุด (opens new window) ==> ติดตั้งที่ d:\toolb\putty

หมายเหตุ ไฟล์ถูกดาวน์โหลดมาให้แล้วที่ไดร์ฟ D

# ตรวจสอบความเรียบร้อยในการติดตั้ง

เปิดโปรแกรม cmd ขึ้นมา

  • ตรวจสอบ VS Code
code -v
1
  • ตรวจสอบ node
node -v
1
  • ตรวจสอบ npm
npm -v
1
  • ตรวจสอบ git
git --version
1
  • ตรวจสอบความเรียบร้อยของ path
path

PATH=C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;D:\toolb\nodejs\;D:\toolb\git\cmd;C:\ProgramData\chocolatey\bin;C:\Users\user\AppData\Local\Microsoft\WindowsApps;D:\toolb\code\bin;C:\Users\user\AppData\Roaming\npm
1
2
3

หากมีปัญหาในการเรียกใช้ command ดังกล่าว ให้ลองดูวิธีแก้ที่นี่

# ทดลองสร้าง web project

# 1. สร้าง workspace ซึ่งเป็น folder สำหรับใช้งาน

  • เปิดโปรแกรม cmd ขึ้นมา
d:
cd toolb
mkdir workspace
1
2
3

# 2. เปิดโปรแกรม VS Code

  • ตรวจสอบว่าอยู่ที่ d:\toolb\workspace แล้วพิมพ์คำสั่ง
code .
1

# 3. ติดตั้ง tool ที่ต้องใช้

  • ติดตั้ง yarn
npm install -g yarn
1
  • ทดสอบว่า yarn ถูกติดตั้งเรียบร้อย
yarn -v
1
  • กรณีที่ใช้คำสั่ง npm หรือ yarn ไม่ได้ ให้เพิ่ม path - C:\Users%USER%\AppData\Roaming\npm ไว้ในตัวแปร path ของ Windows โดยใช้คำสั่ง
set PATH=%PATH%;C:\Users\Administrator\AppData\Roaming\npm
1
  • ติดตั้ง Vue CLI
yarn global add @vue/cli
1
  • ทดสอบว่า Vue CLI ถูกติดตั้งเรียบร้อย
vue --version
1
  • กรณีที่ใช้คำสั่ง vue ไม่ได้ ให้เพิ่ม path - C:\Users%USER%\AppData\AppData\Local\Yarn\bin ไว้ในตัวแปร path ของ Windows โดยใช้คำสั่ง
set PATH=%PATH%;C:\Users\Administrator\AppData\Local\Yarn\bin
1

# 4. สร้าง web project

  • ใช้ Vue CLI โดยเลือกค่า default ทั้งหมด
vue create {ชื่อโปรเจ็ค}
1
  • ตรวจสอบโครงสร้างโฟล์เดอร์ ดังรูป

Vue folder structure

  • เมื่อติดตั้งเรียบร้อย ให้ทำการทดสอบโดยใช้คำสั่งด้านล่าง
cd myfirstsite
yarn serve
1
2
  • ทดสอบโดยการเปิด browser แล้วใส่ URL - http://localhost:{port เดียวกับที่หน้า console}

Vue first site

  • ในการเขียน web application ด้วย Vue.js นั้นจะต้องใช้ทักษะ 3 ภาษา

  • โดยในการพัฒนา web application นั้น จะทำโดยการสร้าง component ย่อย ๆ แยกเป็นไฟล์ .vue (ดูตัวอย่าง App.vue)

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 5. ปรับแต่ง Hello Webpage ให้เป็น App ตัวเอง

ให้เลือก app ที่ตนเองสนใจ เช่น app ใน smartphone แล้วลองสร้างหน้าเว็บเพจคร่าวๆ โดยใช้ HTML (opens new window)

# 6. ใส่ CSS stylesheet (Optional)

ใส่ CSS (opens new window) ให้สวยงาม

# 7. Upload project ขึ้น GitHub

  • สมัครสมาชิก GitHub

  • ตั้งค่า git โดยใส่ชื่อ ชื่อสกุล และอีเมล์เดียวกับที่ลงทะเบียนไว้กับ GitHub

git config --global user.name "FIRST_NAME LAST_NAME"
git config --global user.email "MY_NAME@example.com"
1
2

  • สร้าง repository บน GitHub ในที่นี้ใช้ชื่อ wkxx-name (เปลี่ยนเลขทุกสัปดาห์ และใส่ชื่อของตัวเอง)

  • ทำการ initial git และ push ไฟล์โปรเจ็คทั้งหมดไปยัง GitHub

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/is322/wkxx-name.git
git push -u origin master
1
2
3
4
5