การประกาศตัวแปร และชนิดข้อมูลของ TypeScript

tscript

สำหรับคนที่เตรียมตัวศึกษา Angular 2 คงหนีไม่พ้นต้องศึกษา TypeScript ด้วย มาดูตัวอย่างการประกาศตัวแปร และชนิดข้อมูลของ TypeScript ง่ายๆกันครับ (Built-in types)

รูปแบบ

let ชื่อตัวแปร: ชนิดข้อมูล;

– String

var name: string = ‘CodingThailand’;

– Number

let age: number = 20;

– Boolean

let married: boolean = true;

– Array

let jobs: Array<string> = [‘IBM’, ‘Microsoft’, ‘Google’];
let jobs: string[] = [‘Apple’, ‘Dell’, ‘HP’];
หรือ
let jobs: Array<number> = [1, 2, 3];
let jobs: number[] = [4, 6, 8];

Enums

enum Role {Employee, Manager, Admin};
let role: Role = Role.Employee;

Any (เป็น default type เก็บอะไรก็ได้)

let thing: any = ‘Akenarin Komkoon’;
thing = 1;
thing = [1, 2, 3];

Void (ใช้สำหรับฟังก์ชันที่ไม่มีการคืนค่ากลับ)

function setTitle(name: string): void {
this.name = name;
}

ไอคอนแบบ Material Design แนะนำเว็บนี้

ใครที่ทำเว็บอยู่ อยากได้ไอคอนแบบ Material Design แนะนำเว็บนี้ครับ ไอคอนสวยๆเยอะเลย 🙂

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

ใช้ร่วมกับ Bootstrap ก็ได้ครับ ลองดูที่นี่

https://goo.gl/NWa5Uj

หรือจะใช้ของ google ก็มีด้วยตามนี้ครับ
https://goo.gl/VALOrW

แนะนำ Chartist.js ใช้กับ Angular 2 และ Ionic 2

สำหรับคนที่กำลังมองหา Chart เพื่อนำมาทำรายงาน ลองใช้ตัวนี้ได้ครับ จริงๆก็ใช้ได้ทั้งฝั่ง JS/Node.js และ PHP แต่ตัวนี้จะพิเศษหน่อย สำหรับคนที่กำลังศึกษา Angular 2 หรือ Ionic 2 อยู่ สามารถติดตั้งแล้ว import เข้ามาใช้ในโปรเจคได้เลย สะดวกมากๆ ลองๆ

เว็บไซต์หลัก:

http://goo.gl/z6ge5C

สำหรับ Angular 2 และ Ionic 2:
https://goo.gl/By5xi1

แนะนำ 6 เว็บไซต์ ไว้เขียนส่งอีเมล สำหรับ Web Developer ครับ

สำหรับคนที่มีปัญหาเขียน PHP แล้วส่งเมลได้บ้างไม่ได้บ้าง หรือส่งเมลไปแล้วไม่เข้า inbox ผมแนะนำให้ใช้บริการ SMTP Service ดีกว่าครั

ใครอยากใช้อันไหนก็ลองดูได้เลยครับ ที่สำคัญทุกเจ้าที่แนะนำมีบริการฟรีด้วย งั้นแนะนำแบบฟรีมากไปหาฟรีน้อยแล้วกันนะ 55+

1. ElasticEmail ฟรี 25,000 ฉบับ/เดือน
เว็บไซต์: https://elasticemail.com/
คู่มือ PHP : https://goo.gl/Z4zUwl

2. Postmark ฟรี 25,000 ฉบับ/เดือน
เว็บไซต์: https://postmarkapp.com/
คู่มือ PHP: http://goo.gl/GG1Fki

3. SendGrid ฟรี 12,000 ฉบับ/เดือน
เว็บไซต์: https://sendgrid.com
คู่มือ PHP: https://goo.gl/sznb8g

4. MailGun ฟรี 10,000 ฉบับ/เดือน
เว็บไซต์: https://www.mailgun.com
คู่มือ PHP : https://goo.gl/Q0M8z0

5. SendInBlue ฟรี 9,000 ฉบับ/เดือน
เว็บไซต์: https://www.sendinblue.com/
คู่มือ PHP: https://goo.gl/usctco

6. MailJet ฟรี 6,000 ฉบับ/เดือน
เว็บไซต์: https://www.mailjet.com/
คู่มือ PHP: http://goo.gl/RnKqRA

ขอให้สนุกกับการเขียนส่งเมลนะครับ

ฝั่ง .NET ออก .NET Core 1.0 release เรียบร้อยแล้วครับ

netcore

ฝั่ง .NET ออก .NET Core 1.0 release เรียบร้อยแล้วครับ รองรับ C#, VB และ F# ประกอบด้วย .NET Core runtime libraries ต่างๆ พร้อมเครื่องมือ และยังมี ASP.NET Core libraries (ทำ web app) ด้วยครับ

จุดขาย มีดังนี้
– เป็น Cross-platform รันได้ทั้ง Windows, macOS และ Linux
– มีความยืดหยุ่นมากในการ deploy app
– มี Command-line tools ช่วยให้เขียนโค้ด สร้าง app ได้ง่ายขึ้น
– มีความเข้ากันได้กับ .NET Framework, Xamarin และ Mono ผ่าน .NET Standard Library
– เป็น Open source: ใช้ MIT และ Apache 2 licenses
– สนับสนุน โดย Microsoft

สำหรับมือใหม่ อยากฝึกเขียน ให้เรียงลำดับการติดตั้ง ดังนี้

1. Visual Studio 2015 แนะนำ Visual Studio Community (ฟรี)
http://goo.gl/WikArB

2. ติดตั้ง Visual Studio Update 3
https://goo.gl/bG2Ng2

3. ติดตั้ง .NET Core Tools for Visual Studio
https://goo.gl/x6IuNL
เว็บไซต์หลัก และคู่มือต่างๆ ดูได้ที่ : https://dotnet.github.io/

แค่นี้ก็พร้อมศึกษาแล้วครับ ปกติผมชอบเขียน .NET มาก ถ้ามีโอกาสคงได้เห็นวิดีโอสอนออกมา

การที่ผมจบ ม.ราชภัฏฯ มันไม่มีแว่บไหนเลยที่ผมจะคิดน้อยใจ

การที่ผมจบ ม.ราชภัฏฯ มันไม่มีแว่บไหนเลยที่ผมจะคิดน้อยใจที่จบจากที่นี่

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

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

ผมเริ่มชอบคอมฯ เมื่อไร่มานั่งนึกย้อนกลับไป อาจเป็นตอนที่อยู่ปี 3 ที่ลองเขียนโค้ดครั้งแรกเพื่อทำโปรเจคจบ (ตอนนั้นเขียน Object Pascal – Delphi 7)

อ้าวววว ยิ่งเขียน ยิ่งสนุก ยิ่งเขียนยิ่งชอบ เหมือนชีวิตได้ไปต่อ 55+ หมกมุ่นสุดๆ ทำจนโปรเจคสำเร็จจนได้

ย้อนกลับตอนอยู่ปี 2 บอกเลย โคตรไม่ตั้งใจเรียน 55+ ด้วยความที่ผมเรียนหลักสูตรเสาร์อาทิตย์ มีแต่เพื่อนรุ่นพี่ ก็ไม่แปลกใจนัก ที่จะพากันเที่ยวเยอะเป็นพิเศษ 55++

แต่นั่นอาจทำให้ผมได้วิชา “ชีวิต” เยอะ พอๆวิชา “ความรู้”

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

แด่ทุกท่านที่ยังคงใฝ่ดีกับชีวิตมาจนถึงทุกวันนี้

แนะนำขั้นตอนการเรียนรู้ JavaScript Framework สมัยใหม่

ถ้าอยากศึกษา JavaScript framework สมัยใหม่ แน่นอนเราต้องเรียนรู้ JavaScript สมัยใหม่ด้วยครับ ปัจจุบัน JavaScript ได้เพิ่มคุณสมบัติต่างๆ เข้ามามากมายเลย

ถ้าให้ผมแนะนำ ขอแนะนำ ดังนี้

1. ศึกษา JavaScript พื้นฐานก่อนครับ ไม่ว่าเป็นเรื่องง่ายๆอย่าง ตัวแปร (variable) , Arrays, Objects, Functions และอื่นๆ ผมทำสอนไว้บ้างตามนี้ http://goo.gl/vXT9bC

2. จากนั้นต่อด้วย JavaScript ES6 ครับ ดูหัวข้อคร่าวๆได้ในภาพ (ตรงนี้อนาคตก็คงมี ES7 ,ES8 แต่ก็ไม่ต้องห่วงครับ ถ้าเรามีพื้นฐาน ES6 อยู่แล้ว ก็ให้ศึกษาคุณสมบัติที่มันเพิ่มเติมเข้ามา)

ยกตัวอย่าง ถ้าเราต้องการศึกษา Angular 2 ซึ่งเขียนด้วย TypeScript (จริงๆเขียนด้วย ES6 ก็ได้) เราก็ศึกษาเพิ่มเติมอีกนิดหน่อย เพราะเราสามารถนำความรู้จาก JavaScript ES6 มาใช้ได้เลย (TypeScript เองเป็น superset ของ JS อยู่แล้ว

ส่วน JavaScript Framework อื่นๆ ที่ไม่ได้ใช้ TypeScript แน่นอนก็สามารถนำความรู้ JavaScript ES6 มาใช้ได้เลย 🙂

อย่าลืมครับ “การข้ามความรู้พื้นฐาน มักสร้างความยุ่งยากตามมาเสมอ และจะยุ่งยากมากขึ้นไปอีก ถ้าข้ามความรู้พื้นฐาน JavaScript 55+ ” มาลุยกัน!

บอกเลย ปี 2016 เป็นปีทองของ Web Developer อย่างแท้จริง!

ปี 2016 นี้ ถือเป็นปีที่เทคโนโลยีส่วนใหญ่จะใหม่ และเปลี่ยนจากเวอร์ชันก่อนหน้าค่อนข้างมากครับ ข่าวดี คือ เรากำลังเรียนรู้อะไรใหม่ๆพร้อมๆกับ Web Developer จากทั่วโลก และทุกคนก็เริ่มศึกษาจาก 0 คล้ายๆกัน 🙂

ยกตัวอย่าง ด้านล่างนี้ สามารถเริ่มเรียนรู้ได้เลยครับ แม้จะเป็นมือใหม่ก็แนะนำเริ่มจากจุดนี้ได้เลย
1. JavaScript ES2015/ES6, TypeScript
2. PHP 7
3. Yii Framework 2
4. Laravel 5.2
5. Angular 2, React
6. Ionic Framework 2, React Native, Xamarin
7. ASP.NET Core

ถ้าอยากเริ่มอัพเกรดตัวเอง ปีนี้แหละครับเหมาะสุดๆ เลย ลุยเลยครับ

เรื่องเล่า Angular 2 (RC5)

ag2

สำหรับคนที่ตาม Angular 2 อยู่ ตอนนี้เป็นเวอร์ชัน RC5 (2.0.0-rc.5) ครับ

ใน RC5 นี้ได้เพิ่ม features ที่สำคัญมาก ได้แก่ Angular Modules (@NgModule)การมาของ Angular Modules ทำให้ angular libraies หลายๆตัวจะเริ่มทยอยกลายเป็น modules ครับ ไม่ว่าจะเป็น FormsModule, HttpModule, RouterModule เป็นต้น ทำให้โค้ดที่เคยเขียนต้องเขียนใหม่หลายจุดเลยทีเดียว
เช่นเดียวกันครับ พวก third party libraries ทั้งหลายก็จะเป็นกลายเป็น Modules เหมือนกัน เช่น Meterial Design, Ionic, AngularFire2 (Firebase) เป็นต้น
ข้อดีของ Angular Modules จะทำให้โค้ดในแต่ละ component ของเราดูสั้นลง สะอาด และอ่านง่ายขึ้น เพราะเราสามารถ import คลาส, Services หรือ Modules ต่างๆ เข้ามาได้ตั้งแต่ app เริ่มทำงานเลย ทำให้ component ที่เราเขียนไม่ต้อง import อะไรซ้ำๆ และนำไปใช้ได้ทันทีจากนี้ไปในทุกๆ App ที่เขียนด้วย Angular 2 จะมี root module ครับ หรือเรียกอีกอย่างหนึ่งว่า AppModule ก็ได้ อย่างน้อย 1 ตัวเสมอ (ในไฟล์ app.module.ts)

อีกอันหนึ่งที่มาใหม่คือ โหมด Just in Time (JIT) Compilation ที่จะช่วยให้เรา compile component และ modules ต่างๆได้ไวขึ้นขณะที่เรากำลังพัฒนา app อยู่ (development mode) และที่คู่กันคือโหมด Ahead of Time (AOT) Compilation ที่ช่วยเพิ่มประสิทธิภาพ และช่วยให้ app ของเราทำงานไวขึ้นมาก อันนี้แนะนำให้ใช้ตอนเป็น production mode

 

ตอนขึ้น production ก็อย่าลืมเปลี่ยนโหมด และ enable production กันด้วยนะครับ 🙂

ถามว่า Angular 2 จะออกตัวจริงเมื่อไหร่? การมาของ RC5 แสดงให้เห็นว่าคงใกล้มากๆแล้วครับ (เห็นบอกไม่กี่สัปดาห์)

ไว้มีอะไรใหม่ๆจะมาเล่าให้ฟังกันอีก

7 ข้อแนะนำสำหรับมือใหม่ที่กำลังจะศึกษา Angular 2

ag222


1. Angular 2 มี style guide หรือคู่มือ/ข้อแนะนำ สำหรับการเขียนโค้ดที่ดีครับ แนะนำให้ศึกษาก่อนตามนี้ https://goo.gl/wW1wRf

หรือง่ายกว่านั้น เวลาสร้างโปรเจคใหม่ หรือเขียนโค้ด ผมแนะนำให้ใช้ Angular-cli ครับ (https://goo.gl/pA0K5q) นอกจากจะช่วยเรา gen code แล้ว โค้ดที่ gen มา จะได้โค้ดซึ่งตรงกับ style guide ที่ดีด้วย สบายเลย 🙂

ตัวนี้ https://goo.gl/WsGW7o เป็นคู่มือ Angular CLI อย่าลืมพิมพ์แปะฝาบ้านไว้ 55+

2. Editor เลือกตามใจชอบได้ เอาตัวที่ใช้กันบ่อยๆ ก็มี 3 ตัว ดังนี้

– Visual Studio Code (https://goo.gl/ex3TCL)

– Sublime Text (plugin สำหรับเขียน Angular 2 (TypeScript) ดูที่นี่https://goo.gl/ZBaVGk)

– Atom Editor (plugin สำหรับเขียน TypeScript ดูที่นี่
https://goo.gl/qdb78x)

3. แนะนำให้ติดตั้ง Augury เป็น Google Chrome extenson สำหรับ Debug Angular 2 ครับ (ขาดไมได้เลยตัวนี้)
https://goo.gl/QX98gz

4. อภิธานศัพท์ (Glossary) หรือศัพท์ที่เกี่ยวข้องกับ Angular 2 แนะนำว่าเราต้องรู้ที่มาที่ไปของศัพท์แต่ละคำครับ ว่ามันคืออะไร เพราะหลายคำเป็นพื้นฐานที่เราต้องรู้มาก่อน
https://goo.gl/5Pg8Yi

5. อีกอันที่ควร print แปะฝาบ้านไว้ คือ ANGULAR CHEAT SHEET ครับ เป็นแผ่นสรุปข้อแนะนำ และโค้ดที่ใช้บ่อยๆใน Angular 2
https://goo.gl/NazUZi

6. พื้นฐานที่หลายคนมองข้ามคือ การ set <title> ให้กับ web pages แนะนำให้ใช้ Title service แทนการ set ค่าเข้าไปตรงๆที่ tag html ครับ ไม่ยาก ตามไปดูเรื่องนี้ได้ที่
https://goo.gl/DMMS8r

7. ถ้าอยากทำเอกสารคู่มือเพื่อธิบายโค้ด หรือโปรเจคที่เราเขียน แนะนำให้ใช้ Documentation generator สำหรับ TypeScript ครับ ตามนี้
https://goo.gl/XlMsz7

 

การเริ่มต้นที่ดี ช่วยให้เราประหยัดเวลาชีวิตไปได้หลายนาทีแน่นอน 55+

ฝากมือใหม่ไว้ 7 ข้อก่อนนะครับ ถ้ามีอะไรเพิ่มเติมจะมาเล่าให้ฟังเรื่อยๆ

—-
โค้ชเอก