songpol

[IDEA] iBeacon Survey

เมื่อเราเดินเข้าไปในร้านกาแฟร้านหนึ่ง จากนั้นก็มี iBeacon alert เข้ามาว่าหากต้องการ promotion ขอทำ survey 3-4 ข้อปรับปรุงบริการ และมีโปรโมชั่นลดราคากาแฟให้ 5 บาท/คน

เมื่อกดทำ survey เสร็จก็ได้ส่วนลด 5 บาทตรงนั้นเลย ชีวิตดี๊ดี

[IDEA] iBeacon Museum

หากเรามีพิพิธภัณฑ์ที่ต้องการแสดงข้อมูลของชิ้นงานในนั้นผ่าน mobile application ก็ให้เขียน app มา 1 ตัว จากนั้นก็ให้ใช้งาน iBeacon Platform ใส่ข้อมูลของชิ้นงานนั้นๆไว้

เวลาที่คนอยากได้ info ของผลงานนั้น ก็ให้เอามือถือของตัวเอง เข้าไปไกล้ชิ้นงาน หรือตรงที่ติด iBeacon ไว้ app ก็จะแสดงข้อมูลของผลงานนั้นขึ้นมาให้เห็น ไม่ว่าจะเป็น VDO หรือ text info + เสียง

หากส่วนใหญ่เป็น VDO ก็ให้ platform เก็บ json ข้อมูลไว้ แล้วตั้ง server ภายใน 1 ตัว เมื่อผู้ชมเข้าไปไกล้ ibecon อันใหน ก็ให้ดึงรูปแบบที่จะแสดงมาแล้วไปเอา VDO ใน local มาแสดง (อันนี้จะต้องต่อ Wifi ของพิพิธภัณฑ์ด้วย ถึงจะทำแบบนี้ได้)

ทำให้การนำเสนอข้อมูลสนุกสนาน จะทำให้พิพิธภัณฑ์น่าเข้าชมมากยิ่งขึ้น

ข้อดีการรองรับ Mobile Site ของ Google

จาก Google Research เรื่อง 72% of Consumers Want Mobile-Friendly Sites ที่ Google เผยแพร่มาเมื่อปี 2012 ทำให้เกิดการจัดอันกับการแสดงผลบนมือถือวันนี้แบบที่เรียกว่า การทำการตลาดบน Internet สั่นคลอนกันเลยทีเดียว

เมื่อก่อนเวลาเขียนเว็บขึ้นมาจะทำออกมาให้กลางๆ เน้นการใช้งานบน Internet Explorer ที่เป็น market share ที่สูงที่สดในไทย เพราะว่าหากต้องการให้ใช้งานได้ในหลาย Browser จะต้องเสียเงินปรับแต่งมากมายซึ่งหากตีเป็นมูลค่างาน อาจจะอยู่ที่ 10-25% ได้เลย

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

google mobility

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

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

ข้อดีอีกอย่างคือทำให้เกิดเว็บดีๆมากมาย และ SEO แยกบนอุปรกรณ์ต่างๆจะช่วยให้งาน marketing สื่อสารกับลูกค้าได้ตรงกลุ่มมากขึ้น

การดูหน้าเว็บแบบ mobile ให้เหมือน device จริง

ปกติเวลาที่เราทำเว็บขึ้นมา เพื่อให้มันสามารถใช้งานกับ mobile device ต่างๆได้ เราก็จะดูขนาดหน้าจอ แล้วก็ fix css ให้ใช้งานออกมาให้ดีที่สุด แต่ว่าบางครั้งก็ไม่เหมือนกับจอจริงเสมอไป วันนี้เลยจะให้ดูวิธีการทำเสมือนเราเข้าด้วย mobile device นั้นๆจริงๆด้วย Developer Tools บน Google Chrome

songpol me

ขั้นแรกให้เราเปิด Developer Tools ขึ้นมา ด้วยวิธีการกด F12 หรือ Ctrl + Shift + i หรือหากเป็น mac ก็กด Cmd + Opt + I

debug

จากนั้นให้กด mobile view ตรงกลมๆที่วงไว้ในรูปที่ 2

seletected device

หน้าจอที่เราเปิดเว็ฐจะเปลี่ยนไปเป็น mobile mode และเราสามารถเลือก device ที่อยากให้แสดงผลได้ด้วย

mobile view

เมื่อทำการเลือกแล้ว ก็ให้ refresh หน้าเว็บสักทีเพื่อให้เว็บจัดหน้าใหม่อย่างที่วางไว้

image

เปรียบเทียบกับ device จริงๆ

การแสดงผลแบบนี้ทำให้เราสามารถ debug ได้ง่ายกว่าและทำงานไดง่ายโดยไม่ต้องเปิดบน device จริงๆ

songpol.me ผ่าน Mobile-Friendly Test ฉลุย

mobile friendly google test

songpol.me ผ่าน Google Mobile-Friendly Test ฉลุยเพราะใช้ theme responsive มานานมากแล้ว ตั้งแต่เขียนเอง ใช้โปรแกรมทำ theme ช่วยทำ แล้วก็ใช้ community theme บน wordpress เอง

ต่อไปคงมีการจัดอันดับเพื่อให้ตรงกับ target group มากขึ้นเรื่อยๆ ส่วนคนที่ทำเว็บสำเร็จรูป หรือเป็นผู้ที่ทำเว็บให้กับคนอื่นใช้งาน ก็ต้องมีการจัดการกับความต้องการพวกนี้มากขึ้นเรื่อยๆ

หากลูกค้าไม่มี target group ในส่วนของ mobile เพื่อให้อันดับในส่วนแบบนี้ หรือไม่จำเป็นต้องการทำการตลากผ่าน SEO ก็ไม่จำเป็นต้องทำให้ mobile friendly สักเท่าใหร่ก็ได้

เอาเป็นว่า ทำเว็บทุกวันนี้ เหนื่อยหน่อยนะ สู้ๆ

Model Validation for .NET MVC5 + EF Database First

หากใช้งาน database first แล้วเกิดปัญหาว่าเวลาที่ update model from database แล้ว EF จะ gen model ให้เราใหม่ ทำให้ Validation ที่เราทำไว้หายไปในพริบตา

วิธีการนั้นมันผิดตั้งแต่ตอนแรกแล้ว เพราะยังไงเราก็ปรับ model เรื่อยๆตามกาลเวลาแน่นอนอยู่แล้ว

ให้เราเขียน Class Metadata Add Validate เข้าไปจะทำให้ไม่ต้องมาคอยกลัวว่ามันจะหายจะดีกว่า

นี่คือ class ที่ได้จากการ gen ado.net

//------------------------------------------------------------------------------
// <auto -generated>
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// </auto>
//------------------------------------------------------------------------------
 
namespace WebPortal.Models
{
    using System;
    using System.Collections.Generic;
 
    public partial class Patient
    {
        public Patient()
        {
            this.PatientExams = new HashSet<patientexam>();
        }
 
        public int PatientId { get; set; }
        public string Fullname { get; set; }
        public string Company { get; set; }
        public string ID { get; set; }
        public Nullable<system .DateTime> Birthday { get; set; }
        public int GenderId { get; set; }
        public string Telephone { get; set; }
 
        public virtual Gender Gender { get; set; }
        public virtual ICollection<patientexam> PatientExams { get; set; }
    }
}
</patientexam></system></patientexam>

จากนั้นเราก็เขียน class ไว้ที่ใหนก็ได้ ให้ namespace เดียวกันเพราะมันคือส่วนหนึงของ model เราเหมือนกันแบบนี้

namespace WebPortal.Models
{
    [MetadataType(typeof(Patient.Metadata))]
    public partial class Patient
    {
        internal sealed class Metadata
        {
            [Required]
            public string Fullname { get; set; }
 
 
            [Required]
            public string ID { get; set; }
 
 
            [Required]
            public string GenderId { get; set; }
 
 
            [Required]
            public string Telephone { get; set; }
        }
    }
}

ที่ form ของ scaffold จะทำให้มี validation พวกนี้ขึ้นมาทันที สะดวกดีนะ :)