CoP PSU IT Blog – Page 110 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

ปัญหาในการลืมรหัสผ่านจะหมดไปด้วย … LastPass

May 23, 2018 11:17

blog ที่ 3 สำหรับปีนี้ ทางเราขอนำเสนอ แทน แท่น แท๊นนนน Extension ที่ชื่อว่า “LastPass” นั่นเอง ส่วนเสริมตัวนี้จะช่วยให้ปัญหาการลืม Password ที่เข้าเว็บต่างๆ ทั้งร้อยแปดพันเก้า ที่เราเข้าใช้งานหมดไป ในปัจจุบันนี้ต้องยอมรับอย่างนึงว่า เว็บไซต์ที่เราใช้บริการทั้งหลายทั้งมวลนั้นมีมากมายหลากหลายเหลือเกิน ทั้งงานเอย social เอย หรือแม้แต่จะเป็น ฐานข้อมูลในการเก็บข้อมูลต่างๆ ทั้งหมดเหล่านี้ล้วนจะต้องมีการสร้าง account เพื่อเข้าไปใช้งานทั้งสิ้น และสิ่งนึงที่เราจะเจอบ่อยๆ ก็คือ website นี้ รหัสผ่านอะไรแล้วน้ออออ !! 55+ อะ ไม่พูดพร่ำทำเพลงมากมาย ไปดูเจ้าตัว Extension “LastPass” กันเถิดดดด ….. 1. ติดตั้ง Extension ผ่านลิงค์นี้ได้เลย คลิก จากนั้นเริ่มต้นสร้างบัญชี เพื่อเข้าใช้งาน ปล…จากนั้นต่อไปในอนาคตเราก็จะปล่อยให้ LastPass ช่วยเราจำในส่วนที่เหลืออื่นๆไง 2.โดยให้ตั้งรหัสผ่านตามเงื่อนไขที่กำหนด (อันนี้เพื่อความปลอดภัยนั่นแหละ) 3. เมื่อเราตั้งรหัสผ่านตรงตามเงื่อนความปลอดภัยที่กำหนด ก็จะพบกับหน้าจอตามรูป จากนั้น คลิก “NEXT” โลดดด 4. เมื่อดำเนินการครบตามขั้นตอนแล้ว ก็จะพบกับหน้าตาเจ้า LastPass เรียบๆ ดูแล้วใช้งานง่าย ไม่ยากๆ 5. คราวนี้เราก็มาจัดการเพิ่มข้อมูล ที่เราต้องการให้เจ้า LastPass ช่วยเราจำกันเถอะ โดยสามารถคลิกเลือก ในส่วนเมนูด้านซ้ายของหน้าจอ หรือจะเลือกจาก Icon ด้านล่างมุมขวาของหน้าจอก็ได้เช่นเดียวกัน 6. ตัวอย่างเช่น สร้างข้อมูลรายละเอียดของเว็บที่เราเข้าใช้งานเป็นประจำ Gmail เป็นต้น จากขั้นตอนที่ 5 เมื่อคลิก เพิ่มเว็บไซต์ ก็จะพบกับหน้าจอประมาณนี้นะ เมื่อใส่รายละเอียดครบถ้วนแล้ว ก็กด “บันทึก” ได้เลย 7. จากนั้นระบบก็จะบันทึกข้อมูลเว็บไซต์ Gmail ของเราเอาไว้ เราก็ทำแบบนี้ไปเรื่อยๆ จนครบทุกเว็บที่เราอยาก ให้เจ้า LastPass ช่วยจำ เพียงเท่านี้ก็เรียบร้อย ปัญหาการลืมรหัสผ่านเข้าเว็บต่างๆ ที่มีมากมายก่ายกองของเรา ก็จะหมดไป ** ปล… แต่ต้องไม่ลืมรหัสผ่านที่ใช้เข้า LastPass ตัวนี้น๊าาาา 555+ 8. สำหรับความปลอดภัยอื่นๆ เราก็สามารถเข้าไปดู ไปตั้งค่าได้ โดยเลือกผ่านเมนู การตั้งค่าบัญชี ซึ่งก็จะมีทั้งแบบ ฟรี และหากต้องการที่ปลอดภัยมากขึ้นไปอีกระดับก็ต้องเป็นแบบ premium กันแหละ แนะนำว่าลองเล่น ลองคลิกๆ ศึกษาเพิ่มเติมกันได้นะ

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

May 22, 2018 23:43

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) และหากมีหลายๆโมดูลที่จะเรียกใช้สามารถเรียงลำดับก่อนหลังได้

How to install PSU SSL VPN Client ubuntu 18.04

May 22, 2018 10:57

เปิด 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 ได้ แต่ใช้วิธีคอมมานไลน์ได้ครับ

การทดสอบแบบอัตโนมัติ ด้วย Robot framework กับ Selenium Library (ตอนที่ 2 การใช้งาน)

May 10, 2018 14:27

มาลุยกันต่อในตอนที่ 2 กันค่ะ อันดับแรกต้องทำการติดตั้ง Selenium WebDriver กันก่อน สามารถไปดาวน์โหลดได้ที่ https://www.seleniumhq.org/download/ เมื่อติดตั้งเรียบร้อยแล้วเรามาทำความรู้จักโครงสร้างหลักใน Robot Framework กันค่ะ ในส่วนของ Setting จะเป็นการกำหนด Library ในที่นี้จะใช้ Selenium2Lirary ในส่วนของ Keyword จะใช้ในกรณีที่เราต้องการที่จะสร้าง Keyword ของเราขึ้นมาใช้งานเอง ซึ่งจะใช้ได้เฉพาะในไฟล์นี้เท่านั้น ในส่วนของ Variables คือการกำหนดตัวแปร สำหรับการใช้งาน ในส่วนของ Test Cases คือส่วนของการเขียน Test Cases ซึ่งสิ่งสำคัญในส่วนนี้คือ ชื่อ Test Cases ถ้าไม่มีการตั้งชื่อให้กับ Test Cases ก็จะไม่สามารถ Run คำสั่งทั้งหมดในไฟล์นี้ได้ ***โครงสร้างที่สำคัญในการ Run Test Case คือ Setting และ Test Cases ซึ่งในการสร้างไฟล์สำหรับ Test ด้วย Robot ทุกครั้ง จะต้องมี 2 ส่วนนี้ มิฉะนั้น ก็จะไม่สามารถทำงานได้ ส่วน Keywords กับ Variables อาจจะมีหรือไม่มีก็ได้ จาก Test case ตัวอย่างต้องการจะค้นหา Google ด้วยคำว่า hello world โดยเปิดผ่าน Google Chrome เมื่อเขียนคำสั่งเรียบร้อยแล้ว ก็ Save ไฟล์เป็น Text ธรรมดา ตัวอย่างจะบันทึกชื่อเป็น test.robot ดังรูป จากนั้นเรามา Run การทดสอบแบบอัตโนมัติกันค่ะ เปิด Command Prompt ขึ้นมาค่ะ ผลลัพธ์จะแสดงอัตโนมัติ ดังรูปค่ะ สามารถจะดู Log และ Report จากการทดสอบได้ดังรูป เห็นมั๊ยค่ะว่าการใช้งานไม่ยุ่งยากเลย แถมมี log มี report ให้ดูด้วยนะเออ ครั้งนี้เป็นการใช้งานเบื้องต้น เดี๋ยวตอนหน้าจะนำเสนอการใช้งานคำสั่งในรูปแบบอื่น ๆ กันบ้างนะคะ อย่าลืมติดตามกันหล่ะ

Grammarly For Chrome

May 7, 2018 12:52

Blog ที่2 สำหรับปีนี้ ทางผู้เขียนก็อยากจะขอนำเสนอ Extension เจ๋งๆ ให้ได้รู้จักกันอีกสักอันละกันเนอะ เชื่อเลยว่าหลายๆคน ที่ไม่ถนัดในภาษาอังกฤษมากนัก (อย่างเช่นผู้เขียนนี่แหละ – -“) จะต้องกราบงามๆ ให้กับคนที่พัฒนาสร้างสรรค์ Extension ที่ชื่อว่า Grammarly ตัวนี้ขึ้นมาให้เราได้ใช้กัน … __/\__ *** ถ้าพร้อมแล้วก็มาทำความรู้จัก Grammarly For Chrome กันเถอะ *** Grammarly เป็น Extension ที่จะทำหน้าที่คอยจับตามองในสิ่งที่เราพิมพ์ลงไปแบบ Real-time (ทันที) และจะคอยบอกให้เรารู้ ว่าเราพิมพ์ผิดคำไหน ตกตรงจุดไหน และที่สำคัญเจ้าตัวนี้มันจะแนะนำวิธีแก้ไขให้ หรือบางทีก็จะมีการแสดงอธิบายเพิ่มเติมให้ด้วย ความฉลาดของเจ้าตัวนี้หลักๆ ที่จะช่วยเราได้อย่างเช่น การสะกดคำ การลืมเติม S หรือการใส่ . (dot) หรือการจัดวางเรื่องของรูปแบบประโยค การขึ้นต้นคำ เป็นต้น อะ ไม่ต้องบรรยายกันมากละ มาลองติดตั้ง แล้วก็ใช้งานจริงกันเลยดีกว่าาาา ถ้าพร้อมแล้วก็ ลุยยยย กันเลย *** วิธีติดตั้ง Grammarly For Chrome *** 1.เปิด Google Chrome Browser เพื่อติดตั้ง Extension คลิกที่นี่ จากนั้นเลือกเพิ่ม Extension ดังกล่าว 2. หลังจากเพิ่มส่วนขยายเรียบร้อยแล้ว ก็จะพบกับหน้าจอ Personalize Grammarly ดังรูป เราสามารถเลือกระบุได้ว่า ส่วนใหญ่แล้วเรื่องที่เราเขียนจะเกี่ยวกับด้านไหน และระบุได้ว่าทักษะ ที่เรามีเนี่ยอยู่ที่ระดับประมาณไหน แต่หากไม่ต้องการระบุใดๆ ก็สามารถกด Skip เพื่อข้ามได้เลย 3.ถัดมาให้ Create Account เพื่อเข้าสู่ระบบ โดยเราสามารถจะเลือก with facebook หรือ with google ก็ได้นะสำหรับคนที่มี Account อยู่แล้ว หากนอกเหนือจากนี้ก็ระบุ Email ที่ต้องการใช้ไปได้เลย 4.แท่น แท่น แท๊นนน เมื่อ Login เข้ามาแล้วก็จะพบกับหน้าจอ Welcom to Grammarly! แบบในรูปนะ หน้านี้ก็จะมีให้เราเลือกว่าจะใช้แบบ ฟรี หรือจะใช้แบบ Premium เอาจริงๆ ตัดสินใจได้ไม่ยากเลย คลิกลงไปแรงๆ ตรงที่เขียนว่า “Continue to Grammarly It’s Free” 555+ จะเสียเงินทำไม แค่ที่เค้าฟรี มาให้เราก็เพียงพอที่จะใช้ได้ในชีวิตประจำวันของเราแล้ววว !!! 5. คราวนี้มาทดลองใช้ Extension ตัวนี้ในการส่ง E-mail กัน ปล..แต่จริงๆแล้ว ไม่ใช่แค่ใช้ในการพิมพ์ E-mail เท่านั้นนะ จะเขียน Blog หรือพิมพ์อย่างอื่นผ่าน Chrome ก็สามารถใช้ Extension ตัวนี้ได้เช่นเดียวกันนะเออ ตัวอย่างเช่น พิมพ์ข้อความ young people are talking less on their mobile ทดสอบโดยการพิมพ์ถูกบ้าง ผิดบ้าง ก็จะสังเกตุได้ว่าเจ้าตัว Grammarly ก็จะตรวจสอบคำที่คาดว่าจะไม่ถูกต้อง และขีดเส้นใต้ สีแดงเอาไว้