Posted on Leave a comment

วิธีติดตั้ง Gradle แบบสบายๆ บน macOS

Android

Gradle เป็นระบบที่ช่วย Build ไฟล์ในจักรวาลของการทำแอพพลิเคชั่น Android ในปัจจุบัน

โดยเฉพาะช่วงหลังๆ มานี่ มีพี่น้องถามวิธีติดตั้ง Gradle สำหรับทำแอพ Android กันเข้ามาเยอะมาก เลยเขียนแชร์ไว้ตรงนี้แล้วกันครับ

1. ติดตั้ง Homebrew ก่อน

อย่างแรกเลยให้ไปที่เว็บ Homebrew และก้อปปี้ข้อความในกล่องตามภาพ

จากนั้นเปิดโปรแกรม Terminal ขึ้นมา และวางข้อความไว้ในโปรแกรม และกด enter

และรอให้มันติดตั้งจนเสร็จ

** ที่ต้องให้ไปก้อปปี้คำสั่งจากหน้าเว็บของ Homebrew โดยตรง เพราะว่าคำสั่งนี้อาจมีการปรับปรุงจากทาง Homebrew ได้ตลอด

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

2. ติดตั้ง Gradle

หลังจากติดตั้ง Homebrew ได้อย่างไม่มีปัญหา

ก็ให้เราพิมพ์คำสั่งใน Terminal ต่อว่า

brew install gradle

และกด enter

ระบบ Gradle ก็จะทำการดาวน์โหลด และติดตั้งค่าต่างๆ ให้เราจนเสร็จสมบูรณ์

แล้วอย่าลืมปิดพวกโปรแกรมต่างๆ ที่เกี่ยวข้องกับ Terminal เช่นตัวโปรแกรม Terminal เอง หรือ Visual Studio Code ลงให้หมด ก่อนเปิดใช้งานใหม่อีกครั้ง เพื่อให้ระบบอ่านค่า Gradle เข้าไปล่ะ

ภาพโดย 00はがはがはが

Posted on Leave a comment

Ionic 2 เข้าสถานะเป็น Release Candidate (RC0): เร็วกว่าเดิม และอีก 2 สิ่งที่คุณควรรู้

หลังจาก Angular 2 เข้าสู่สถานะ Full release ไม่นาน ทางทีม Drifty ผู้สร้าง Ionic Framework ก็ประกาศว่า Ionic 2 เข้าสู่สถานะ Release Candidate หรือ RC แล้ว

มาดูกันครับว่า Ionic 2 RC0 มีจุดสำคัญๆ อะไรที่เราควรจะรู้ และใช้งานบ้าง

1. อัพเดตมาใช้ Angular 2.0 และการเปลียนแปลงภายใน

เรื่องนี้ไม่น่าแปลกใจ เพราะทีมงาน Ionic ได้พัฒนา Framework อย่างใกล้ชิดกับทีมพัฒนาของ Angular มาตลอด (อ่านเพิ่มเติมที่นี่ 1, 2, 3)

ซึ่งนอกจากของใหม่อย่าง @NgModule ที่ทำให้เราเชื่อมโยง Dependency ต่างๆ ได้อย่างสะดวกสบายแล้ว ก็ยังมีการเปลี่ยนแปลงในระดับ API (อีกครั้ง) ทำให้เห็นว่าตราบใดที่ Ionic 2 ยังไม่เข้าสู่สถานะ Final Release ก็อย่าเพิ่งนิ่งนอนใจนะครับ

โดยทาง Ionic ได้แนะนำขั้นตอนการอัพเดตไว้ที่

2. แอพเร็วปรู๊ดปร๊าด ด้วย AoT (Ahead of Time Compiling)

สิ่งที่พลรู้สึกตื่นเต้นที่สุดใน Ionic 2 RC0 ก็คือหลังจากปรับมาใช้ Angular 2.0 ตัวเต็มแล้ว เราได้พลังของ AoT มาด้วย

ซึ่งหากเปรียบให้เห็นภาพ ให้นึกถึงนักเรียน 2 คนที่คนแรกไม่ได้ทำการบ้านมา แต่มาทำตอนที่ครูเรียกส่ง กับคนที่ 2 ที่ทำเสร็จเรียบร้อยมาตั้งแต่เมื่อคืน ซึ่งแบบคนที่ 2 ที่แหละที่ AoT เข้ามามีบทบาทในการคอมไพล์ตัว Template ไว้ล่วงหน้า

AoT and without AoT Compilation.png

นั่นหมายถึง

  • เปิดแอพได้เร็วขึ้น
  • เปิดหน้าแอพต่างๆ ได้ไวขึ้น
  • ระบบการทำงานเกี่ยวกับ UI ทำงานเร็วขึ้นกว่าเดิม

การเปลี่ยน Build Process (ตัวนี้สำคัญ)

ตอนนี้ใครเข้ามาอยู่ในโลกของ JavaScript น่าจะพอเข้าใจว่า มีขั้นตอนการ Build JavaScript เพิ่มเข้ามานอกจากการเขียนและเอาไปใช้งานเว็บอย่างเดียว ทั้งนี้เพื่อให้เราสามารถใช้ประโยชน์จาก JavaScript ในรูปแบบต่างๆ ได้ดีขึ้น

Ionic ก็เช่นเดียวกัน เพียงแต่การมาถึงของ Angular 2 และ AoT ทำให้ทีมงานตัดสินใจเปลี่ยนจากการใช้ Gulp มาเป็น Rollup รวมถึงปรับจูน NPM Script ซึ่งได้รับแรงบันดาลใจมาจากโครงการ Create-React-App

การเปลี่ยนแปลงนี้ทำให้เกิดความยืดหยุ่นในการ Build ตัวแอพของ Ionic 2 สูงกว่าเดิมมาก เช่น

  • สามารถใช้งานกับ Gulp รุ่นเก่าได้
  • สามารถปรับแก้ NPM Script ได้ง่ายขึ้น
  • สลับไปใช้ Build Tools อื่นๆ ได้สะดวกขึ้น ไม่ยึดติดกับของ Ionic อย่างเดียว

3. ปรับโครงสร้างโปรเจคของแอพพลิเคชั่น

ใน Ionic 2 RC0 ทางทีมพัฒนาก็ได้แจ้งอีกครั้งว่าจะปรับโครงสร้างโปรเจค เพื่อให้ใช้งานง่ายขึ้น (อีกครั้ง) อย่างเช่น

  1. โฟลเดอร์ที่เก็บซอร์สโค้ดจะถูกตั้งชื่อเป็น src (กรี๊ดดด ต้องไปอัพเดตคอร์สออนไลน์อีกแล้ว T-T)
  2. Component ต่างๆ และ @NgModule จะเก็บไว้ไนโฟลเดอร์ app
  3. Pages และ Providers ต่างๆ จะแยกไว้ในโฟลเดอร์ src
  4. มีการเพิ่มโฟลเดอร์  assets ไว้สำหรับเก็บไฟล์ภาพ, manifest.json, และพวก Service Worker

สรุป

แน่นอนว่าการเข้าสู่สถานะ Release Candidate ของ Ionic 2 เป็นเรื่องที่ดี เพราะสิ่งสำคัญที่พวกเราเห็นคือเรื่องความเร็วในการทำงานที่เพิ่มขึ้นมากจาก Angular 2 แต่การเปลี่ยนแปลงน่าจะยังมีโอกาสเกิดขึ้นอยู่ ดังนั้นควรระวังเรื่องการนำไปใช้ใน Production ด้วยนะ

แล้วพบกันใหม่ในครั้งหน้า เราจะรอเวอร์ชั่นเต็มของ Ionic 2.0 ด้วยกัน

ใช้คูปองลดราคาซื้อคอร์สออนไลน์ Ionic 2

ระหว่างที่พลกำลังง่วนกับการทำคอร์ส JavaScript ES6 + Node.js ใครสนใจซื้อคอร์สสร้าง Mobile App ด้วย Angular 2 และ Ionic 2 บน Udemy ก็ใช้คูปองลดราคาได้จ้า หมดแล้วหมดเลย

ที่มา – Ionic Blog

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

 

Posted on Leave a comment

อัพเดต Ionic 2 Beta 6 อัดเต็มความสามารถใหม่ๆ

ระหว่างที่หลายๆ คนกำลังรอ Angular 2 และ Ionic 2 วันนี้โค้ชพลมีความคืบหน้าใน Beta รุ่นที่ 6 มาฝากครับ

โดยแบ่งเป็น 2 ส่วนคือ

  1. Component และความสามารถใหม่ๆ ที่เพิ่มเข้ามา
  2. และ Component ที่กำลังได้รับการยกเครื่อง

Component และความสามารถใหม่ๆ ใน Ionic 2

ของใหม่มาเยอะทีเดียว เริ่มจาก

Virtual Scroll

  • จำลอง List ที่เลื่อนเติมจำนวนได้เรื่อยๆ (เช่นในแอพ Facebook หรือ Twitter)
  • แสดงข้อมูลเพิ่มที่ละชุด แทนที่การแสดงข้อมูลทั้งหมดใน List (ทางเทคนิคจะกินทรัพยากรกว่ามาก)
  • เพิ่มความ “นุ่มนวล” ในการ Scroll
  • ทีมพัฒนาบอกว่ามีประสิทธิภาพกว่า collection-repeat ซะอีก (คุณพระ!)
  • มาพร้อมกับความสามารถในการปรับแต่ง Section ใน List อย่าง Header และ Footer

Loading Component

conference-app-loading-1024x606.png

  • หลายๆ คนเรียกว่า “หมุนติ้ว” หรือ Loading Icon ปกติใช้ในการแสดงการทำงานของแอพพลิเคชั่น คราวนี้มาในรูปแบบ Component ของ Angular 2
  • โดยปกติจะแสดง Ionic Spinner เพื่อให้กลมกลืนกับระบบที่ทำงานอยู่มากที่สุด
  • สามารถกำหนดเปลี่ยนรูป Spinner (ไอคอนหมุน) เป็นชุดที่ทาง Ionic เตรียมให้ หรือจะใส่ของตัวเองเข้าไปแทนก็ได้

ระบบ Theming

สามารถเพิ่มสีจำพวก base หรือ contrast เข้าไปใน $color map ของ Sass ได้แล้ว

รองรับ Back Button แบบสมบูรณ์

  • เป็นฟีเจอร์ที่หลายๆ คนเรียกร้องใน Ionic 1 (รวมถึงพลด้วย 555)
  • การใช้ Back Button จะไม่ใช่การออกจากแอพอีกแล้ว แต่จะเหมือนกับการทำงานบนแอพ Native นั่นคือจะย้อนไปก่อนหน้าเรื่อยๆ และออกจากแอพในช่วงสุดท้ายแทน

Select Component

Select UI.png

  • สามารถตั้งให้เปิด Action Sheet แทน Alert ได้
  • Action Sheet จะรองรับ 1 ตัวเลือก และมีตัวเลือกได้ไม่เกิน 6 ตัว ถ้าเกินกว่านั้นจะกลายเป็น Alert เหมือนเดิม
  • เพิ่มเข้ามาโดยคุณ @manucorporat (ปรบมือ)

Material Design เป็นค่าเริ่มต้น

  • การเปิดทดสอบบนคอมพิวเตอร์จะใช้ Material Design เป็นหลัก
  • โหมด iOS จะทำงานบนอุปกรณ์ iOS เท่านั้น
  • โหมด Windows Platform จะทำงานบนอุปกรณ์ Windows เท่านั้น

Toast Component

Toast.png

  • ปกติ Toast จะเคยอยู่ในรูปแบบของ Plugin ใน ngCordova
  • ตอนนี้ถูกเพิ่มเข้ามาเป็น Component ใน Ionic 2
  • ขอบคุณ @dmackerman ที่เพิ่มความสามารถนี้เข้ามาใน Ionic 2 เลยครับ

Component และความสามารถที่ตั้งเป้าว่าจะได้รับการปรับปรุง

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

Date/Time Input

ถ้ายังจำกันได้ตอนโค้ชพลสอน เราสามารถเรียก Date Time Picker ขึ้นมาโดยใช้ <input type=”date”> ได้ แต่ใน Ionic 2 จะใส่เข้ามาให้ใช้เป็น Component เลย น่าจะสะดวกขึ้นอีกมาก

Swipable Tab

ความสามารถนี้มาจากฝั่ง Material Design ของ Android ครับ ใครใช้ Android รุ่นใหม่ๆ จะสังเกตได้ชัดเจนในแอพ Contacts ว่าเราสามารถ “Swipe” แทนการกดที่ Tab ได้ ซึ่งทางทีมพัฒนากำลังทำตัวนี้อยู่

Popover

แสดงตัวเลือก action ต่างๆ ในแอพ

PopOver Menu iOS.jpg
PopOver ใน iOS

Range Slider

jqm_range-sliders.png
Range Slider ของ JQuery Mobile 

เรามี Slider มาก่อนแล้วใน HTML5 และ JQuery Mobile ซึ่งใน Ioinic 2 จะมีการเพิ่ม Component นี้เข้าไปให้ด้วย

Inset Modals

กล่อง Pop Up คล้ายๆ กับ Alert ซึ่งจะตั้งให้เปิดใช้งานบนหน้าจอขนาดใหญ่

List reorder and delete

list-complex-example.png

ถ้ายังจำกันได้ใน Ionic 1 จะมีความสามารถ Built in การ reorder ลำดับ และลบไอเท็มออกจาก List ด้วย ความสามารถนี้กำลังจะกลับมาใน Ionic 2

(ตอนแรกเห็นหายไป ตกใจแทบแย่ 555)

Chips

components_acux_chips_chipstxticon.png

เป็น UI สำหรับการแสดงข้อมูลขนาดเล็กที่ซับซ้อน ซึ่งมีที่มาจาก Material Design ของ Googe ซึ่งถ้าใครเคยเขียน Email ผ่านระบบ Inbox ของ Google จะคุ้นเคยกับเจ้านี่เป็นอย่างดี

จริงๆ เพิ่มเข้ามาโดยคุณ​ @3dd13 แล้ว แต่ยังไม่มี Document และการปรับ performance ครับ

ส่งท้าย

คำแนะนำของโค้ชพลยังเป็นเช่นเดิม คือลองได้ แต่เพิ่งวางใจเอาไปทำแอพจริงๆ เชียว อย่างที่เคยเล่าให้ฟังใน Beta 3-4

ใครสนใจเรียน Ionic ตั้งแต่ปูพื้นฐานจนสร้างแอพจริงได้ พร้อมอัพเดตเนื้อหาเป็น Ionic 2 คลิกลงทะเบียนเรียนกับผมได้ที่นี่ครับ

 

Posted on Leave a comment

Ionic ออกเวอร์ชั่น 1.3 รองรับแนวคิด Component ใน Angular 1.5

 

วันนี้ข่าวอัพเดต Ionic มาอีกครั้ง โดยเป็นรอบการอัพเดตของ Ionic 1 ครับ

โดยความสำคัญของอัพเดตรุ่นนี้ก็คือการรองรับ Angular 1.5 ซึ่งเป็นเวอร์ชั่นล่าสุดของ Framework ตัวนี้ ซึ่งจุดเด่นของ Angular 1.5 ก็คือการมาถึงของ Component ครับ

รู้จักกับ Component ใน Angular 1.5

จริงๆ แนวคิด Component ถูกใช้งานเป็นมาตรฐานใน Angular 2 แต่ใน Angular 1.5 ก็มีการเพิ่มเจ้า Component นี้เข้ามาด้วย

ดังนั้นใครที่ใช้ Angular 1 อยู่ก็สามารถเรียนรู้การเริ่มนำ Component มาใช้งานในแอพพลิเคชั่นของเราได้เลย โดย helper method ของ Component จะคล้ายๆ Directive ตามด้านล่าง

// Angular 1.5
module.component("nextflowComponent", options);

<nextflow-component></nextflow-component>

แตกต่างจาก Directive อย่างไร?

จริงๆ Component ใน Angular 1.5 เป็น Directive แบบหนึ่ง เพียงแต่แนวคิดนี้จะทำให้ระบบรองรับการมาถึงของ Angular 2 ได้ง่ายกว่า แถมเป็นการฝึกทำความเข้าใจระบบ Component ไปในตัว

การเลือกใช้ Component จะให้ผลดีกว่า Directive ในด้าน:

  1. ตั้งค่าง่ายกว่า (configuration)
  2. รอบรับการพัฒนาระบบแบบ Component
  3. ทำให้การย้าย (migrate) ระบบไป Angular 2 ทำได้ง่ายขึ้น

ไม่ควรใช้ Component แทน Directive ในกรณีไหน?

  1. ถ้าเราต้องการ Directive ที่เกี่ยวข้องกับการแก้ไข DOM หรือเพิ่มเติม event listener เพราะความสามารถอย่าง compile และ link จะไม่มีในส่วนนี้
  2. เมื่อเราต้องการสร้างและใช้งานความสามารถของ Directive ขั้นสูง เช่น multi-element
  3. ถ้าต้องการให้ Directive ทำงานเมื่อมีการเปลี่ยนแปลง HTML Attribute หรือ CSS class

Ionic 1.3 และ Ionic 2

ในระหว่างนี้ทีมนักพัฒนา Ionic ยังแจ้งว่า Ionic 2 ก็กำลังคืบหน้าเรื่อยๆ ซึ่งถ้าโค้ชพลคาดไว้ไม่ผิด ก็จะอัพเดตเป็นระยะ ตามรอบของ Angular 2 และจะเข้าสู่เวอร์ชั่นสมบูรณ์หลังจาก Angular 2 พร้อมใช้ไม่นานครับ

ในระหว่างนี้ลองเล่นรุ่น Beta ของ Ionic 2 ไปก่อนได้ แต่อย่าเพิ่งเอาไปใช้จริงจังล่ะ เพราะ Beta 5 ที่เพิ่งออกก็มีการเปลี่ยนโครงสร้างเยอะเหมือนกัน

ส่วนใครซื้อคอร์สออนไลน์ไปแล้ว รอเรียน Angular 2 และ Ionic 2 เมื่อพร้อมได้ครับ

อ้างอิง – Ionic’s Github

Posted on Leave a comment

10 ข้อที่ต้องรู้ ก่อนใช้ Crosswalk เพิ่มสปีดให้แอพ PhoneGap, Cordova, Ionic

crosswalk project

เรียนกับโค้ชพล: คอร์สออนไลน์ สอนสร้าง Cross Platform Mobile App ได้ทั้ง iOS และ Android ใน 24 ชม. จากเริ่มต้นจนถึงโปร คลิกเลย

การทำแอพ Android แบบ Hybrid จะมีหลายคนที่ทนทุกข์ (ต้องเรียกทนทุกข์เลยนะ) จาก WebView ใน Android เวอร์ชั่นที่เก่ากว่า 4.4 เช่น 4.0 – 4.3 แน่นอน

เพราะในช่วงเวลานั้น ทาง Google ยังไม่ได้ย้ายมาใช้ Chrome เป็น WebView หลักของระบบ Android ทำให้ประสิทธิภาพเวลาแสดงหน้าแอพพลิเคชั่นของแอพแบบ Hybrid เศร้าเหลือทน

แต่พอมาเป็น Android เวอร์ชั่น 4.4 เป็นต้นไป นี่เหมือนบินจากห้วงนรกไปอยู่บนสรวงสวรรค์เลยล่ะ

แต่ทีนี้เราคุมไม่ได้นี่ว่า “ต้องให้ลูกค้าใช้ Android 4.4 ขึ้นไปนะ” เพราะเรื่องของความหลากหลายในโลกของ Android เป็นสิ่งที่นักพัฒนาควรรู้ไว้ว่าต้องเจออยู่แล้ว

ดังนั้น Crosswalk จึงเหมือนเทวดาบินลงมาดึงเราขึ้นไปสู่สรวงสวรรค์ โดยที่เราไม่ต้องบังดับให้ลูกค้าซื้อเครื่องใหม่ 4.4+ นั่นเองครับ

เอาล่ะที่นี้มาดูกันว่า 10 ข้อที่เราควรรู้ก่อนไปใช้ Crosswalk มีอะไรกันบ้าง

1.Crosswalk คืออะไร?

Crosswalk เป็นโปรเจคโอเพ่นซอร์ส ที่มีเป้าหมายในการนำเอนจิ้น WebView ของ Chrome for Android ไปใช้ในแอพพลิเคชั่นตัวอื่นได้ เพื่อเพิ่มประสิทธิภาพการแสดงผล และลดข้อผิดพลาดจากความแตกต่าง (fragmentation) ใน WebView ของ Android รุ่นเก่าครับ

โค้ชพลเคยแนะนำพื้นฐานเรื่อง Crosswalk ไว้ก่อนหน้านี้ ลองไปทำความเข้าใจกันก่อนได้

2. จำเป็นต้องใช้ Crosswalk ไหม?

ถ้าเราคุมได้ว่า สเปกเครื่อง Android ของแอพเรา ต้องใช้เวอร์ชั่น 4.4 ขึ้นไป ก็ไม่น่าเป็นปัญหาหรอกครับ

ตื่นๆๆ โลกจริงมันหาเคสนั้นยากนะ (จนกว่าเราจะไป Android 8 อะไรประมาณนั้น คนอาจจะเลิกใช้ Android เวอร์ชั่นต่ำกว่า 4.4 แล้วก็ได้)

ดังนั้นถ้าเรามีปัญหาเรื่องความผิดปกติในการทำงานของ HTML, CSS, หรือ JavaScript ใน Android เวอร์ชั่น 4.0 – 4.3 หรือต้องการประสิทธิภาพแรงๆ เพิ่มขึ้น

ต้องการลดปัญหาเรื่อง fluctuations และ fragmentation ที่แตกต่างกันใน Android แต่ละเวอร์ชั่น

ก็ควรใช้ Crosswalk ครับ

3. Crosswalk ทำให้แอพ Android ที่สร้างจาก PhoneGap, Cordova, Ionic ดีขึ้นอย่างไร?

  • ไม่ต้องเจออาการแปลกๆ ในแต่ละเวอร์ชั่น เพราะใช้ Chrome ตัวเดียวจากเวอร์ชั่น 4.4 กันหมดตั้งแต่ 4.0 – 4.3
  • ประสิทธิภาพเพิ่มขึ้นประมาณ 10 เท่า (อ่านต่อได้ด้านล่างครับ)
  • ง่ายต่อการ Debug ด้วย Chrome Dev Tools

4. Crosswalk มีผลกับความเร็ว และขนาดไฟล์อย่างไร?

โดยปกติแล้ว ทางทีมพัฒนา Crosswalk การันตีประสิทธิภาพที่เพิ่มขึ้น 10 เท่า ใน Android เวอร์ชั่นเก่า ระหว่าง 4.0 – 4.3 โดยเฉพาะการทำงานของ HTML, CSS, และ JavaScript

แต่ก็จะมีการเพิ่มพื้นที่ของแอพพลิเคชั่น มาประมาณ 10 – 15 MB เพราะได้มีการนำ Chrome ใส่ลงไปในแอพนั่นเอง

5. ต้องการลอง Crosswalk ทำไง?

แน่นอนว่าต้องลง ionic framework และสร้างโปรเจคก่อน

nam install -g ionic
ionic start NFApp
cd NFApp
ionic browser add crosswalk
ionic run android

หรือดูผ่านวิดีโอได้ในคอร์สออนไลน์ที่นี่

6. ถ้าเจอ Error ในการใช้งาน จะทำอย่างไร?

ใช้คำสั่ง ionic info  แล้วก๊อปปี้ข้อมูลที่ปรากฎบนหน้าจอ

จากนั้นให้โพสอาการที่เกิดขึ้น กับข้อมูลที่ก๊อปปี้มา ไปที่ Ionic CLI บน Github ครับ

7. งั้นเวลาทดสอบต้องสังเกตอะไรบ้าง?

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

เราตอนเอาไปใช้ควรจะสังเกตการทำงานดังนี้ครับ

  • ความเร็วที่เพิ่มขึ้นในอุปกรณ์ Android รุ่นเก่า รวมถึงการ debug ด้วย Chrome Dev Tools
  • ทดสอบการทำงานกับ Cordova Plugin เช่น กล้องถ่ายรูป, จีพีเอส, ตัวสแกนบาร์โค้ด เป็นต้น
  • อาการประหลาดที่อาจเกิดขึ้นระหว่างการ build และ run ตัวแอพ

8. จะ Debug Crosswalk หรือ Chrome WebView ได้อย่างไร?

สามารถใช้ Chrome Dev Tools และเปิดส่วนของ Chrome Inspect Device ขึ้นมาได้

9. สถาปัตยกรรมของอุปกรณ์ Android ส่งผลต่อ Crosswalk อย่างไรบ้าง?

ถ้าเรายังไม่ลงลึกเรื่องระบบ Android OS พอ อาจจะยังไม่รู้ว่าตอนนี้ Android มันมีแยกสถาปัตยกรรมของฮาร์ดแวร์เป็น 2 แบบ นั่นคือ ARM และ x86 (ชิป Intel นั่นแหละ)

แล้วมันเกี่ยวอะไรกับการทำแอพพลิเคชั่น หรือใช้ Crosswalk?

เกี่ยวครับ เกี่ยวมากด้วย

ลองนึกถึงการปลูกบ้านแบบเดียวกันบนที่ดินที่แตกต่างกัน อย่างดินทราย และดินภูเขา ถึงแม้ว่าด้านบนบ้านจะดูเหมือนกัน แต่ตอนวางรากฐานให้บ้าน ต้องใช้เครื่องมือและวิธีที่แตกต่างกัน

แบบเดียวกับ ARM และ x86 ครับ จะเคยได้ยินข่าวว่าแอพบางตัวที่ทำมาให้ใช้บน ARM ไปมีปัญหาการใช้งานบน x86

นักพัฒนาเลยต้อง Build ตัวแอพพลิเคชั่นแยก 2 เวอร์ชั่น แบบเดียวกับที่สถาปนิกต้องใช้รากฐานบ้าน สำหรับที่ดินแต่ละแบบ

ดังนั้นถ้าคุณ build แอพที่ใช้ Crosswalk แบบเพียวๆ ตัว Crosswalk จะใส่การทำงานที่รองรับทั้ง ARM และ x86 มาให้แบบคู่เลย ทำให้ขนาดแอพใหญ่ขึ้นอีก 50 – 60 MB

ทางแก้คือ: ตอน build ก็ให้ build ทีละเวอร์ชั่น สำหรับ ARM และ x86 ตามลำดับ จะได้ช่วยให้ขนาดไฟล์แอพลดลงครับ

10. ทำไมถึงเปลี่ยนจาก Ant ไปใช้ Gradle?

ทีมพัฒนาหลักของระบบ Android ตัดสินใจเปลี่ยนระบบ Build จาก Apache Ant ที่เราเคยรู้จักกันดีไปใช้ Gradle ได้สักพักแล้ว เราจึงไม่เห็นข้อความสถานะการทำงานจาก Ant อีก

ส่งท้าย

นั่นคือสุดยอดคำถามจากหลายๆ คนที่ใช้ PhoneGap, Cordova, และ Ionic กำลังต้องการเอาไปใช้ในโปรเจคแอพพลิเคชั่นของตัวเอง โดยเฉพาะ Android รุ่นเก่าที่มีปัญหาเรื่อง Performance กันนะครับ

โค้ชพลลองแล้วไหลลื่นทีเดียว ลองเอา Crosswalk ไปใช้งานกันดู

อ้างอิง – CrossWalk Project, Ionic Blog

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

หมดอายุ! Apple แจ้งคนทำแอพ iOS ใช้ Certificate ใหม่ ไม่งั้นไม่รับแอพเข้า Store

ข่าวนี้น่าจะกระทบนักพัฒนาแอพฝั่ง iOS ถ้วนหน้า โดยเฉพาะคนที่ทำแอพกันอยู่ปัจจุบันจ้า

เพราะตอนนี้ ไฟล์สำคัญที่ใช้ในกระบวนการสร้าง และส่งแอพ iOS มันหมดอายุการใช้งานมาหมาดๆ ในวันแห่งความรักคร้าบ!

มันคือ Apple Worldwide Developer Relations Certificate Authority นั่นเอง (ใช่ โค้ชพลก็คิดอย่างนั้น ชื่อยาวชะมัด)

การหมดอายุของ Apple Worldwide Developer Relations Intermediate Certificate

 

สำหรับคนที่ทำแอพ iOS หรือเรียนสร้างแอพ iOS และ Android ออนไลน์กับโค้ชพลไปแล้ว สั้นๆ ตรงนี้:

มันคือไฟล์ที่ Apple ออกให้มาติดตั้งในเครื่อง หลังจากเราเข้าไปลงทะเบียน Apple Developer Program เพื่อใช้ตรวจสอบ และยืนยันความปลอดภัยของแอพที่เราสร้าง

มันจึงเป็นไฟล์ที่ Apple ให้ความสำคัญมาก เพราะมันเป็นหนึ่งในการยืนยันตัวตนนักพัฒนา และทำให้ระบบของแอพพลิเคชั่นนั้นปลอดภัยมากขึ้น

Apple จึงเป็นฝ่ายที่ออกไฟล์นี้ ให้นักพัฒนานำไปติดตั้งในเครื่องที่ใช้สร้างแอพพลิเคชั่น iOS

ซึ่งเมื่อก่อนนักพัฒนาต้องทำการดาวน์โหลดและติดตั้งเอง แต่ปัจจุบันขั้นตอนพวกนี้ถูกจัดการผ่านระบบอัตโนมัติของ Xcode

เรื่องมาใหญ่ตรงที่ไฟล์ Intermediate Certificate พวกนี้ มีวันหมดอายุ

และมันหมดไปหมาดๆ เมื่อวันที่ 14 กุมภาพันธ์!

โดยบริการที่ได้รับผลกระทบมีรายชื่อดังนี้

  1. Apple Wallet Passes
  2. Mac Apps
  3. Safari Extension
  4. Safari Push Notification
  5. App Store Submissions (การส่งแอพพลิเคชั่นขึ้น App Store)

ซึ่งถ้าไม่ดำเนินการ จะมีอันเป็นไป เฮ้ย ไม่ใช่! จะทำให้มีปัญหาในการใช้บริการดังกล่าว

ดังนั้นถ้าคุณเห็นอาการประหลาดๆ ใน 5 บริการดังกล่าว มันอาจจะเกิดจากปัญหานี้นั่นเอง ลองดูรายละเอียดในหัวข้อถัดไป

วิธีดำเนินการ: ดาวน์โหลดและติดตั้ง Certificate ใหม่

นักพัฒนาที่เข้าข่ายการใช้บริการ 5 ส่วนด้านบน (จริงๆ ถ้าดูจากข้อ 5 มันก็โดนหมดอ่ะนะ ทั้งแอพ iOS เอย แอพ Mac เอย) ดำเนินการง่ายๆ ครับ นั่นคือ:

วิธีแก้: ให้ดาวน์โหลดไฟล์ Intermediate Certificate ใหม่ (Renew Certificate) ไปใช้งาน คลิกที่นี่

แล้วดูวิธีนำไฟล์ Intermediate Certificate ใหม่ไปใช้ตามรายชื่อบริการด้านล่าง

อาการหลังจาก Certificate หมดอายุ และวิธีแก้


ถ้าเกิดเราไม่ได้เอาไฟล์ Intermediate Certificate ใหม่ไปใช้ จะมีผลอะไรตามมา? และดำเนินการแก้ไขอย่างไร? มาดูไล่ไปเลย

1. Apple Wallet Passes

อาการ: หลังวันที่ 14 กุมภาพันธ์ ตัว Apple Wallet จะไม่สามารถติดตั้ง Passes ใหม่ๆ เพิ่มเติมได้

วิธีแก้ไข: ให้ใช้ไฟล์ Intermediate Certificate ใหม่ ไปวางไว้ที่ Pass Signing Server แทนอันเก่า (อันเก่าลบทิ้งไปเลย)

2. Mac Apps

อาการ: แอพ Mac ที่ติดตั้งจาก Mac App Store จะเปิดไม่ขึ้น (เปิดแล้ว Crash)

วิธีแก้ไข:

  • สำหรับคนใช้: ต้องอัพเดตเวอร์ชั่น OS X ให้มากกว่าหรือเท่ากับ 10.11.2+, คนใช้ Snow Leopard ต้องอัพเดต Mac App Store เป็นเวอร์ชั่นล่าสุด
  • สำหรับนักพัฒนา: ให้ดาวน์โหลด และติดตั้งไฟล์ Intermediate Certificate ใหม่ เพื่อใช้ในการ build ไฟล์แอพในการทดสอบ และส่งขายจริง

3. Safari Extension

วิธีแก้ไข: ติดตั้งไฟล์ Intermediate Certificate ใหม่ลงไปใน Safari Extension

4. Safari Push Notification

อาการ: คนทั่วไปจะไม่สามารถสมัครรับ Notification จากบริการของเราได้

วิธีแก้ไข: ให้ใช้ไฟล์ Intermediate Certificate ใหม่ ไปวางไว้ที่ Notification Package Signing Server แทนอันเก่า

5. App Store Submissions (การส่งแอพพลิเคชั่นขึ้น App Store)

อาการ: แอพที่ส่งขึ้น App Store, Mac App Store, Apple Store for Apple TV จะถูกตีกลับ

วิธีแก้ไข:

  1. ให้ดาวน์โหลด และติดตั้งไฟล์ Intermediate Certificate ใหม่ เพื่อใช้ในการ build ไฟล์แอพส่งขึ้น Store
  2. เปิดโปรแกรม Keychain และทำการลบไฟล์ Intermediate Certificate อันที่หมดอายุทิ้งไป

คำถาม – ตอบที่สำคัญ

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

A. ฉันต้องสร้างไฟล์ Certificate อื่นๆ ไหม? (Regenerate Certificates)

ไม่ต้อง ไฟล์ Certificate อื่นๆ จะทำงานได้กับ ไฟล์ Intermediate Certificate ใหม่ และที่หมดอายุไปแล้ว ต้องนี้ไม่ต้องไปกด Revoke อะไรนะ

B. ฉันต้อง compile แอพใหม่ หรือส่งแอพไปที่ Store ใหม่ไหม? (Recompile or Resubmit App)

ไม่ต้อง แอพพลิเคชั่นที่มีอยู่ใน Store อยู่แล้วจะทำงานได้ตามปกติ ไม่มีปัญหา

แต่ถ้าเราต้องการสร้างไฟล์แอพสำหรับการใช้งานจริง (Distribution) ไปที่ App Store, Mac App Store, และ Apple Store for Apple TV หลังวันที่ 14 กุมภาพันธ์ ต้องใช้ไฟล์ Intermediate Certificate ใหม่

C. ผู้ใช้จะได้รับผลกระทบจากปัญหานี้ไหม?

ไม่ได้รับ ผู้ใช้ที่ซื้อ และติดตั้งแอพตามขั้นตอนปกติจะไม่มีรับผลจากการหมดอายุ และการติดตั้งใหม่นี้

ส่วนเรื่องแอพที่ดาวน์โหลดจาก Mac App Store ก็แก้ปัญหาโดยการอัพเดตไปตามวิธีด้านบนครับ

D. แล้วแอพที่กำลังพัฒนาอยู่จะมีปัญหาไหม?

ไม่มี แอพพลิเคชั่นที่เรากำลังเขียนอยู่ในเครื่องจะสามารถทำงานได้จนถึงการหมดอายุของ provision profile หรือพวกเราไปกด revoke Signing Certificate ตามปกติ

E. แล้วแอพ in-house Enterprise ที่ใช้งานอยู่ จะมีปัญหาไหม?

ไม่มี แอพพลิเคชั่นแบบ in-house หรือ Enterprise ที่ปล่อยให้ใช้งานแล้ว จะสามารถทำงานได้จนถึงการหมดอายุของ provision profile หรือพวกเราไปกด revoke Signing Certificate ตามปกติ

F. Certificate ใหม่จะหมดอายุอีกเมื่อใด?

Apple แจ้งว่าไฟล์ Certificate ตัวใหม่นี้ จะหมดอายุ 7 กุมภาพันธ์ ค.ศ. 2023 หรืออีกประมาณ 7-8 ปี

G. ถ้าทำแล้วเครื่องยังมอง Certificate หมดอายุจะทำอย่างไร

สำหรับคนที่ดาวน์โหลด Certificate มาใหม่แล้ว ยังเจอกรณีนี้ ให้ลองรีสตาร์ทเครื่องใหม่ ระบบน่าจะเห็นเป็น Certificate ใหม่แล้ว ขอบคุณ คุณ ชรินทร์ อำพนพิศลย์ ที่แจ้งเข้ามาทางแฟนเพจ

สรุป

เอาเป็นว่ายังไงเราก็ต้องทำการดาวน์โหลด ตัว Intermediate Certificate มาติดตั้ง และใช้งานกับระบบของเราอยู่ดี

ผลกระทบของเจ้า Intermediate Certificate ที่หมดอายุก็มี 5 บริการด้วยกัน

  1. Apple Wallet Passes
  2. Mac Apps
  3. Safari Extension
  4. Safari Push Notification
  5. App Store Submissions (การส่งแอพพลิเคชั่นขึ้น App Store)

โดยเฉพาะคนทำแอพ iOS อยู่นี่ ต้องทำกันถ้วนหน้า (ไม่งั้นจะส่งแอพขึ้น Store กันยังไงล่ะเนอะ)

ขายของ คอร์สออนไลน์ สร้าง Mobile App แบบ Cross-Platform ด้วย Angular 2 และ Ionic 2 ใกล้เสร็จในเดือนมีนาคมนี้แล้ว

ซื้อล่วงหน้า คลิกใช้รหัสลดราคา 62% ได้ที่นี่ หมดแล้วหมดเลยจ้า

 

Credit พี่เอ๊ด แห่ง EddyIndy.com ที่แจ้งข่าวนี้มาในกลุ่มครับ

อ้างอิง – Apple Developer, StackOverflow, Mtjsai.com, 9to5Mac

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

Sworkit: แอพสุขภาพ พัฒนาด้วย PhoneGap และ Ionic ระดมทุนได้ 1.5 ล้านเหรียญ

อาทิตย์ที่ผ่านมา Starups สายสุขภาพ (Healthcare) อย่าง Nexercise เจ้าของแอพ Sworkit ระดมทุนจาก Mark Cuban เป็นจำนวน 1.5 ล้านเหรียญ ในรายการ Shark Tank ไปเรียบร้อย

มันน่าสนใจคือตัวเทคโนโลยีที่ Sworkit ใช้ คือ PhoneGap/Cordova นี่ล่ะครับ

คือตัวแอพพลิเคชั่น Sworkit ถูกพัฒนาด้วยแบบ Hybrid Mobile Application ที่ใช้ PhoneGap/Cordova เป็นแพลตฟอร์มหลักของการพัฒนา

ซึ่งทำให้สามารถใช้ภาษา HTML, CSS, และ JavaScript ที่ใช้ในการสร้างเว็บ มาสร้าง Mobile App ได้ทันที

และยังสามารถออกแอพพลิเคชั่นได้ 2 ระบบอย่าง iOS และ Android ด้วยโค้ดชุดเดียวกัน

ในอดีต PhoneGap/Cordova เป็นแพลตฟอร์มที่บางคนบอกว่า ช้า และ performance ต่ำ ซึ่งนั่นเป็นช่วงแรกที่คนไม่เข้าใจตัวเทคโนโลยี PhoneGap/Cordova ว่าใช้อย่างไรให้เกิดผลลัพธ์ที่ดีที่สุด

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

Ionic: Framework ประสิทภาพสูง แปลง UI ตาม Platform

ตัว Sworkit ยังใช้ Ionic framework เพื่อรองรับการพัฒนาตัวแอพด้วย AngularJS และ UI ที่ใช้งานแตกต่างกัน iOS และ Android

เพราะถึงแม้การใช้งาน iOS และ Android แบบผิวเผินจะดูคล้ายกัน แต่จริงๆ แล้วไม่เหมือนกัน มันคือประสบการณ์ตรงที่ผู้ใช้ในแต่ละ Platform เคยชิน และตัวแอพต้องเคารพด้วย

เหมือน Windows และ OS X ถ้าเดินผ่านๆ หน้าตาจะคล้ายๆ กัน แต่ตอนใช้งานจริง มันแตกต่างในระดับวิธีคิด วิธีทำงานเลยทีเดียว Android และ OS X ก็เช่นเดียวกัน

Startups ที่จริงจังกับเรื่อง User Experience บนแต่ละ Platform และต้องการสร้างแอพพลิเคชั่นแบบข้าม Platform ก็ต้องใส่ใจเรื่อง framework ที่ให้ความสำคัญด้านนี้ด้วย

ตรงนี้พลเคยเขียนอธิบายเรื่อง UI ที่แปลงร่างได้ใน Cross Platform Mobile App ชื่อ Platform Continuity อ่านได้ที่นี่

นอกจากระดมทุนได้แล้ว Sworkit ยังเป็นอีกหนึ่ง iOS แอพพลิเคชั่นที่ได้รับ Editor’s choice และมียอดดาวน์โหลดสูงสุดบน App Store ฝั่งแอพสาย Healthcare ด้วย

เป็นอีกหนึ่งแอพพลิเคชั่นที่แสดงให้เห็นว่า Hybrid Mobile App ถ้าเขียนให้ดี เข้าใจวิธีคิด และการพัฒนา ก็สามารถสร้างแอพพลิเคชั่นดีๆ ได้

  • ดาวน์โหลด Sworkit สำหรับ Android ได้ที่นี่ และ iOS ได้ที่นี่ครับ

ที่มา – TechInsider, Shark Tank (YouTube)

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

ตอบคำถาม: Ionic framework ต่างจาก PhoneGap/Cordova อย่างไร?

หนึ่งในคำถามยอดฮิตสำหรับการทำ Mobile App แบบ Cross platform หรือที่เรียกกันว่า Hybrid Mobile App ที่ถามกันมาทางแฟนเพจ และงานอบรมที่สอนก็คือ…

Ionic framework ต่างจาก PhoneGap/Cordova อย่างไร?

เรามาหาคำตอบกัน เริ่มจาก

Ionic Framework เชื่อมโยงกับ PhoneGap/Cordova ยังไง?

เอาเป็นว่าขอยกคำนิยามของ PhoneGap/Cordova ที่อธิบายไว้ในคอร์สออนไลน์มาในที่นี้สั้นๆ ว่า

PhoneGap/Cordova เป็นแค่ระบบแพ็คข้าวกล่องมาตรฐาน นักพัฒนาคือเชฟ ปรุงแอพขึ้นมาโดยใช้ HTML,CSS, JavaScript

และใช้ระบบนี้และ แพ็คแอพที่ปรุงเสร็จ ส่งขายเหมือนข้าวกล่องอื่นๆ ที่ใช้ภาษา Native ใน App Store และ Play Store

จะเห็นว่า PhoneGap/Cordova มีหน้าที่เดียว คือการ “หุ้ม” แอพพลิเคชั่นที่เขียนด้วยภาษาเว็บของเราด้วย Native Application จริงๆ นั่นเอง

PhoneGap/Cordova จึงจัดได้ว่าอยู่ในสถานะ “Platform” ในอีกทางหนึ่ง

และ PhoneGap/Cordova ไม่ได้มายุ่งในส่วนของ User Interface หรือตัวแอพพลิเคชั่นด้านใน

เปิดโอกาสให้นักพัฒนาอย่างพวกเรา เขียน HTML, CSS, JavaScript กันเอง เหมือนหาเครื่องปรุง ใช้ฝีมือกันเอาเอง

ใครทำเก่งก็ได้อาหารน่ากิน ใครไม่เก่งก็ได้อาหารไปวัดไปวา หรือไม่ก็กินไม่ได้เลย

เหมือนถ้าเราเริ่มต้นมามีแค่เตาถ่าน ทำอาหารได้ แต่มันต้องใช้ทักษะ และความชำนาญสูงหน่อย

จนมีคนกลุ่มหนึ่งคิดได้ว่า ด้วยการคลำทางไปเรื่อยๆ นี่เอง ทำให้ PhoneGap/Cordova มีชื่อเสีย เพราะคนที่ทำเว็บไม่เป็นจริงๆ หรือรู้แค่ผิวเผิน ก็สร้างแอพที่ไม่มีคุณภาพออกมา

คนกลุ่มนี้ก็เลยสร้าง “ชุดเครื่องครัวแฮปปี้พร้อมใช้” ชื่อ Ionic Framework ออกมาครับ ซึ่งเป้าหมายคือทำให้การทำ Mobile App แบบ Hybrid มันง่ายขึ้น และมีประสิทธิภาพดีขึ้นนั่นเอง

Ionic Framework แตกต่างจาก PhoneGap/Cordova อย่างไร?

ดังนั้น Ionic Framework แตกต่างจาก PhoneGap/Cordova เพราะตัวมันเองเป็น framework ที่รวมเทคโนโลยีต่างๆ รวมถึง PhoneGap/Cordova เข้ามาด้วย

ไม่ได้เป็นเทคโนโลยีที่จะมาล้มล้าง PhoneGap/Cordova

Ionic สร้างขึ้นเพื่อเติมเต็มช่องโหว่ของวิธีทำ Mobile App แบบ Hybrid ต่างหาก หาก หาก! 

  1. Ionic framework สร้างระบบ User Interface ที่เน้นทำงานได้อย่างรวดเร็ว ลื่นไหลบน Mobile Device โดยเฉพาะ ไม่ต้องไปหา UI อื่น
  2. Ionic มีการผสานกับระบบ Native เพื่อเพิ่ม Performance ให้สูงขึ้นไปอีกด้วย เช่น collection-repeat หรือ Android Native Scrolling
  3. Ionic เลือก Angular JS มาใช้ในส่วนของการเขียน JavaScript เพื่อให้นักพัฒนาสร้างแอพได้อย่างรวดเร็ว
  4. Ionic จะใช้ Cordova เป็นตัวแพ็คแอพประสิทธิภาพสูงของตัวเอง เป็นไฟล์ Native (ipa, apk) เพื่อนำไปใช้ใน Mobile device ได้

Ionic จึงเหมือนเป็นชุดเครื่องครัวพร้อมใช้ ที่รวมเอาระบบของ PhoneGap/Cordova ไว้ในตัว เพื่อให้ได้ Framework ที่สร้าง Hybrid Mobile App ประสิทธิภาพสูงโดยเหนื่อยน้อยกว่าเมื่อก่อนนั่นเอง

เรียนรู้ Ionic คือเรียนรู้การทำ Mobile App แบบ Cross platform ที่ดีกว่าเดิม

คำตอบที่โค้ชพลอธิบายให้หลายๆ คนก่อนที่จะตัดสินใจใช้งาน Ionic เป็นเครื่องมือในการทำแอพแบบ cross platform ก็คือ:

Ionic เป็นระบบที่ใช้งานง่ายกว่าการใช้ PhoneGap/Cordova เพียวๆ ทำให้ได้แอพที่ดีกว่าทั้งประสิทธิภาพ และความเร็วในการพัฒนา

ข้อดีอื่นๆ ของการใช้งาน Ionic framework (เผื่อเอาไปอธิบายให้บอส หรือเพื่อนๆ ฟังได้อย่างถูกต้อง)

  • ได้เรียน Angular JS ไปในตัว ซึ่งเป็น JavaScript framework ที่นิยมใช้ในปัจจุบันสำหรับทำเว็บแอพ
  • ได้เรียนรู้โลกของการทำ Mobile App และการใช้งาน PhoneGap/Cordova โดยเฉพาะถ้าเราทำเว็บมาตลอด โค้ชพลแนะนำเลย
  • เปิดโอกาสใหม่ๆ ให้กับนักพัฒนาเว็บ เพราะเราสามารถตอบโจทย์ลูกค้าด้วยความสามารถเดิมของเราได้

น่าจะตอบคำถามหลายๆ คนได้ว่า Ionic Framework แตกต่างจาก PhoneGap/Cordova ยังไงได้นะ

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

 

Posted on Leave a comment

Google แจ้งคนทำ Mobile App แบบ Hybrid ให้อัพเดตไปใช้ Cordova 4.1.1 ขึ้นไป

ไม่กี่วันมานี้ Google ส่ง email แจ้งให้นักพัฒนาทุกคนทราบว่า หากใครใช้ Cordova ทำแอพ Android ให้อัพเดตแอพตัวเองไปใช้ Cordova 4.1.1 ขึ้นไปเสียแต่เนิ่นๆ

เนื่องจาก Google พบว่า Android WebView เวอร์ชั่นเก่าที่ Cordova รุ่นต่ำกว่า 4.1.1 ใช้งานนั้นมีช่องโหว่ด้านความปลอดภัย จึงจำเป็นต้องบล๊อคแอพ Android ที่เข้าข่ายจาก Play Store

แต่ถ้า Android Application ของเราใช้ Cordova เวอร์ชั่น 4.1.1 ขึ้นไป ไม่ต้องห่วง ช่องโหว่ได้รับการแก้ไขแล้ว 

โดย Google จะไม่รับแอพพลิเคชั่นที่ใช้รุ่น Cordova ต่ำกว่า 4.1.1 เข้า Play Store ตั้งแต่วันที่ 9 พ.ค. 2016 เป็นต้นไป

งั้นเรามาอัพเกรดแอพกันเถอะ 🙂

วิธีอัพเดตโปรเจค Cordova หรือ Ionic ไปใช้รุ่นล่าสุด

อย่างแรกเราต้องแน่ใจว่า Cordova บนเครื่องเราเป็นเวอร์ชั่นล่าสุดแล้วโดยรันคำสั่งนี้ในโปรแกรม Command Prompt หรือ Terminal บน Mac OS X

npm install -g cordova

// บน Mac OS X อาจต้องใช้ sudo

sudo npm install -g cordova

จากนั้นให้เราเข้าไปอัพเดตโปรเจคของเรา

เช่นถ้า โฟลเดอร์โปรเจคชื่อ NextflowApp ให้เข้าไปดังนี้

cd NextflowApp

cordova platform update android

เป็นอันเสร็จสมบูรณ์

วิธีทดสอบแอพว่ารองรับกับ Play Store แล้ว

จากนั้นให้ทำการ Export ไฟล์ APK เพื่อส่งเป็นอัพเดตขึ้น Play Store

หลังจากอัพโหลดขึ้น Play Store ไปแล้ว ใน 5 -12 ชม. ผ่าน หรือไม่ผ่านทาง Play Store ก็จะแจ้งให้ทราบครับ

แนะนำ

คอยตามข่าวใหม่ๆ ที่แฟนเพจโค้ชพลได้ ใครที่อัพเดตตามประกาศบนแฟนเพจเป็นระยะก็ไม่มีอะไรต้องห่วงล่ะ

อ้างอิง – CocoonJS Blog, ภาพโดย – Unkalno Tekno

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Posted on Leave a comment

ใกล้ความจริง! Ionic 2 ประกาศเวอร์ชั่น Beta ตีคู่ Angular 2

ใครตามข่าว Ionic Framework ที่ใช้ทำ Mobile App แบบ Hybrid ได้ทั้ง iOS และ Android จากโค้ชพลตั้งแต่ปีที่แล้ว ปีนี้มีข่าวดีมาเยอะเลยครับ

นั่นคือ Ionic 2 ประกาศเวอร์ชั่น Open Beta คู่มากับ Angular 2 มาติดๆ โดยในการประกาศนี้มีความคืบหน้าในหลายๆ ด้านเช่นกัน ลองดูสรุปด้านล่างกันครับ

สำหรับคนที่ลงเรียนคอร์สออนไลน์ โค้ชพลจะสอนเนื้อหาพื้นฐานของการเขียน Angular 2 และ Ionic 2 ใช้งานให้ด้วยนะ

ใครสนใจแต่ยังไม่ได้ลงเรียน ซื้อล่วงหน้าทันที ใช้รหัสคูปองลดที่นี่

Ionic 1 กับการเริ่มต้นที่งดงาม

เท้าความกลับไป 2 ปีที่แล้ว Ionic V1 เกิดขึ้นมาบนโลก เพื่อเยียวยาจุดด้อยของ PhoneGap นั่นคือ UI และระบบที่มีความเร็วเหมาะสม จนตอนนี้มีสถิติน่าสนใจคือ:

  • มีคนนำไปสร้างแอพพลิเคชั่นกว่า 1.9 ล้านแอพ บนระบบ iOS และ Android ทั้ง Startups และองค์กรขนาดใหญ่
  • App Store และ Play Store ยอมรับแอพที่สร้างด้วยวิธี Hybrid
  • แอพ Ionic ที่ได้ขึ้นแท่นยอดนิยมใน Store มาแล้วคือ Sworkit, Adobe Social, Meerkat Movie

Ionic 2 มากับคู่หู Angular 2

ionic-angular-v2
เพิ่มพลัง จับคู่กันมาเลย Ionic 2 กับ Angular 2

การเปลี่ยนแปลงใหญ่ๆ เกิดขึ้นในช่วง 2 ปีที่ผ่านมาในโลกของการพัฒนาเว็บ ทั้ง NodeJS, ES6, และมาตรฐานใหม่ๆ ที่เป็นตัวกำหนดทิศทางของการสร้าง “ทุกสิ่ง” ด้วยเว็บเทคโนโลยีในอนาคต

แน่นอนว่า Angular 2 ก็เช่นกันทีมงาน Ionic ที่ได้ทำงานโดยตรงกับทีมพัฒนา Angular 2 ได้ออกแบบให้รีดพลังจาก Angular 2 ได้อย่างเต็มที่

ซึ่งเป็นผลดีโดยตรง เพราะ Angular 2 ออกแบบมาเพื่อรีดประสิทธิภาพ (Performance) โดยเฉพาะ ทำให้ Ionic 2 ได้รับผลดีไปด้วย

รวมถึงเทคนิคต่างๆ อย่าง Server-side Rendering,  Cross-platform views, และ Web Worker ที่จะยกระดับความเร็วมากขึ้นอีกเช่นกัน

อ้าว แล้ว Angular 1 ที่ฉันเข้าใจมาล่ะ?

สำหรับพี่น้องที่ใช้งาน Angular 1 อยู่ อาจจะตกใจตอนเห็นตัวอย่างการเขียน Angular 2 (พลก็เช่นกัน ร้อง WTF เลย) แต่หลังจากใช้งานมา อยากบอกว่าแนวคิดไม่ได้แตกต่างจากเดิมเลย

  • เช่นการใช้ HTML เป็นตัว template ก็ยังเหมือเดิม
  • แนวคิดของ Directive ก็ยังเหมือนเดิม เช่น ของเดิมคือ ng-repeat  (รู้นะใช้กันบ่อย) ก็เป็น ngFor  แทน

นั่นจึงเป็นเหตุผลที่พลสอนแนวคิดของ Angular และ Ionic ไม่ใช่สอนแค่วิธีเขียน หรือใช้ เพราะเครื่องมือมันเปลี่ยนได้ แต่แนวคิดไม่มีวันตาย

เปรียบเมื่อก่อนหุงข้าวด้วยเตาถ่าน เดี๋ยวนี้หุงข้าวด้วยเตาไฟฟ้า พื้นฐานแนวคิดยังเหมือนเดิมนั่นแหละ

เดี๋ยวตรงนี้ในคอร์สออนไลน์ จะมีวิดีโอปรับแนวคิดจาก Angular 1 มา Angular 2 ให้ด้วย ไม่ต้องห่วง 😉

ระบบ Navigation ใหม่ และ Side Menu

coride-app-preview.png
แอพที่ซับซ้อน จำเป็นต้องมีระบบ Navigation ที่ควบคุมได้ง่าย

ว่าด้วย Navigation ภาพรวมก่อนเนอะ

ตอนใช้ Angular 1 และ Ionic 1 เราคงคุ้นเคยกับ ui-router  และ stateProvider  ดีหลายๆ อย่างไปอิงกับ URL

ถ้าเป็นแอพง่ายๆ อันนี้ไม่ค่อยเท่าไหร่ แต่ถ้าระบบมันเริ่มใหญ่ ตรงนี้ล่ะ ท้าทายพวกเรายิ่งนัก

Ionic 2 นำเสนอระบบ ‘Stack‘ เพื่อให้การจัดการ Navigation ในแอพง่าย และสะดวกสบายมากขึ้น โดยไม่อิงกับ URL

แต่! แต่ แต่ ถ้าเราอยากใช้ระบบ URL-Router ใน Angular 2 ก็สามารถเอามาใช้งานได้เช่นกัน

Side Menu ล่ะ?

Side Menu Android Material Design.jpg
Side Menu ในแอพ Android

การสร้าง Side Menu เป็นอีกส่วนที่ท้าทายมาก สำหรับคนใช้ Ionic Framework ซึ่งใน Ionic 2 ทีมงานได้ปรับให้ Side Menu สามารถ “ซ้อน” กันได้

ทำให้เราสร้าง Menu ได้มากเท่าที่ต้องการ แถมยังควบคุมง่ายด้วย

นอกจากนี้ Side Menu ใน Ionic 2 ยังมีหน้าตาถึง 3 แบบ รวมถึง Menu แบบ “Overlay” ใน Android

แน่นอนว่าแตกต่างไปตาม Platform และสามารถปรับแต่งได้

Theme และ Icons

Ionic Continuity Platform
ในความเป็นจริงแล้ว iOS และ Android ไม่เหมือนกัน ส่วน UI จึงต้องสร้างอย่างเหมาะสมให้กับผู้ใช้บนระบบนั้นด้วย

ถึงแม้เราจะใช้ code ชุดเดียวกันทั้ง iOS และ Android แต่ไม่ได้หมายความว่าหน้าตา User Interface ต้องเหมือนกัน

นั่นเป็นเรื่องของ User Experience ที่ PhoneGap/Cordova ปล่อยให้นักพัฒนาหาทางออกกันเอง

แต่ Ionic สร้างระบบ UI ที่ “แปลงร่าง” กันไปแต่ละ Platform ให้ใน Framework เลย และใช้ชื่อแนวคิดว่า Platform Continuity

ซึ่งระบบ Icon ใน Ionic ก็ได้สร้างขึ้นเพิ่มเติมเพื่อรองรับแนวคิดนี้ได้ดีมากขึ้น เช่นไอคอน “Home” บน iOS และ Android จะไม่เหมือนกัน แต่จะแสดงผลอย่างเหมาะสมกับแต่ละระบบ

สามารถไปตามอ่านแนวคิดเรื่อง Platform Continuity ที่โค้ชพลอธิบายไว้ตั้งแต่ปีที่แล้วที่นี่

ใน Ionic 2 ได้มีการย่อยระบบ Theme ของระบบ iOS ให้แก้ไขได้ง่ายขึ้น

แถมยังรวม Meterial Design ของ Android มาไว้ในเวอร์ชั่น 2 นี้ด้วย โค้ชพลนี่เฮเลย และเชื่อว่าอีกหลายๆ คนก็กำลังรอเช่นกัน

Build Tools พร้อมใช้

Ionic CLI เป็นหนึ่งในจุดเด่นของ Ionic Framework

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

ใครที่ใช้คำสั่ง ionic resources  จะรู้ดีทีเดียว 5555

Ionic 2 ก็เช่นกัน ทีมงานได้เพิ่มเครื่องมือต่างๆ ให้รองรับกับเทคโนโลยีใหม่ๆ เช่น Webpack, Sass, TypeScript, และ ES6/EcmaScript 2015

และในอนาคต ทีมงานจะได้รวม Angular CLI (Build tools มาตรฐานที่จะมากับ Angular 2) เข้าไปใน Ionic CLI 2 ด้วย

สำหรับคนที่ซื้อคอร์สออนไลน์ Ionic ล่วงหน้าไปแล้ว เนื้อหาพวกนี้แหละ ที่จะถูกทยอยอัพเดตให้ในหลักสูตรครับ รอติดตามกันได้

เรื่องใหม่ๆ ที่กำลังตามมา

นอกจากอัพเดตส่วนประกอบต่างๆ ของ Ionic 2 แล้ว ทีมงานยังมีความสามารถใหม่ๆ ที่จะทำให้การสร้าง Hybrid Mobile App ของเราสะดวกขึ้นด้วยครับ เช่น

  • รายละเอียดการรองรับ และใช้งาน TypeScript และ ES6
  • ระบบ Animation ที่ยืดหยุ่นกว่า
  • Ionic Native – ระบบ wrapper ที่จะทำให้เราเชื่อมต่อกับ Cordova Plugin ได้ง่ายขึ้น

สรุป

Ionic ตัวแรก ทำให้นักพัฒนาเว็บสามารถสร้าง Mobile App เพื่อตอบโจทย์ของตัวเอง และองค์กรได้อย่างสบายๆ

และด้วยแนวคิดที่เพิ่มเติมสิ่งใหม่ๆ เข้าไป, การสร้างแอพที่สะดวก และง่ายขึ้น, ความเร็วที่ง่ายขึ้น โค้ชพลอดใจรอไม่ไหวแล้วล่ะครับ

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!