Blast Piruin Panichphol

Implement Jersey security without web.xml

2016-11-02T00:00:00+07:00

การจะ Implement Security ด้วย Annotation ตามมาตรฐาน JAX-RS 2.0 บน Jersey ใน Document บอกให้ทำ config ที่ web.xml แต่เนื่องจากผมเป็นมือใหม่เรื่อง Java Web Server บอกเลยว่าใช้ web.xml ไม่เป็น ตัว api ที่ทำอยู่ตอนนี้ก็เป็น Jetty Embedded และดูแล้วก็ไม่ใช่สไตล์เท่าไหร่ ชอบการ Config ด้วย code มากกว่า เลยทำให้ต้องวิธีเอง งงบัคตัวเองอยู่ตั้งนาน หุหุ

ยังคงมีแต่เรื่อง Api ให้เขียนเนื่องจาก Android มีคนทำแทนแล้ว ไล่ตัวเองมาทำ Api แทน

มาดูโจทย์กัน

@Path("/resource")
public Resource{

   @RoleAllow("user")
   @Path(/private)
   public Response privateRes(){
     ...
   }

   @PermitAll
   @Path(/public)
   public Response publicRes(){
     ...
   }

ผมต้องการให้ทุกคนเข้าถึง resource/public ได้ แต่ที่ resource/private อยากให้เฉพาะ user เท่านั้นที่เข้าได้ ด้วย Security Annotation

สิ่งที่เราต้องทำคือ

เราต้องเปิดใช้งาน Security Annotation ตามมาตรฐาน JAX-RS 2.0 ซะก่อน เนื่องจาก Jersey ไม่ได้เปิดใช้งาน Feature นี้โดย default เราต้องเปิดเองถึงจะใช้ annotation เช่น @PermitAll, @DenyAll และ @RoleAllow ได้
implement SecurityContext ของเราเอง ซึ่งจะเก็บข้อมูลเกี่ยวกับความปลอดภัย ได้แก่ User ที่ connect มาชื่ออะไร บทบาทอะไร (Role) Connect มาแบบปลอดภัยหรอไม่ ในที่นี้ถ้าเราใช้ web.xml และ config เป็นเราก็จะได้ค่าพวกนี้มาเลย แต่ถ้าเราไม่ใช้หละก็ SecurityContext จะไม่มีค่าอะไรพวกนี้เลย return false ตลอดการ

เปิดใช้ Security Annotation

ด้วยการ register RolesAllowedDynamicFeature class ให้กับ ResourceConfig ซะก่อน

public class ApplicationConfig extends ResourceConfig{
    public ApplicationConfig() {
        packages("com.awesome.api");
        register(JacksonFeature.class);
        register(RolesAllowedDynamicFeature.class);
    }
}

เมื่อเราทำการ Regis RolesAllowedDynamicFeature จะเท่ากับว่าเราเปิดใช้งาน Security Annotation แล้ว เมื่อมี Request เข้ามาที่ /resource/private server จะทำการเรียกisUserRole(user) ของ SecurityContext ถ้า Method นี้ return true ก็จะได้ข้อมูลไป แต่ถ้าเป็น false จะเจอ 403 Fobidden แทน

ซึ่งตอนนี้ SecurityContext ของเรายังไม่มีค่าอะไรดังนั้น Request อะไรเข้ามาก็เข้าถึงส่วนที่เป็น Private ไม่ได้แน่นอน

Implement SecurityContext

เราต้องสร้าง Filter ที่ทำงานตรวจสอบข้อมูลเกี่ยวกับการยืยนยันตัวตนทุกครั้งเมื่อมี Request เข้ามาที่ api เช่นตัวอย่างต่อไปนี้

Authentication Filter

@Priority(1)
@Provider
public class AuthenticationFilter implements ContainerRequestFilter {
    private static final ErrorMessage UNAUTHORIZED = new ErrorMessage(401, "ชื่อ หรือ รหัสผ่านไม่ถูกต้อง");
    private static final ErrorMessage FORBIDDEN = new ErrorMessage(403, "คุณไม่มีสิทธิเข้าใข้งาน");

    @Override
    public void filter(ContainerRequestContext requestContext) {
        if (!BasicAuthenticationInfo.hasAuthorizeProperty(requestContext)) { //[1]
            return;
        }
        BasicAuthenticationInfo authenInfo = new BasicAuthenticationInfo(requestContext); //[2]
        UserDao userDao = new DBI(new ConfigurationDB().getDatasource()).onDemand(UserDao.class);
        User user = userDao.find(authenInfo.getUsername(), authenInfo.getPassword());
        if (user == null) {
            throw new FaarmisException(401, UNAUTHORIZED);
        }
        if (!isAllow(user)) {
            throw new FaarmisException(403, FORBIDDEN);
        }
       String urlScheme = requestContext.getUriInfo().getBaseUri().getScheme(); //[3]
        AuthenticationContext authenticationContext = new AuthenticationContext(user, urlScheme);
        requestContext.setSecurityContext(authenticationContext);  //[4]
   }
}

โค้ดนี้เป็นตัวอย่างให้พอเห็น Concept นะครับ Copy ไปใช้เลยไม่ได้นะ

มาดูกันว่ามันทำอะไรบ้าง

ตรวจสอบก่อนว่ามีข้อมูลการยืนยันตัวตนเข้ามาหรือป่าว ในตัวอย่างนี้ใช้ Basic Authentication ถ้าไม่มี filter หยุดทำงานเลย ซึ่งจะมีผลให้ SecurityContext ไม่มีข้อมูลอะไร Request นั้นก็จะเข้าถึงได้แต่ endpoint ไปเป็น @PermitAll
เอาข้อมูลการยืนยันตัวตนไปลองหาในฐานข้อมูลดูว่าเจอไหม ถ้าไม่เจอก็ Return 401 ไปเลย หรือถ้าเจอแต่ไม่ใช่ user ที่เราอยากให้เข้าถึงได้เช่นเป็น Blacklist เราก็ return 403 ไปแทน
ถ้าผ่านข้อ 2 มากได้ เราจะเอาข้อมูลที่ได้มาสร้าง SecurityContext
ทำการ set ค่า SecurityContext ให้กับ Request นั้น เพื่อใช้ตรวจสอบกับ Security Annotation ต่อไป

สังเกตุ @Priority(1) นะครับ เป็นจุดสำคัญมากๆ ถ้าไม่กำหนดไว้เป็นค่าต่ำๆ filter นี้อาจจะทำงานหลัง filter ของ Security Annotation ซึ่งหมายความว่าตอนนั้นจะยังไม่มี SecurityContex ทำให้การทำงานไม่เป็นอย่างที่ต้องการ ส่วน @Provider จะช่วย Register filter นี้เข้าไปใน ResourceConfig ที่เราทำไปก่อนหน้าอัติโนมัติเลย ถ้าหากอยู่ภายใต้ package ที่กำหนดไว้ใน resource Config

ที่นี้มาดูการสร้าง SecurityContext กัน

Security Context

public class AuthenticationContext implements SecurityContext {
    private static final String HTTPS = "https://";
    private final Principal userPrincipal;
    private final String scheme;

    public AuthenticationContext(final User user, String scheme) {
        this.userPrincipal = () -> user.getUsername();
        this.scheme = scheme;
    }
    @Override public Principal getUserPrincipal() {
        return userPrincipal;
    }
    @Override public boolean isUserInRole(String role) {
        return "user".equals(role);
    }
    @Override public boolean isSecure() {
        return scheme.startsWith(HTTPS);
    }
    @Override public String getAuthenticationScheme() {
        return BASIC_AUTH;
    }
}

เราทำการสร้าง class ที่ implement interface SecurityContext ซึ่งจะมีอยู่ 4 method ด้วยกันได้แก่

getUserPrincipal() ให้เราทำการ implement interface Principal เพื่อคืนชื่อของ user ที่ Request api เข้ามา ในตัวอย่างผมให้ใช้ค่าที่ได้จาก getUsername() ของ User
isUserInRole(role) นี้หละจุดสำคัญของบทความนี้ ค่าที่ถูกส่งเข้ามาใน method นี้จะไปค่าที่เป็น parameter ของ @RoleAllows ถ้าเรา return true Request ก็จะไม่โดนแตะออก
isSecure() อันนี้ implement ง่ายครับ เช็คแค่ว่าเป็น HTTPS รึเปล่าพอ
getAuthenticationScheme() เรายืนยันตัวตนด้วยวิธีไหนก็ระบุไป เช่น BASIC OAUTH

เพียงเท่านี้เราก็จะใช้งาน Security Annotation ได้ 100% โดยไม่จำเป็นต้องใช้ Web.xml เลยครับ นอกจากนั้นเรายังมี SecurityContext ไว้ใช้ประโยชน์เพิ่มเติมในภายหลังได้นะ ดูแล้วอีกคุ้มรึเปล่าน้าาา~ ถ้ามีอะไรแนะนำ อะไรผิด รู้วิธีที่ดีกว่านี้ หรือมีทางเลือกอื่นก็มาแชร์กันนะครับ

สรุปผลการพยายามเอาชนะ Page Insight และ Web Page Test

2016-10-24T00:00:00+07:00

หลังจากที่เว็ปนี้เริ่มเป็นรูปเป็นร่าง ผมก็ตั้งใจว่าจะทำให้ Performance ดีๆด้วย เลยลองทดสอบกับ Page Insight และ Web Page Test ดู ปรากฎว่าคะแนนไม่ค่อยน่าพอใจเท่าไหร่ ก็ปรับแก้ไปเรื่อยๆจนได้ระดับนึง เลยบันทึกไว้ก่อนว่าทำไปบ้าง และควรทำอะไรต่อ

Cloudfare

มันช่วยได้เรื่อง Cache control ได้ดีเลย ไม่ต้องทำอะไรเองเลยครับ ของเค้าดีจริง แถมยังทำให้เว็ปเป็น https แบบที่เราไม่ต้องเสียตังค์เลย (อะไรจะใจดีปานนั้น) น่าเสียได้ว่าลองเปิด Feature minify html, css และ js แล้วไม่เป็นผลกับ Web ที่ Host บน Github Pages แฮะ ไม่รู้ทำอะไรผิดรึเปล่า แต่แค่นี้ก็รักแล้วหละ ช่วยเพิ่มคะแนนให้ผมไปได้เยอะเลย

แต่การต้องพึ่งพา Css Framework และ jQuery นี้หละปัญหา

CSS

การใช้ CSS ที่จะทำให้เว็ปประสิทธิภาพดีที่สุดคือการ Inline style ใช่แล้วยัดไปใน tag style ภายใต้ช่วง head เลย แต่ Bootstrap มันใหญ่มากเลยนะจะยัดเข้าไปใน Head จริงๆหรอ นั้นหละครับปัญหา CSS Framework ส่วนใหญ่มักเยอะเกินความต้องการของเรา

วิธีแก้คือ

1. โหลดแบบ CSS Async

วิธีนี้ช่วยให้ PageInsight และ WebPageTest ไม่ว่าเราเรื่อง block การแสดงผล แต่แลกมาด้วย user จะเป็นหน้าเราแบบ Plainๆ ไม่มี style ก่อนแป๊บนึง แต่จะเป็นเฉพาะที่เข้าเว็บเราครั้งแรก วิธีนี้ง่ายที่สุดและ

2. Inline CCS Style ทั้งหมด

ฝังสไคล์ทั้งหมดไปเลย วิธีนี้ User จะไม่เป็นช่วงที่เว็ปเราไม่สวยเลย ไม่โดนว่าเรื่อง CSS ไป Block การแสดงผลเช่นกัน แต่ต้องระวังเรื่องขนาดของ Html การจะยัดทั้ง Bootstrap เข้าไปใน <head> จะทำให้ทุกหน้าเว็ปช้าแทน

ถ้าเลือกวิธีนี้เราจะคัดเฉพาะบางส่วนของ Framework เอาเฉพาะที่เราใช้ เพื่อให้มันเล็กพอที่จะเอาไปยัดแบบ inline หรือ คุณอาจจะหา CSS Framework เจ้าใหม่ที่เล็กหน่อยมีเฉพาะสิ่งที่คุณใช้ มาแทนที่เลย

3. Inline ส่วนหลัก และโหลด CSS หลักแบบ Async

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

ลองดูว่าแบบไหนจะเหมาะกับงาน และความขยันของคุณที่สุด

JavaScript

ถ้าเป็นไปได้พยายามอย่าใช้เยอะ โดนเฉพาะกับเว็ป Blog ทั่วไป หรือถ้าจะใช้ ให้โหลดแบบ Async แต่ระวังปัญหาเรื่อง Dependency ของ JS เนื่องจาก ส่วนใหญ่จะใช้ JQuery แต่มันใหญ่ถ้าเราโหลด Async แล้วมีอีก Script ที่จะเป็น ต้องใช้ jQuery งานจะงอกทันที

จำเป็นต้องใช้ JS จริงรึเปล่า?

ตอบคำถามนี้ให้ได้ก่อน ค่อยทำอย่างอื่นๆ ถ้าคำตอบคือไม่จำเป็นก็สบายเลย ลบออกให้หมดโล้ด

โหลด Async ให้หมด

มี Snippet ที่ช่วยให้โหลด js แบบ Async โดยที่ยังทำงานตามลำดับอย่างถูกต้องได้อยู่ ลองหาดูครับ จริงๆผมหาเจอแล้วแต่ผมไม่ได้ Save ไว้ ต้องไว้ขออภัยต่อตัวเองและผู้อ่านด้วย ใครหาเจอบอกด้วยนะ

รูปภาพ

ต่อเราลดขนาด Css Js ให้ตายเท่าไหร่ ยังมันก็ไม่เท่ากับการโหลดภาพ 1 ภาพเลยครับ ฉะนั้นอย่าลือว่า การ Optimize ภาพเป็นสิ่งสำคัญมากๆๆๆ ควรใช้ภาพที่ Resolution เหมาะกับการใช้งานจริง ไม่ใช่ใหญ่เว่อร์เกินไป และก็ Compress ใหได้ไฟล์ที่เล็กที่สุดโดยไม่ให้เสียลายละเอียดไป ลองใช้ Online Tool ง่ายๆอย่าง TinyPNG ดูก็ได้ครับ

แต่ถ้าขี้เกียจแต่อยากได้ผลลัพธ์ที่ดี ทางออกที่ดีอีกทางคือใช้ Tool ที่สามารถช่วย Optimize เรื่องภาพทั้งหมดได้แบบ Automate อย่าง Grunt หรือ Gulp ก็จะทำให้ชีวิตง่ายขึ้น (รวมไปถึง minify css js เลยนะ)

สรุป

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

ยังไงซะ User ไม่เลือกเข้าเว็ปเราจากคะแนนที่ได้จาก Page Insight หรอก (แต่ Google เลือกมี่จะแนะนำคุณจากคะแนนนะ)

Tutorial RESTFul Service by Jersey and Jetty Embedding

2016-10-14T00:00:00+07:00

วันนี้เราจะ setup RESTFul service ด้วยการใช้ Jersey และ Jetty แบบ Embedded กันแบบง่ายๆ โดย Service ของเราสามารถคืน POJO เป็น เป็น JSON อัพโนมัติด้วย Jackson ได้ด้วย

Project นี้ผมใช้ Gradle เป็นตัว Build นะครับ ถ้าใช้ Maven ก็ลองเปลี่ยนดูครับ ต่างกันแค่ตรงประกาศ dependency

เริ่มต้นแบบ Basic

เริ่มจากการกำหนด Dependency ใน build.gradle ให้เป็นตามนี้

dependencies {
    def jettyVersion = "9.3.12.v20160915"
    def jerseyVersion = "2.23.2"

    compile "org.eclipse.jetty:jetty-server:$jettyVersion"
    compile "org.eclipse.jetty:jetty-servlet:$jettyVersion"
    compile "org.eclipse.jetty:jetty-http:$jettyVersion"
    compile "org.glassfish.jersey.containers:jersey-container-servlet-core:$jerseyVersion"
    compile "org.glassfish.jersey.containers:jersey-container-jetty-servlet:$jerseyVersion"
}

หลังจากกำหนด Dependency และทำการ Sync Gradle ใหม่แล้ว เราจะสามารถอ้างถึง Class ต่างๆของ Jetty และ Jersey ได้แล้ว

ต่อไปเราจะทำการให้โปรแกรมของเรา start server เมื่อเราทำการ execute .jar

ที่ Class หลักของเรา หรือก็คือ class ที่มี public void main(String[] args) เพิ่มโค้ดดังนี้

public void main(String[] args){
    Server server = new Server(2222);
    ServletContextHandler context = new ServletContextHandler(server, "/*");

    ServletHolder jersey = new ServletHolder(new ServletContainer(config));
    jersey.setInitOrder(0);
    jersey.setInitParameter("jersey.config.server.provider.classnames",
        SayHello.class.getCanonicalName());
    context.addServlet(jersey , "/*");

    try {
        server.start();
        server.join();
    } finnaly {
        server.destroy();
    }
}

และเพิ่ม class ที่เป็นตัว Service จริงๆ ในที่นี้เราจะสร้าง SayHello.class มีหน้าตาดังนี้

public class SayHello{

     @GET
     @Path("/say")
     @Produces("text/plain")
     public String say(){
          return "Hello"
     }
}

ที่นี้เราก็ Start server ของเราได้เลย ลองเปิด Browser แล้วเข้าไปที่ localhost:2222/say เราจะเจอขอความว่า hello

มี Servlet มากกว่า 1 class

ในชีวิตจริง Service ของเราต้องมีมากกว่า 1 class แน่นอน คงไม่มีใครเขียน Service จริงๆ ให้จบใน Class เดียวจริงไหม? หรือว่ามี?

สิ่งที่เราต้องทำคือไปที่ Main Class ของเราแล้วแก้ให้เป็นดังต่อไปนี้

public void main(String[] args){
    Server server = new Server(2222);

    ServletHolder jersey = new ServletHolder(new ServletContainer());
    jersey.setInitOrder(0);
    jersey.setInitParameter("jersey.config.server.provider.classnames",
        String.join(", ",
              SayHello.class.getCanonicalName(),
              Second.class.getConicalName(),
              Third.class.getConicalName())
        );

    ServletContextHandler context = new ServletContextHandler(server, "/*");
    context.addServlet(jersey , "/*");

    try {
        server.start();
        server.join();
    } finnaly {
        server.destroy();
    }
}

สังเกตสิ่งที่เปลี่ยนแปลงในบรรทัดที่ 7-11 แทนที่เราจะส่งชื่อ class ไป class เดียว เราเอามันมาเชื่อมกันโดยขั้นด้วย , แทน ทีนี้จะมีเพิ่มกี่ class ก็ comma แล้วใส่เพิ่มไปเรื่อยๆได้เลย

Return เป็น JSON ด้วย Jackson Media

ถ้าเราต้องการ Response แบบ application/json จาก POJO เราก็ทำดังนี้

public class JsonResource{

     @GET
     @Path("/josn")
     @Produces("application/json")
     public Entity fromPojo(){
          return new Entity("Say hi, Json");
     }

     public class Entity{
          public String message;

          public Entity(String msg){
              message = msg;
          }
     }
}

จริงๆเรื่องมันควรจบง่ายๆแค่นี้ แต่ถ้าเราลองเรียก Service นี้เราจะพบ Internal Server Error ที่เป็นเช่นนี้ เป็นเพราะว่าเราจำเป็นต้อง Register Feature การแปลง POJO เป็น Json ให้ตัว Jersey รู้ก่อน ดังนี้

ที่เพิ่ม Depdency jersey-media-json-jackson ที่ build.gradle

compile "org.glassfish.jersey.media:jersey-media-json-jackson:$jerseyVersion"

และที่ main ก่อน start server ต้องทำดังต่อไปนี้

...
ResourceConfig config = new ResourceConfig();
config.packages("your.package.name");
config.register(JacksonFeature.class);

ServletHolder jersey = new ServletHolder(new ServletContainer(config));
...

เพียงเท่านี้ เมื่อเข้าที่ localhost:2222/json ก็จะได้ Response เป็น JSON ตามที่เราต้องการแล้ว

กำหนด Custom domain ให้กับ Web บน Github Pages

2016-09-29T00:00:00+07:00

หลังจากทำโครง Web บน Github Pages เริ่มเป็นรูปเป็นร่างแล้ว จะเข้าเว็ปผ่าน piruin.github.io ต่อไปก็รู้สึกมันไม่เท่สักเท่าไหร่ เลยตัดสินใจเช่า Domain piruin.me และลงมือทำ Custom Domain กันสักหน่อย

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

ลงมือซิครับ! รออะไร?

ค่าที่ใช้ในบทความนี้เป็นของจริงจากที่ผมทำเว็ปนี้เลย ซึ่ง Requirement ของผมคือ สามารถเข้าผ่าน piruin.me เป็นหลัก แต่ถ้าพิมพ์ว่า www.piruin.me เข้ามาก็ต้องเข้ามาที่ piruin.me ได้เช่นกัน ไม่ใช่เจอหน้า 404

GitHub

ก่อนอื่นเราต้องบอก GitHub ก่อนว่าเราจะใช้ Custom Domain แล้วนะ โดยทำตามนี้

เข้าไปที่ setting ของ Project ของ Website ของเรา
ที่หัวข้อ Custom Domain ใส่ชื่อโดเมนของเรา เช่น piruin.me แล้วกด save

จากนั้น github จะทำ commit ไฟล์ชื่อ CNAME ให้เราโดยมีชื่อโดเมนที่เราใส่ไปให้โดยอัตโนมัติ เท่านี้เป็นอันเสร็จส่วนแรก

ตั้งค่า DNS

ต่อไปเราจะทำการบอกให้ DNS รู้ว่า ถ้ามีคนพิมพ์ piruin.me ให้พาไปที่เครื่อง server เครื่องไหน Ip อะไร หรือถ้าพิมพ์ www.piruin.me จะให้ Reirect ไปไหน

เข้าไป Website ที่เราจดโดเมนไว้ เช่น GoDaddy Namecheap 9ล9
หาเมนูที่เกี่ยวกับการตั้งค่า DNS ของเจ้านั้น (ขั้นตอนนี้เป็นขั้นที่ยากที่สุดแล้ว)
ทำการเพิ่ม Record ทั้งหมด 3 อันดังนี้
- ประเภท A, Host @, IP 192.30.252.153
- ประเภท A, Host @, IP 192.30.252.154
- ประเภท CNAME, Host www, ใส่ domain เดิมของ github page ของเรา เช่น piruin.github.io สำหรับ website ของผม
กด Save ถ้ามีให้กด แล้วรอ

ถ้าอยากเห็นผลเร็วๆ ตอนเพิ่ม Record ให้กำหนดค่า TTL ให้มีค่าน้อยๆเข้าไว้

ผลลัพธ์

หลังจากผ่านไป ไม่น่าจะเกินครึ่งชั่วโมง เราจะสามารถเข้า Website ของเราไปด้วย piruin.me หรือจะพิมพ์ว่า www.piruin.me ก็ได้เช่น ซึ่งจะ Redirect ไปที่ piruin.me แทน

เราทำอะไรลงไป

ตอนที่เราเพิ่ม DNS Record ประเภท A เป็นการบอกว่า ถ้ามีคนพิพม์ Apex Name (piruin.me) ให้ชี้ไปที่ IP 192.30.252.153 หรือ .154 ซึ่งเป็น IP ของ Github Pages ส่วนตอนที่เพิ่มประเภท CNAME เราใส่ host เป็น Subdomain (www) แล้วให้ชี้ไปที่ domain default ของ Github Pages เดิมของซึ่งตอนนี้ CNAME ที่ Project ของเรากำหนดให้เป็น apex name ทำให้เมื่อพิมพ์ว่า www.piruin.me จะถูก Redirect ไปที่ piruin.me แทน

ทิ้งท้าย

ถ้าเราอยากให้คนเข้า Web เราด้วย Subdomain www. เป็นหลักแทนที่จะเป็น Apex Name หละ คิดว่าจะต้องเปลี่ยนตรงไหนบ้างครับ?

Hello World - I’am Blast Piruin

2016-09-04T00:00:00+07:00

ในที่สุดผมก็ลงมือทำเว็ปสักที

จริงๆผมก็เคยพยายามจะทำมาหลายครั้งแล้วหละ แต่ไม่สำเร็จสักที เนื่องจาก Requirement ตัวเองค่อยข้างจะเยอะ เช่น ไม่จำเป็นต้องดู Server เอง, รองรับสองภาษา (ทำอย่างกะว่าจะขยันเขียนภาษาอังกฤษ), ถ้า Blog เขียนด้วย Markdown ได้ก็ยิ่งดี และที่สำคัญต้อง Customize หน้าตาให้ถูกใจได้ง่ายๆและไม่เสียตังค์(งกอ่ะ) ก็เคยไปลองใช้บริการจากเจ้าต่างๆ เช่น WordPress Postach.io หลายเจ้าอยู่เหมือนกัน ซึ่งก็ไม่มีเจ้าไหนผ่านทุกข้อ สุดท้ายเลยล้มเลิกไป กลับนั่งเขียน Android ต่อดีกว่า

จนกระทั่งที่ทำงานมีโจทย์ว่าอยากได้ Website สำหรับ Product ที่ทำอยู่ แต่ไม่อยากดูแล Server เอง ผมเลยเสนอให้น้องๆที่ทำงานลองใช้ Github Pages ดู แต่ตัวเองก็ไม่เคยใช้เหมือนกัน แค่เคยอ่านผ่านๆว่ามันใช้คู้กับ Jekyll เพื่อทำ Blog ได้ เมื่อแนะนำเค้าไปแล้วก็ตัวเองก็ควรจะรู้เรื่องสักหน่อยหละมั้ง –” เลยกลับมานั่งศึกษาหลังเลิกงานดู ทำไปทำมาเพลินดี เลยตั้งโจทย์เป็นทำ Web Blog ของตัวเองพร้อมศึกษาวิธีใช้ทำ Web บน Github Pages ด้วย Jekyll ไปเลยซะเลย

ทำ Backlog แล้วจะได้งาน

หลังจากมีโจทย์แต่ไม่มีกรอก บวกกับความไม่รู้เรื่องเกี่ยวกับการทำ Web ใดๆทั้งสิ้น (html css ก็พึ่งศึกษากันงานนี้หละ) พอศึกษาอะไร ก็มักจะมีเรื่องใหม่ที่ไม่รู้ให้ศึกษาต่อไปเรื่อยๆไม่จบสักที แค่เรื่อง favicon เล็กๆก็ดูจะไม่เล็กอย่างที่คิด จนกลายเป็นไม่ได้ลงมือเขียนซะที เลยตัดสินใจเอาวิญญาณ Scrum Master เข้าสิงตัวเอง สั่งตัวเองทำ Backlog ซะ ค่อยทำให้ Focus เป็นส่วนๆแล้วผ่านมาจนโครงสร้างในเว็ปเริ่มเป็นรูปเป็นร่างแล้วมานั่งเขียนบทความนี้

Web นี้แคร์เรื่องอะไรบ้าง

W3C Markup Standard เพื่อให้เว็บมีคุณภาพผ่านมาตรฐานตามสไตล์ Agile developer เลยต้องตรวจเสมอว่าใช้ Tag ถูกต้อง, ไม่มีเปิด Tag แล้วลืมปิด, ไม่มี Link ตาย เรื่องพวกนี้ตรวจด้วย CI ทั้งหมด
Web Accessibility เรื่องนี้ผมคิดว่าเป็นสิ่งที่ควรทำ และเท่าที่ศึกษาดูพบว่าถ้าเราทำโครงสร้างเว็บตามมาตรฐาน ก็จะผ่านเรื่องสำคัญๆในหัวข้อนี้อยู่แล้ว
UX เพิ่งอ่านทบทวน Don’t Make Me Think จบก่อนเริ่มทำพอเลย ดังนั้น Web นี้หละที่ลองของ

สรุปคือมันต้อง หน้าตาถูกใจ UXดี โครงสร้างได้มาตรฐาน

การเขียน Blog

เรื่องนี้ไม่แน่ใจว่าจะเขียนไปได้ถึงไหน คนอื่นจะอ่านรู้เรื่องรึเปล่าก็ไม่รู้ แต่จะพยายามเขียนบ่อยๆเผื่อจะเขียนดีขึ้น เวลาจะ Note อะไรจากเมื่อก่อนที่เขียนลง Evernote อย่างเดียว จะก๊อปมาลงนี้ไปด้วย แต่ขี้เกียจทำเรื่องรูปแฮะ :( เรื่องที่คิดว่าจะเขียนน่าจะเกี่ยวกับเรื่องดังต่อไปนี้

Android อาชีพหลักของเราต้องเขียนบ้าง (ถ้าเขียนทันชาวบ้านเค้านะ)
Java
Agile Scrum
การออกแบบระบบ
Jekyll Github Pages

เขียนบทความนี้ทำไม

เพราะว่าหลังจากบทความเสร็จนี้จะถือว่าเปิดตัว piruin.me อย่างเป็นทางการ บทความ Dummy ทั้งหมดจะต้องเอาออก เลยจำเป็นบทดความไว้ซะหน่อย Website จะได้ไม่ว่างแค่นั้นหละ บาย