Day: May 22, 2018

  • รู้จัก Angular กันดีกว่า

    Angular เป็น Front-end JavaScript Framework ที่ทำงานบนฝั่ง Client ที่เรานำไปสร้าง Reactive Single Page Applications (SPA) ซึ่งก็คือทุกๆหน้าจะถูกโหลดมารวมอยู่ในหน้าเดียว การคลิ๊กเปลี่ยนหน้าหรือการคลิ๊กปุ่มต่างๆ จะทำให้เรารู้สึกเหมือนเป็น Desktop Application ที่ไม่มีการโหลดเปลี่ยนหน้า Angular เป็น Model-View-Controller (MCV) และยังเป็น Model-View-ViewModel (MVVM) อีกด้วย มีการเชื่อมการทำงานระหว่าง JavaScript เข้ากับ DOM Element ของ HTML ใช้การทำงาน client-side template สามารถสร้าง template ไปใส่ไว้ในที่ที่เรากำหนดไว้ได้ และเป็น 2-way data binding เพื่อ sync Model กับ View

    เดิม Angular 1 เป็น javascript และตั้งแต่ Angular 2 ขึ้นไปเป็น typescript ปัจจุบัน Angular 6 ซึ่งมีอะไรใหม่ๆเพิ่มเข้ามา ได้แก่

    • Angular CLI เพิ่มคำสั่ง ng add, ng update, ng generate library(สร้าง Library)
    • Angular 6 ได้มีฟีเจอร์ใหม่ที่เรียกว่า Workspace ทำให้สามารถสร้าง Project ได้หลายตัวภายใน Workspace เดียว จึงได้มีการเพิ่มโฟลเดอร์ภายในโฟลเดอร์ dist เพื่อบอกว่าเป็นไฟล์ของโปรเจคใด

    • สามารถสร้าง Web Component ด้วย Angular Elements
    • Angular Material เพิ่ม Component ใหม่อย่าง Tree, Badge และ Bottom Sheet ส่วนตัว CDK ตัว overlay เพิ่ม positionStrategy แบบใหม่
    • Provider แบบใหม่ที่สนับสนุนการทำ Tree Shaking เพื่อช่วยในการลดขนาด Bundle เพิ่มประสิทธิภาพ Animation
    • มาพร้อมกับ RxJS 6 (A reactive programming library for JavaScript) เวอร์ชันใหม่ ซึ่งมีการเปลี่ยนวิธี import แบบใหม่มาตั้งแต่ versions 5

    เรามาทดลองสร้างโปรเจคกันดีกว่า ก่อนอื่นเราจะต้องติดตั้ง nodejs, Visual Studio Code และ

    1. ติดตั้ง angular

    2. สร้างแอพพลิเคชั่น

    การรัน server สามารถทำได้ด้วยการพิมพ์คำสั่งเข้าไปในโฟลเดอร์ของโปรเจค และ คำสั่งที่ใช้ในการรันแอพ ดังนี้

    3. เปิด Project โดยใช้ “Visual Studio Code” ที่ได้ติดตั้งไว้ในตอนแรก File > Open Floder… > my-app ดังในรูปด้านล่าง

    ซึ่งโฟลเดอร์ที่เราสนใจหลักๆ ก็คือ src/app เปิดไฟล์ app.component.html เพิ่มในส่วน <h1> … </h1>

    และเปิดไฟล์ app.component.ts ขึ้นมา ในส่วนนี้เป็นตัวควบคุมของ component นี้

    ในบรรทัดที่ 9,10 เป็นการสร้างตัวแปร title , Date ตามลำดับ ที่ถูกนำไปใช้ในไฟล์ app.component.html ซึ่งในส่วนนี้จะเรียกว่า Data Binding และทำการเปิด Browser ไปที่ http://localhost:4200/ จะได้ผลลัพธ์ดังรูป

    ใน Angular จะใช้โมดูลเปรียบเสมือนกล่องแต่ละชิ้นมาประกอบกันเพื่อทำงานในแต่ละส่วนโดยมีข้อดีคือสามารถนำโค้ดกลับมาใช้ใหม่ได้ (reusable) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้ หรือจะใช้คู่ขนานก็ได้ ซึ่งในโมดูลก็จะประกอบไปด้วย

    • Controllers
    • Services
    • Filters
    • Directives
    • อื่นๆ

    ทดลองใช้ FormsModule ซึ่งเป็นโมดูลที่ใช้ในการจัดการฟอร์มต่างๆ ของ HTML รวมทั้งช่วยในการทำ Data Binding ในส่วนของข้อมูลฝั่งควบคุมกับค่าในฟอร์มของฝั่งที่แสดง เปิดไฟล์ app.module.ts และทำการแก้ไข ดังนี้

    บรรทัดที่เพิ่มเข้าไปคือการเพิ่มโค้ดเข้าไปเพื่อดึงโมดูลนี้มาใช้งาน จากนั้นลองนำส่วนของฟอร์มมาใช้กับโปรเจคโดยเปิดไฟล์ app.component.html ขึ้นมา และเพิ่มโค้ดตามรูปด้านล่าง

    และลองรัน Browser จะได้ผลัพธ์ ดังนี้

     

  • How to install PSU SSL VPN Client ubuntu 18.04

    • เปิด terminal
    • เริ่มด้วยการติดตั้งโปรแกรมที่จำเป็น
      sudo apt install -y openfortivpn
    • สร้างแฟ้ม /home/username/fortivpn.config มีข้อความว่า
      host = vpn2.psu.ac.th
      port = 443
      username = PSU Passport Username
      password = PSU Passport Password
      trusted-cert = 34df1a6bd3705782fd17152de0c4fe0b3e7f31302cbdcf737b113c17a5b9ff09
    • สั่งรันคำสั่ง
      sudo openfortivpn -c fortivpn.config
    • ได้ข้อความประมาณว่า
    • แปลว่าเชื่อมต่อได้แล้ว หากต้องการยกเลิกการเชื่อมต่อให้กด ctrl-c จะได้ข้อความประมาณว่า
    • แปลว่ายกเลิกการเชื่อมต่อแล้ว
    • ต้องเปิด terminal ที่รันคำสั่ง openfortivpn ไว้ตลอดเวลาที่เชื่อมต่อห้ามปิด
    • จบสไตล์คอมมานไลน์ ….

    หากอยากได้ง่ายกว่านี้

    • ติดตั้งโปรแกรม OpenFortiGUI โหลดที่ https://hadler.me/linux/openfortigui/ โดยเลือกโปรแกรมสำหรับ Ubuntu 18.04
    • โหลดมาแล้วติดตั้งด้วยคำสั่ง
      sudo dpkg -i openfortigui_0.6.2-1_bionic_amd64.deb
    • จะมี error message มากมาย ให้ต่อด้วยคำสั่ง
      sudo apt -f -y install
    • เริ่มใช้งานเปิดโปรแกรม openFortiGUI โดยกดที่ปุ่ม Show Applications เลือก openFortiGUI
    • จะได้หน้าต่าง
    • คลิกปุ่ม Add เลือก VPN จะได้
    • กรอกข้อความตามรูป ช่อง username และ password ก็ใส่ PSU Passport ลงไปเสร็จแล้วกด Save
    • ได้ดังรูป
    • เลือก PSU แล้วคลิก Connect ได้ผลดังรูป
    • คลิก x เพื่อปิดหน้าต่างสังเกตว่าจะมีรูป  ที่มุมบนขวา หากจะยกเลิกการเชื่อมต่อ คลิกขวาที่  เลือก PSU เพื่อ dissconnect
    • จบขอให้สนุก…

    ***  จากที่ลองทดสอบพบว่า เมื่อเชื่อมต่อ AIS 4G จะไม่สามารถใช้วิธี OpenFortiGUI ได้ แต่ใช้วิธีคอมมานไลน์ได้ครับ