Category: Developer

งานพัฒนาระบบ, เขียนโปรแกรม

  • แนวทางการพัฒนา Web Application ด้วย django จาก local docker สู่ Google Cloud Run

    ในการพัฒนาแอพพลิเคชั่น เราก็จะเจอปัญหานึงเสมอ ๆ คือ เวอร์ชั่น (Version) ของเครื่องมือที่ใช้ในการพัฒนานั้น แต่ละโปรเจคมีความแตกต่างกัน เช่น ในกรณีของ การพัฒนา Web Application ด้วย django web framework เราอาจจะอยากใช้ python รุ่นล่าสุด คือ 3.8 แต่ในขณะเดียวกัน เมื่อหลังบ้านต้องการไปติดต่อ Tensorflow 2.0 ซึ่งยังต้องใช้งานกับ Python 3.6 เป็นต้น วิธีแก้ไขปัญหาทั่วไปคือ ติดตั้ง package ‘virtualenv’ เพื่อให้การพัฒนาแต่ละโปรเจค มี Environment แตกต่างกันได้

    แต่จากการใช้งานจริง พบว่า สุดท้าย ตอนเอาไป Production บนเครื่อง Server ก็ต้องตามไปติดตั้งเครื่องมือ และรุ่นที่ถูกต้อง แม้ใน Python จะมีคำสั่ง pip install -r requirements.txt ก็ตาม แต่ก็ยังไปติดปัญหาว่า OS ของเครื่องที่จะ Production นั้น รองรับรุ่นของเครื่องมืออีกหรือไม่ด้วย

    แนวทางการใช้ Container ด้วย Docker จึงเป็นที่นิยม เพราะ เมื่อเราพัฒนาเสร็จแล้ว สามารถ Pack เข้าไปใน Container แล้วเอาไป Deploy ได้ โดย (แทบจะ) ไม่ต้องกังวลกับ Environment ปลายทาง อีกทั้ง ยังสามารถทดสอบ Environment ใหม่ ๆ ก่อนจะ Deploy ได้ด้วย เช่นการเปลี่ยนรุ่นของ Python เป็นต้น

    ในบทความนี้ จะนำเสนอ แนวทางการสร้าง docker container เพื่อใช้เป็นฐานในการพัฒนา django และ สามารถต่อยอด ติดตั้ง package อื่น ๆ ตามต้องการ ตั้งแต่ Development ไปจนถึง Deployment สู่ Serverless Environment อย่าง Google Cloud Run

    สร้าง Development Container

    เริ่มจาก สร้างโฟลเดอร์ใหม่ขึ้นมา ในนั้นมี 2 ไฟล์ คือ Dockerfile และ requirements.txt กับ โฟลเดอร์ ชื่อ code

    Dockerfile

    • ใช้ image ของ python เป็นรุ่น 3.7-slim ซึ่งตัดส่วนที่ไม่จำเป็นออกแล้ว (ไม่ใช้ alpine เนื่องจาก พบรายงานว่า แม้จะมีขนาดเล็กกว่า แต่ถูกจำกัดทรัพยากรบางอย่าง ทำให้ทำงานได้ช้ากว่า)
    • สร้าง /code แล้วเข้าไปใช้พื้นที่นี้ (เหมือนคำสั่ง mkdir /code ; cd /code อะไรประมาณนั้น)
    • สั่งให้ copy ไฟล์ requirements.txt ไปใช้ที่ root ( / )
    • จากนั้น Upgrade คำสั่ง pip เป็นรุ่นล่าสุด แล้ว ติดตั้ง package ตามที่กำหนดใน requirements.txt
    • เปิด Port 8080 ไว้ เพื่อใช้ในการทดสอบ และเป็นไปในแนวทางเดียวกับการใช้บน Google Cloud Run ต่อไป
    FROM python:3.7-slim
    WORKDIR /code/
    COPY requirements.txt /
    RUN pip install -U pip \
        && pip install -r /requirements.txt
    EXPOSE 8080

    requirements.txt

    ในการพัฒนา django เมื่อทำการติดตั้ง package ใดเพิ่มเติมด้วยคำสั่ง pip install ก็จะบันทึกรายการ พร้อมรุ่นของ package มาในไฟล์นี้ ในที่นี้ ใช้ django, guincorn และ whitenoise เป็นหลัก (จะมีรายการ dependency ติดเข้ามาด้วย)

    Django==2.2.6
    gunicorn==19.9.0
    pytz==2019.3
    sqlparse==0.3.0
    whitenoise==4.1.4

    จากนั้นใช้คำสั่งต่อไปนี้ สร้าง (build) docker image จากไฟล์ Dockerfile ข้างต้น โดยมี option ที่เกี่ยวข้องดังนี้

    docker build --rm -f "Dockerfile" -t mydjango:dev .
    • –rm เมื่อ build แล้ว ก็ลบ container ชั่วคราวทิ้ง
    • -f กำหนดว่าจะเรียกจากไฟล์ใด วิธีนี้ มีประโยชน์ เวลาที่จะต้องมี Dockerfile ทั้ง Development และ Production ในโฟลเดอร์เดียวกัน ซึ่งจำเป็นต้องใช้ชื่อไฟล์ที่แตกต่างกัน
    • -t เป็นตั้งชื่อ docker image และ ชื่อ tag
    • . คือ ให้ build จากตำแหน่งปัจจุบัน

    ขั้นตอนนี้จะได้ docker image ชื่อ mydjango และมี tag เป็น dev แล้ว้

    (ในที่นี้ พัฒนาบนเครื่องคอมพิวเตอร์ที่เป็น Windows 10 ซึ่ง %CD% จะให้ค่า Current Directory แบบ Absolute path ออกมา เช่นเดียวกับบน Linux ที่ใช้ $(pwd) )

    ต่อไป สั่ง run ด้วยคำสั่ง และ options ดังต่อไปนี้

    docker run --rm -it -p 8080:8080  -v %CD%\code:/code  mydjango:dev bash
    • –rm เมื่อจบการทำงาน ก็ลบ container ชั่วคราวทิ้ง
    • -it คือ interactive และเปิด TTY
    • -p เพื่อเชื่อม port 8080 จากภายนอก เข้าไปยัง port 8080 ภายใน container
    • -v เพื่อเชื่อม Volume หรือโฟลเดอร์ของเครื่อง host กับ /code ภายใน container ขั้นตอนนี้สำคัญ
    • bash ข้างท้าย เพื่อส่งคำสั่ง เรียก bash shell ขึ้นมา ซึ่งจะสัมพันธ์กับ -it ข้างต้น ทำให้สามารถใช้งาน shell ภายใน container ได้เลย

    ผลที่ได้คือ bash shell และ อยู่ที่ /code ภายใน container

    root@757bcbb07c7f:/code#

    ตอนนี้ เราก็สามารถสร้าง django ได้ตามปรกติแล้ว (คลิกดูตัวอย่างเบื้องต้น) แต่ในตัวอย่างนี้ จะเริ่มจากการสร้าง project ชื่อ main เพื่อใช้ในขั้นตอนต่อไป ด้วยคำสั่งต่อไปนี้

    django-admin startproject main
    cd main

    ในระหว่างการพัฒนา สามารถใช้คำสั่ง runserver โดยเปิด Port 8080 ใน container เพื่อทดสอบได้ดังนี้ (สอดคล้องตามที่อธิบายข้างต้น)

    python manage.py runserver 0.0.0.0:8080

    สร้าง Production Docker Image

    คำสั่งข้างต้น สามารถใช้ได้เฉพาะขั้นตอนการพัฒนา แต่เมื่อพัฒนาเสร็จแล้ว ควรใช้ Application Server แทน ในที่นี้จำใช้ gunicorn แต่ก่อนอื่น จะต้องปรับ Configuration ของ django ให้พร้อมในการ Deployment ก่อน

    main/settings.py

    # แก้ไข
    DEBUG = False
    ALLOWED_HOSTS = ['localhost','SERVICE-ID.run.app']
    
    # เพิ่ม
    MIDDLEWARE = [
        ...
        # Whitenoise
        'whitenoise.middleware.WhiteNoiseMiddleware',
        ...
    ]
    # เพิ่ม
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

    มีเพิ่มเติมคือ whitenoise ซึ่งเป็น package สำหรับจัดการเกี่ยวกับการให้บริการ static file ในตัว มิเช่นนั้นจะต้องไปตั้งค่าใน Web Server ให้จัดการแทน

    เมื่อเราตั้งค่า DEBUG = False จะต้องกำหนด ALLOWED_HOSTS เสมอ ในที่นี้กำหนดให้เป็น localhost และ Production URL (SERVICE-ID.run.app) ที่จะเกิดขึ้นเมื่อสร้าง Service บน Google Cloud Run ครั้งแรกไปแล้ว (ค่อยกลับมาแก้ไขแล้ว Revision อีกครั้ง)

    ใช้คำสั่งต่อไปนี้เพื่อรวบรวม static files ต่าง ๆ มาไว้ในที่เดียวกัน ในที่นี้ คือที่ โฟลเดอร์ static

    python manage.py collectstatic

    ทดสอบ Production ด้วย gunicorn ด้วยคำสั่งต่อไปนี้

    gunicorn --bind 0.0.0.0:8080 main.wsgi

    ทดสอบเรียก Local Admin Console ( http://localhost:8080/admin ) ดู ถ้าเรียก static file เช่นกลุ่ม css ได้ ก็พร้อมสำหรับจะนำขึ้น Google Cloud Run ต่อไป

    สุดท้าย สร้าง Production Dockerfile และ สรุป requirements.txt ดังนี้

    Dockerfile.production

    FROM python:3.7-slim
    WORKDIR /code
    COPY ./code/* ./
    RUN pip install -U pip \
        && pip install -r requirements.txt
    EXPOSE 8080
    CMD [ "gunicorn","--bind","0.0.0.0:8080", "main.wsgi"]

    requirements.txt

    pip freeze > requirements.txt

    จากนั้น ใช้คำสั่งต่อไปนี้ เพื่อสร้าง Production Docker Image (ออกมาจาก Development Container shell ก่อน) โดยจะใช้ tag เป็น latest

    docker build -t mydjango:latest -f "Dockerfile.production" .

    ส่ง Production Docker Image ขึ้น Google Container Registry

    Google Cloud Run จะเรียกใช้ docker image ที่อยู่บน Google Container Registry เท่านั้น

    • เปิด Google Console
    • สร้าง Project ใหม่ และ ตั้งค่า Billing
    • เปิดใช้งาน Google Cloud Run และ Google Container Registry
    • ติดตั้อง Google Cloud SDK เพื่อให้สามารถ push ขึ้นได้ และ ยืนยันตัวตนด้วย Google Account

    แล้วใช้คำสั่งต่อไปนี้ เพื่อ tag

    docker tag mydjango:latest gcr.io/YOUR-GCP-PROJECT-ID/SERVICE-NAME
    • YOUR-GCP-PROJECT-ID เป็น Project ID ที่สร้างขึ้น
    • SERVICE-NAME ชื่อ service ที่จะสร้าง

    แล้วก็ push ขึ้น Google Container Registry

    docker push gcr.io/YOUR-GCP-PROJECT-ID/SERVICE-NAME

    สร้าง Google Cloud Run Service

    สร้าง Service โดยเลือก Image ที่ต้องการ

    เมื่อเสร็จแล้วจะได้ URL อย่าลืมเอาไปแก้ไขใน main/settings.py ในส่วนของ ALLOWED_HOSTS แทน SERVICE-ID.run.app

    จากนั้น build, tag และ push ขึ้น Google Cloud Registry อีกครั้ง แล้ว Deploy New Revision เป็นอันเรียบร้อย

    อันนี้เป็นการ Proof of Concept ในบทความต่อไป จะนำเสนอตัวอย่างการใช้งานจริงครับ

  • Variables ใน Robot Framework

    วันนี้เรามาดูตัวแปร ใน Robot Framework กันดีกว่า ดู ๆ ไปตัวแปรมันก็แปลกดีนะ มาดูกันว่าเป็นไงบ้าง

    1. Case Insensitive –> ตัวพิมพ์เล็ก – พิมพ์ใหญ่เป็นตัวเดียวกัน
    2. Ignore space –> ไม่สนใจช่องว่าง
    3. Ignore underscore –> ไม่แคร์ Underscore 555

    มาดูประเภทของตัวแปรกัน ดังรูปจ้า

    1. ค่าคงที่
    2. List
    3. Dictionary หรือ Json

    ตามตัวอย่าง มารันดูข้อมูลกันจะเห็นได้ว่ามันจะรันตามลำดับ ที่เราแสดง Log to console

    ลองดูว่าถ้าเราจะให้แสดง List เฉพาะคำว่า Chotkaew จะทำยังไง ให้มองว่า Thichaluk เป็น index ที่ 0 และ Chotkaew เป็น index ที่ 1

    รันดูผลลัพธ์กัน

    มาลองดูของ dictionary กันบ้าง ให้แสดงค่าของ Thichaluk

    รันดูผลลัพธ์

    ทุกคนคงจะมองเห็นการเข้าถึงข้อมูลแต่ละประเภทกันแล้วใช่มั๊ยค่ะ

    ต่อไปมาลองสร้าง List กับ Dictionary อย่างง่าย ๆ กัน รูปแบบคำสั่งก็ไปหาดูได้ที่ https://robotframework.org ที่ Libraries –> Builtin ที่ Builtin คลิก View หา Create List กับ Create Dictionary

    รันดูผลลัพธ์

  • Should Be Equal ใน Robot Framework

    วันนี้จะมาทดลองใช้ Should Be Equal (การเปรียบเทียบ) ใน Robot framework กันค่ะ ก่อนจะถึงคำสั่งเปรียบเทียบ เราก็ต้องเขียน Test Case อื่น ๆ กันก่อน งั้นวันนี้จะเขียนแบ่ง Test Case ให้อ่านง่าย ๆ กันไปเลย เพื่อเพื่อน ๆ จะได้นำไปประยุกต์ใช้งานกันได้ค่ะ

    สิ่งที่ต้องใช้ในวันนี้ คือ Notpad++ หรือ Tool อื่น ๆ ที่เพื่อน ๆ ถนัด วันนี้เราจะใช้ Visual Studio Code กันค่ะ (เพราะเหนื่อยกับการรันผ่าน command line แล้ว) มาเริ่มกันเลยดีกว่า

    จะเห็นว่า เรามีการตั้งชื่อ Test Case ให้อ่านง่าย เพื่อจะให้รู้ว่าแต่ละขั้นเราทำอะไร ตอนเป็น Report จะได้ดูง่ายเข้าไปอีก ค่อนไปดู Report ตอนท้าย

    คำสั่งนี้จะตรวจสอบว่าค่าที่ได้ตรงกันมั๊ย จะเห็นว่าเราเขียน Test Case เป็นภาษาไทยได้นะเออ จากรูปเปรียบเทียบค่าจาก xpath ที่ locator h1 ตามคำสั่ง //h1[@class=”main-header”]  เท่ากับ “ROBOT FRAME WORK/” หรือไม่

    Locator ที่กล่าวคือตำแหน่งตามรูปข้างบน คราวนี้เราลองปรับให้ ${expect} ไม่ใช่ค่าเดียวกับ locator ที่เราอ้างถึง

    จะเห็นได้ว่าที่ log console มีการแสดงผลในการเปรียบเทียบว่าไม่เท่ากัน ไปดู Report กันซะหน่อยว่าเป็นยังไง

    Report ก็ดูง่ายมากเลยเห็นมั๊ยหล่ะ ^_^

  • ทดสอบ API ด้วย Robot Framework (Get Request)

    ก็ยังคงเขียนเกี่ยวกับ robot framework อีกนั่นแหละ ^_^ วันนี้เลยจะมาเขียนตัวอย่างการทดสอบ api ด้วย Robot Framework (Get Request) อย่างง่ายกันค่ะ

    สิ่งที่ต้องใช้

    1. API  ที่จะใช้ในการทดสอบ อันนี้จะใช้ API ที่ http://thetestingworldapi.com ค่ะ
    2. เครื่องมือที่ใช้เขียน Notepad++  ^_^
    3. Cmd

    ขั้นแรกเราไปที่ http://thetestingworldapi.com แล้วคลิกที่ API ในที่นี้ขอเลือก API ของ StudentsDetails ดังรูปค่ะ

    จากนั้นก็เปิด Notpad++ ขึ้นมาเลยค่ะ

    ที่ Settings ต้องเรียก Library  RequestsLibrary นะ แต่ก่อนอื่นต้องไปลง Library ตัวนี้กันก่อน โดยใช้คำสั่ง

    pip install robotframework-requests

    ถ้าลงแล้วก็จะตรวจสอบได้ โดยใช้คำสั่ง pip freeze ดังรูป

    มาที่ Notepad++ กันต่อ ^_^ เขียนคำสั่ง ดังนี้เลย

    จะเห็นได้ว่าเรามีแสดง status_code ออกมาด้วย มารู้จักความหมายของ status_code แต่ละตัวกันดีกว่า

    2xx  คือ OK
    3xx คือ Redirection
    4xx คือ Resource not found
    5xx คือ Server error

    มารันผลลัพธ์กันดีกว่า

    อันนี้ไม่ขอรัน code ในส่วนของ content นะ ไปรันกันเอาเอง เพราะมันเยอะมากตาลาย capture รูปมาก็คงดูไม่รู้เรื่อง ^_^

    การทดสอบ Get Request อย่างง่าย ก็ประมาณนี้นะคะ

  • Hello…Flatpickr!!

    หลายคนอาจะเคยพบปัญหาการเลือก วัน เดือน ปี ในcalendar การกรอกข้อมูลที่เป็นวันที่ใน web ต่างๆ การเลือกช่วงวันที่ใช้งานยาก โดยเฉพาะในการเลือก ช่วงเวลา ที่ย้อนหลัง ไปหลายปี บาง web อาจต้องกดเลื่อนเดือนที่ละเดือนไปเรื่อยๆ ต้องใช้เวลานาน ทำให้รู้สึกเบื่อ… วันนี้เราจะมานำเสนอ Flatpickr ที่เป็นไลบรารี่ javascript ใช้สำหรับรับ input ที่เป็น datetime picker ที่ยืดหยุ่น มีขนาดเล็กและใช้ง่าย โดย output ที่ได้จะเป็น String ตาม format ที่เราต้องการ

    Flatpickr js รูปแบบจะเป็นแนว Lean กับ UX-driven สามารถใช้งานได้กับ JS ธรรมดาหรือ jQuery โดย Flatpickr รองรับภาษาไทยได้โดยเลือก Localization เป็นไทยเพื่อให้สามารถแสดงเป็นภาษาไทย และรองรับรูปแบบเวลาที่แสดง 24 ชม. เพราะจะเข้าใจง่ายกว่า AM กับ PM ซึ่ง library อื่นๆ อีกหลายตัวยังไม่สามารถรองรับ จุดเด่น คือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที

    การใช้งานสามารถใช้ได้ง่ายๆ โดยใช้แค่ 2 ไฟล์ ก็สามารถใช้ option ได้เกือบครบ ซึ่งไฟล์ ที่จำเป็นประกอบด้วย ไฟล์ js 1 ไฟล์ และ ไฟล์ css 1 ไฟล์

    <link rel=”stylesheet” href=”flatpickr.css”>

    <script src=”flatpickr.js”></script>

    ถ้าใช้งานร่วมกับ jquery ก็ต้อง เพิ่ม library jquery เข้ามาด้วย

      <script src=”jquery.min.js”></script>

    การใช้งาน

    $(“.selector”).flatpickr(
    optional_config
    );

    ตัวอย่างกล่อง input ที่ใช้เลือก วันที่

     <input type=”text” id=”timePicker” placeholder=”Please select Time”>

    การแสดงเวลาแบบ Basic
    $(“#basicDate”).flatpickr({
    enableTime: true,
    dateFormat: “F, d Y H:i”,
    time_24hr: true
    });

    ภาพที่ 1 ฺBasic Calendar

    เราสามารถกำหนดช่วงของวันที่ค้นหาได้ง่ายขึ้น เนื่องจากมี Range Calendar (ภาพที่ 2) ให้ใช้งาน หรือจะเป็นเลือกแบบ Multiple เลือกทีละหลายๆวันก็ได้ และยังมี Plugin หรือ Theme ให้เลือกใช้งานอีกด้วย

    การแสดงเวลาแบบ Range Datetime
    $(“#rangeDate”).flatpickr({
    mode: ‘range’,
    dateFormat: “Y-m-d”
    });

    ภาพที่ 2 Range Calendar
  • Xamarin.Forms : Binding ข้อมูลด้วย MVVM pattern

    “MVVM is the best way to architecture mobile apps”

    Asfend Yar Hamid ซึ่งเป็น Microsoft MVP developer ท่านหนึ่งได้กล่าวไว้ เค้าคือใครน่ะเหรอ ผู้เขียนรู้จักเค้าผ่าน Udemy (คอร์สเรียนออนไลน์ที่เค้ากำลังฮอต ราคาถูก คุณภาพดี แอบรีวิว 555) ซึ่งวันนี้ผู้เขียนจะมาแนะนำการ Binding ข้อมูลของ Xamarin.Form app ด้วย MVVM pattern กันนะคะ

    MVVM pattern คืออะไร

    MVVM หรือ Model View ViewModel เป็น design pattern หรือรูปแบบในการวาง architecture ในการเขียน code นั่นเอง โดย

    Model คือ ส่วนที่เก็บข้อมูลของ Application เรา ตัวอย่างเช่น Entity Class หรือไฟล์ POCO Class ของ object ต่างๆ ที่เกี่ยวข้องกับข้อมูลจะอยู่ที่ส่วนนี้


    View คือ ส่วนที่ติดต่อกับ user ซึ่งเป็นส่วนไว้แสดงหน้า app ของเรานั่นเอง ซึ่งView จะไม่รู้อะไรเลยนอกจากการแสดงผล ส่วน Logic อื่นๆจะอยู่ใน ViewModel


    ViewModel คือ ส่วนที่ทำหน้าที่เก็บข้อมูลทั้งหมดที่ View ต้องการ โดย View จะติดต่อ ViewModel ผ่าน Data-binding ซึ่งหาก View มีการเปลี่ยนแปลงก็จะส่งผลต่อ ViewModel ในทางกลับกันหาก ViewModel มีการเปลี่ยนแปลงก็จะส่งผลถึง View ด้วยเช่นกัน


    ทำไมต้องใช้ MVVM กับ mobile app ?

    MVVM ทำให้เราสามารถ separate หรือแยกส่วนการทำงานของ code ออกจากกันได้ชัดเจนตามหน้าที่ของมัน ซึ่งทำให้ง่ายต่อการจัดการ รองรับต่อการเปลี่ยนแปลง เหมาะสำหรับการพัฒนา Application ที่มีการเปลี่ยนแปลง UI บ่อยครั้ง เนื่องจากทุกการเปลี่ยนแปลงในส่วน view จะไม่กระทบต่อ ViewModel ที่เป็น business logic และยังมี Binder ซึ่งเป็นตัวช่วยจัดการการเปลี่ยนแปลงของข้อมูลใน View หรือใน ViewModel ทำให้ไม่จำเป็นต้องเขียน Code ในการควบคุม View เพื่อให้เปลี่ยนแปลงตาม

    เริ่มกันเลยดีกว่า

    เกริ่นไปเยอะแล้ว เรามาลองสร้าง app เพื่อ binding ข้อมูลในรูปแบบ MVVM ดูกันเลยค่ะ
    Step 1 : สร้าง Xamarin.Forms project ขึ้นมาก่อน (วิธีสร้างและเลือก template สามารถอ่านได้จากบทความที่แล้ว => สร้าง Hello World app ง่ายๆด้วย Xamarin.Forms) ซึ่งจะได้ project structure ดังรูป

    ทีนี้เราจะไม่ไปยุ่งในส่วน specific platform project (Android และ iOS) เราจะมาสร้าง MVVM ที่ share project กัน

    Step 2 : สร้างโฟลเดอร์ Model, View และ View Model ขึ้นมา ดังรูป

    Step 3: สร้าง class ชื่อ Employee.cs ลงในโฟลเดอร์ Model โดย code ข้างในมีดังนี้

    using System;
    using System.Collections.Generic;
    using System.Text;
    
    namespace MVVMBinding.Models
    {
        public class Employee
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string FullName
            {
                get { return string.Format("{0} {1}", FirstName, LastName); }
            }
        }
    }
    

    Step 4 : สร้าง ViewModel ชื่อ EmployeeVM ลงใน โฟลเดอร์ ViewModels โดยใน class นี้จะมีการ inherit และ implement interface ที่ชื่อ INotifyPropertyChanged ซึ่งเป็น interface ที่ช่วยให้ Binder property ทำงาน โดย code มีดังนี้

    using MVVMBinding.Models;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Text;
    
    namespace MVVMBinding.ViewModels
    {
        public class EmployeeVM : INotifyPropertyChanged
        {
            private ObservableCollection<Employee> _employees;
            public ObservableCollection<Employee> Employees {
                get
                {
                    return this._employees;
                }
                set
                {
                    this._employees = value;
                    OnPropertyChanged();
                }
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(
            [CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(propertyName));
            }
    
            public EmployeeVM()
            {
                Employees = new ObservableCollection<Employee>();
            }
    
            public void AddNewEmployee(string fisrtName,string lastName)
            {
                Employee emp = new Employee()
                {
                    FirstName = fisrtName,
                    LastName = lastName
                };
                Employees.Add(emp);
            }
        }
    }
    

    Step 5 : สร้าง page ชื่อ EmployeePage ลงใน folder View โดยในส่วนของ EmployeePage .xaml ส่วนของ ListView จะมีการ Binding ข้อมูล กับ Employees ซึ่งเป็น property หนึ่งของ EmployeeVM สำหรับแสดงผลข้อมูล

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MVVMBinding.Views.EmployeePage">
        <ContentPage.Content>
            <StackLayout>
                <Label Text="My Employee"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
                <StackLayout>
                    <Label Text="ชื่อ"/>
                    <Entry Placeholder="กรอกชื่อ" x:Name="fnameEntry"/>
                    <Label Text="นามสกุล"/>
                    <Entry Placeholder="กรอกนามสกุล" x:Name="lnameEntry"/>
                    <Button x:Name="addBtn" Text="Add" Clicked="AddBtn_Clicked" />
                    <ListView ItemsSource="{Binding Employees}" BackgroundColor="Beige">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Label Text="{Binding FullName}"/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    

    และในส่วนของ code behind=> EmployeePage.xaml.cs ก็ให้เซตค่า BindingContext ไปยัง EmployeeVM ดัง code ต่อไปนี้

    using MVVMBinding.ViewModels;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    namespace MVVMBinding.Views
    {
    	[XamlCompilation(XamlCompilationOptions.Compile)]
    	public partial class EmployeePage : ContentPage
    	{
            private EmployeeVM vm;
            public EmployeePage ()
    		{
    			InitializeComponent ();
                vm = new EmployeeVM();
                this.BindingContext = vm;
    		}
    
            private void AddBtn_Clicked(object sender, EventArgs e)
            {
                vm.AddNewEmployee(fnameEntry.Text, lnameEntry.Text);
                ClearEntry();
            }
            private void ClearEntry()
            {
                fnameEntry.Text = "";
                lnameEntry.Text = "";
            }
        }
    }
    

    Step 6 : เปิดไฟล์ App.xaml.cs ขึ้นมา และเซตค่า MainPage ให้เรียกไปยัง EmployeePage ดัง code ต่อไปนี้

    using MVVMBinding.Views;
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    
    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
    namespace MVVMBinding
    {
        public partial class App : Application
        {
            public App()
            {
                InitializeComponent();
    
                MainPage = new EmployeePage();
            }
    
            protected override void OnStart()
            {
                // Handle when your app starts
            }
    
            protected override void OnSleep()
            {
                // Handle when your app sleeps
            }
    
            protected override void OnResume()
            {
                // Handle when your app resumes
            }
        }
    }
    

    Step สุดท้าย : เสียบสาย Usb เชื่อมต่อระหว่างมือถือกับคอมของเรา build project แล้วก็กดรันโลดดด.. ผลลัพธ์ก็จะออกมาเช่นนี้

    เป็นอันเสร็จสิ้นการสร้าง app Binding ข้อมูลแบบ MVVM pattern ด้วย Xamarin.Forms แล้วนะคะ ซึ่งผู้อ่านสามารถนำไปใช้เป็นแนวทางและประยุกต์ใช้ตามความเหมาะสมกับ app นั้นๆต่อไปค่า ^^
    บทความถัดไป => Xamarin Essentials : Easy access Native Feature Platform

  • แนะนำ Knex js

    สำหรับผู้ที่เขียน web แล้วต้องมีการเชื่อมต่อกับ database นั้น การเชื่อมต่ออาจไม่ใช่เรื่องง่าย ถ้าจะใช้ JavaScript มาช่วยอาจมีความซับซ้อนหรือมีความยุ่งยากมาก ดังนั้นจึงมี tool เพื่อนำมาใช้ในการจัดการ database โดยเฉพาะผู้ที่ถนัด Node.js และ Browser โดย tool ที่กล่าวถึงนั้น คือ “knex.js”

    knex.js เป็น SQL query builder ที่สามารถต่อกับฐานข้อมูลได้หลากหลาย สามารถที่จะเรียนรู้เข้าใจง่ายและสามารถปรับเปลี่ยนได้ตลอด โดยปัจจุบันสามารถรองรับการทำงานกับ database  Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, และ Amazon Redshift สามารถรันได้ทั้ง Node.js และ Browser รองรับ transactions, polling, streaming queries, promise และอื่นๆ

    การติดตั้งสามารถลงผ่าน npm ได้เหมือน ตัวอื่นๆในตระกูล Node เช่น

    npm install knex –save

    และโหลด library สำหรับเชื่อมต่อฐานข้อมูลต่างๆ ผ่านคำสั่งดังนี้

    npm install pg
    npm install sqlite3
    npm install mysql
    npm install mysql2
    npm install oracle
    npm install mssql

    ตัวอย่างการ connect กับ database Mysql

    var knex = require(‘knex’)({
    client: ‘mysql’,
    connection: {
    host : ‘127.0.0.1’,
    user : ‘your_database_user’,
    password : ‘your_database_password’,
    database : ‘myapp_test’
    }
    });

    การใช้คำสั่งของ sql ( selectinsertupdatedelete) สามารถเขียนได้ง่าย โดยมีฟังก์ชั่นมาให้พร้อมใช้งานแล้ว

    ตัวอย่างการใช้คำสั่ง select

    Ex1 : select * from f_student_payment สามารถใช้คำสั่ง

    knex.select().table(‘f_student_payment’) หรือ 

    knex.select().from(‘f_student_payment’)

    Ex2 : select ‘payment_id’, ‘student_id’, ‘address’ from ‘f_student_payment’

    knex.select(‘payment_id’, ‘student_id’, ‘address’).from(‘f_student_payment’)

    Ex3 : select * from ‘f_student_payment’ where ‘student_id’ = ‘5710121045’

    knex(‘f_student_payment’).where(‘student_id’, ‘5710121045’)

    ตัวอย่างการใช้คำสั่ง insert

    Ex4 : insert into ‘f_student_payment’ (‘student_id’) values (‘621012025’)

    knex(‘f_student_payment’).insert({ student_id : ‘621012025’})

    ตัวอย่างการใช้คำสั่ง update

    Ex5 : update ‘f_student_payment’ set ‘student_id’ = ‘621012025’

    knex(‘f_student_payment’).update(‘student_id’, ‘621012025’)

    ตัวอย่างการใช้คำสั่ง delete

    Ex6 : delete from f_student_payment where student_id = ‘621012025’

    knex(‘f_student_payment’)
    .where(‘student_id’, ‘621012025’)
    .del()

  • Gatsby Framework

    Gatsby คืออะไร?

    • เป็น open source framework มีพื้นฐานมาจาก React
    • เป็น Static Site Generator กล่าวคือเมื่อเขียนเว็บ -> Build -> HTML+ css + javascript -> Deploy กับ web server หลายๆเว็บ เช่น apache, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ

    Create Gatsby Project
    ก่อนอื่นเราจะต้องมาติดตั้งตัว gatsby-cli ซึ่งสามารถใช้ได้ทั้งคำสั่ง Yarn หรือ NPM ดังภาพที่ 1

    npm install -g gatsby-cli

    yarn global install gatsby-cli

    ภาพที่ 1 ติดตั้ง gatsby-cli

    เมื่อเราติดตั้ง gatsby-cli ขั้นตอนต่อไปก็จะเป็นการสร้าง website ใหม่ด้วย คำสั่ง

    gatsby new blog

    หลังจากสร้าง blog เรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ ในที่นี้คือ “blog” แล้วใช้คำสั่ง 

    gatsby develop เพื่อรัน development server

    และเราจะได้ default page ที่ Gatsby สร้างให้ ซึ่งสามารถเข้าถึงเว็บได้ด้วย http://localhost:8000 ดังภาพที่ 2

    ภาพที่ 2 Gatsby Default Starter

    ต่อไปเราจะลองแก้ไข Gatsby Config ในไฟล์ gatsby-config.js แล้วกลับไปยัง Browser ที่เราเปิดไว้ในภาพที่ 2จะได้ผลลัพธ์ดังภาพที่ 3 กล่าวคือเราสามารถแก้ Code แล้วSave หน้าเว็บก็จะอัพเดททันทีโดยที่เราไม่ต้องสั่ง Build ใหม่ เนื่องจาก Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอ เหมือนรัน develop

    ภาพที่ 3 ผลลัพธ์จากการแก้ไข gatsby-config.js
  • Create Excel 2007 file using Interop services.

    Microsoft Office Interop (Excel Automation)คือ ตัวเลือกอีกทางหนึ่งที่ใช้สำหรับ สร้าง อ่าน เอกสาร Excel (XLS, XLSX, CSV) จากการพัฒนาโดยใช้   C# หรือ VB.NET แต่บทความนี้จะขอยกตัวอย่างการพัฒนาเพื่อสร้างเอกสารโดยใช้ C# ค่ะ

    Step 1 

    • เปิด Visual Studio
    • File>New>Project
    • เลือก Visual C#> Windows > Select Console Application

    Step

    • เลือก >> Project Menu >> เลือก Add References >> เลือกที่ Tab COM >> กด “Microsoft Excel 12.0 Object Library”  เพื่อเพิ่ม References
    รูปตัวอย่างการ Add References

    Step

    ตัวอย่าง Code C# เพื่อใช้ในการสร้าง Excel File ดังนี้

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Diagnostics;
    using System.Runtime.InteropServices;
    using Microsoft.Office.Interop;
    using Microsoft.Office.Interop.Excel;
     
    namespace ConsoleApplication1
    {
        class Class1
        {
            public static void Main(string[] ar)
            {
                Application ExcelApp = new Application();
                Workbook ExcelWorkBook = null;
                Worksheet ExcelWorkSheet = null;
     
                ExcelApp.Visible = true;
                ExcelWorkBook = ExcelApp.Workbooks.Add(XlWBATemplate.xlWBATWorksheet);
                // ExcelWorkBook.Worksheets.Add(); //Adding New Sheet in Excel Workbook
                try
                {
                    ExcelWorkSheet = ExcelWorkBook.Worksheets[1]; // Compulsory Line in which sheet you want to write data
                    //Writing data into excel of 100 rows with 10 column 
                    for (int r = 1; r < 101; r++) //r stands for ExcelRow and c for ExcelColumn
                    {
                        // Excel row and column start positions for writing Row=1 and Col=1
                        for (int c = 1; c < 11; c++)
                            ExcelWorkSheet.Cells[r, c] = "R" + r + "C" + c;
                    }
                    ExcelWorkBook.Worksheets[1].Name = "MySheet";//Renaming the Sheet1 to MySheet
                    ExcelWorkBook.SaveAs("d:\\Testing.xlsx");
                    ExcelWorkBook.Close();
                    ExcelApp.Quit();
                    Marshal.ReleaseComObject(ExcelWorkSheet);
                    Marshal.ReleaseComObject(ExcelWorkBook);
                    Marshal.ReleaseComObject(ExcelApp);
                }
                catch (Exception exHandle)
                {
                    Console.WriteLine("Exception: " + exHandle.Message);
                    Console.ReadLine();
                }
                finally
                {
     
                    foreach (Process process in Process.GetProcessesByName("Excel"))
                        process.Kill();
                }
             }
        }
    }
    

    เมื่อมีการ Run โปรแกรมแล้ว Excel file ก็จะถูกสร้างตาม path ที่ระบุ ค่ะ

     แหล่งอ้างอิง https://www.c-sharpcorner.com/blogs/creating-excel-file-using-interop-services1