เนื้อหาในเล่มนี้จะเน้นการเตรียมเครื่องมือ และการติดตั้งโปรแกรมต่างๆ แบบ step by step จนสามารถเริ่มเขียน React Native ได้ จุดประสงค์หลักๆ เพื่อให้ทุกคนสามารถเริ่มและต่อยอดศึกษา React Native ได้อย่างรวดเร็ว และประหยัดเวลาครับ
จากที่ได้ยินหลายคนจะมีปัญหาในการติดตั้ง React Native มากเลย บางคนใช้เวลา setup หลายชั่วโมง หรือบางคนหลายวันเลย ก็หวังว่าหนังสือเล่มนี้จะช่วยประหยัดเวลาตรงนี้ได้นะครับ
(หนังสือเป็น PDF จำนวน 35 หน้า A5)
ดูเนื้อหา และดาวน์โหลดหนังสือ ที่นี่ => http://bit.ly/2De8Zbj
โค้ชเอก
Laravel 5.8 เพิ่งออกมาครับ เป็น Laravel เวอร์ชันใหม่ล่าสุดที่ถูกพัฒนาและเพิ่ม features ต่างๆจากเวอร์ชัน 5.7 นั่นเอง โดยรวมแล้วมีการเพิ่ม features หลายอย่างด้วยกันยกตัวอย่างเช่น มีการเพิ่ม has-one-through ของ Eloquent relationships, ปรับปรุงเรื่อง validation ของ email รวมถึงอัปเกรดเวอร์ชัน packages ต่างๆ ยกตัวอย่างเช่น PHPUnit 8.0, Carbon 2.0, Pheanstalk 4.0, dotenv 3.0 เป็นต้น
มาดูเป็นข้อๆครับว่าในเวอร์ชันนี้ใหม่นี้มีอะไรบ้าง…
1. มีการเพิ่มคุณสมบัติ Auto-Discovery ให้กับ Model Policies สำหรับคนที่ใช้งาน Policy อยู่ก็ไม่ต้อง register ในไฟล์ AuthServiceProvider แล้วนะครับ แต่เราต้องตั้งชื่อ Model ให้ถูกหลักด้วย เช่น ถ้ามี Model ชื่อว่า Product ก็ให้ตั้งว่า ProductPolicy เก็บไว้ในโฟลเดอร์ app/Policies ครับ แค่นี้ก็ใช้ได้เลย
2. ใน Laravel 5.8 จะเปลี่ยนการระบุเวลาของ Cache จากนาทีเป็นหน่วยวินาทีนะครับ ตามมาตรฐานของ PSR-16 ยกตัวอย่างเช่น
// ใน Laravel 5.7 จากโค้ดด้านล่างนี้หมายถึง 30 นาที
Cache::put(‘foo’, ‘bar’, 30);
// ใน Laravel 5.8 จะหมายถึง 30 วินาที!!
Cache::put(‘foo’, ‘bar’, 30);
// ทั้ง Laravel 5.7 หรือ 5.8 อันนี้หมายถึงใช้วินาทีครับ เขียนแบบนี้จะเข้าใจง่ายกว่า
Cache::put(‘foo’, ‘bar’, now()->addSeconds(30));
**ใครที่ใช้ 5.7 อยู่ต้องระวังเรื่องนี้ด้วยนะครับจะกระทบกับโค้ดเก่าของเราโดยตรงเลยถ้าจะ upgrade มาใช้ 5.8
3. สำหรับคนที่เขียน APIs (ใช้ token guard) ตอนนี้ในส่วนของการสร้าง tokens สามารถ hash tokens ในรูปแบบของ SHA-256 ได้แล้วครับเพื่อความปลอดภัย โดยสามารถตั้งค่า hash เป็น true ได้ในที่ไฟล์ config/auth.php ในส่วนของ api guard ครับ
*ถึงแม้วิธีนี้จะง่าย แต่จริงๆ ถ้าให้ดีก็ควรใช้ Laravel Passport ไปเลยดีกว่าครับ
4. สามารถกำหนด Default Timezone ให้กับ scheduled task ได้แล้วนะครับ ทั้งในส่วนของแต่ละ method หรือจะกำหนด default timezone ให้กับทั้ง scheduled tasks ทั้งหมดก็ได้ เช่น
$schedule->command(‘inspire’)
->hourly()
->timezone(‘Asia/Bangkok’);
.
5. สามารถแสดง path เต็ม และชื่อไฟล์ original ของ Blade Template ที่ผ่านการ Compiled ได้แล้วครับ (แสดงส่วนบนของไฟล์) อันนี้ทำให้เวลา error สามารถดูชื่อ view ได้ง่ายขึ้น ดูภาพที่ http://bit.ly/2C4PRMx
6. เราสามารถใช้ driver เป็น DynamoDB ได้แล้ว เพื่อทำ cache และ session ในโปรเจคของเรา
7. กำลังจะยกเลิก global helpers ในส่วนของ array และ string แล้วครับ ใครที่ใช้อยู่ในเวอร์ชันต่อไป (5.9) จะเอาออกแล้วนะ ถ้าจะใช้ก็ให้ use คลาสมาใช้โดยตรง ยกตัวอย่างเช่น
use Illuminate\Support\Arr;
// จะยกเลิกแล้ว
array_add($array, $key, $value);
// ใช้แบบนี้แทน
Arr::add($array, $key, $value);
8. เปลี่ยนโฟลเดอร์ Markdown mail จาก /resources/views/vendor/mail/markdown ไปเป็น /resources/views/vendor/mail/text
ถ้าใครใช้ตัวนี้ ถ้าอัปเกรดอย่าลืมเปลี่ยนชื่อโฟลเดอร์ด้วยครับ
ส่วนเรื่องอื่นๆ สามารถอ่านเพิ่มเติมได้ที่นี่นะครับ => http://bit.ly/2NHfhnY
สำหรับคนที่อยากอัปเกรดดูได้ที่นี่ => http://bit.ly/2ELMGer
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก
“ESC/POS Print Driver for PHP” เป็น Library ที่เราสามารถเขียน PHP ติดต่อกับเครื่องพิมพ์ใบเสร็จได้ครับ แน่นอนเราสามารถนำไปเชื่อมกับระบบ POS (point-of-sale)ได้เลย
Library ตัวนี้รองรับ printers ได้หลายยี่ห้อครับ สามารถสั่งพิมพ์รูปภาพ บาร์โค้ด คิวอาร์โค้ด และยังสามารถสั่งตัดกระดาษได้อีกด้วย
สำหรับคนที่สนใจ หรือกำลังอยากพัฒนาระบบ POS อยู่ก็ลองดูได้นะครับ
รายละเอียด: http://bit.ly/2NbZ1ei
โค้ชเอก
สำหรับคนที่เพิ่งเขียน React หรือ React Native ใหม่ๆ เวลาอ่านเอกสารของ React เรื่อง React Lifecycle Methods อาจจะงงๆ เรื่องลำดับ และขั้นตอนการทำงานของ method แต่ละตัว แนะนำให้เข้าไปดูไดอะแกรมในเว็บนี้ได้ครับ เราสามารถคลิกเข้าไปดูรายละเอียดของแต่ละ method ได้เลย
.
รายละเอียด: http://bit.ly/2I4Ngax
โค้ชเอก
1. มี Apache, Nginx, PHP 7.2 (สลับเวอร์ชันได้), Redis, Memcached และรองรับฐานข้อมูลมีทั้ง MySQL/MariaDB, MongoDB และ Postgres ครับ
2. มี Pretty URLs (Auto Virutal Hosts) !! ไม่ต้อง set อะไรครับ เพียงแค่เราสร้างโฟลเดอร์โปรเจคก็จะได้ virutal hosts มาเลย ยกตัวอย่าง เช่น ถ้าสร้างโฟลเดอร์ project1 จะได้ url เป็น http://project1.test มาเลย!
3. มีฟีเจอร์ Quick create เราสามารถติดตั้ง Laravel, CakePHP, WordPress, Joomla, Prestashop และอื่นๆ ได้เพียงแค่คลิกเดียว!
4. เราสามารถแชร์โปรเจคที่อยู่ในเครื่องของเรา (localhost) ออกสู่สาธารณะได้ เช่น ให้ลูกค้าเข้ามาดูความคืบหน้าของโปรเจคเว็บที่เรากำลังเขียนอยู่ โดยใช้ Ngrok ครับ
5. Portable เราจะย้ายโฟลเดอร์ Laragon ไปที่ drive อื่นๆในเครื่อง บน Cloud หรือ usb ก็ได้
6. จัดการสร้าง SSL certificates อัตโนมัติ!
7. กินแรมน้อยมาก
ดูรายละเอียดได้ที่นี่ : http://bit.ly/2GZ8zdh
จริงๆ แล้ว Laragon ไม่ได้รองรับแค่ PHP เท่านั้นนะครับ ยังรองรับ Stacks อื่นๆ ด้วย เช่น Node.js/MEAN, Ruby on Rails, Python Django/Flask Java Spring/SpringBoot และ Golang
มีใครใช้อยู่มั้ยครับ เป็นอย่างไรบ้าง ต่อไปว่าจะเอามาใช้แทน XAMPP เลยดีกว่า 🙂
โค้ชเอก
1. มีการเพิ่ม APIs ใหม่ เกี่ยวกับ accessibility ที่ใช้งานง่ายขึ้น ได้แก่ accessibilityRole และ accessibilityStates
แน่นอนใช้ได้ทั้ง Android และ iOS ซึ่งเมื่อก่อนต้องเขียนแยกกัน คือ accessibilityComponentType (Android) และ accessibilityTraits (iOS)
APIs นี้จะช่วยบอก Talkback หรือ Voiceover ว่าเป็น UI ประเภทใด และมีสถานะใด App ของเราต้องเป็น App ที่ทุกคนเข้าถึงได้!
2. สำหรับ iOS ตัว WebView component จะเปลี่ยนมาใช้ WKWebView ครับ (ตัวเก่าใช้ UIWebViews ซึ่ง apple จะยกเลิกแล้ว!)
ซึ่งการใช้ WKWebView จะทำให้การรัน JavaScript ได้เร็วขึ้นกว่าเดิม และใช้ประโยชน์จาก multi-process architecture อีกด้วย
การใช้งานคือเพิ่ม useWebKit prop มีค่าเป็น true ดังนี้
<WebView useWebKit={true} source={{url: ‘https://codingthailand.com’}} />
3. สำหรับ Android ก็จะรองรับ SDK 27, gradle 4.4 แล้ว แนะนำให้ใช้ Android Studio 3.1 ก่อน เพราะจะมีปัญหากับการ build อยู่ครับ
4. รองรับ Babel 7 stable!
5. อัปเดต Flow และ React เวอร์ชันใหม่ (16.5.*) แน่นอนทำให้รองรับ React Profiler (เป็น React DevTools plugin สำหรับวัดพวกประสิทธิภาพ และอื่นๆ)
6. ใครที่ใช้ component NavigatorIOS จะกำลังจะถูกยกเลิก และเอาออกในเวอร์ชัน 0.58 ครับ
7. รองรับ Node.js 8.3 ขึ้นไป
8. สำหรับ Android การแสดงรูปภาพด้วย Image หากไม่มี uri จะ return เป็นค่า null
สำหรับคนที่ใช้เวอร์ชันก่อนหน้านี้ อย่างเช่น 0.56 แนะนำให้อัปเกรดเลยนะครับ เพราะแก้ bug ไปเยอะพอสมควรเลย
ดูรายละเอียดอื่นๆ และอัปเกรดกันได้ที่ => http://bit.ly/2xp0iXM
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 สวยๆครับ เป็นอีกทางเลือกหนึ่งที่น่าใช้นอกเหนือจากเจ้าดังๆ นะ
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 ออกมาให้ลองใช้กันแล้วนะครับ
สิ่งใหม่ในเวอร์ชันนี้มีหลายอย่าง เช่น นอกจากเราจะเขียน 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/
วิดีโอแนะนำการติดตั้งและการสร้าง Mobile App ด้วย Flutter ครับ เผื่อใครอยากลองใช้ดู
แนะนำการติดตั้งและการสร้าง Mobile App ด้วย Flutter
วิดีโอแนะนำการติดตั้งและการสร้าง Mobile App ด้วย Flutter ครับ เผื่อใครอยากลองใช้ดู 🙂
Posted by CodingThailand on Tuesday, 3 July 2018