Month: สิงหาคม 2018

Laravel 5.7 กำลังจะมาครับ

โค้ชเอก Leave a comment

Laravel 5.7 กำลังจะมาครับ (คงจะมาราวๆ สิ้นเดือน ส.ค.61 นี้) ในเวอร์ชันนี้ก็มีการเปลี่ยนแปลงจากเวอร์ชัน 5.6 บ้างครับ แต่โดยรวมไม่เยอะมากเท่าไหร่ สามารถอัปเกรดกันได้เลย

.
ผมลองสรุปให้คร่าวๆนะครับว่ามีอะไรบ้าง มาดูกันเลย

.
1. Symfony Dump Server

เราสามารถที่จะ log หรือ dump ดูข้อมูลจากการเรียก API ได้ที่ console ครับ หรือจะกำหนด output ในรูปแบบ html ก็ได้

โดยใช้คำสั่ง php artisan dump-server

ดูภาพประกอบได้ที่: http://bit.ly/2MWwicx

.
2.Email Verification

ใน Laravel 5.7 จะมีระบบการยืนยันตัวตนทางอีเมลมาให้เลยครับ เราไม่ต้องเขียนเอง!

ดูคู่มือเพิ่มเติมได้ที่: http://bit.ly/2Pmq0Vm

.
3. Guest User Gates / Policies

ในเวอร์ชันนี้ เราสามารถอนุญาต guest ให้เข้าถึงส่วนต่างๆของ app เราได้โดยไม่ต้อง login ครับ เพียงแค่กำหนดเครื่องหมาย ? เข้าไปที่ User argument

Gate::define(‘update-post’, function (?User $user, Post $post) {
// …
})

.
4. Paginator Links

เราสามารถ custom จำนวน link ของการแบ่งหน้าได้โดยใช้ method onEachSide ยกตัวอย่างเช่น

{{ $paginator->onEachSide(5)->links() }}

.
5. จะมีการยกเลิก or Operator ของ Blade ครับ ให้เปลี่ยนมาใช้เครื่องหมาย ?? (null coalesce) แทน

// Laravel 5.6…
{{ $foo or ‘default’ }}

// Laravel 5.7…
{{ $foo ?? ‘default’ }}

.
6. เมธอด Route::redirect() จะมีเปลี่ยนโค้ด default ของ http status จาก 301 ไปเป็น 302 ครับ!
แต่หากอยากใช้เป็น 301 อยู่ก็สามารถใช้เมธอด permanentRedirect() ได้ครับ

// Return a 302 redirect…
Route::redirect(‘/foo’, ‘/bar’);

// Return a 301 redirect…
Route::redirect(‘/foo’, ‘/bar’, 301);

// Return a 301 redirect…
Route::permanentRedirect(‘/foo’, ‘/bar’);

.
.
จริงๆ ยังมีอีกหลายอย่างนะครับ ลองอ่านเพิ่มเติมได้ที่คู่มือของ Laravel ได้เลย http://bit.ly/2MWADfW

วันนี้มาแนะนำ CSS framework สวยๆครับ

โค้ชเอก Leave a comment

วันนี้มาแนะนำ CSS framework สวยๆครับ เป็นอีกทางเลือกหนึ่งที่น่าใช้นอกเหนือจากเจ้าดังๆ นะ

1. PAPERCSS
รายละเอียด: http://bit.ly/2v4pQth

2. Shoelace
รายละเอียด: http://bit.ly/2LxAAuo

3. Picnic CSS
รายละเอียด: http://bit.ly/2Op7ZFf

4. Base
รายละเอียด: http://bit.ly/2LW4ww9

.
ลองดูนะครับ การใช้งานก็ไม่ต่างจากพวก Bootstrap หรือ Foundation ครับ

Ionic Framework 4 beta ออกมาให้ลองใช้กันแล้วนะครับ

โค้ชเอก Leave a comment

ตอนนี้ Ionic Framework 4 beta ออกมาให้ลองใช้กันแล้วนะครับ

สิ่งใหม่ในเวอร์ชันนี้มีหลายอย่าง เช่น นอกจากเราจะเขียน Ionic ด้วย Angular ล่าสุดแล้ว ต่อไปเราสามารถเขียนด้วย Vue.js และ React ได้อีกด้วย!

.
Ionic Framework นั้นไม่ได้เป็น Framework ที่ทำได้แค่ Mobile App (iOS และ Android) เท่านั้นนะครับ แต่เรายังสามารถทำ desktop app และ Progressive Web App ได้แบบง่ายๆอีกด้วย และทั้งหมดที่ว่ามานี้คือสามารถเขียนได้ด้วยโค้ดชุดเดียวกัน (one code base Write once, run anywhere)

.
มาดูสรุปสิ่งสำคัญใน Ionic 4 กันครับ

.
1. สำหรับคนที่เขียน Ionic ด้วย Angular ต่อไปนี้เราสามารถใช้งาน Angular CLI และ Angular Router ได้เลยนะครับ Ionic 4 จะใช้ของ Angular เลย แน่นอนเราจะได้ใช้ Angular CLI และ Angular Router ใน Ionic ที่ใหม่และอัปเดตล่าสุดเสมอ

.
2. สำหรับคนที่่อยากลองใช้ Ionic 4 ก็ใช้คำสั่ง

npm install -g ionic

สำหรับติดตั้ง Ionic CLI ได้เลยครับ และสร้างโปรเจคใหม่ด้วยคำสั่ง (กรณีใช้ Angular) ดังนี้

ionic start myApp sidemenu –type=angular

.
3. แน่นอนว่าตอนนี้ Ionic 4 ยังเป็น beta อยู่ อาจยังไม่เหมาะสำหรับงาน production ในช่วงนี้ ก็แนะนำให้ใช้ Ionic 3 เหมือนเดิมก่อนได้ครับ แค่ติดตั้ง CLI ด้วยคำสั่ง
npm install -g ionic@3

.
4. Components หลายตัวเช่น Loading, Toast, หรือ Alert จะเปลี่ยนมาใช้ promise-based ครับ คือเราจะใช้ .then() หรือจะใช้ async/await ก็ได้เช่นเดียวกัน ยกตัวอย่างเช่น

async showAlert() {
const alert = await this.alertCtrl.create({
message: “CodingThailand”,
subHeader: “coding mentor”
});

await alert.present();
}

.
5. สำหรับเรื่อง Navigation ต่อไปตัว NavController ในอนาคตจะเลิกใช้แล้วครับ แนะนำให้ใช้ Angular Router แทนเพราะตัวสามารถทำ lazy loading ได้ง่ายเลย

อ้อ คำสั่ง router-outlet ของตัว Angular Router ใน Ionic 4 นั้นจะใช้ ion-router-outlet แทนนะครับ การใช้งานเหมือนกันเพียงแต่จะมีการเพิ่ม transitions เข้ามา

.
6. อย่างที่บอกไปว่าเรื่องของ Navigation จะใช้ Anagular Router หากต้องการทำ Lazy Loading เราก็มาใช้ loadChildren ของ Angular Router นั่นเอง

.
7. ส่วนเรื่องอื่น ก็เป็นเรื่องของ Markup ต่างๆครับที่เปลี่ยนแต่ก็ไม่ต้องจำครับ เพราะเราสามารถ copy โค้ดจากคู่มือเค้ามาวางได้เลย

.
8. เปลี่ยน Package Name จาก ionic-angular เป็น @ionic/angular

.
9.เปลี่ยน RxJS เวอร์ชัน 5 ไปเป็นเวอร์ชัน 6

.
10. Lifecycle Events บางส่วนจะเหมือนกันกับ Angular lifecycle hooks ครับ เช่น ionViewDidLoad() ก็จะเหมือนกับ ngOnInit() นั่นเอง

.
อ่านเพิ่มเติมทั้งหมดได้ที่: http://bit.ly/2OpTn8r

.
คู่มือ Ionic 4 beta มาแล้วนะครับ อ่านได้ที่ : https://beta.ionicframework.com/docs/

React Native เพิ่งออกเวอร์ชันใหม่ 0.56 มานะครับ

โค้ชเอก Leave a comment

React Native เพิ่งออกเวอร์ชันใหม่ 0.56 มานะครับ เปลี่ยนแปลงหลายอย่างพอสมควรหลังจากไม่ได้อัปเดตมาตั้งแต่เดือนมีนาคม

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

.
1. อัปเกรดมาใช้ Babel เวอร์ชัน 7

.
2. ต้องใช้ Node.js อย่างต่ำเป็นเวอร์ชัน 8 ครับ

.
3. ปรับเวอร์ชันอย่างต่ำเป็น iOS 9

.
4. ต้องใช้ Xcode เวอร์ชัน 9 เป็นอย่างต่ำ แนะนำเป็น Xcode 9.4 ขึ้นไป

.
5. สำหรับ Android ต้อง complied โดยใช้ Android 26 SDK ขึ้นไป (เดือนสิงหาคมนี้ ทุก app ที่ build เป็น Android ต้องใช้ Android 26 SDK แล้วนะ)

.
6. ถ้าใช้งาน WebView จะโหลดได้เฉพาะ URLs ที่เป็น https และ geolocation จะถูก disabled มาเลย (default)

.
7. เราสามารถใช้งานเครื่องหมาย ? (optional chaining operator) ได้แล้ว แน่นอนทำให้เราสามารถเขียนป้องกัน error ที่เกิดจาก property ที่มีค่าเป็น undefined หรือ null ได้ ยกตัวอย่างเช่น

let user = { name: ‘CodingThailand’ }
let age = user?.age //จะเห็นว่า user ไม่มี property ชื่อว่า age ปกติแล้วจะมี error ขึ้นมา แต่ถ้าเราใส่เครื่องหมาย ? ก็จะไม่มี error เกิดขึ้นนะครับ ลองเอาไปใช้ดู จะได้ไม่ต้องเขียนโค้ดเช็ค error ให้วุ่นวาย

.
8. รองรับการใช้งาน flexWrap: ‘wrap-reverse’ ใครใช้ flexbox อยู่น่าจะใช้เป็นนะ 

.
อื่นๆก็จะเป็นการ Fixed bugs ต่างๆ อ่านเพิ่มเติมได้ที่นี่ครับ http://bit.ly/2Ka0z9v

แนะนำ Admin Dashboard ฟรี มาใหม่สวยๆ ครับ

โค้ชเอก 1 Comment

1. Tabler ตัวนี้สวยดี สร้างด้วย Bootstrap 4 มีหน้าเว็บ Demo ให้เลือกใช้เยอะเลย และคู่มือละเอียดดีมาก

รายละเอียด: https://tabler.github.io/
demo: http://bit.ly/2kX7OTX

.
2. Sing App Lite สร้างด้วย Bootstrap 4 เหมือนกัน แต่อาจไม่ได้มีเยอะเท่ากับตัวแรก

รายละเอียด: http://bit.ly/2JnLXQm
demo: http://bit.ly/2M4tfiv

.
ชอบตัวไหนก็ลองดูนะครับ

ในวันที่ผมลาออกจากงาน….

โค้ชเอก 2 Comments

ในวันที่ผมลาออกจากงาน….

.
ไม่ง่ายเหมือนกันครับที่จะทำใจออกจากงานที่เคยทำเป็นเวลากว่า 10 ปี และนี่ก็เป็นเวลา 1 เดือน กับอีก 20 วัน แล้วครับที่ผมไม่ได้ไปทำงานประจำแล้ว

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

.
ยังไงก็ขอบคุณทุกคนด้วยนะครับที่ติดตามกันมาตลอดตั้งแต่ก่อตั้ง CodingThailand ใหม่ๆ ถ้าไม่มีพวกคุณก็ไม่มีผมในวันนี้เช่นเดียวกัน มีอะไรให้เล่าเยอะเลยครับ กะว่าสัปดาห์นี้จะมา live เจอทุกคนสักหน่อย แล้วไว้เจอกันนะครับ

.
และไม่ว่าจะอย่างไรนะครับ จงมีความสุข และเต็มที่กับทางที่เราเป็นคนเลือกเอง 

.
ขอบคุณนะครับ
โค้ชเอก
Coding Mentor

Angular 6 ตัวจริงออกมาให้ใช้ และอัปเดตกันแล้วครับ!

โค้ชเอก Leave a comment

Angular 6 ตัวจริงออกมาให้ใช้ และอัปเดตกันแล้วครับ! รวมถึงเครื่องมือต่างๆด้วย ในเวอร์ชันนี้จะเป็น Long Term Support (LTS) ให้ใช้กันได้ยาวๆ มาดูกันว่ามีอะไรน่าสนใจบ้าง…

.
1. เราสามารถสร้าง Custom elements ด้วย Angular Elements ได้ ดูรายละเอียดเพิ่มที่นี่ => http://bit.ly/2HPsn2M

.
2. Ivy Renderer เป็น view renderer ตัวใหม่ ทำให้โปรเจคที่ build มีขนาดเล็กลง และแน่นอนทำให้เร็วมากขึ้น (ตอนนี้ ivy กำลังพัฒนาอยู่ น่าจะตัวจริงมาให้ใช้เร็วๆนี้ แต่ถ้าใครอยากลองทดสอบดูก่อน ก็สามารถเปิดใช้งาน ivy ได้นะครับ)

.
3. เราสามารถสร้าง UI components ของเราเองได้โดยใช้ Component Dev Kit หรือ CDK

.
4. เราสามารถสร้าง Library ของเราเองได้ โดยตัว Angular CLI จะมีคำสั่ง ng generate library <ชื่อ lib> มาให้ครับ
เวลาเรา build เสร็จแล้วจะใช้ในโปรเจคของเราก็ได้ หรือจะ publish ไปให้คนอื่นใช้ก็ได้เช่นเดียวกัน
=> http://bit.ly/2rkgtn2

.
5. Angular CLI เพิ่มคำสั่ง ng update เข้ามาครับทำให้โปรเจคของเราใหม่อยู่เสมอ ดูเพิ่มเติมได้ที่ => http://bit.ly/2HKpC2y

.
6. Angular CLI เพิ่มคำสั่ง ng add ทำให้เราสามารถติดตั้งไลบรารี หรือ package ของ Angular ได้ง่ายขึ้น และลดขั้นตอนการ setup package ต่างๆ พูดง่ายๆ คือ เวลาติดตั้งเสร็จเราก็สามารถใช้งานได้เลยโดยไม่ต้องตั้งค่าให้ยุ่งยาก

ยกตัวอย่างเช่น ถ้าเราอยากใช้ package Bootstrap 4 components ก็รันคำสั่ง ng add @ng-bootstrap/schematics เป็นต้น

.
7. Angular CLI ทำให้โปรเจคของเราเป็น PWA ได้ง่ายขึ้นครับ แทบไม่ต้องตั้งค่าอะไรเลย เพียงใช้คำสั่ง ng add @angular/pwa ก็เรียบร้อย (ตอน build อย่าลืมใส่ –prod ด้วยนะ)

.
8. สำหรับคนที่ใช้ Angular Material จะมี Starter Components มาให้ใช้สำเร็จรูปเลย เช่น ถ้าสั่งรัน ng generate @angular/material:material-nav
ก็จะได้เมนูด้านข้างมาในทันที

.
9. มาพร้อมกับ RxJS ^6.0.0 ครับ

.
สำหรับคนที่่อยากอัปเดต จะใช้คำสั่ง ng update ก็ได้ หรือจะไปดูรายละเอียดการอัปเดตได้ที่เว็บนี้ครับ => https://update.angular.io/

.
อ่านละเอียดต่างๆ อ่านเพิ่มเติมได้ที่นี่ => http://bit.ly/2rkmBuL

.
หากดูกันจริงๆแล้ว ส่วนใหญ่ในเวอร์ชันนี้จะเป็นการเปลี่ยนแปลงภายใน และเครื่องมือต่างๆ ครับ ไม่ได้มีการเปลี่ยนแปลงใหญ่ๆ ในส่วนของการ coding มากนัก

สรุป HTTP Status Codes สำหรับคนที่จะทำ APIs ควรรู้จัก

โค้ชเอก Leave a comment

🎉 สรุป HTTP Status Codes สำหรับคนที่จะทำ APIs ควรรู้จัก 🎉
—————————-

▪ 200 – ร้องขอสำเร็จ ทุกอย่างโอเค (OK)

▪ 201- สร้างบางอย่างเรียบร้อยแล้ว (Created)

▪ 202 – ยอมรับแล้ว แต่กำลังประมวลผลบางอย่าง เช่น video encoding หรือ ย่อขนาดรูปภาพ เป็นต้น

▪ 400 – ไวยากรณ์ที่ร้องขอมานั้นมีความผิดพลาด หรือบางคนอาจใช้เพื่อการทำ validation

▪ 401 – ไม่มีสิทธิ์ ไม่ได้รับอนุญาต (Unauthorized) ต้องทำการพิสูจน์ตัวตนก่อน

▪ 403 – ผู้ใช้ปัจจุบันถูกห้ามไม่ให้เข้าถึงข้อมูลส่วนนี้ (Forbidden)

▪ 404 – URL ที่เรียกมาไม่ใช่เส้นทางที่ถูกต้อง หรือทรัพยากรที่ร้องขอไม่พบบนเครื่องเซิร์ฟเวอร์

▪ 405 – Method Not Allowed เซิร์ฟเวอร์ไม่รู้จัก request methods ที่ร้องขอมา (เช่น get, post) หรือถูกปิด ไม่สามารถใช้งานได้

▪ 410 – ข้อมูลถูกลบไปเรียบร้อย อาจจะเป็นกรณีถูกระงับ หรือปิดการใช้งานแล้ว เป็นต้น

▪ 415 – คำขอมี Content-Type ซึ่งเซิร์ฟเวอร์ไม่รู้จักวิธีที่จะจัดการ (ไม่รองรับ)

▪ 429 – Rate Limited หยุดสักพักหนึ่ง ค่อยลองอีกครั้ง

▪ 500 – มีบางสิ่งที่ไม่คาดคิดเกิดขึ้นและเป็นความผิดพลาดของ เซิร์ฟเวอร์ (Internal Server Error)

▪ 503 – เซิร์ฟเวอร์ ยังไม่พร้อมบริการ โปรดลองอีกครั้ง