พฤษภาคม 2016

Semantic UI สุดยอด CSS Framework ในใจผม

เนื่องจากได้จับงานทางสายพัฒนาเว็บไซต์มาได้สักระยะ ได้รู้จัก CSS Framework มาก็หลายตัว ทั้ง Bootstrap,UIKit,Foundation เหล่านี้ก็ได้ทดลองใช้มาหมดแล้ว (ฺBootstrap น่าจะได้ลองใช้งานเยอะสุด) ผมเองก็เป็นคนชอบทดลองใช้งานสิ่งที่แปลกใหม่ และได้มีโอกาสได้พัฒนาเว็บไซต์ที่เกี่ยวการทำระบบจัดการ Feed เนื้อหาข้อมูลคล้ายกับการ โพสต์ คอมเม้น ไลค์ เหมือนของ Facebook แต่ใช้งานภายในองค์กรและหน่วยงาน

เลยเริ่มจากการค้นหาเครื่องมือที่มองว่าตอบโจทย์ได้โดยไม่ต้องพึ่งพา template สำเร็จรูป ลองไปจนเจอ Semantic UI นี้ เวลาผมจะเลือกมาใช้งานก็จะมองเรื่อง Manual Document ก่อน และ ตัวอย่าง Component ต่าง ๆ ที่มีมาให้ลองเล่นก่อนการตัดสิ้นใจเลือกมาใช้กับงาน

สิ่งที่ Semantic UI ทำมาเพื่อรองรับการทำงานร่วมกับ Framework ตัวอื่น ๆ ได้ ตัวอย่างเช่น

  • React
  • Meteor
  • Ember
  • AngularJs

ดูตัวอย่างได้จาก http://semantic-ui.com/introduction/integrations.html

มีตัวอย่างหน้า Template Layout ให้พอเอาไปเป็นแนวทางในการพัฒนาเว็บของเราได้

ดูตัวอย่างได้จาก http://semantic-ui.com/usage/layout.html

เรื่อง component ต่าง ๆ ผมมองมามันเยอะมาก เยอะกว่า Component ของ Bootstrap ซะด้วยซ้ำ

ตัวอย่าง Component ที่แตกต่าง คือที่ Semantic UI มี แต่ Bootstrap ไม่มี

  • Divider เป็น Element ที่คล้าย Tag <hr/> มันก็คือเส้นขั้นหน้า แทรกได้ทัง Text และ Icon บริเวณกลางเส้นมีทั้งแนวตั้ง และแนวนอน ดูตัวอย่างได้จาก http://semantic-ui.com/elements/divider.html

SemanticUI-2 SemanticUI-1

  • Step เป็น Component ที่เหมาะกับการเอาไปทำระบบ Order ,Shopping Cart เพราะตัวของมันเองมีหน้าตาดูเป็นขั้นตอน (Step) ตามชื่อของมัน ดูตัวอย่างได้จาก http://semantic-ui.com/elements/step.html

SemanticUI-3

  • Card เป็น View Component อย่างหนึ่งผมว่ามันคล้าย Panel ของ Bootstrap นะ แต่มองว่ามันดีกว่า เพราะมันปรับแต่งได้เยอะกว่า ดูตัวอย่างได้จาก http://semantic-ui.com/views/card.html

SemanticUI-4SemanticUI-5

  • Comment เป็น View Component ที่ดูว่าเหมาะมากกับการทำเว็บแนว Webboard ดูตัวอย่างได้จาก http://semantic-ui.com/views/comment.html

SemanticUI-6

  • Feed มองว่ามันคล้ายกับ Comment แตกต่างที่ว่า Content จะแทรกภาพเข้าไปได้แต่ถ้าเรื่องการเอาไปใช้งานใช้ควบคู่กันน่าจะเหมาะสมกว่า การ Post Content Data ก็เอา Feed ไปประยุกต์ใช้ ส่วนการทำ Comment ตอบโต้ ก็เอา Comment เข้าไปใช้จะดูดีเลยทีเดียว ดูตัวอย่างได้จาก http://semantic-ui.com/views/feed.html

SemanticUI-7

    • Dropdown ที่ครบถ้วนกระบวนความเรื่องการทำหน้าที่ของตัวเลือก ดูตัวอย่างได้ http://semantic-ui.com/modules/dropdown.html
      • แบบทั่วไป (selection) Option Text ธรรมดาSemanticUI-13
      • แบบทั่วไป (selection) แต่เพิ่มการแทรก icon image เข้าไปให้ Option ตัวเลือกได้SemanticUI-12
      • แบบ (search selection) สามารถค้นหาด้วยการกรอกตัวอักษรเพื่อกรองตัวเลือกSemanticUI-11
      • แบบเลือกได้มากกว่า 1 ตัวเลือก (Mutiple selection) เป็นการแสดง Option ธรรมดาแต่มีการเลือกได้มากกว่า 1 ตัวเลือกSemanticUI-10
      • แบบเลือกได้มากกว่า 1 ตัวเลือก แต่สามารถกรองตัวเลือกได้ (Mutiple Search Selection) เลือกได้มากกว่า 1 ตัวเลือกแถมยังสามรถกรองตัวเลือกได้อีกด้วยSemanticUI-9
      • แบบเลือกผ่านเมนู (Search In-Menu) ตัวเลือกที่อยู่ใน Dropdown Menu SemanticUI-8




  • Rating เป็น Mudule Component อีกตัวที่น่าสนใจเอาไปประยุกต์ใช้กับแอพที่ทำการ Review สินค้าแล้วทำการให้คะแนนเป็นลำดับขั้น  ดูตัวอย่างได้ http://semantic-ui.com/modules/rating.html
    SemanticUI-14
  • Search เป็น Component สำหรับการค้นหาข้อมูลการทำงานจะทำได้ 2 แบบคือ static data คือข้อมูลที่ถูก query มารอการเรียกใช้งานแล้ว กับ query real time data คือหลังจากการค้นหาระบบจะทำการค้นจากระบบหลังบ้านแล้วส่งผลลัพธ์กลับมาให้ ดูตัวอย่างได้จาก http://semantic-ui.com/modules/search.html
    SemanticUI-15
  • Sidebar เป็นอีกตัวที่น่าสนใจมากเนื่องจากหน้าจอบนมือถือมีพื้นที่ใช้สอยน้อย การที่จะลดพื้นที่ส่วนที่ไม่ได้ใช้งานบ่อยได้ก็ถือว่าจำเป็นอย่างมาก Sidebar นี้ก็สามารถช่วยแก้ปัญหานี้ได้เป็นอย่างดีเลยที่เดียว เพราะการทำงานของ Sidebar นี้ จะต้องมีการสั่งการตัว Sidebar มันจึงจะแสดงให้เห็น เหมาะมากสำหรับการใช้ทำเป็นเมนูของระบบ ดูตัวอย่างได้จาก http://semantic-ui.com/modules/sidebar.html
    SemanticUI-16
  • Transition เป็นตัวที่เอาไว้สำหรับปรับแต่งแอนนิเมชั่น การเคลื่อนไหวมีให้เลือกหลายแบบมาก เช่น scale,fade,horizontal flip,fly right,swing right,browse right ฯลฯ เป็นต้น ดูตัวอย่างได้จาก http://semantic-ui.com/modules/transition.html
  • Form Validation เป็น Component ใหญ่อีกตัวที่ถือว่าสำคัญมากกับการทำแอพบนเว็บไซต์ที่ต้องทำงานเกี่ยวกับ Form เพราะ Component นี้จะเอามาช่วย validate ค่าของ element input บน form ของเราก่อนที่จะส่งค่าไปที่ controller หลังบ้านทำงานต่อไป ช่วยลดการทำงานส่วนโค๊ดหลังบ้านได้อย่างมากเพราะสามารถตั้งกฏการดักจับข้อผิดพลาดได้มากกมายหลากหลายแบบมาก เช่น ค่าว่าง(Empty),email,regExpresion,จุดทศนิยม(Decimal) ฯลฯ อื่น ๆ อีกเยอะมาก ดูตัวอย่างได้จาก http://semantic-ui.com/behaviors/form.htmlSemanticUI-17
  • Visibility เป็น Behaviors Component ที่สุดยอดเลย ทำเว็บไซต์ที่ต้องมีการโหลดข้อมูลปริมาณมาก ๆ อีกทั้งยังจะมีรูปภาพมากมายอีกเป็นปัญหาอย่างมากเวลาโหลดหน้าเว็บไซต์จะนาน จนอาจจะค้างไปเลย Visibility ช่วยอะไรได้บ้างละ ดูตัวอย่างได้จาก http://semantic-ui.com/behaviors/visibility.html
    • Infinite Scroll จะจัดการเรื่องการใช้งานร่วมกับ Scrollbar เราสามรถดักจับ event ขณะ Scroll Mouse ได้ เอาไปประยุกต์กับการจัดการเนื้อหาได้เป็นอย่างดีเลย
    • Lazy Loading Images จะช่วยจัดการกับ image ได้ระบบจะยังไม่แสดงรูปภาพที่ผู้ใช้งานยังไม่เห็น มันจะยังไม่เรียก dom image มาแสดงทำให้ปัญหาการโหลดรูปภาพหมดไป เป็นการทำงานของการจัดการ HTML Dom ร่วมกับ Cache Browser
    • Sticky Headers ช่วยเลือก Fixed Layout Element บางตัวที่ต้องการให้แสดงตลอดเวลาหลังจากทำการเลื่อนเมาส์ ขึ้นลงได้

หลังจากที่ได้ลองใช้งาน Semantic มาสักพักก็รู้สึกชอบโดยส่วนตัวจะมองหา Framework ที่มี Component เยอะอยู่แล้วและยิ่ง Plugin บางอย่างจำเป็นต้องใช้งานอยู่แล้วถ้า Framework มีมาให้พร้อมแล้วมันก็จะสะดวกสบายยิ่งขึ้น สำหรับเนื้อหาของเรื่องนี้ก็มีโดยประมาณเท่านี้ครับ ถ้าอยากรู้อยากทราบเพิ่มเติมต้องเอาไปลองใช้งานจริง และคุณจะลืม Bootstrap ไปได้เลย




Facebook Graph API คืออะไร ทำความเข้าใจการใช้งานเบื้องต้น ด้วย Graph API Explorer ตอนที่ 1

สวัสดีเพื่อน ๆ นักพัฒนาทุกท่าน วันนี้จะมาอธิบายถึง Facebook Graph API ว่าคืออะไร ถ้าอยากจะใช้งานเบื้องต้นจะต้องทำอย่างไร

Graph API

          คือวิธีขั้นต้นในการรับข้อมูลจากในและนอกแพลตฟอร์มของ Facebook เราสามรถทำการสืบค้นข้อมูล โพสต์  รูปภาพ ต่าง ๆ ได้อีกทั้งยังสามารถทำการโพสต์กิจกรรมได้

มาเริ่มกันเลยแล้วกัน

ขั้นตอนแรกเราจะต้องมี Facebook Account ซะก่อน จากนั้นเข้าไปที่หน้า  https://developers.facebook.com/docs/graph-api

สำหรับ บทความนี้จะมาพูดถึงการเรียกดูข้อมูลผ่าน Graph API Explorer ให้เข้าไปที่หน้า https://developers.facebook.com/tools/explorer เพื่อเริ่มการใช้งาน

หน้าตา Graph API UI

graph_api_1

เมื่อเปิดได้หน้าจอของ Graph API Explorer ได้แล้วจะได้หน้าจอ คล้ายแบบนี้

ให้การที่จะเข้าถึงข้อมูลของ Facebook ได้จำเป็นต้องได้รับการอนุญาตซะก่อน ก่อนอื่นให้ทำการ คลิกปุ่ม Get To … เพื่อทำการสร้าง Token Key

สำหรับยืนยันตัวตนของเรา เลือก Get To…-> Get User Access Token

graph_api_2




เลือก public_actions เพื่อขออนุญาตเข้าถึงข้อมูลที่เปิดเผยได้เท่านั้น จากนั้นกด Get Access Token

graph_api_3

ระบบแสดงหน้าจอยืนยัน เลือก ตกลง

graph_api_4

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

ระบบจะสร้าง Token Key มาให้เรา

จากนั้นก็ให้ลองกด Submit เพื่อลอง Get ข้อมูล Profile ของเราเองมาเพื่อแสดง

graph_api_5

เพียงเท่านี้เราก็จะได้ข้อมูล id,name ของตัวเราเอง (ME) มาแสดงแล้วง่ายไหมครับ

 

บทความหน้าจะมาพูดต่อถึงการที่เราจะเรียกข้อมูลแบบอื่นมาแสดงด้วย เช่น age fname address หรือ แม้แต่รูปภาพโปรไฟล์ของเราเองก็สามารถเรียกมาแสดงได้