เขียน Web Application ด้วย Node.js และ Express ใส่ใจกับความปลอดภัยกันด้วยนะครับ

CodingThailand
เผยแพร่โดย Akenarin Komkoon23 กุมภาพันธ์

มาที่สาย Node.js กันบ้าง สำหรับคนที่เขียน Web Application ด้วย Node.js และ Express อย่าลืมเขียนป้องกันและใส่ใจกับความปลอดภัยกันด้วยนะครับ

วันนี้แนะนำ middleware 2 ตัวนี้ก่อนแล้วกัน ใช้งานง่ายดี ตัวแรกชื่อว่า “lusca”

รายละเอียด: https://goo.gl/TAWdNP

.
ส่วนอีกตัว ชื่อว่า “Helmet” ครับ ก็แนะนำเช่นเดียวกัน ลองดูวิธีการเขียนได้ที่นี่

รายละเอียด: https://goo.gl/aMD2jk

 

E-BOOK ภาษา SQL ฟรี

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

.
เล่มที่ 1 E-Book “การจัดการฐานข้อมูลเบื้องต้นด้วย SQL”
ลิงก์ => https://goo.gl/rxbj59

.
เล่มที่ 2 E-Book “SQL: แบบฝึกหัดพัฒนาทักษะภาษา SQL สำหรับโปรแกรมเมอร์”
ลิงก์ => https://goo.gl/wbVpfd

เขียน Angular ได้แล้ว อยากทำ Desktop applications

สำหรับคนที่เขียน Angular ได้แล้ว อยากทำ Desktop applications แบบ cross platform (Electron) แบบง่ายๆ ลองใช้ตัวนี้ได้ครับ

.
ผมลองทดสอบเขียนดึง APIs (ตามภาพ) และลอง build เป็น Windows Apps ดู ก็ใช้ได้ดีเลย เพียงแค่รันคำสั่ง npm run electron:windows เท่านั้น 

ลองดูนะครับ

รายละเอียด: https://goo.gl/mp6BPa

แนะนำ Laravel Package ไว้ทำโหมด “Under Construction”

แนะนำ Laravel Package ไว้ทำโหมด “Under Construction” ให้กับเว็บไซต์ของเราครับ สามารถตั้งรหัส 4 หลักได้ คือคนที่มีรหัสเท่านั้นถึงจะเข้าเว็บไซต์ของเราได้ ใช้ง่ายมาก ลองดูครับ

รายละเอียด: https://goo.gl/PBq35c

24 ข้อคิด ที่ผมได้เรียนรู้ในปีที่ผ่านมาครับ

1. หากอยากได้อะไรแต่ยังไม่ได้ อาจเป็นไปได้ว่าเรายังพัฒนาตัวเอง “ไม่รอบด้าน” พอ

.
2. ความรู้เรื่องการเงินสำคัญ และเป็นคนละเรื่องกับความรู้ในสายอาชีพ จงศึกษาทั้งสองอย่างควบคู่กันไป

.
3. ฝึกเป็นคนที่รับผิดชอบชีวิตตัวเองอย่างเต็มกำลัง

.
4. แม้จะรับรายได้เป็นเงินเดือนอยู่ ก็ขอให้ลองรับงานที่คิดตามผลงานด้วย

.
5. พยายามทำงานให้เกินรายรับเสมอ

.
6. ในช่วงแรกจงรับโอกาสทั้งหมดที่เราสร้างมา แต่ในช่วงหลังจงเลือกรับโอกาสที่ดีสุดๆ จริงๆ

.
7. กล้าให้ผู้อื่นก่อน กล้าให้ในสิ่งที่มีคุณค่า แล้ววันหนึ่งจะได้รับกลับมา

.
8. การได้อยู่กับตัวเอง เป็นเวลาที่มีค่ามาก

.
9. Passive Income เกือบทุกอย่าง ไม่ใช่รอเก็บเงินอย่างเดียว ต้องดูแลมันด้วย

.
10. Passive Income ช่วยให้ชีวิตสบาย Active Income ช่วยให้ชีวิตมีความหมาย

.
11. จงลองทำอะไรใหม่ๆ ที่คอยช่วยเสริมความรู้เดิม

.
12 .ในช่วงเริ่มงานใหม่ จงโฟกัส core หลักของอาชีพให้เยอะๆ

.
13. การจะมีรายได้เพิ่มขึ้น ต้องพัฒนาตัวเองไปพร้อมๆกันทุกด้าน ไม่ใช่แค่ด้านใดด้านหนึ่งเท่านั้น

.
14. หากยังไม่มีทุน ก็ให้มองหาโอกาสจากสิ่งที่ถนัด และมีในตัวเองก่อน

.
15. แม้เราจะมีข้อมูลในมือมากแค่ไหน แต่ความชำนาญยังต้องใช้เวลาฝึกฝนเสมอ

.
16. ไม่มีความสำเร็จชั่วข้ามคืน ทุกคนที่สำเร็จล้วนผ่านการสะสมความสามารถมาหลายปี

.
17. เราไม่สามารถทำทุกอย่างที่อยากจะทำได้ เพราะฉะนั้นก็ให้ทำสิ่งที่ต้องทำให้เต็มที่

.
18. ทัศนคติที่มีต่อเงินมีผลมาก ว่าเราจะมีรายได้มาก หรือมีรายได้น้อย

.
19. จงเป็นคนเริ่มต้นอะไรง่ายๆ แบบเด็กๆ อย่ามองทุกอย่างยากเกินไปนัก

.
20. ทำเพื่อผู้อื่นบ้าง เพราะทุกอย่างที่ลงไป ล้วนมีอะไรดีๆ กลับมาเสมอ

.
21. จงใช้ชื่อเสียงที่ได้รับในทางดีเท่านั้น

.
22. ทำให้เยอะ โม้ให้น้อย

.
23. จงเป็นคนอ่อนน้อมถ่อมตนกับผู้อื่นเสมอ

.
24. คนรักและครอบครัวสำคัญเสมอในทุกๆโอกาสและชีวิตเรา หากมีกำลังก็ดูกันและกันให้เต็มที่

.

โค้ชเอก

แนะนำสำหรับคนที่อยากเริ่มเขียน Mobile App ด้วย React Native

26952542_632242900279259_7302068128138228052_o

สำหรับคนที่อยากเริ่มเขียน Mobile App ด้วย React Native แนะนำดังนี้ครับ

.
1. เราต้องมีความรู้พื้นฐาน HTML, CSS และ JavaScript (แนะนำให้ศึกษา JavaScript เวอร์ชั่น ES6/ES2015 ขึ้นไปนะครับ) สรุปคือต้องเคยเขียนเว็บมาก่อนนั่นเอง

.
2. มีพื้นฐานการเขียน React และเข้าใจ Concept ต่างๆ ยกตัวอย่างเช่น Component, Props, State เป็นต้น

https://reactjs.org/

.
3. ถ้ามีความรู้ หรือเคยเขียน Mobile App แบบ native มาบ้าง จะช่วยได้มากครับ แต่ก็ค่อยๆ ศึกษาเพิ่มเติมทีหลังได้

.
ส่วนคนที่อยากลองเขียนเลย (สำหรับคนที่ใช้ Windows) ให้ทำขั้นตอน ตามนี้

.
1. ติดตั้ง Node.js แนะนำเวอร์ชัน 8 และให้ใช้ npm เวอร์ชัน 4 แทนเวอร์ชัน 5 นะครับ (เวอร์ชัน 5 มีปัญหายังไม่รองรับ)
https://goo.gl/aAKGFH

.
2. ติดตั้ง Python แนะนำเป็นเวอร์ชัน 2
https://goo.gl/qQEmH3

.
3. ติดตั้ง JAVA JDK แนะนำเวอร์ชัน 8
https://goo.gl/vnkT4Y

.
4. ติดตั้ง React Native CLI เปิด Command Prompt แล้วรันคำสั่ง

npm install -g react-native-cli

.
5. สร้างโปรเจคใหม่ ด้วยคำสั่ง
create-react-native-app MyReactNativeProject

.
6. cd เข้าไปในโฟลเดอร์ MyReactNativeProject แล้วรันคำสั่ง npm start

จะมีคู่มือแนะนำต่างๆ และจะได้ QR code มาครับ

.
7. การทดสอบ App ในมือถือ ให้ติดตั้ง Expo Client ในมือถือเราก่อนครับ ตามลิงก์ https://goo.gl/7ppgPm

ส่วนการทดสอบ app นั้นก็แค่ scan QR code จากข้อ 6 จะสามารถทดสอบ app บนเครื่องจริงได้เลย (มือถือกับเครื่องคอมฯเราต้องอยู่ในวงแลนเดียวกัน)

.
8. ถ้าต้องการแก้ไขหรือเขียนโค้ด ก็สามารถใช้ Editor ที่ถนัดได้เลยนะครับ แนะนำ Visual Studio Code

.
ส่วนถ้าใครอยาก build เป็น android app หรือทดสอบผ่านสาย usb เครื่องจริง ก็ให้ติดตั้ง Android Studio ด้วย มีขั้นตอนละเอียดแล้ว ตามดูคู่มือของ React Native ได้เลยตามนี้ https://goo.gl/YK3Dkx

.
ลองดูนะครับ
โค้ชเอก

สรุป 39 คำสั่ง Laravel 5.5 ที่ใช้งานบ่อย

laravel55

สรุป 39 คำสั่ง! Laravel 5.5 ที่ใช้งานบ่อย
———–

1. แสดงผลตัวแปรต่างๆที่ไปที่ view
view(‘task.index’)->with(‘tasks’, Task::all());
หรือ
view(‘task.index’,[‘tasks’, Task::all()]);


2. route cache

php artisan route:cache

3. ล้าง route cache
php artisan route:clear

4. สร้าง csrf tokens field ให้กับฟอร์ม
{{ csrf_field(); }}

5. คำสั่งเกี่ยวกับการ Redirects

return redirect()->to(‘login’);

หรือ
return redirect(‘login’);

6. route redirect เช่น
return redirect()->route(‘home.index’);
return redirect()->route(‘home.show’,[‘id’, 99]);

7. redirect back() ใช้
redirect()->back();
หรือเขียนย่อๆ แค่นี้
back();

8. redirect ไปที่ route ที่ชื่อว่า home
home();

9. refresh หน้า
refresh();

10. redirect โดยใช้ action() เช่น
redirect()->action(‘ชื่อController@ชื่อmethod’);

11. สร้าง flash data session
redirect()->with([‘error’=>true,’message’=>’Whoops!’]);

12. aborting the request
abort(403,’คุณไม่มีสิทธิ์ใช้งานส่วนนี้’);

13. return json
return response()->json(User::all());

14. ดาวน์โหลดไฟล์
return response()->download(‘file1.pdf’,’file2.pdf’);
หรือถ้าต้องการแสดงที่ browser ก็ใช้
return response()->file(‘file1.pdf’);

15. รับ input ทั้งหมดจาก request
$request->all();

16.รับ input ยกเว้นบางตัวใช้ except
$request->except(‘_token’);

17. รับ input เฉพาะที่ต้องการใช้ only
$request->only([‘firstname’,’email’]);

18. ใช้ has จะ return false ถ้ามีตัวแปร และว่าง
if ($request->has(‘file’)) {

}

19. จะ return true ถ้ามีตัวแปร และว่าง
if ($request->exists(’email’)) {

}

20. รับ request ทีละฟิลด์
$request->input(’email’)

21. ถ้าเป็น JSON Input ก็ใช้เหมือนกัน อ้างจุดไปที่ object

22. Accessors = getting data ของ Model

23. Mutators = setting data ของ Model

24. หากอยากซ่อนบางฟิลด์ ก็กำหนดที่ Model นั้นๆ ($hidden) เช่น

class Contact extends Model {

public $hidden = [‘password’,’email’];

หรือ เลือกแสดงบางฟิดล์ก็ใช้ ($visible) เช่น

public $visible = [‘name’,’gpa’];
}

25. เข้าถึงข้อมูลของ user โดยใช้ request เช่นอยากได้อีเมล์ ก็เขียนง่ายๆ ตามนี้
$request->user()->email
หรือเขียนที่ view ก็ได้ เช่น
ยินดีต้อนรับคุณ {{ auth()->user()->name }}

26. ตั้งชื่อให้กับ route เพื่อง่ายต่อการเรียกใช้งาน โดยระบุ ->name(‘ชื่อ route’) เช่น
Route::get(‘/home’, ‘HomeController@index’)->name(‘home’);

27. config cache ใช้คำสั่ง
php artisan config:cache

28. ล้าง config cache ใช้คำสั่ง
php artisan config:clear

29. ล้าง application cache
php artisan cache:clear

30. Compiling Assets (Laravel Mix)
ติดตั้ง Dependencies ใช้คำสั่ง npm install
รัน Laravel Mix ใช้คำสั่ง npm run dev หรือ npm run watch
หรือหากต้องการรันเพื่อ production ก็ใช้คำสั่ง npm run production

31. ดูว่า Laravel เตรียม frontend preset อะไรให้เราบ้างใช้คำสั่ง (ปกติก็มี bootstrap, vue, react, none)
php artisan preset –help

32. สร้างระบบ Authentication ใช้คำสั่ง (มีระบบล็อกอินมาให้เลย)
php artisan make:auth

33. แสดง route ทั้งหมดของ app เรา
php artisan route:list

34. คำสั่งสำหรับลบตารางทั้งหมด และสั่ง migrate ใหม่อีกครั้ง
php artisan migrate:fresh

35. คำสั่งแบ่งหน้า ใช้
$persons = Person::paginate(20);
หรือ
$persons = Person::simplePaginate(15);

36. ตัวอย่างการทำ Validation (เขียนที่ controller)
$request->validate([

‘title’ => ‘required’,

‘price’ => ‘required|numeric’,

‘image’ => ‘mimes:jpeg,jpg,png’
],[

‘title.required’ => ‘กรุณากรอกชื่อสินค้าด้วย’,

price.required’ => ‘กรุณากรอกราคา’,

‘price.numeric’ => ‘กรุณากรอกราคาเป็นตัวเลขเท่านั้น’,

‘image.mimes’ => ‘ไฟล์ที่เลือกต้องนามสกุล jpeg, jpg, png เท่านั้น’

]);

 

37. แสดงวันที่และเวลาปัจจุบัน ใช้คำสั่ง now() หรือ วันที่อย่างเดียวใช้ today() เช่น
{{ now() }}
{{ today() }}

 

38. ใช้ Bcrypt เพื่อ hash รหัสผ่าน เช่น
$password = bcrypt(‘1234’);

 

39. เรียกค่า config จากไฟล์ .env ใช้ config() แต่ตอนอ้างถึงใช้เครื่องหมายจุด แทน _ (underscore) เช่น
$value = config(‘app.timezone’);

 

สุดท้ายหากสนใจเขียน Laravel 5.5 แนะนำ e-Book เล่มนี้ครับ

http://www.codingthailand.com/laravel55ebook/
ขอบคุณครับ

โค้ชเอก
Coding Mentor

สรุป 20 เทคนิคการใช้งาน Visual Studio Code (Editor) ที่น่าสนใจ

vscode

 

สรุป 20 เทคนิคการใช้งาน Visual Studio Code (Editor) ที่น่าสนใจสำหรับมือใหม่ครับ

—————————-
 
.
1. Ctrl+P เปิดไฟล์อย่างรวดเร็ว โดยการพิมพ์ชื่อไฟล์ได้เลย
 
.
2. Ctrl+Shift+F ค้นหาคำแบบรวดเร็วในไฟล์ต่างๆ
 
.
3. Ctrl+Shift+P
แสดงชุดคำสั่งต่างๆ เช่น ค้นหาการตั้งค่าของ edtior ลองพิมพ์ color theme เพื่อเปลี่ยน theme ของ editor
 
.
4. ลองใช้ฟอนต์ Menlo-Regular (สวยดี) ติดตั้งลง windows ก่อน แล้วตั้งค่าที่ User Settings ดังนี้
 
“editor.fontFamily”: “‘Menlo Regular’, Consolas, ‘Courier New’, monospace”,
 
.
5. Ctrl+B เปิด-ปิด Sidebar
 
.
6. ซ่อน แถบ Open Editors ใน EXPLORER ตั้งค่าที่ User Settings ดังนี้
 
“explorer.openEditors.visible”: 0,
 
.
7. ซ่อน mini map ด้านขวา จะได้ดูสะอาดๆ ตั้งค่าที่ User Settings ดังนี้
 
“editor.minimap.enabled”: false,
 
.
8. สำหรับคนที่เขียน PHP ให้ติดตั้ง extensions phpintelephense และ php debug
 
.
9. ลองติดตั้ง extension ชื่อว่า snippet creator ไว้สร้าง snippet ใช้เองได้
 
.
10. หากพิมพ์โค้ดแล้ว เวลากด tab ต้องการใช้งาน snippet ด้วย ตั้งค่าที่ User Settings ดังนี้
 
“editor.tabCompletion”: true,
 
.
11. หากต้องการใช้ terminal เป็น git แทน powershell หรือ cmd ก็ตั้งค่าที่ User Settings ดังนี้
 
“terminal.integrated.shell.windows”: “C:\\Program Files\\Git\\bin\\bash.exe”,
“terminal.integrated.shellArgs.windows”: [
“-l”,
“-i”
]
 
.
12. ใช้ Ctrl+K เพื่อเคลียร์ข้อความใน terminal
 
.
13. จัดรูปแบบโค้ด ใช้ Shift+Alt+F
 
.
14. หากต้องการจัดรูปแบบโค้ดตอนบันทึกไฟล์ทุกครั้งก็ให้ตั้งค่า User Settings ดังนี้
 
“editor.formatOnSave”: true
 
.
15. สำหรับคนที่เขียน Angular ติดตั้ง extension ชื่อว่า Angular Essentials ได้เลย ของคุณ john papa
 
.
16. สำหรับคนที่เขียน Vue.js ก็ใช้ extension ชื่อว่า Vetur
 
.
17. สำหรับคนที่ใช้ Git แนะนำ extensions ชื่อว่า Git History และ GitLens ครับ
 
.
18. กด Alt ค้างไว้แล้วคลิกเมาส์ที่บรรทัดนั้นๆ หากต้องการใช้ multi-cursor
 
.
19. หากใครใช้ Sublime Text ก็ให้ติดตั้ง extension ชื่อว่า Sublime Text Keymap เพื่อใช้ keyboard shortcuts ที่คุ้นเคยได้
.

20. หากต้องการแก้ไข keyboard shortcuts ให้ Ctrl+Shift+P แล้วพิมพ์ Open Keyboard Shortcuts เพื่อแก้ไข shortcuts ต่างๆตามต้องการ

เว็บไซต์หลัก: https://goo.gl/cqbNhq

หากสนใจ shortcuts ต่างๆ ดูเพิ่มได้ที่ : https://goo.gl/ziLhkA

 
 
โค้ชเอก
Coding Mentor

มีอะไรใหม่ใน Angular เวอร์ชัน 5

ng5

ตอนนี้ Angular เวอร์ชัน 5.0.0 ออกมาแล้วนะครับ มาดูกันว่ามีอะไรใหม่บ้าง (ขอรวมๆเลยแล้วกันนะ)

1. ตอนนี้หากใครอัปเดต Angular CLI v.1.5 เวลาสร้างโปรเจคใหม่จะเป็น Angular 5 เลยครับ

2. มี preserveWhitespaces ซึ่งเป็น option สำหรับนำ white space ต่างๆ ออกจากโค้ดของ template
แน่นอนทำให้ขนาดไฟล์ bundle ลดลง โดยจะต้องกำหนดให้เป็น false จะกำหนดที่ tsconfig.json หรือในส่วนของ @Component ก็ได้

3. ในส่วนของฟอร์ม จะมี option ใหม่ คือ updateOn ช่วยให้ระบุ events ที่ต้องการตรวจสอบความถูกต้องข้อมูลว่าจะใช้ event อะไร เช่น จะใช้ event blur หรือ submit ก็ได้ โดยจะแทนการใช้ event change แบบเดิมเพื่อให้ประสิทธิภาพดีขึ้น เช่น

<input type=”text” required [(ngModel)]=”userName” name=”userName” [ngModelOptions]=”{updateOn: ‘blur’}”>

4. ส่วนของ Router มีการเพิ่ม lifecycle events ใหม่ เช่น ActivationStart, GuardsCheckStart เป็นต้น

5. มี package service worker ให้ใช้งาน (@angular/service-worker) แต่ยังเป็น beta อยู่

6. ต้องใช้ TypeScript 2.4.x และ RxJS 5.5.2

7. ใครที่ใช้เคยคำสั่ง <template> อยู่ให้เปลี่ยนไปใช้ <ng-template> แทน

8. ใช้ HttpClient ตัวใหม่ ที่มีมาตั้งแต่ Angular 4.3 ส่วนตัวเดิมจะเลิกใช้แล้ว (แนะนำให้ใช้ตัวใหม่เลย)
ใน Angular 5 เราสามารถที่จะใส่ headers หรือ params เป็น object ได้โดยตรงเลย (ไม่ต้อง new class ก็ได้)
เช่น

เดิม
const headers = new HttpHeaders().set(‘Authorization’, ‘codingthailand’);
const params = new HttpParams().set(‘course_id’, ‘1’);
return this.http.get(‘/api/users’, { headers, params });

เขียนใหม่ได้เป็น
const headers = { ‘Authorization’: ‘codingthailand’ };
const params = { ‘course_id’: ‘1’ };
return this.http.get(‘/api/users’, { headers, params });

9. หากใครที่ใช้ pipes เกี่ยวกับ date, currency หรืออื่นๆ ให้ดูการเปลี่ยนแปลงต่างๆด้วยมีการเปลี่ยนหลายจุด

10. RxJS เวอร์ชันใหม่ แนะนำให้ import แบบใหม่นะครับ เช่น จากเดิม

import ‘rxjs/add/observable/of’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/filter’;

เปลี่ยนเป็น

import { of } from ‘rxjs/observable/of’;
import { map, filter } from ‘rxjs/operators’;

สำหรับคนที่ต้องการอัปเกรด ก็ดูได้ที่นี่ : https://goo.gl/KY1569

อ่านการเปลี่ยนแปลงทั้งหมด ได้ที่นี่ : https://goo.gl/RkZegz

ขอให้สนุกกับการเขียนโค้ดครับ
โค้ชเอก
Coding Mentor