Month: June 2016

ติดตั้ง IntelliJ IDEA ให้เขียนโปรแกรม Android ได้

slashs10 , ,

intellijidea_android

กูเกิล (Google) ประกาศให้แอนดรอยด์สตูดิโอ (Android Studio) เป็นไอดีอี (IDE: Integrated Development Environment) หลักในการพัฒนาแอพสำหรับแอนดรอยด์ ซึ่งพื้นฐานมาจาก IntelliJ IDEA Community Edition นั่นเอง

เราจึงใช้ IntelliJ เขียนโปรแกรมแอนดรอยด์ได้ แต่ต้องติดตั้ง Android SDK และโปรแกรมเสริมผ่าน SDK Manager อยู่พอสมควร ประกอบไปด้วย

  1. Android SDK Tools
  2. Android SDK Platform-tools
  3. Android SDK Build-tools
  4. เลือก Android Platform อย่างน้อย 1 เวอร์ชัน เช่น Android M (API 23) โดยให้เลือกรายการย่อยดังนี้
    • SDK Platform
    • System Image อย่างน้อย 1 ตัว ควรเลือก Google APIs Intel x86 Atom เพื่อความเร็วในการทดสอบกับ AVD (Android Virtual Device) ซึ่งอิมเมจนี้จะมีเอพีไอ (API) ของกูเกิลติดมาด้วย Intel x86_64 นั้น อาจต้องใช้เครื่องที่แรงๆ ส่วน ARM ทางกูเกิลไม่แนะนำให้ใช้แล้ว เพราะทำงานช้ากว่า Intel x86 ประมาณ 10 เท่า
  5. Extras
    • Android Support Repository: ไลบรารี่จาวาในรูปแบบเมเว่นเรโพสิทอรี่ (Maven Repository) ซึ่งไม่มีอยู่ในทั้ง Maven Central และ Jcenter จำเป็นต้องติดตั้ง เพราะตัวช่วยสร้างโปรเจคของ IntelliJ ใช้ไลบรารี่เหล่านี้ ถ้าไม่มีจะคอมไพล์ไม่ผ่าน
    • Google USB Driver: ใช้เพื่อดีบัก (debug) กับโทรศัพท์มือถือโดยตรง
    • Intel x86 Emulator Accelerator (HAXM installer): ตัวติดตั้งไดรเวอร์เพื่อเร่งความเร็วในการทำงานของ AVD ใช้ร่วมกับอิมเมจ Intel x86 จากข้อ 4 ไม่ต้องติดตั้งถ้าใช้ ARM

HAXM ในข้อ 5 เป็นเพียงตัวติดตั้ง ต้องทำการติดตั้งเองโดยเข้าไปยังไดเรกทอรี่ที่ติดตั้ง Android SDK โดยปกติจะอยู่ที่ C:\Users\<ชื่อ user>\AppData\Local\Android\android-sdk จากนั้นเข้าไปที่ไดเรกทอรี่ย่อย extras\intel\Hardware_Accelerated_Execution_Manager ให้ติดตั้งผ่านโปรแกรม intelhaxm-android.exe ซึ่ง HAXM นั้นจะต้องมีแรม (RAM) เหลืออย่างน้อย 2GB โดยไม่รวมกับโปรแกรมอื่นๆที่เปิดอยู่ในขณะเดียวกัน

จากนั้นเปิด IntelliJ ให้เพิ่ม Android SDK ผ่าน settings ก่อน แล้วจึงสร้างโปรเจคแอนดรอยด์ได้ทันที การออกแบบหน้าจอแอพนั้น อาจตามแอนดรอยด์สตูดิโอไม่ทัน ให้ถอยเวอร์ชันของตัวเรนเดอร์ (rendering layout) ลง ขณะที่เขียนนี้เป็น Android N (API 24) ให้ถอยมา Android M (API 23) แทน

เมื่อถึงขั้นตอนการสั่งรัน ให้สร้าง AVD ผ่าน IntelliJ ได้เลย เพื่อความเร็วในการทำงาน โดยส่วนตัวจะเปิด AVD ทิ้งไว้ก่อน เพราะเคยเจอปัญหาว่า IntelliJ มองไม่เห็น AVD ที่ติดตั้งไว้และอาจจะเปิดไม่ขึ้น

ปัญหาเกี่ยวกับ Android Support Repository ที่เจอ แก้ได้โดยคำตอบที่ไม่ได้เป็น Accepted answer ของ Stackoverflow:

สแลช (Slash)

วิธีเขียนโปรแกรมหา Term ที่มากที่สุดใน Lucene index

slashs10 ,

mantle-lucene

ลูซีน (Lucene) คือโอเพ่นซอร์สไลบรารี่ (open source library) ที่ใช้ในการเก็บข้อมูลเพื่อใช้ในการค้นหาซึ่งอยู่เบื้องหลังซอฟต์แวร์ Search Engine เช่น Elasticsearch และ Solr ภาษาหลักที่ใช้คือจาวา (Java) แต่ก็มีการพอร์ต (port) ไปยังภาษาอื่นๆด้วย เช่น ไพธอน (Python) หรือ C++

เมื่อจัดเก็บข้อมูลในอินเด็กซ์ (index) บางครั้ง อาจจะต้องการวิเคราะห์ข้อมูลว่ามีคำค้นหา (search term) อยู่มากน้อยแค่ไหน เพื่อนำไปต่อยอดในการประมวลผลด้านอื่นๆต่อไป

วิธีการเขียนโปรแกรมเพื่อหาจำนวนครั้งที่ปรากฏสำหรับแต่ละคำค้นหา:

  1. เปิด index ด้วยคำสั่ง reader = DirectoryReader.open()
  2. เรียก Term ทั้งหมดขึ้นมา ด้วยคำสั่ง terms = MultiFields.getTerms(reader, <ชื่อฟีลด์ที่ต้องการ>)
  3. เรียกข้อมูลผ่าน TermsEnum enum = terms.iterator(null)
  4. วนลูป enum ผ่านคำสั่ง enum.next() โดยที่ในแต่ละครั้ง จะได้คำนั้นๆ ถ้าข้อมูลเป็นภาษาอื่นที่ไม่ใช่ภาษาอังกฤษและเก็บแบบ utf-8 ให้เรียกคำสั่ง .utf8ToString() เพื่อถอดรหัส (decode) ส่วนจำนวนครั้งที่ปรากฏใน index  ใช้คำสั่ง enum.docFreq()
  5. เรียงลำดับ docFreq ตามต้องการ

วิธีการข้างต้น มาจากซอร์สโค้ดของ ลูค (Luke) ซึ่งเป็นทูล (tool) ที่ใช้ในการวิเคราะห์ข้อมูลที่ใช้ลูซีน ทั้งการวิเคราะห์คำค้นหา ทดสอบการตัดคำ หรือประมวลผลคำสั่งสืบค้นข้อมูล (query parser) เนื่องจากลูคเป็นโปรเจคโอเพ่นซอร์ส จึงสามารถเข้าไปดูเพื่อเป็นแนวทางในการเขียนคำสั่งด้วยลูซีนได้ แต่ตัวทูลก็มีประสิทธิภาพเพียงพออยู่แล้ว ถ้าไม่ได้ต้องการนำผลการวิเคราะห์ไปใช้ต่อในโค้ดโดยตรง

Luke github: https://github.com/DmitryKey/luke

สแลช (SLASH)

Java อ่านข้อมูล JSON โดยไม่ใช้ library

slashs10 , ,

java8_logo

ข้อมูลแบบเจสัน (JSON: Javascript Object Notation) เป็นที่นิยมในกลุ่มผู้พัฒนาเว็บไซต์ เพราะเป็นรูปแบบข้อมูลที่ใช้เป็นพื้นฐานในจาวาสคริปต์ (Javascript)

ถ้าต้องการนำข้อมูลเจสันมาใช้งานในจาวา ก็มีไลบรารี (library) ให้เลือกใช้มากมาย เช่น org.json, gson, jsonp และ jackson เป็นต้น

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

วิธีการอ่านข้อมูลเจสันด้วย ScriptEngine:

  1. อ่านข้อมูลเจสันนั้นๆในรูปแบบสตริง (String) อาจจะดึงข้อมูลผ่าน http ก็ได้
  2. ScriptEngine เป็นคลาสที่ใช้ประมวลผลคำสั่งภาษาสคริปต์ จึงต้องเพิ่มการ assign ค่าเพื่อให้เกิดการประมวลผล ไม่เช่นนั้น ScriptEngine จะเกิดข้อผิดพลาด วิธีการง่ายที่สุดคือ เพิ่มการ assign ค่าเข้าไปที่ด้านหน้า จะได้ o=<ข้อมูลเจสันจากข้อ 1>
  3. เขียนคำสั่งดังนี้

ScriptEngine engine = new ScriptEngineManager().getEngineByName(“ECMAScript”);
Map result = (Map) engine.eval(<ข้อมูลสตริงจากข้อ 2>);

จากนั้นเราสามารถนำตัวแปร result มาใช้งานในรูปแบบแม็พ (Map) ได้ โดยการแคสติ้ง (cast) ข้อมูลเจสันส่วนมากจะเป็นแบบคู่คีย์-แวลู (key-value pair) โดยที่คีย์เป็นสตริง ส่วนแวลูเป็นวัตถุ (Object) ที่สามารถแคสต์ซ้อนเป็นแม็พตามลำดับขั้นไปเรื่อยๆได้ แต่ถ้าข้อมูลเป็นแบบพรีมิทีฟ (primitive) เช่น int จะสามารถแคสต์ตรงๆได้

คำสั่งข้างต้นได้ทดลองใช้งานบน JDK 8 ของออราเคิล (Oracle) แต่เกิดปัญหา ClassCastException: sun.org.mozilla.javascript.internal.NativeObject cannot be cast to java.util.Map เมื่อใช้กับ OpenJDK 7

สาเหตุเกิดจากบั๊กใน OpenJDK 7 ที่ไม่ได้รวมคลาสเหล่านี้เข้ามาในไฟล์ rt.jar ทำให้เกิดปัญหาขณะรัน (runtime) แต่ไม่เกิดปัญหาขณะคอมไพล์ (compile) วิธีแก้ไขที่ง่ายที่สุดคืออัพเกรดไปใช้ OpenJDK 8 ขึ้นไป รายละเอียดสามารถตามไปดูในลิงค์อ้างอิงสุดท้าย

ที่มา:

สแลช (Slash)

การวางโครงหน้าเว็บ html5

slashs10 , ,

HTML5_stickerการวางโครงสร้างหน้าเว็บเพื่อให้ตรงตามข้อกำหนดของ html5 น่าจะมีผลกับการแสดงผลในภาพรวม และอาจจะมีผลกับการค้นหาจากเสิร์ชเอ็นจิ้น (SEO: Search Engine Optimization) ต่างๆได้

ก่อนหน้ายุค html5 แต่ละหน้าเว็บควรจะมีเฮดดิ้งแท็ก (h1) เพียงแค่อันเดียวเท่านั้น เพื่อบ่งบอกเนื้อหาหลักของทั้งหน้า แต่ในกรณีที่ในหนึ่งหน้ามีหลายส่วน หรือหน้าเว็บแบบแสดงรายการ เช่น รายการสินค้า คอมเมนต์จากผู้ใช้ การเลือกใช้แท็กจะมีผลมากกว่าการให้ความสำคัญของข้อมูล

เพื่อตอบโจทย์ข้อนี้ html5 อนุญาตให้ใช้ h1 มากกว่า 1 ครั้งต่อหน้าได้ แต่ไม่ใช่จะเลือกวางตรงไหนก็ได้ ควรจะวางโครงสร้างให้เหมาะสม นอกจากตัวเฮดดิ้งแท็ก เพื่อใช้บอกหัวข้อหลัก/รองแล้ว แท็กที่เกี่ยวข้องมีดังนี้

  1. ตัวแบ่งแยกหน้า โดยทั่วไปก็คือ <body>
  2. ตัวแบ่งแยกกลุ่ม <article>, <section>, <nav>, <aside>
  3. เฮดดิ้งแท็ก <h1> – <h6>

แน่นอนว่าหน้าเว็บจะมี 1 body ถ้าหน้านั้นๆ มีมากกว่า 1 ข้อมูลย่อยในระดับเดียวกัน ดังที่กล่าวข้างต้น ต้องแยกด้วย article หรือ section ส่วน nav สงวนไว้ใช้กับเมนู หรือการเปลี่ยนหน้า และ aside ใช้ข้อมูลอื่นๆที่นอกเหนือจากที่กล่าวข้างต้น

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

นอกจากนี้ในแต่ละส่วน อาจจะแยกกลุ่มหัวข้อความด้วย <header> และ ท้ายข้อความด้วย <footer>

ที่มา:

สแลช (Slash)