อบรม cross platform by microsoft จากงาน MEGA2014

Learning Feb 4, 2015

ในการแข่งขันแอปปิเคชั่นภาครัฐ MEGA2014 มีการจัด workshop ให้ผู้แข่งขันด้วย ซึ่งบล็อกตอนนี้ เจ้าของบล็อกไปอบรม cross application ของ Microsoft Thailand ตั้งอยู่ที่ชั้น 38 CRC Tower ห้อง auditorium 1 ในวันที่ 28 มกราคม 2558 เวลา 13:00-17:00 (ตอนแรกเขาบอกเลิก 4 โมงเย็นนะเนี่ย)

วิธีการมา ของเรามาด้วยรถเมล์ ลงสถานฑูตสหรัฐอเมริกา แล้วข้ามสะพานลอย เดินไปนิดนึงก็ถึงตึกแล้ว มีทั้งหมด 3 แท่ง เราสนใจตึกใหญ่ตรงกลาง อันนามว่า CRC Tower นอกจากเป็นที่ที่เรามาร่วมอบรมแล้ว ยังมี shopping mall อีก 3 ชั้น และเชื่อมกันกับโรงแรมคอนราดด้วยยยยย เราสามารถหาอะไรทานก่อนเข้าอบรมได้ที่ด้านล่างนี้คะ มีทั้ง Burger King, Starbucks coffee, S&P, ZEN และอีกหลายร้านเลยคะ ก่อนเข้ามาแลกบัตรด้วยนะคะ จะได้ขึ้นไปอบรมได้เนอะ ลิฟต์ค่อนข้างเร็ว วาปทีเดียวถึงที่หมายของเรา วิวดีมาก

cross platform development using Visual Studio Tools for Apache Cordova

– apache cordova คือ tool สำหรับ cross platform (เขียน 1 ครั้ง ใช้ได้หลายๆ platform) support major platform (iOS, android) และ non-major platform (BB) ส่วน windows phone ไม่ได้จัดเข้าหมวดใดคะ

– ต้องเตรียมทุกอย่าง แต่ ใน Visual Studio 2013 updated 4 ขึ้นไปถึง 2015 จะมีให้ติ๊ก Tools for Apache cordova ดัวย มีทุกอย่างที่จำเป็นต้องใช้ config มาให้เรา เราไม่ต้องทำเอง และมี tool ช่วยในการ develop

– สิ่งที่ควรรู้

1. web standard

– HTML5, CSS, Javascript

– ของ W3C (html มาตรฐาน)

– หลีกเลี่ยง vender prefixs เพราะทำงานได้เฉพาะ browser ของตัวเอง เช่น -ms- (IE), -webkit-, -moz- (firefox), -o- (opera)

2. Responsive design : พัฒนา web ให้เหมาะสมกับหน้าจอของแต่ละ device เช่น web, mobile, TV เช่น coderwall.com

– set the viewport : set ขนาดหน้าจอ = device และ แบบให้คนอื่นอ่านออก set แค่ 1 บรรทัดก็พอ
– CSS media queries กำหนดสไตล์เฉพาะ

line 1 : กว้างสูงสุด 640 px ถึงจะทำงาน stylesheet

line 2 : ต้องมีความกว้างอย่างน้อย 500 px

line 3 : orientation

– deliver the right UX : ทำเป็น touch first, UX ถูกต้องตาม device

1. set float ไปทางซ้าย (แบบง่าย)

2. bootstrap ตัวช่วย เป็น CSS library หน้าตาจะออกทางเว็บมากกว่าในมือถือ

3. frameworks มีหลายตัว แนะนำ AngularJS ของอากู๋

•Hello worlds•

-สร้าโปรเจคขึ้นมาก่อน ไปที่ new project เลือก blank app ของ apache cordova จะมี document มาให้ด้วย ตัว config.xml เอามาเพิ่ม plugin ซึ่งตอนนี้ยังไม่ยุ่งกับเขาเนอะ หน้าแรกของแอปเราอยู่ที่ index.html โค้ดแอปของเราอยู่ที่ scripts/main.js, function แต่ละ platform จะอยู่ที่ folder marge พวก icon native screens จะอยู่ที่ folder res ซึ่ง folder marge กับ res จะแยกตาม platform เลยคะ หน้าตาแอปเราจะแก้ที่ index.html คะ ซึ่งจะใส่สามบรรทัดนี้ ไว้ด้านล่าง เพื่อเรียกใช้งาน script ที่จะใช้รันแอป
<script src=”condova.js”></script>
<script src=”scripts/platformOverrides.js”></script>
<script src=”scripts/index.js”></script>

– จะมีให้รันแอปหลายแบบ ทั้งเครื่องจริง และเครื่องจำลอง เช่น emulator ซึ่งของแอนดรอยด์จะช้ามากๆๆๆๆ เลยมีแบบ

• Ripple เป็นเครื่อง emulator รันผ่านหน้า chrome มีทั้ง android และ windows phone เลยคะ ซึ่งจะเร็วกว่ามาก แต่ standard ไม่ใช่ android เครื่องจริง

• vs Emulator ในส่วนของ android Visual Studio ทำให้ (คนละตัวกับอันอึดๆนะ)

• ของ iOS ต้อง remote เข้าไปในเครื่อง mac คะ เพราะตัว build อยู่ในนั้น ซึ่งวิทยากรไม่ได้สาธิตให้ดูคะ เราเห็นความลำบากตั้งแต่ตอนปฐมนิเทศแล้วคะ ณ จุดๆนี้ แต่สามารถทดสอบคร่าวๆได้ใน Ripple ดูการทำงานของ function (แต่ layout ต้องมโนเอาเองคะ)

– ตัว main.js เป็นส่วนต่อไป ส่วนนี้ใส่ฟังก์ชั่นเข้าไปด้วย ข้างในมี 3 ฟังก์ชั่น คือ onDeviceReady, onPause และ onResume ซึ่งเราสนใจที่ onDeviceReady ที่เดียวคะ อารมณ์เหมือน onCreate ใน android หล่ะคะ ตัว line 8 ในรูป
document.addEventListener(‘deviceready’, OnDeviceReady.bind(this));
เป็นการระบุบอกว่า ให้โค้ดของเราทำงานใน function onDeviceReady คะ ฟังก์ชั่น document.addEventListener ให้ใส่ปุ่มที่ index.html
<button id=”changeColor”>Change Color</button>
แล้ว set function ที่ index.js ใน OnDeviceReady คะ
document.getElementById(“changeColor”).onclick = function () {
document.body.style.backgroundColor = “blue”;
}
** สรุปง่ายๆ คือ เหมือนลากปุ่ม ตั้ง id ปุ่มที่ไฟล์ index.html และไปกำหนดการใช้งานที่ main.js หน้าตาก็จะเป็นไปตาม platform**

– การทำงานเบื้องหลังของการ cross platform

• windows และ android จะเหมือนกัน คือ MSbuild + vs-mda ประมวลผล build ออกมาเป็น cordova แล้วแปลงร่างเป็น native

• iOS จะเพิ่มการ remote debug เข้าเครื่อง mac ด้วย โดย vs-mda-remote รับ code จาก windows มารันบนเครื่อง mac ประมวลผล build ออกมาเป็น cordova แล้วแปลงร่างเป็น xcode

•Plugins• cordova มีเยอะมาก
การ add plugins ทำโดยการ add plugins ที่ config.xml รอ downolad จากเน็ตมา จากนั้นจะมี folder ใหม่ นามว่า plugin และมีส่วนที่เรา add มาด้วย เวาใช้งาน ระวัง support platform ด้วย
•Using JS framework with Apache Cordova• angular เป็น MVC (Model–view–controller)
•Know Issue and Limitations• บรรดา bug ทั้งหลาย
– Windows :
– เราสามารถเอา code ของเราไป run ได้ 3 รูปแบบ คือ virtual machine, cloud service, web sites ซึ่ง VM คืิอแบบ infrastructure ยากสุด แต่สามารถควบคุมได้หมด ส่วน cloud กับ web จะเป็นแบบ platform ซึ่งตัว web จะง่ายสุด และการสร้างเว็บแบบเริ่มต้นจะฟรีด้วย เราสามารถเล่น windows 10 ได้ และฟรี 30 วัน

– windows และ android : มี plugin เชื่อม native และ js เข้าด้วยกัน เพื่อใช้งาน plugin ได้ เช่น เปิดกล้อง เปิด GPS ได้ หลักการเดียวกันกับ WP8
– iOS : รันบน environment เดียวกัน ไม่มี native เพราะ เขียน native ด้วย js ได้ 100% หลักการเดียวกันกับ WP universal
** WP universal คือ รันได้หมดทั้งมือถือและคอม ส่วน WP8 ใช้ C# และ xaml เป็น native **
พี่วิทยากรได้แสดงตัวอย่าง plugins 5 ตัวด้วยกันคะ จะมีแบบ official (org.apache.cordova.*) และแบบ custom

1. Camera : ใช้ official plugins ตอน demo ใช้เครื่องจริงของ android และ windows phone ทำงานได้เหมือนเขียน native เองเลย แถมง่ายกว่าด้วย จำนวนบรรทัดน้อยกว่าเยอะเลย

2. Device : บอก spec ของ device มี 2 ตัวเด่นๆ คือ
– device.platform ใช้ส่วนนี้เพื่อแยกโค้ดที่ใ้ทำงานเฉพาะ platform ได้
– device.uuid ค่าเฉพาะของเครื่องเรา gen จากโรงงาน platform และ model

3. Network Info : บอกข้อมูล connection ของเครื่อง ว่าใช้อะไรต่อเน็ตอยู่หรือไม่ได้ต่อเน็ต มีคำสั่งเดียว มี type (propoties) เป็น constants

ส่วน offline/online ทำบน WP ไม่ได้ ต้องมีคำสั่งพิเศษ

4. Contact : ใช้ v.0.2.15 ขึ้นไป เป็น WP universal ใน plugins ยังเป็นของเก่าอยู่ ให้ download มาแตก zip แล้ว add plugins เอง โดยลากไฟล์ในนั้นลงใน folder ใหม่ที่เราสร้างตามชื่อ package ใน Visual Studio เลย หรือ import folder จากนั้นคลิกขวาที่ config.xml เลือก view code ใส่ namespace ของ plugin พร้อม version ใช้ได้ทุก platform การทำงานจะดึง contact ในเครื่องเรา แสดงออกมา

5. Social Sharing : ไม่ใช่ official ของ cordova ดูที่ custom -> local เป็นอันที่เราเขียนเอง หรือ download จาก gif แตก zip มา แล้ว add ลงไปเหมือนของ contact หรือก็อปลิ้งจาก gif แต่ไม่สามารถ add ได้ (มี bug) ซึ่งตัว Social Sharing จะ shared ค่าที่เรา set ไว้ โดยที่แปะที่ index.html ที่เดียว

** Model-view-controller ในความเข้าใจของเรา คือ การพัฒนาแแยกส่วน อันได้แก่ model (input data) view (UI) และ controller (รับคำสั่งหรือเข้าไปทำงาน object อื่น) **

– Tool :
– ถ้าใช้ custom plugins เช่น Social Sharing การ install plugin จาก gif จะทำไม่ได้ เลยต้อง download ไว้ในเครื่องก่อน จากนั้นแตก zip แล้วค่อยลากไฟล์ใน folder ใหม่ที่เราสร้างตามชื่อ package ใน Visual studio (ดูจาก Contact)
– ไม่มี intelliSense (ตัวช่วยในการ dev code) แก้โดย
///<reference group=”Implict (Multi-Device Apps)”/> ไว้ด้านนสุด
– หาไฟล์กันไม่เจอ ใส่ ///<reference group=”referenceFile.js”/> ลงไป

– ไม่มี debugger WP8/8.1 ของ cordova เราต้อง debug code ที่ gen ออกมา (native)
– key expire ไปแล้ว แก้โดยไป download ที่ http://aka.ms/cordovawindowskey แล้วแก้ชื่อไฟล์เป็น CordovaApp_TemporaryKey.pfx และใส่ไว้ใน path res/native/windows

– Android :
– ใช้ได้ ตั้งแต่ android4.4 ขึ้นไป ตรงนี้แก้ไม่ได้ TT^TT
– ทะุผ่าน debug ไปเลยสำหรับหน้าแรก แก้โดย F5 ที่ chrome หรือ execute window.location.reload() ที่ js control
– project ใหญ่ app จะค้าง ค้างแบทำอะไรไม่ได้ ต้องปิดและเปิดใหม่

– iOS : มีปัญหาที่ custom plugin อาจจะ build ไม่ผ่าน แก้โดย clean solution
– อื่นๆ และ resource :

เรื่อง cross platform ของ microsoft virtual academy (MVA) เป็น learning online ของ Microsoft มีให้เรียนเพิ่มเติมด้วย สามารถศึกษาเพิ่มเติมได้ที่นี่เลยคะจบเรื่อง cross platform แล้ว พักเบรกก่อนคะ อ้ามมมมมมม (คนมาน้อยแต่ขนมเหลือค่อนข้างเยอะคะ)

มาที่เรื่องต่อไปดีกว่า นอกเหนือจากเรื่องหลักแล้ว ยังมีการขายของ เอ้ยยย แนะนำผลิตภัณฑ์ของ Microsoft ด้วยคะ กับพี่วิทยากรอีกท่านนึงคะ

Windows Azure Overview : cloud platform

– ใช้เท่าไหร่ จ่ายเท่านั้น เหมือนค่านํ้า ค่าไฟ

– จากแผนภาพ แบบเดิม เราต้องดูแลเองหมด

1. แบบ infrastructure : ไม่มี hardware server มาตั้ง มี admin เลือก OS เองได้

2. แบบ platform : มี application กับ data และสามารถโฟกัสไปที่ app ของเรา (ใช้กับการประกวด app ได้)

3. แบบ software : ใช้อย่างเดียว เช่น office365

– แบบเดิม actual load มีหยุดใช้งาน และ update server เรื่อยๆ มีค่าใช้จ่าย

– Azure แก้ปัญหาทั้งหมดได้ ลดการลงทุนเบื้องต้น แก้ปัญหาการใช้ทรัพยากรสิ้นเปลืองหรือไม่พอ ทำเองได้ทันที ตอบสนองความต้องการได้ตลอด ลด resource และ cost ลง

– ข้อดีของ Azure คือ flexible (ปรับได้), open (รันได้หมดทุก OS ไม่ว่าจะเป็น windows linux), solid (ใช้ data center ของ Microsoft)

– Microsoft มี data center หลายที่ ใกล้ไทยสุดคือฮ่องกง และสิงคโปร (จะใช้ที่อเมริกาก็ได้ แล้วแต่เรา) ตัว web กับ database ควรเป็น data center ที่เดียวกัน จะได้ไม่เสียเวลาโหลดนานและไม่ต้องข้ามเขต data center ในการ transfer ด้วย

– จากนั้นพี่วิทยากรก็จะ demo ให้ดู เช่นแบบ VM ก็สร้าง windows 10 ขึ้นมาใหม่เลย และเรา remote desktop เข้าไป รอค่อยข้างนานกว่าเราจะได้ดู การ set จะมีแบบ basic แบบง่ายและเล็กๆ เอาไว้ test หรือเอามาแข่งขันทำ prototype app ได้ แบบ standard เอาไว้ run งานจริง ตัว cpu และ memory ของระบบ จะมี A แบบปกติ (จะมีทั้ง 2 แบบ) D มี solid state และ G มี cpu และ ram เยอะๆ เราสามารถเลือก data center เองได้ว่าจะเอาที่ไหน ตัว temporary ตัว d:/ ใส่ข้อมูลแล้วจะหาย (ตามหลักสากลของ windows server ด้วยสิ) ควรใส่ไว้ใน c:/

– ตัว web เราสามารุเลือก platform ได้ เช่น wordpress joomla ซึ่งเขา demo เป็นตัว wordpress เราแก้ได้ที่หน้า admin page ที่ xxx.azurewebside.net เราสามารถใส่ donate name ของเราทีหลังได้ ส่วนตัว cloud ลิ้งจะอยู่ที่ xxx.cloudapp.com และตัว web ลิ้งอยู่ที่

– more information : azure.microsoft.com และที่ thaicreate.com คะ