javascript

Javascript Zero to Hero พื้นฐาน เครื่องหมายดำเนินการต่าง ๆ JS EP2

พาเข้าสู่เนื้อหาพื้นฐานที่ควรทราบ เพื่อที่จะเขียน javascript ได้อย่างไหล่ลื่น หลังจาก “Javascript Zero to Hero บทนำ EP1” แนะนำเครื่องมือและคำสั่ง javascript ไปบ้างแล้ว บทความนี้จะมาต่อเนื้อหาพื้นฐานของการเขียน javascript ส่วนที่เหลือสำหรับเริ่มต้นกันต่อครับ

Operators

เครื่องหมายดำเนินการกำหนดค่า และทางคณิตศาสตร์ (Assignment operators & Arithmetic Operators)

การกำหนดค่าให้กับตัวแปรด้วย operator equal (=)

let firstName = 'Asabeneh'
let country = 'Finland'

นอกจากเครื่องหมาย (=) ยังมีเครื่องหมายอื่น ๆ ที่ควรทราบ มาทำความรู้จักเพิ่มเติมกัน

เครื่องหมายตัวอย่างเทียบได้กับอธิบาย
=x = yx = yเก็บค่า y ใส่ตัวแปร x
+=x += yx = x + yนำ x บวก y เก็บใส่ตัวแปร x
-=x -= yx = x – yนำ x ลบ y เก็บใส่ตัวแปร x
*=x *= yx = x * yนำ x คูณ y เก็บใส่ตัวแปร x
/=x /= yx = x / yนำ x หาร y เก็บใส่ตัวแปร x
%=x %= yx = x % yนำ x มอด y เก็บใส่ตัวแปร x
**=x **= yx = x ** yนำ x ยกกำลัง y เก็บใส่ตัวแปร x
บวก (+), ลบ (-), คูณ (*), หาร (/), มอด หารใช้ค่าของเศษ (%), ยกกำลัง (**)

เครื่องหมายดำเนินการเปรียบเทียบค่า (Comparison Operators)

เครื่องหมายชื่อเครื่องหมายตัวอย่างอธิบาย
==ค่าเท่ากันx == yค่า x เท่ากับ y หรือไม่
!=ค่าไม่เท่ากันx != yค่า x ไม่เท่ากับ y หรือไม่
===ค่าเท่ากัน และชนิดเดียวกันx === yค่า x เท่ากับ y และ ชนิด x เหมือน ชนิด y หรือไม่
>ค่ามากกว่าx > yค่า x มากกว่า y หรือไม่
<ค่าน้อยกว่าx < yค่า x น้อยกว่า y หรือไม่
>=ค่ามากกว่าหรือเท่ากันx >= yค่า x มากกว่าหรือเท่ากับ y หรือไม่
<=ค่าน้อยกว่าหรือเท่ากันx <= yค่า x น้อยกว่าหรือเท่ากับ y หรือไม่

ตัวอย่างการนำไปใช้งาน

console.log(3 > 2)              // true, because 3 is greater than 2
console.log(3 >= 2)             // true, because 3 is greater than 2
console.log(3 < 2)              // false,  because 3 is greater than 2
console.log(2 < 3)              // true, because 2 is less than 3
console.log(2 <= 3)             // true, because 2 is less than 3
console.log(3 == 2)             // false, because 3 is not equal to 2
console.log(3 != 2)             // true, because 3 is not equal to 2
console.log(3 == '3')           // true, compare only value
console.log(3 === '3')          // false, compare both value and data type
console.log(3 !== '3')          // true, compare both value and data type
console.log(3 != 3)             // false, compare only value
console.log(3 !== 3)            // false, compare both value and data type
console.log(0 == false)         // true, equivalent
console.log(0 === false)        // false, not exactly the same
console.log(0 == '')            // true, equivalent
console.log(0 == ' ')           // true, equivalent
console.log(0 === '')           // false, not exactly the same
console.log(1 == true)          // true, equivalent
console.log(1 === true)         // false, not exactly the same
console.log(undefined == null)  // true
console.log(undefined === null) // false
console.log(NaN == NaN)         // false, not equal
console.log(NaN === NaN)        // false
console.log(typeof NaN)         // number

เครื่องหมายตรรกะ (Logical Operators)

ย้อนกลับไปในช่วงที่เรียนคณิตศาสตร์ สมัยประถม หรือมัธยมจะมีตารางตรรกะศาสตร์เบื้องต้น

ในภาษา javascript จะใช้สัญลักษณ์

  • && เพื่อแทนเงื่อนไข และ
  • || เพื่อแทนเงื่อนไข หรือ
  • ! เพื่อแทนนิเสธน์
เครื่องหมาย และ (&&)เครื่องหมาย หรือ (||)เครื่องหมาย นิเสธน์ (!)
4 > 3 && 10 > 5
true && true -> true
4 > 3 || 10 > 5
true || true -> true
!4 > 3
true -> false
4 > 3 && 10 < 5
true && false -> false
4 > 3 || 10 < 5
true || false -> true
!4 < 3
false -> true
4 < 3 && 10 > 5
false && true -> false
4 < 3 || 10 > 5
false || true -> true
!(!4 > 3)
true -> false -> true
4 < 3 && 10 < 5
false && false -> false
4 < 3 || 10 < 5
false || false -> false
!(!4 < 3)
false -> true -> false

เครื่องหมายเพิ่มค่า และลดค่า (Increment Operator & Decrement Operator)

การเพิ่มค่า

เพิ่มค่าล่วงหน้า

let count = 0
console.log(++count)        // 1
console.log(count)          // 1

เพิ่มค่าหลังจาก

let count = 0
console.log(count++)        // 0
console.log(count)          // 1

การลบค่า

ลบค่าล่วงหน้า

let count = 0
console.log(--count)        // 1
console.log(count)          // 1

ลบค่าหลังจาก

let count = 0
console.log(count--)        // 0
console.log(count)          // 1

เครื่องหมายดำเนินการ 3 อย่าง (Ternary Operators)

การเขียนเงื่อนไขแบบสั้นจะประกอบไปด้วย 3 อย่าง คือ 1. เงื่อนไข 2. ทำบางอย่างหากเงื่อนไขเป็นจริง 3.ทำบางอย่างหากเงื่อนไขไม่จริง อื่น ๆ

let isRaining = true
isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')
isRaining = false

isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')

Date Object

javascript จะมี object Date ให้ใช้งาน เหมือนภาษาอื่น ๆ สามารถระบุ รูปแบบวันที่ และดูค่าวันที่ วัน, เดือน, ปี, เวลา ได้

ชื่อ ฟังก์ชันอธิบายตัวอย่าง
getFullYear()คืนค่า ปี รูปแบบ YYYY2021
getMonth()คืนค่า เดือน รูปแบบ ลำดับเดือน ( 0 -11)0
getDate()คืนค่า วันที่ รูปแบบ ลำดับวัน ( 1 -31)1
getHours()คืนค่า เวลาหน่วย ชั่วโมง รูปแบบ ลำดับชั่วโมง ( 0 – 23)15
getMinutes()คืนค่า เวลาหน่วย นาที รูปแบบ ลำดับนาที ( 0 – 59)30
getSoconds()คืนค่า เวลาหน่วย วินาที รูปแบบ ลำดับวินาที ( 0 – 59)45
getMiliSeconds()คืนค่า เวลาหน่วย ลิลลิวินาที รูปแบบ ลำดับวินาที ( 0 – 999)489
getTime()คืนค่า เวลาหน่วย timestamp รูปแบบ ( 1 มกรา 1970 )1578092201341
getDay()คืนค่า สัปดาห์ รูปแบบ ลำดับสัปดาห์ ( 0 – 6) ( อาทิตย์ – เสาร์) 4

ตัวอย่างการเรียกใช้งาน Date

const now = new Date()
console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)

// ดึงปี
const now = new Date() 
console.log(now.getFullYear()) // 2020

// ดึงเดือน
const now = new Date() 
console.log(now.getMonth()) // 0, because the month is January,  month(0-11)

// ดึงวันที่
const now = new Date() 
console.log(now.getDate()) // 4, because the day of the month is 4th,  day(1-31)

รูปแบบ Date อื่น ๆ

const now = new Date()
const year = now.getFullYear() // return year
const month = now.getMonth() + 1 // return month(0 - 11)
const date = now.getDate() // return date (1 - 31)
const hours = now.getHours() // return number (0 - 23)
const minutes = now.getMinutes() // return number (0 -59)

console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56

Javascript Zero to Hero บทนำ EP1

javascript มีอายุของภาษาก็ 25 ปีแล้ว ถือว่าเป็นภาษาที่ได้รับความนิยมมายาวนาน ด้วยความสามารถที่เขียนไครเอนซ์ไซน์ (client side) และเซอร์เวอร์ไซต์ (server side) ทำให้ตัวภาษารับความนิยม จึงทำให้บริษัทเจ้าใหญ่ๆ ตั้งทีมงานเพื่อมาพัฒนา framework เพื่อเป็นกรอบการทำงานของการพัฒนาแอพพลิเคชั่น (application) ที่เป็นมาตรฐานที่เป็น standard แบบเดียวกัน เช่น React (facebook) , Angular (google) ,Vue (Evan U) เป็นต้น สิ่งที่มีเหมือนกันของแต่ละ framework คือ fundamental ของตัวภาษา javascript เอง ชุดบทความนี้จะพาทำความรู้จักภาษา javascript ตั้งแต่เริ่ม zero จนกระทั่งถึง hero คือสามารถนำไปใช้งานและพัฒนาแอพพลิเคชั่นได้อย่างดีแน่นอน

ทำความรู้จักเครื่องมือ สิ่งที่ช่วยให้การเริ่มเขียน Javascript น่าสนุกมากยิ่งขึ้น

เครื่องมือที่เป็นเหมือนสิ่งที่แปล หรือแปลงโค๊ดของภาษา javascript มากกว่าให้สามารถทำงานได้มีหลัก ๆ อยู้ด้วยกัน 2 การคอมไพล์ (compile) ผ่านเครื่องมือเหล่านี้

  1. NodeJS Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  2. Browser ต่าง ๆ ที่จะทำหน้าที่มี javascript runtime engine มาให้อยู่แล้ว เช่น Firefox , Safari ,Chrome แนะนำใช้งาน Google Chrome เพราะจะอัพเกรด version Javascript Engine ก่อน browser อื่น ๆ

console.log คืออะไร

เริ่มต้นก่อนที่จะพาไปรู้จักส่วนอื่น ๆ ในขั้นถัดๆ ไป ที่เรียกว่าขาดไม่ได้เลยคือการที่จะ debug หรือการที่จะแสดงผลลัพธ์ของตัวแปรที่เก็บอยู่ในโค๊ด การเรียกใช้งานคำสั่ง console.log(‘message or variable’)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 'Zero', 'to', 'Hero')

การคอมเม้นท์ (comment)

การคอมเม้นท์ (comment code) คือการแทรกข้อความ หรืออื่น ๆ ที่ต้องการใส่ลงไปในไฟล์ของ โค๊ด javascript ที่ไม่ต้องการที่จะให้ javascript compile โค๊ดในส่งนี้เข้าไปในการทำงานของโปรแกรม จะไม่มีผลต่อการทำงานของโปรแกรม เพียงแต่จะมี text ข้อความแทรกอยู่ในไฟล์เท่านั้นเอง

ตัวอย่างการคอมเม้นท์ 1 บรรทัด
// This is the first comment
// This is the second comment
// I am a single line comment

ตัวอย่างการคอมเม้นท์ หลายบรรทัด
/_ This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
_/

การใช้เครื่องหมายดำเนินการทางคณิตศาสตร์

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

แนวทางการเขียน Javascript Code ต่าง ๆ บนหน้าเว็บ

แนวทางการเขียนโค๊ด javascript กับหน้าเว็บไซต์ในรูปแบบต่าง ๆ หลัก ๆ มีด้วยกัน 4 แนวทางคือ

  • inline script การแทรก javascript ใน tag html เป็นการเขียนที่ง่ายที่สุด ตัวอย่าง
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to Javascript Zero to Hero!')">Click Me</button>
  </body>
</html>
  • internal script การเขียนแทรก javascript code ในไฟล์ html โดยคำสั่งต่าง ๆ จะถูกเขียนอยู่ใน tag <script> </script>
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Internal Script</title>
    <script>
      console.log('Welcome to Javascript Zero to Hero')
    </script>
  </head>
  <body></body>
</html>
  • external script การเขียนโค๊ด javascript แยกเป็นอีก 1 ไฟล์ (นามสกุล .js) จากนั้นเรียกใช้งานเข้ามาในไฟล์ html ด้วยคำสั่ง <script src=”?”/>
    index.js
console.log('Welcome to Javascript Zero to Hero')

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:External script</title>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Javascript Data Type ต่าง ๆ

ในภาษา javascript จะเรียกเป็นรูปแบบ Dynamic Type ความหมายคือเป็นการกำหนด type ที่สามารถเปลี่ยนได้ตลอดเวลา โดยมีการกำนด type อยู่ด้วยกันหลัก ๆ ตามนี้ String, Number, Boolean, undefined, Null, and Symbol.

String

'Poolsawat'
'Apin'
'Javascript Zero to Hero'

Number

Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Boolean

True/true , False/false

Undefined

let name;
console.log(name) // undefined

Null

let emptyValue = null

การตรวจสอบประเภท หรือชนิดของตัวแปร

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

console.log(typeof 'Poolsawat') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

การประกาศตัวแปร และการกำหนดขอบเขตของการเข้าถึง

ภาษา javascript จะมีการกำหนดประเภทตัวแปร โดยมีอยู่ด้วยกัน 3 รูปแบบ คือ

Var การกำหนดประเภทตัวแปรที่เป็นระดับ global ที่จาก function หรือ condition ไหน ๆ ก็สามารถเข้าถึงได้สามารถ assign value ได้

var name = 'Poolsawat' , lname = 'Apin'
var age = 99
var isMale = true

Const การกำหนดประเภทตัวแปรที่จะคล้ายกับ Var แต่จะไม่สามารถ assign value ใหม่ให้ได้ แต่จะมี scope ที่แคบกว่า var

const name = 'Poolsawat' , lname = 'Apin'
const age = 99
const isMale = true

Let การกำหนดประเภทข้อมูลในระดับที่แคบมาก ๆ สามารถ assign value ใหม่ได้ สามารถกำหนดชื่อซ้ำกันได้ แต่อยู่คนละ statement code ได้

let name = 'Poolsawat' , lname = 'Apin'
let age = 99
let isMale = true
if (age == 99 ){
    isMale = false
}

สรุปท้ายบทความ

จากบทความนี้จะเป็นการปูพื้นฐานก่อนเริ่มการเขียน javascript ในบทถัด ๆ ไปสิ่งเหล่านี้จำเป็นต้องจดจำและฝึกฝนเขียนให้จำได้ เพราะในบทความต่อ ๆ ไปจะเจอคำสั่งหรือเรื่องจากบทความนี้เยอะมาก สำหรับการทดสอบเรียกคำสั่งแบบง่ายที่สุด เพียงแต่เปิด browser chrome กด F12 เลือกไปที่ tab console จากนั้นพิมพ์ console.log(‘message ‘); กด enter ผลลัพธ์ก็จะแสดงทันที บทความถัดไปจะมาอธิบายเกี่ยวกับเรื่องอะไรคอยติดตามกันด้วยนะครับ

เล่าประสบการณ์แข่งขัน Hackathon ครั้งแรกให้ชีวิต

เพิ่งผ่านพ้นไปไปกับงาน PWA Online Hackathon งานสำหรับนักพัฒนาสาย Web ที่จะสร้างสรรค์ผลงานในช่วงแค่ระยะเวลาแค่ 48 ชม. โดยเรียกว่าเปิดโอกาสให้นักพัฒนาทั่วไป ไม่ใช่แค่ภายในประเทศไทยแต่รวมถึงนักพัฒนาทั่วโลก โดยงานถูกจัดขึ้นเมื่อวันที่ 23 มิถุนายน 2560 20:00 น. – 25 มิถุนายน 2560 20:00 น.

PWA Online hackathon คืออะไร

PWA Online Hackathon เป็นการแข่งขัน Hackathon ที่ไม่ต้องมาเจอหน้ากันจริงๆ ต่างคนต่างทำอยู่บ้าน สร้าง Web Application เจ๋ง ๆ แล้วส่งมาแข่งกันผ่าน online Web Application ของใครเจ๋ง ก็รับรางวัลมากมายจากเราไปได้เลย

โดยงานนี้ได้ Sponsor  บริษัทใหญ่ ๆ หลายบริษัท

ของรางวัลเรียกได้ว่าจัดเต็มกันเลยที่เดียว

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

แน่นอนการแข่งขันย่อมมีกฏกติกา มาดูรายละเอียดกันหน่อย

กติกา
  • ทีมที่เข้าแข่งขันต้องมีสมาชิกตั้งแต่ 1 – 5 คน
  • เรามีเวลาให้ 48 ชั่วโมงสำหรับการสร้าง Web Application ห้ามสร้างก่อนเป็นอันขาด
  • ทุกทีม ต้อง push code ทั้งหมด ขึ้น GitHub อย่างสม่ำเสมอ ในช่วงเวลา 48 ชั่วโมง
  • งานของทุกทีมต้อง Host อยู่บน Firebase hosting เท่านั้น
  • เรามีกฏนิดหน่อยสำหรับ Web Application และทางกรรมการขออนุญาตตัดสิทธิสำหรับ Application ที่ทำผิดกฏ
  • ทางทีมผู้จัดงานจะส่งรายละเอียด เรื่องวิธีการส่ง Web application หลังจากที่ได้สมัครแล้ว

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

ต่อมาเรื่องกฏที่ต้องให้ความใส่ใจเป็นพิเศษ

กฏ
  • เราไม่อนุญาตให้ ทำ Backend หรือ API เองเป็นอันขาด
  • แต่มันจะไม่สนุกเลยถ้าใช้ API ไม่ได้เลย เราจึงยอมให้ใช้ API ที่เป็น Public และ “ฟรี” ได้ (API ที่เป็น Free plan นับเป็น ฟรีเหมือนกัน)
  • Frontend Library ต่าง ๆ ที่เปิดเป็น Public สามารถใช้งานได้ทั้งหมด
  • Web Application จะต้องมี Web App Manifest (สามารถ Add to home screen ได้สมบูรณ์) และ Service worker ติดตั้งอยู่
  • Web Application จะต้องใช้งานได้บางส่วนหากไม่ได้เชื่อมต่อ Internet

งานยากเลยสำหรับกฏบางข้อกับเวลา 48 ชม. ส่งรายละเอียดให้สมาชิกแบ่งงานกันไปคิด ทุกคนตั้งทำถาม “พวกเราจะทำเกี่ยวกับอะไรดี”

1 สัปดาห์ก่อนถึงวันแข่งขัน

นัดรวมตัวกันอีกครั้ง ครั้งนี้เป็นวันที่ต้องนำ Idea ของแต่ละคนมา Share กันแล้วว่าจะทำอะไรดีในช่วงระยะเวลาแข่งขันอันสั้นนี้ ได้ข้อสรุปว่าเราจะใช้ Web Navigator เป็นสิ่งหลัก โดย Interface Navigator นี้จะสามารถเรียก Device ของเครื่อง Client ที่ User ใช้งานอยู่นั้น โดยจะเรียก Feature ของ Hardware ได้หลายอย่างมาก เช่น Microphone , Camera ,Bluetooth ,Notification ,Audio ,Battery ,Geolocation เหล่านี้เป็นต้น จึงเลือกมาใช้เป็น Feature ของ Application ทีมเรา

จึงได้สรุป Feature หลัก ๆ ที่ตั้งใจว่าที่จะให้ Application เราต้องสามารถทำได้

  • Take photos ต้องถ่ายภาพได้
  • เก็บ Location (Latitude,Longitude) ของ User ที่ใช้งานได้
  • Google Map ต้องแสดงตำแหน่งของ User ที่ใช้งานได้บนแผนที่ พร้อมกับแสดงตำแหน่งของ User ที่เรียกใช้งาน App ได้ในบริเวณใกล้เคียง โดยแสดงเป็นตำแหน่ง Mark บน Google Map
  • แสดง Gallery รูปภาพของตัวเองได้
  • สามารถลงชื่อเข้าใช้งาน App ได้ด้วย Google Account , Facebook Account
  • แสดง Gallery รูปภาพของ User ที่ใช้งาน App โดยทำมาแสดงเป็น Feeds ข้อมูล โดยจะทำการกด Like ให้กับรูปนั้น ๆ ได้
  • มีการแจ้งเตือน User ให้กรณีที่มี User อื่นที่ถ่ายภาพในบริเวณใกล้เคียงได้
  • ส่ง Email แจ้งเตือน กรณีลงชื่อเข้าใช้งานในครั้งแรก

เมื่อสรุปขอบเขตของ Application ได้แล้วก็ลงมือ ออกแบบ Prototype หน้าจอก็ได้ออกมาหน้าตาแบบนี้

เนื่องจากเป็นการ Coding ข้ามวันข้ามคืนก็ต้องการสถานที่กบดานกัน ผมเลยเสนอสถาที่นี่เลย บ้านบางเขน ถ้าใครเคยได้ยินจะพอทราบว่าเป็นแหล่งพักผ่อนในแบบคนที่ชอบถ่ายภาพ และก็จะมี Zone ห้องแอร์สำหรับนั่งอ่านหนังสือ คุยงาน ถือว่าเหมาะมากสำหรับนั่งทำงานบรรยากาศเงียบสงบแอร์เย็น เพราะเสียค่าบัตรเข้าใช้บริการ 20 บาท (สามารถนำบัตรไปแลกน้ำเปล่าได้ 1 ขวด) ก็สามารถเข้าใช้บริการห้องอ่านหนังสือได้แล้ว พวกเราเลือกที่จะไปรวมตัวกันที่นี่

วันแข่งขัน

และแล้วก็มาถึงวันเริ่มแข่งขัน วันที่ 23 มิถุนายน 2560 20:00 น. ทีมเราลงความเห็นว่าจะผักผ่อนกันก่อนโดยจะไปเริ่ม เช้าวันเสาร์ 09:00 น.

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

โดยเราเลือกใช้ Angularjs และเลือก materializecss.com  นี้เป็นหลักในการ Implement App ในครั้งนี้

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

เกณฑ์การตัดสินมีคะแนนรวมของเครื่องมือที่ชื่อ Lighthouse  ที่จะค่อยวัดประสิทธิภาพแอพเราว่ามีคะแนนรวมเท่าไหร่โดยแบ่งการให้คะแนนออกเป็น 4 ด้าน

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices

โดยทุกหัวข้อจะมีคะแนน 100 คะแนน ก็รวม ๆ แล้ว 400 คะแนนเห็นจะได้ซึ่งทีมเราก็ไม่น้อยหน้า ก็ต้องวัดประสิทธภาพด้วยเช่นกัน

ช่วงแรกเรามองคะแนนของให้ความสนใจกับเรื่อง Progressive Web App ซะส่วนใหญ่ และจะกลับมาปรับ Tune Performance ในภายหลังแต่ก็ไม่ทันเวลา แต่มองว่าเครื่องมือนี้ช่วยเราได้ในระดับนึง

เราใช้เวลาได้ไม่เต็มที่นั่งเพราะก็มองการแข่งครั้งนี้เป็นการเก็บประสบการณ์ไปก่อน ต้องขอบคุณทุกคนในทีมที่ช่วยกันได้อย่างเต็มที่

นี่คือตัวอย่างหน้าจอสุดท้ายก่อนหมดเวลา

 

ตัวอย่างโค๊ดเรียก Google Maps API กับ AngularJS 1 เพื่อใส่ Marker Location แบบง่าย ๆ

ช่วงนี้เริ่มศึกษา Google Maps API เพื่อที่จะมาใช้กับ Project ของตัวเองเข้าไปดู Tutorial การเรียกใช้งาน

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

มาเริ่มกันเลย

ขั้นแรก จำเป็นต้องมี Account Gmail กันก่อน หลังจากนั้นเข้าไปสร้าง API_KEY ของ Map

เข้าไปที่ credentials console เพื่อเข้าไปสร้าง API_KEY

key-console

กด Create Credentials เลือก API Key

key-console-1

ระบบจะสร้าง KEY มาให้ 1 ชุด

key-console-2

เสร็จสิ้นการสร้าง API_KEY




ต่อไปเขียนโค๊ดกัน

<!DOCTYPE html>
<html ng-app="mapApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>Google Map</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"></script>
        <style media="screen">
            #map {
                width: 100%;
                height: 500px;
            }

        </style>
    </head>
    <body>
        <div class="container" ng-controller="mapController">
            <div class="" id="map"></div>
        </div>

        <script type="text/javascript">
            var app = angular.module('mapApp', []);
            app.controller('mapController', function($scope) {
                console.log('Google Maps API version: ' + google.maps.version);
                // สร้าง Location 2 ชุด
                var locations = [
                    {
                        title: 'BKK',
                        lat: 13.742053062720384,
                        lng: 100.5084228515625
                    }, {
                        title: 'Rayong',
                        lat: 12.860004340637044,
                        lng: 101.38870239257812
                    }
                ]
                // ผูก element กับ MAP zoom ระดับ 6 เลขน้อย จะมองระยะกว้าง เลขมาก จะละเอียด center ให้ focus ที่ Bangkok
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 6,
                    center: locations[0],
                    disableDefaultUI: true
                });
                // Loop วาด Marker บนแผนที่
                angular.forEach(locations, function(location, index) {
                    console.log('location ::==' + location.title);
                    // สร้าง marker
                    var marker = new google.maps.Marker({position: location, map: map, title: location.title});
                    // สร้าง popup content ใส่ content เป็น location title
                    var infowindow = new google.maps.InfoWindow({content: location.title});
                    // สร้าง event ให้ จุด marker
                    marker.addListener('click', function(event) {
                        console.log(event);
                        // เปิด popup เมื่อ click marker
                        infowindow.open(map,marker);
                    });
                });

                // ใส่ event click ให้ MAP ทั้ง MAP
                map.addListener('click', function(event) {
                    console.log('latitude ::==' + event.latLng.lat());
                    console.log('longtitude ::==' + event.latLng.lng());
                    // alert Latitude and Longitude
                    alert('Latitude ::=='+event.latLng.lat()+' \nLongitude ::=='+event.latLng.lng());
                });
            });
        </script>
    </body>
</html>

หลังจาก Run ทดสอบ

map-code-1

map-code-2

map-code-3

เหล่านี้เป็นตัวอย่างง่าย ๆ แต่ก็สามารถเอาไปต่อยอดทำ Project ได้ไม่มาก็น้อย บทความนี้ฝากไว้เท่านี้ครับ