App Analytics: เครื่องมือจัดเก็บวิเคราะห์สถิติและเฝ้าระวัง แอพลิเคชั่นบน iOS

July 6, 2017 11:18

นักพัฒนาหลายท่านโดยเฉพาะ นักพัฒนาเว็บ น่าจะคุ้นเคยกับบริการเก็บข้อมูลและวิเคราะห์ สกิติเว็บไซด์อย่างเช่น Google Analytic เป็นอย่างดี ซึ่งในปัจจุบันถือว่ามีความจำเป็นมากที่นักพัฒนาต้องบอกได้ว่า ผู้ใช้ของเรามีจำนวนเท่าไหร่ เกิดข้อผิดพลาดมากน้อยเพียงใด และช่วงเวลาใดที่มีการใช้งานเยอะ เพื่อเตรียมทรัพยากรให้เพียงพอต่อการให้บริการ รวมถึงการกำหนดเวลาปิดระบบเพื่อบำรุงรักษา ได้อย่างมีประสิทธิภาพ ในส่วนของ แอพลิเคชั่นบนระบบปฏิบัติการ iOS เองก็มีเครื่องมือที่ชื่อว่า App Analytics ให้ใช้งาน โดยที่นักพัฒนาไม่ต้องทำอะไรเพิ่มเติม เพียงแค่แอพพลิเคชั่นของท่านอยู่ในสถานะ พร้อมให้ใช้งาน (Ready For Sale) ก็สามารถเข้าใช้งาน App Analytics ได้ทันที โดยมีขั้นตอน และการแปลผลดังนี้ เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account เลือกเมนู App Analytics เมื่อเข้าไปยังหน้าแรกจะมีรายการแอพพลิเคชั่นของเราแสดงอยู่ พร้อมข้อมูลเบื้องต้น ในระยะเวลา 1 เดือนล่าสุด (สามารถเปลี่ยนช่วงเวลาได้) โดยข้อมูลที่แสดงอยู่ประกอบไปด้วย Impressions : จำนวนครั้งที่แอพพลิเคชั่นของเราปรากฏให้ผู้ใช้เห็นเช่น อยู่ในผลการค้นหา, แอพแนะนำ, Top Chart หรือเมื่อผู้ใช้เปิดดูหน้าข้อมูลแอพพลิเคชั่นของเรา เพื่อใช้ดูว่าจำนวนการดาวส์โหลด เมื่อเทียบกับจำนวน Impressions แล้ว ความสนใจในแอพของเรามีมากน้อยเพียงใด App Units: จำนวนเครื่องที่ติดตั้งแอพพลิเคชั่นของเราอยู่ Sales: จำนวนเงินรวม ที่ขายได้ Sessions: จำนวนการเปิดใช้งาน Crashes: จำนวนข้อผิดพลาดที่เกิดขึ้นขณะใช้งาน เมื่อคลิกเลือกที่รายการ แอพลิเคชั่น จะแสดงข้อมูล Impressions, Product Page Views, App Units, In-App Purchases, Sales, Sessions, Active Devices, Crashes ในรูปแบบกราฟ อยู่ส่วนบนสุด ถัดมาจะเป็น Info graphic แยกตามประเทศ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices เป็นต้น ล่างสุดจะเป็นกราฟวงกลม แยกตามอุปกรณ์ โดยสามารถเลือกได้ว่าเป็นข้อมูล App Units, Sessions, Active Devices ได้เช่นกัน หากต้องการดูข้อมูลในมุมมองอื่นๆ หรือกำหนดเงื่อนไขเพิ่มเติมเพื่อดูในรูปแบบกราฟเส้น สามารถเลือกเมนู Metrics และกำหนดค่าต่างๆได้ตามต้องการ จากหน้าจอกราฟแบบ Metrics สามารถ Export ออกเป็น Excel ได้โดยกดปุ่ม

Read More »

Test Flight: อัพโหลดแอพลิเคชั่นขึ้นทดสอบบน App Store โดยผู้ใช้จริง

July 4, 2017 15:59

ไม่ว่าจะพัฒนาแอพลิเคชั่นด้วยวิธีการใดก็ตาม เมื่อพัฒนาเสร็จเรียบร้อย และผ่านการทดสอบจากผู้พัฒนาเองโดยการใช้ Simulator หรืออุปกรณ์ที่ลงทะเบียนไว้ เรียบร้อยแล้ว สำหรับแอพพลิชั่น ที่มีผู้ใช้จำนวนมาก และต้องรองรับกับความหลากหลายของอุปกรณ์ทั้งรุ่นของระบบปฏิบัติการ ขนาดหน้าจอ และฮาร์ดแวร์ จำเป็นต้องมีการทดสอบ โดยผู้ใช้จริงจำนวนหนึ่งเพื่อวัตถุประสงค์ในการลดข้อผิดพลาด เมื่อเปิดให้ใช้งานจริง โดยมีขั้นตอนดังต่อไปนี้ เข้าไปยัง https://itunesconnect.apple.com ทำการ Login ด้วย Apple Developer Account เลือกเมนู My Apps จะเข้าสู่หน้าจอจัดการ หากยังไม่มี Application Record ต้องทำการสร้างก่อน โดยคลิกที่ปุ่ม จากนั้นจะได้หน้าจอสำหรับป้อนข้อมูลแอพพลิเคชั่นของเรา กรอกข้อมูลให้ครบถ้วน จากนั้นกรอกข้อมูลอื่นๆ อัพโหลดภาพตัวอย่างตามข้อกำหนดของ Apple ให้ครบถ้วน (รายละเอียดในส่วนนี้สามารถอ่านเพิ่มเติมจาก https://developer.apple.com/app-store/review) เมื่อสร้าง Application Record เรียบร้อย เลือกที่ไอคอนแอพลิเคชั่นของเรา จะได้หน้าจอดังรูป เลือกเมนู TestFlight จะแสดงหน้าจอรายการ Build (ไฟล์ ipa ของแอพลิเคชั่น) ที่เราได้อัพโหลดไว้กรณีไม่ปรากฏดังตัวอย่าง แสดงว่าไม่มี Build ที่อยู่ในสถานะที่จะใช้งาน TestFlight ได้ให้ทำการอัพโหลดใหม่ เมื่ออัพโหลดไฟล์ IPA เรียบร้อยแล้ว จะปรากฏ Build ที่สามารถเปิดให้ทดสอบได้ ดังรูป จัดการข้อมูลผู้ทดสอบโดยเลือกเมนู All Testers ด้านซ้ายมือ ในส่วนนี้สามารถทำการลบรายการผู้ทดสอบได้ โดยการกดปุ่ม Edit เลือกรายการที่ต้องการลบ จะปรากฏเมนูปุ่ม Remove ให้สามารถลบได้ หากต้องการเพิ่มผู้ทดสอบจะต้องเลือกเมนู iTunes Connect Users (อีเมลที่ได้รับการเพิ่มเป็นสมาชิกของทีมใน Apple Developer Account) หรือ External Testers (อีเมลอื่นๆ) โดยสามารถกดปุ่ม จากนั้นสามารถเลือกได้ว่าจะเพิ่มรายบุคคล หรือโหลดจากไฟล์ CSV เมื่อมีรายการผู้ทดสอบครบถ้วนแล้วให้กลับไปที่เมนู Build คลิกเลือก จะปรากฏหน้าจอสำหรับเลือกผู้ทดสอบที่ต้องการให้ทดสอบ Build นี้ โดยสามารถเพิ่มจากชื่อกลุ่ม หรือ รายบุคคลก็ได้ จากนั้นกรอกข้อมูลสำหรับทำ External Testing โดยคลิกที่เมนู Test Information กรอกข้อมูลให้ครบถ้วน เมื่อเสร็จกระบวนการข้างต้น ผู้ทดสอบที่เป็นสมาชิกภายใน (อีเมลที่ลงทะเบียนเป็น Member ของ Apple Developer Account) จะได้รับอีเมล Invite สามารถทดสอบได้ทันที ส่วนผู้ทดสอบภายนอกจะต้องรอให้ผ่านกระบวนการรีวิวจากทาง Apple  จากนั้นแจ้งให้ผู้ใช้ดาวส์โหลด TestFlight App เพียงเท่านี้ก็สามารถโหลดแอพของเรา และทดสอบการใช้งานแอพบนเครื่องที่ใช้งานจริงได้แล้วครับ    

Read More »

Fixed Table Header Scrolling

July 3, 2017 16:16

ในปัจจุบันในการพัฒนา website  เราจะเห็นว่า Table เกือบจะเป็นส่วนหนึ่งในการพัฒนาของแต่ละหน้า  ซึ่งส่วนใหญ่จะเป็นการแสดงผลของการค้นหาข้อมูลต่างๆของเมนูหรือหัวข้อในแต่ล่ะเรื่อง บ้างก็อาจจะมีข้อมูลน้อย บ้างก็อาจจะมีข้อมูลเยอะ ทำให้การแสดงผลมีความยาวล้นหน้าเพจ ถึงแม้ว่าปัจจุบันจะมีการนำ paging มาใช้แต่ในบางกรณีอาจจะมีความจำเป็นที่ต้องการตรวจสอบข้อมูลในการค้นหาทั้งหมดในหน้าเดียวกัน  แต่ปัญหาที่ตามมาในการแสดงผลทั้งหมดในหน้าเดียวกันก็คือเมื่อเรา scroll ลงมาข้างล่างสุด Header ของตัวตารางจะไม่ Fixed ไว้ และเลื่อนหายไปข้างบน ทำให้ยากลำบากในการตรวจสอบข้อมูล เนื่องจากผู้ใช้งานอาจจะลืมว่าคอลัมภ์ที่กำลังตรวจสอบอยู่นั้นคือคอลัมภ์อะไร จึงต้อง scroll ขึ้นไปดู Header อีกครั้ง ทำให้มีความล่าช้าในการตรวจสอบข้อมูล วันนี้จึงนำวิธีการ Fixed Header ของตาราง โดยใช้ css มาเสนอเพื่อเป็นแนวทางในการพัฒนากับผู้อ่าน ดังนี้ค่ะ   ตัวอย่างที่1 (CSS ในหน้า Html เดียวกัน)) tbody { display:block; height:400px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } thead { width: calc( 100% – 1em ) } ตัวอย่างที่1(การเรียกใช้ CSS ในหน้า Html เดียวกัน) <table id=”tableSearch” class=”table table-responsive table-hover” style=”border-collapse:collapse;border:1px solid #C0C0C0;table-layout:auto;width:1500px;”> <thead> <tr class=”filters” style=”background-color:#C0C0C0″> <th align=”left”>Order</th> <th align=”left”>Name</th> </tr></thead> <tbody><tr> <td colspan=”14″ style=”text-align:center;color:#808080 “>Order</td> <td colspan=”14″ style=”text-align:center;color:#808080 “>Name</td> </tr></tbody> </table> ตัวอย่างที่2 (CSS) html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal;

Read More »

ELK #04

June 30, 2017 14:40

คราวนี้มาติดตั้งบน Docker บ้าง ถ้าเครื่อง Server เป็น Ubuntu 16.04 ทำตามขั้นตอนนี้เพื่อให้สามารถใช้งาน Docker ได้ วิธีการติดตั้ง Docker บน Ubuntu 16.04 เนื่องจาก Elasticsearch 5.x ใช้ Virtual Memory มากขึ้น ลองใช้คำสั่งนี้ดูค่าปัจจุบัน sysctl vm.max_map_count ค่า Default น่าจะประมาณนี้ vm.max_map_count = 65530 ให้ทำการเพิ่มด้วยคำสั่งนี้ sudo -i sudo echo “vm.max_map_count=262144” >> /etc/sysctl.conf exit จากนั้นให้ทำการ Reboot ติดตั้ง docker image ของ sebp/elk ด้วยคำสั่ง sudo docker pull sebp/elk โดย Default จะได้ Lastest Version ใช้คำสี่งต่อไปนี้ เพื่อ Start ELK ขึ้นมา โดยเปิด port ให้ Kibana: 5601, Elasticsearch: 9200, Logstash: 5044 และทำงานเป็นแบบ Detach หรือ Background นั่นเอง sudo docker run -d -p 5601:5601 -p 9200:9200 -p 5044:5044 -it –name elk sebp/elk หรือถ้าจะใช้ Docker Compose ก็สามารถใช้งานด้วยวิธีการนี้ เริ่มจาก ติดตั้ง Docker Compose ด้วยคำสั่ง sudo -i curl -L https://github.com/docker/compose/releases/download/1.14.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose chmod +x /usr/local/bin/docker-compose exit จากนั้น สร้างไฟล์ /path/to/your/config/elk.yml เนื้อหาดังนี้ elk: image: sebp/elk ports: – “5601:5601” – “9200:9200” – “5044:5044” จากนั้นก็ Start sudo /usr/local/bin/docker-compose -f /path/to/your/config/elk.yml up -d elk หากต้องการให้ container ทำการ start ทุกครั้งที่ Reboot ใช้คำสั่ง sudo crontab -e แล้วใส่บรรทัดนี้ต่อท้ายไฟล์ @reboot /usr/local/bin/docker-compose -f /home/mama/elk.yml up -d elk ทดสอบว่า Container ที่กำลังทำงานอยู่มีอะไรบ้าง sudo docker ps วิธีดูว่า มี Container อะไรบ้าง (ทั้งที่ทำงานและไม่ทำงาน) sudo docker ps -a วิธีดูว่าเกิดอะไรขึ้นกับ Container (ในที่นี้ ชื่อ elk) sudo docker logs elk ถึงจุดนี้ ก็สามารถใช้งาน Kibana ทาง web url: http://your.host:5601 ได้แล้ว   Reference: https://elk-docker.readthedocs.io/  

Read More »

การติดตั้ง Laravel 5 + WAMP

June 28, 2017 23:51

Laravel คืออะไร??   Laravel คือ PHP framework ที่นิยมตัวหนึ่ง ซึ่งมาในรูปแบบของ MVC pattern เช่นเดียวกับ Codeigniter โดยข้อดีของ Laravel คือ โปรแกรมเมอร์ไม่ต้องพยายามเขียนโค้ดเองทั้งหมด Laravel ช่วยลดงานในการพัฒนาโดยสร้างระบบสำเร็จรูปมาให้อย่างพวก authentication, routing, sessionsและ caching. ด้วยความที่เป็น framework ที่นิยม ทำให้มี document และ code ตัวอย่างที่หาอ่านได้ง่าย WAMP คืออะไร? WAMP ย่อมาจาก Windows Apache MySQL PHP ซึ่งก็คือ Apache server หรือตัวจำลอง server ที่ไว้ run จาก localhost นั่นเอง ข้อดีของ WAMP คือ สามารถสลับ PHP version ที่ใช้การ run แต่ละครั้งโดยสลับจากหน้าเมนู interface ของโปรแกรมได้เลย โดยไม่ต้อง stop/start ใหม่ การติดตั้ง 1.download WAMP และทำการติดตั้งให้เรียบร้อย 2.Configure SSL ตั้งค่าเปิดการใช้งาน SSL เพื่อให้ Composer สามารถ run ได้ โดยเข้าไปตั้งค่าที่ไฟล์ php.ini ที่เก็บอยู่ใน path C:\wamp\bin\php\php5.4.16\php.ini (path ที่ install WAMP) แล้วกด Ctrl+F ค้นหา “extension=php_openssl.dll” เมื่อเจอแล้ว ให้เอาเครื่องหมาย ; ที่อยู่ข้างหน้าออกแล้วกด save 3.ติดตั้ง Composer Composer คือ เครื่องมือในการจัดการ library และ package ต่างๆ ของ PHP Framework Download Composer for Window และทำการติดตั้ง **หมายเหตุ ต้องติดตั้ง WAMP ก่อน Composer เนื่องจากตัว Composer จะ run ด้วย php ซึ่งติดมากับ WAMP 4.ติดตั้ง Laravel Framework ตรวจสอบว่า Composer ได้ถูกติดตั้งและพร้อมใช้งานแล้ว โดยเปิด command prompt ขึ้นมาและพิมพ์คำสั่ง composer หากทำการติดตั้งและพร้อมใช้งานแล้วจะได้ผลลัพธ์ดังรูป ต่อมา ติดตั้ง Laravel โดยเข้าไปที่ path C:\wamp64\www ซึ่งเป็นที่เก็บตัว project web ของ WAMP Serverหลังจากนั้นให้พิมพ์คำสั่งตามด้านล่าง โดยให้ระบุชื่อ project หลัง /laravel เช่นในตัวอย่างคำสั่ง ชื่อ project ของเราคือ test composer create-project –prefer-dist laravel/laravel test หลังจากนั้น Composer จะไป download Laravel Framework และ Library ที่เกี่ยวข้องมาให้ ดังรูป เมื่อติดตั้งเสร็จเรียบร้อยแล้วจะได้ Application key ของ project ที่เราสร้างขึ้น ดังรูป เข้าไป Directory ที่เราได้สร้าง project ไว้ จะพบโครงสร้าง project ดังรูป 5. ทดสอบ run project (อย่าลืม start WAMP ก่อน run ทุกครั้งนะคะ) โดยเปิด browser ขึ้นมา และพิมพ์ localhost/test/public/ จะได้ผลลัพธ์ดังรูป เป็นอันเสร็จสิ้นกระบวนการติดตั้ง

Read More »