วิธีแก้ปัญหา lint บนโปรเจก nodejs

เหล่าโปรเจค ตัวอย่าง ที่น่าสนใจบน github บางโปรเจคใช้ lint มาช่วยกำกับ standard ของการเขียนโค๊ดที่ควรจะเป็น

เเต่บางทีมันก็สร้าง ปัญหา เช่น เขียน lint บน linux เเต่เครื่องที่เป็น windows ที่ clone source ลงมาจะเจอปัญหาประจำ เรื่อง \r\n กับ \n เฉยๆ เพื่อเคาะบรรทัด

วิธีเเก้คือ fix มันให้ไปตามกฏ โดยมีคำสั่งดังนี้

ไปที่โปรเจค เรียก cmd ขึ้นมา

npm run lint -- --fix

การเคาะบรรทัด ได้ถูดอธิบาย ไว้ด้วย 

จบ...

สร้าง WebApp ด้วย VueJS บน Digital Ocean ตอนที่ 3 : ติดตั้ง MongoDB บน Debian 8

อย่างที่เกริ่นไปก่อนว่าผมใช้ database เป็น NoSQL ซึ่งผมใช้ MondgoDB มาเป็นตัวจัดการฐานข้อมูล เพราะข้อดีในเรื่อง การบันทึกก้อนข้อมูลที่ ไม่มี structure ตายตัว ทำให้โปรแกรมยืดหยุ่นขึ้นมาก เเละใน NodeJS ยังมีตัวช่วยชื่อ Mongoose ที่ยิ่งทำให้การจัดการ structure ง่ายขึ้น

วิธีติดตั้ง

1. ต้องทำการ import public key ให้กับ linux โดย GPG Key ก็เป็นเหมือนการระบุตัวตนของ package ที่ distributor สร้างเอาไว้บน package management โดยใช้คำสั้ง

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5

2. สร้าง list ไฟล์บน debian 8 ให้รู้จัก dependency ของ MondgoDB ทั้งหมด

echo "deb http://repo.mongodb.org/apt/debian jessie/mongodb-org/3.6 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list

3. สบายตัวละ ที่เหลือเเค่อัพเดต เบาๆ

sudo apt-get update

4. หลังอัพเดตก็อินสตอร์โลด

sudo apt-get install -y mongodb-org

ซึ่งมันจะเป็นมอนโกเวอร์ชั่นล่าสุด แต่ถ้าใครอยาก ได้เวอร์ชั่นอื่น ให้ใช้คำสั่ง

sudo apt-get install -y mongodb-org=3.6.4 mongodb-org-server=3.6.4 mongodb-org-shell=3.6.4 mongodb-org-mongos=3.6.4 mongodb-org-tools=3.6.4

5. รันตัว service ให้ทำงาน

sudo service mongod start

ถ้าไม่มีผิดพลาด มันจะขึ้นข้อความประมาณนี

[initandlisten] waiting for connections on port 27017

จบ..

สร้าง WebApp ด้วย VueJS บน Digital Ocean ตอนที่ 2 : ติดตั้ง nodejs + npm

NodeJS คือ JavaScript framework ที่ใช้ทำ back-end ซึ่งในเคสของผม ผมเลือกเพื่อมาเป็นตัว API สำหรับให้ web app เราดึงหรือบันทึกข้อมูล และยังเป็นตัวหลักสำหรับ ติดต่อ database ซึ่งจะเล่น nodejs ได้ต้องรู้จัก npm หรือ node package management ด้วย เพราะเป็นคำสั้งสำหรับการ install package ที่เป็น dependency ทั้งหมดใน web app เรา

ติดตั้งดังนี้

1. ssh เข้า droplet ด้วย root
2. ติดตั้ง npm และ nodejs  ด้วยคำสั้งสีแดง

sudo apt-get install npm
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash 
sudo apt-get install -y nodejs



3. ทดสอบด้วยการ พิมพ์

node -v
npm -v 

ต้องมีเลข version แสดงออกมา

จบ

สร้าง WebApp ด้วย VueJS บน Digital Ocean ตอนที่ 1 : ตั้งค่า Droplets และ SSH

Digital Ocean เป็นหนึ่งในผู้ให้บริการ cloud Server ที่ราคาค่อนข้างถูก และคุ้มค่าเมื่อเทียบกับราคาที่เริ่มต้นเพียง 5$ ต่อเดือนเท่านั้น ผมเลยขอยกเป็นตัวอย่างในการสร้าง Web app ที่สร้างจาก VueJS ซึ่งผมเลือก NuxtJS เป็นเฟรมเวิร์ค และใช้ MondgoDB เป็น database

ขอข้ามขั้นตอนการสมัคร Digital Ocean นะครับ ไปสมัครกันเองให้เรียบร้อยเเล้วไปที่ https://cloud.digitalocean.com/droplets/new เพื่อสร้าง droplets ใหม่

ขั้นตอน
1. เริ่มจากกการสร้าง Droplets ใหม่ เลือกดีสโทรที่เราถนัดเลย อย่างผม เลือก Debian 8 เพราะชอบ apt

2. เลือกขนาด และ performance ของ server เรา ตามราคาครับ ยิ่งแพงยิ่งแรง

3. มาที่ part ของ SSH มันคือการสร้าง key สำหรับการ remote access เข้าไปบน server เราผ่าน SSH key ซึ่งเราต้อง generate ตัว private คีย์ เก็บไว้ และเอา public key ไปวางไว้บน digital ocean ถ้ายังไม่ได้เจนให้ไป download โปรแกรมที่มีชื่อว่า PuttyGen เพื่อสร้างคีย์ครับ

พาทนี้ไม่ควรข้ามด้วยประการทั้งปวง เพราะผมลองมาสร้างคีย์ หลังจากสร้าง droplets เกิดปัญหาขึ้นโดยไม่สามารถ connect ได้ จนต้องไป reset root password ก็ยังไม่หาย ฉนั้นทำให้จบตั้งเเต่สร้างใหม่ดีกว่า

กด New SSH Key เพื่อสร้าง key ใหม่ที่เราเพิ่ง generate 

ใช้ PuTTY Key Generator เพื่อสร้างคีย์ครับ 

4. ต่อมาเลือกประเทศที่จะวาง เซิฟ เลือกสิงค์โป เพราะใกล้บ้านเราที่สุด

5. กด Create เป็นอันเสร็จเรียบร้อยครับ

ติดตามตอนต่อไป

[VS2017] แก้ปัญหา The operation could not be completed ตอน add referrence

ใครที่ใช้งาน Visual Studio ไปสักพักเเล้วงงอแงงเกิด error ประมาณนี้ “The operation could not be completed” ตอนกำลัง add reference ทำตามนี้ครับ

จากนั้น run cmd ในโหมด administrator แล้วไปที่ไดเร็คทอรี่ C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\PublicAssemblies ซึ่งเป็นสถานที่เก็บ dll ไลบราลี่ของ VS2017 เอง ถ้าใช้ vs ตัวอื่นก็เปลี่ยนพาทตามด้วย

Run คอมมานตามนี้ gacutil.exe -i Microsoft.VisualStudio.Shell.Interop.11.0.dll

ถ้าขึ้นข้อความประมาณนี้เป็นอันเสร็จสมบูรณ์ครับ

Microsoft (R) .NET Global Assembly Cache Utility.  Version 4.0.30319.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Assembly successfully added to the cache

จบ.. ซ่อม vs เสร็จกลับสู่งานต่อ

สำหรับใครที่ ไม่เจอคำสั่ง gacutil.exe ก็ให้ทำตามนี้นะครับ 

ไป download ได้ฟรีที่ลิ้งของ Microsoft SDKs http://www.microsoft.com/downloads/details.aspx?FamilyId=F26B1AA4-741A-433A-9BE5-FA919850BDBF&displaylang=en

จากนั้นให้ install ให้เรียบร้อย เลือกเอาเฉพาะ .Net tool อย่างเดียวก็พอ หลังจากลงเรียบร้อย ให้ไปที่โฟลเดอร์ C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.6.1 Tools จะพบกับ gacutil.exe

ให้เพิ่ม path นี้ลงให้ system variable เพื่อเรียกใช้จากที่ไหนก็ได้ ไป system properties > advanced > Environment Variables... > System 

variables แก้คีย์ path เพิ่มพาทที่อยู่ของ gacutil.exe ด้านบน

เอา cmd ของกูคืนมา (กู้ชีพ cmd ใน WIN10)

เมื่ออัพเดต Win10 สิ่งที่ตามมาคือการอัพเกรดซอฟแวร์ให้เข้ากับความปลอดภัย และปรังปรุง ฟีเจอร์ต่างๆให้ทันสมัยตามยุค ดังนั้นเราจึงควร update windows ให้ใหม่อยู่เสมอ (ป้องกันไวรัสด้วย) นั้นคือ best practice แต่สิ่งที่ตามมาเเละน่ารำคาญใจผมอย่างนึงคือ จะเอา cmd ผมไปไหน เเล้วดันเอามาเเทนที่ Power Shell ซะอย่างงั้น แบบนี้ยอมไม่ได้

ถ้าถามว่าตัวไหนดีกว่า ผมพูดเลยว่า Power shell เพราะหลายๆคำสั่งพัฒนาไปไกลเเล้ว เช่น curl หรืออีกหลายคำสั้งที่คนจับ Terminal Linux มาก่อนรู้สึกใช่แน่นอน แต่สำหรับผม ไม่ได้ต้องการ feature เทพระดับนั้น เพราะลำพังเเค่ command prompt ก็สามารถ รันคำสั่งได้มากมาย จำพวก nodejs / npm ก็ไร้ปัญหา แถวด้วยความเร็วระดับสุดขีด เเล้วมีเหตุผลอะไรที่ต้องไปใช้ของใหม่ที่ช้าเต่า ตอบสนองช้า

เข้าเรื่อง มาเปลี่ยนแปลงกัน งานนนี้ต้องใช้ การแก้ registry เข้ามาช่วย ระเลงเลย

ไปที่ RUN > regedit 

1. มองหา HKEY_CLASSES_ROOT\Directory\shell\cmd แล้วเพิ่ม key "NoWorkingDirectory" เป็น REG_SZ ส่วน value ปล่อยว่าง
2. เพิ่มอีกคีย์ ชื่อ "ShowBasedOnVelocityId" ประเภท REG_DWORD ตั้งค่า เป็น 639bc8
3. ทำข้อ 1 - 2 ซ้ำอีกครั้งแแต่เปลี่ยน directory เป็น HKEY_CLASSES_ROOT\Directory\Background\shell\cmd ให้ครบทุกคีย์

ลอง ปิดเพื่อเซฟ เเล้วกด shift + คลิกขวา บนพื้นที่ว่างบนหน้า explorer สังเกตุจะเห็น command  โผล่ขึ้นมาเเล้ว


ถ้าอยาก ซ่อน Shell หล่ะ ??

ง่ายเเสนง่ายแค่เปลี่ยน คีย์ ต่อไปนี้ที่
HKEY_CLASSES_ROOT\Directory\shell\cmd\PowerShell
และ HKEY_CLASSES_ROOT\Directory\Background\shell\PowerShell
นั้นคือ ShowBasedOnVelocityId เปลี่ยนเป็น HideBasedOnVelocityId เเล้วคงค่า value ไว้เหมือนเดิม

จบ.. ง่ายเเสนง่าย ยินดีต้อนรับการกลับมาของ CMD เทพเจ้า

บางคนแก้ registry ไม่ได้ เพราะไร้ permission 

ก่อนเเก้ก็ไปเพิ่มตัวเองก่อน คือ ในหน้า Registry Editor ไป Edit > Permission > Advance เเล้วแทป  Auditting กด change เพิ่มชื่อตัวเองลงไป เเค่นี้ก็เเก้ได้ละ

บาย see you later!

แก้ปัญหา Shutdown ไม่ลง "This App is Preventing Shutdown or Restart"

การ Shutdown หลังใช้งาน PC/ Notebook ระบบ Windows เสร็จทำให้เครื่องใช้งานอยู่กับเราได้นานกว่าการ sleep หรือ Hibernate เพราะจะมีการเขียนข้อมูลที่เก็บไว้จากแรมเข้าสู่ Harddisk หลายๆโปรแกรมในปัจจุบันมีการทำงานที่เบื้องหลัง run in background เพื่อตอบสนองการใช้งานได้ทันที Snagit ก็เป็นหนึ่งในนั้น ที่เวลาผมจะ shutdown เมื่อไหร่ ตัง Win10 จะต้องฟ้องหน้าจอประมาณนี้ "มีแอฟเปิดค้างไว้นะ จะกลับไปดูก่อนหรือชัทดาว์นมันทีหล่ะ" ซึ่งถ้าเรามั่นใจว่าปิดโปรแกรมทุกอย่างเเล้ว มันก็น่ารำคาญนิดๆนะ ทำไม Windows ไม่ auto close ให้เลย

วันนี้จะมาสอนวิธีการปิดไอ้คำสั่งแสนฉลาดนี้แหละ เพราะมันน่ารำคาญซะมากกว่า 

ก่อนอื่นไปที่ Regedit ปล. ถ้าเป็นสมัยก่อนจำได้ว่า guru จะแนะนำให้ backup registry ก่อนทำการแก้ไข เพราะถ้าเกิดปัญหาก็จะสามารถ rollback กลับไปใช้การตั้งค่าเเบบเดิมก่อนแก้ อารมณ์เหมือน restore นั้นแหละเเต่เท่าที่ผมแก้ regitry มานักต่านัก ไม่เคยเจอเลยแหะที่แก้เเล้วเครื่องรวนจนเกิดปัญหา

ปล. สอง ขอบ่นหน่อย Win10 ขอแท้ อัพเดตบ่อยมาก ปล่อยตัวอัพเดตออกมาเดือนละครั้งเลยแหละ ผมโดน minor change มาแต่รู้สึกเลยว่าคอมถูกล้าง registry ใหม่ อย่าเช่น power shell ที่ติดมาพร้อมกับ context menu แทนที่ CMD ในตำนานเรียบร้อย แถมเเก้รีจีสทรีแล้วไม่หายด้วยนะ อันนี้งงเเต่ฝากไว้ก่อน >> เเค่จะบอกว่าอะไรที่เคยแก้มันอาจโดนคืนค่าหลังจากอัพเดตวินโดว์นะจ้ะ

เข้าเรื่อง 

1. Run > regedit เพื่อเปิด Registry Editor
2. ไปที่ folder นี้  HKEY_CURRENT_USER\Control Panel\Desktop
3. ทางด้านขวามือ เพิ่มคีย์ประเภท string ชื่อ AutoEndTasks แก้ไขช่อง Data ให้เป็น 1

ลอง Shutdown / Restart เพื่อดูผล

จบจร้า

3 Plugins ฟรีสำหรับ Visual Studio 2017 ที่ DEV ทุกคนควรมีไว้ในครอบครองแบบ must have

เขียนโปรแกรมสาย .NET จำเป็นต้องใช้  Visual Studio อย่างแน่นอนซึ่งการทำงานบน tool ตัวนี้นับว่ายอดเยี่ยมอยู่แล้วเพราะเค้าโดดเด่นด้าน snippet c# ที่ครบครันทันใจ หรือโหมด DEBUG ที่มาพร้อมกับการทำ break point ให้เราสามารถเช็คค่าตัวแปรได้อย่างง่ายดาย ตอนนี้ Microsoft ออกเวอร์ชั่น 2017 มาได้สักพักแล้ว ผมเลยอยากอัพเดตปลักอินที่ดีต่อใจ ให้งานเราไว้ขึ้น

อันดับแรกให้เข้าไปที่เว็บไซด์ https://marketplace.visualstudio.com/ ซึ่งจะเป็นสถานที่รวบรวม plugin แนวๆไว้มากมาก เพียงเเค่ค้นหาจากคีย์เวิร์ดที่เกี่ยวข้อง ก็อาจจะเจอของดีได้ ถ้าเข้าไป search

แล้วแนะนำให้เพิ่ม search filter คือ version : vs2017 และ price : free เพื่อเอาเฉพาะปลั้กอินฟรีมาใช้งานกัน vs ตัวใหม่นี้เท่านั้น

ตัวแรกที่อยากแนะนำเป็น plugin ที่ดังมาเเล้วใน version ก่อนๆจนถึงปัจจุบันก็ยังมีการพัฒนาต่อให้ใช้

1 Highlight all occurrences of selected word การใช้งานก็ง่ายดาย หลังจากติดตั้งและ restart vs เรียบร้อยเเล้ว เพียง "ดับเบิ้ลคลิกที่" ตัวแปร หรือ ชื่อเมทธอด ก็จะแสดงไฮไลท์สีเขียวขึ้นทันทีทุกจุดที่มีอักษรในไฮไลท์เหมือนกันทั้งหน้า document จัดว่าง่ายเเละสะดวกมาก เเต่จริงๆเเล้วใน vs2017 ก็สามารถทำได้เช่นกันโดยไม่ต้องพึ่งปลั้กอิน โดยการ ดับเบิ้ลคลิกตัวแปรที่ต้องการแล้วต่อด้วย ctrl + F เพื่อค้นหา ก็จะแสดงไฮไลท์สีส้มขึ้นมาเช่นเดียวกัน

2. Ctrl+Click Go To Definition ตัวนี้จัดว่าเด็ดแนะนำและบอกต่อ ลองคิดสภาวะการทำงานปกติที่เราสงสัยค่าตัวแปร หรือสงสัยว่าาฟังชั่นนั้นทำงานยังไง เเล้วต้องกด F12 เพื่อ go to definition เพื่อเปิด

อีก tab ไปเช็คโค๊ดอีกทีหนึ่ง พอได้ความก็กด back กลับหรือกดแท็ปที่ต้องการกลับ ซึ่งจัดว่าช้ามาก ถ้าลงปลักอินตัวนี้จะสามารถกด ctrl + click ที่เมทธอด/ฟังชั่นที่เราสนใจ เเล้วมันจะแสดง pop up เล็กๆมาเพื่อแสดงโค๊ดใน

ฟังชั้นนั้นอีกทีนึง แต่ตัวนี้ผมแอบเจอปัญหาว่าตอนที่ใช้งานร่วมกับ Highlight all occurrences ตัวนี้จะมีช่วงเอ๋อๆ ไปบ้างคือคลิกได้บ้างไม่เข้าบ้าง ทำให้อารมณ์เสียพอควร ต้องลบ Highlight all
occurrences ออกก่อนถึงจะทำงานสมบูรณ์

3 Solution Error Visualizer ตัวนี้ไม่ต้องอธิบายมากดูจากรูปแล้วเข้าใจเลย กล่าวคือมันจะขีดเส้นใต้สีแดงที่ไฟล์ที่มีปัญหา รวมถึง folder หรือชื่อโปรเจกที่ภายใต้มันเกิด error ขึ้น และสามารถ filter เพื่อ

เลือกเอาเฉพาะไฟล์เจ้าปัญหาออกมาอีกด้วย แต่ error จะหมายถึง complier ไม่ผ่านเท่านั้นนะครับ พวกไฟล์ js หมดสิทธิ์

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