8 ธันวาคม 2554

[083] ลองทำ HTML5 Web app บน iPod

ว่าจะทำๆ จนซื้อ iPod มาเกิน 1 ปีแล้ว ก็ยังไม่ได้ลงมือทำสักที วันนี้พอจะมีเวลาว่าง ก็เลยลองทำดู จะได้หายคาใจว่าทำ HTML5 Web App ให้ทำงานบน iPod แบบ Offline เอาไว้ใช้งานเองได้จริง (แทนการเขียน Native app และต้อง jailed break เพื่อติดตั้งแบบไม่ผ่าน AppStore)


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


เริ่มทำงาน
หลังจากค้นหาข้อมูลก็ได้ความว่า

  • มีคนที่เขียนวิธีการไว้อยู่แล้ว ง่าย ๆ ไม่ต้องใช้ Framework อะไรให้ยุ่งยาก (เพราะเราเน้นง่ายๆ) อันนี้เป็นตัวอย่างเกม tetris ครับ http://sixrevisions.com/web-development/html5-iphone-app/
  • จากนั้นก็ดูวิธีการและข้อกำหนดในการทำ Web App แบบ Offline ที่นี่ w3.org
เมื่อได้ข้อมูลแล้วก็ลงมือได้เลย


ไฟล์ที่ต้องใช้งาน
ในการสร้าง app ตัวนี้ก็ง่าย ๆ มีไฟล์ html css และภาพที่ใช้เป็น icon และ load screen เป็นใช้ได้ (ทำแบบลวก ๆ ด้วย PowerPoint)



app.html เป็นไฟล์ที่เป็นหน้าจอ และเขียน JavaScript ไปเลย (ขี้เกียจแยก) ทำกันดิบ ๆ ใน text editor กันเลย

ไฟล์หลัก app.html


อันนี้ css ที่กำหนดหน้าตา (ทำแบบง่าย ๆ เหมือนกัน)

ไฟล์ style sheet CSS


หลักจากทดสอบเสร็จดูว่าโปรแกรมใช้งานได้แล้ว ส่วนที่ขาดไม่ได้คือไฟล์ cache manifest เพื่อบอกให้เบราเซอร์ทำการเก็บไฟล์ที่ต้องการใช้งาน Offline เอาไว้ (เนื่องจากขี้เกียจไปแก้ MIME type ใน Apache เลยเขียนเป็น php ล่ะกันง่ายดี)

ไฟล์ cache manifest


ติดตั้งโปรแกรม
หลังจากทดสอบใน Safari บน iPod จนได้ผลเป็นที่น่าพอใจแล้ว ก็ทำการติดตั้งบน Home screen เพื่อใช้งานจริง ๆ กันสักที

เลือก Add to Home Screen

มาเป็น icon อยู่บนหน้าจอ Home Screen ให้กดได้แล้ว :-)

เมื่อเปิดโปรแกรม สามารถใช้ได้แม้ไม่ต่อเน็ต ใช้เวลาโหลด 3 วินาที

ไหนลองใช้งานสิ

กดปุ่มคำนวณแล้ว ทำงานได้ถูกต้อง จบการทดลอง

สรุป
โปรแกรม ถูกโฮกๆๆๆๆ ที่สร้างขึ้น ตอนนี้เอาไว้ใช้ตอนไปซื้อของในซุปเปอร์มาร์เก็ตได้แล้ว (จริง ๆ app แบบนี้ก็มีให้โหลด แต่ใช้แล้วมันไม่ถูกใจ เลยอยากทำเอง)

เสียเวลามากที่สุดคือตอนเขียน CSS เนื่องจากเกลียดการ design มาก (ทำได้แต่ไม่ชอบ) เขียน code ใช้เวลาแค่ 20% ของเวลาที่ใช้ไปทั้งหมด หน้าตาแบบนี้คงทำไปแจกชาวบ้านลำบาก คงไม่มีใครอยากใช้เพราะตัวเองยังรู้สึกว่ามันเชยยยยซะ 

ตอนนี้รู้วิธีทำ HTML5 Web App แบบ Offline ไว้ใช้เองแล้ว ถ้าอยากให้หน้าตาดูดีมีชาติตระกูล ควรหา Mobile Web App Framework มาใช้งานจะเข้าท่ากว่า แต่ต้องแลกกับเวลาที่ใช้เปิดโปรแกรมมากขึ้น


ส่งท้าย
ช่วงหลัง ๆ รู้สึกว่าตัวเองไฟมอดลงเรื่อย ๆ ถ้าช่วงไหนเกิดไฟลุก ต้องรีบลงมือทำอย่างว่อง เพราะเผลอแป๊บเดียวมอดหมด จะเห็นได้ว่า app ตัวนี้โครตขี้เกียจวางแผนเลย ทำลวก ๆ ยังคิดอยู่เลยว่าอนาคตต่อไปจะทำงานอะไรที่เหมาะ ๆ กับตัวเองดี เพราะเบื่อ PHP+Web เต็มทน

เกี่ยวกับเจ้าของบล๊อก

รูปภาพของฉัน

เป็นโปรแกรมเมอร์ที่ฝันว่าจะได้นอนเกาพุงไปวัน ๆ จนพุงลดกลายเป็นเอว ได้เป็นบุคคลที่มีความสุขที่สุดในโลกจนคนอื่น ๆ อิจฉา