Software Engineer for non-tech people day 02
สวัสดีครับ จากที่ทางผมได้มีการอบรม SE for non-tech day 02 ซึ่งเป็นคอสที่จัดสำหรับคนทั่วไปที่ไม่ได้ทำอาชีพด้าน tech มาก่อน แล้วอยากเปลี่ยนสายอาชีพเป็น tech ซึ่งทางผม ได้ออกแบบตำแหน่งใน T.T.Software ให้มีตำแหน่ง Software Engineer ซึ่งเป็นตำแหน่งกลางๆที่ทำทั้ง Dev และ SA โดยไม่ลงลึกมาก เพื่อให้เหมาะกับคนที่เพิ่งเปลี่ยนสายอาชีพมา, ทีนี้ทางน้องๆผู้เรียน ติดปัญหาในการติดตั้งโปรแกรมต่างๆ ระหว่างเรียน ผมจึงเขียนบทความนี้ เพื่ออธิบายทีละขั้นตอนอย่างช้าๆ โดยระหว่างทำนี้ ผมได้ใช้ window 11 เครื่องเปล่า มาค่อยๆติดตั้งโปรแกรม เพื่อใช้ในการนำเสนอนะครับ โดยเมื่อทำสำเร็จ ก็จะรันโปรแกรม หน้าตาแบบนี้ ออกมาได้ครับ และเปิด docker ได้บ้าง
อย่างไรก็ตาม เพื่อให้เข้าใจเนื้อหาการสอน จำเป็นต้องเข้าเรียน ระหว่างคลาสประกอบด้วยนะคับ ถ้าอ่านบทความนี้อย่างเดียว อาจจะไม่เข้าใจเนื้อหาที่จะสอนด้วยนะคับ, ถ้าใครสนใจวีดีโอหรือการเรียน (ฟรีสำหรับคนสนใจ แต่จำกัดจำนวน) ก็ติดต่อเข้ามาได้นะครับ
โดยก่อนที่จะเริ่มติดตั้งโปรแกรมในบทเรียนนี้ ให้นักเรียน ติดตั้ง Visual Code ไว้ก่อนด้วยนะครับ
การติดตั้ง .NET 8
ดำเนินการตามขั้นตอนต่อไปนี้ ได้แก่
- ดาวโหลดและติดตั้ง .NET8 SDK จากที่นี่ https://dotnet.microsoft.com/en-us/download/dotnet/8.0
- เมื่อติดตั้งแล้ว ลองเช็ค .NET version ในเครื่อง ด้วยคำสั่ง ดังนี้
dotnet --version- ควรได้ผลลัพท์ดังนี้
การสร้างและทดสอบรัน .NET Project อย่างง่าย
ให้ลองทำตาม tutorial นี้
สรุปโดยย่อ ให้รันคำสั่งดังนี้
dotnet new mvc -o MvcMovie
code -r MvcMovieโดยเมื่อรันแล้ว มันควรจะเปิด code ใน vscode มาพร้อมแก้ไขต่อ ดังภาพ
รันคำสั่งเพื่อจัดการกับ certificate สำหรับการพัฒนา .NET ดังนี้
dotnet dev-certs https --trustโดยเมื่อรันแล้ว ควรจะได้แบบนี้ โดยให้กด yes เพื่อ trust certificate
รันคำสั่งต่อไปนี้ เพื่อเปิดเว็บให้แสดงขึ้นมา
dotnet run --launch-profile httpsโดยหลังจากรันแล้ว ควรได้แบบนี้
ติดตั้ง dotnet ef เพื่อทำงานกับ database
ให้รันคำสั่ง ต่อไปนี้ เพื่อติดตั้ง Entity Framework Core .NET Command-line Tools
dotnet tool install --global dotnet-ef
dotnet ef --versionซึ่งหากสำเร็จ ควรแสดงได้ดังนี้.
ติดตั้ง WSL2 (สำหรับกรณี window)
สำหรับ Mac ให้ข้ามขั้นนี้ไปนะครับ, อ้างอิงขั้นตอนในเอกสารนี้
https://learn.microsoft.com/en-us/windows/wsl/install
ให้รันคำสั่งต่อไปนี้
wsl --install
การติดตั้ง Docker Desktop
ให้ทำการดาวโหลดและติดตั้ง Docker Desktop จากที่นี่ https://www.docker.com/products/docker-desktop/
โดยในขั้นนี้ ผู้เรียนแต่ละคน สามารถเลือก OS ที่ตรงกับเครื่องของตนเองได้เลย
ให้ทำการกดติดตั้ง โดยสำหรับ Windows จะต้องติดตั้ง WSL2 ด้วย (ซึ่งทำในขั้นตอนก่อนหน้าไปแล้ว) แต่สำหรับ Mac, Linux ก็ลงแบบ Default Option ไปได้เลย
Pull code สำหรับเริ่มเรียน
ในการเรียนคอส SE for non-tech people วันที่สองนี้ จะใช้ source code จากที่นี่
https://github.com/T-T-Software-Solution/fishprevention
โดย code ชุดนี้เป็น private ให้นักเรียนที่ต้องการเรียน แจ้ง gihub user มาที่ผม เพื่อดึงเข้า repo เพื่อจะใช้ทำ lab ไปพร้อมๆกันนะครับ
โดยเมื่อ pull code ลงมาแล้ว จะได้แบบนี้
ให้เข้าไปที่พาท .\5.Tools\docker จากนั้น รันคำสั่งดังนี้
docker compose up -dถ้าไม่ติดปัญหาอะไร ก็น่าจะ start postgres, pgadmin, jasperserver ขึ้นมาได้
โดยเราสามารถเช็คการรัน จาก Docker Desktop จะเห็นดังนี้
ให้ทำการตรวจสอบที่ละระบบ ตามขั้นตอนดังนี้
ตรวจสอบ Pgadmin และ Postgres
ให้เข้าไปที่ URL ดังนี้ไปนี้ พร้อมกรอก user/password ด้านล่าง
URL: http://localhost:8089/
Username: admin@admin.com
Password: admin
หากสำเร็จจะเข้าสู่หน้าจอดังนี้, ให้เลือก Register -> Server โดยตรง name ใส่เป็น fishprevention (หรือชื่ออื่นก็ได้)
โดยใน tab Connection ให้ใส่แบบนี้ (รหัสผ่าน ใส่ admin)
กด Save, หากเรียบร้อย จะได้ดังนี้
สร้าง Database fishprevention
กลับไปที่ VS Code แล้วไปที่พาท .\3.Infra\App.Database ให้รันคำสั่ง ต่อไปนี้
dotnet ef database updateสำหรับเครื่องไหนที่ไม่เคยรันคำสั่งนี้ มันจะขึ้นแสดงผลการสร้าง database ใหม่ขึ้นมาซึ่งแตกต่างจากของเครื่องผม ที่มี DB อยู่แล้ว
เมื่อกลับไปตรวจสอบที่ pgadmin อีกครั้ง จะพบว่า db ถูกสร้างขึ้นมาแล้ว
ทดสอบรัน API
กลับมาที่ source code เข้าไปใน path .\4.Presentations\App.Api จากนั้น รันคำสั่ง ดังนี้
dotnet runหากเรียบร้อย, ควรจะแสดงดังนี้
และเมื่อเข้า URL https://localhost:58115/swagger/index.html ผ่านทาง browser ควรจะเห็น swagger ขึ้นมาดังนี้
ทดสอบรัน Web
กลับมาที่ source code เข้าไปใน path .\4.Presentations\App.Mvc จากนั้น รันคำสั่ง ดังนี้
dotnet runหากเรียบร้อย ควรแสดงขึ้นมา ดังนี้
และเมื่อเข้าสู่ URL https://localhost:58116/UserView/User ควรแสดงดังนี้ โดยในหน้าจอนี้ ผมได้ลองเพิ่มข้อมูลไว้แล้ว มันเลย เห็นข้อมูลตามภาพด้านล่าง
ให้ทดลองเล่น และเพิ่มข้อมูลไปเรื่อยๆ จนได้ข้อมูลคล้ายตัวอย่างนี้
เข้าใช้งาน Jasper Server
หลังจากรัน docker compose ขึ้นมาแล้ว, จะสามารถเข้าสู่ jasper server ได้ ผ่าน URL และ credential ดังนี้
http://localhost:8088/jasperserver/login.html
JASPERREPORTS_USERNAME: jasperadmin
JASPERREPORTS_PASSWORD: bitnami
เมื่อ login สำเร็จ จะพบหน้าจอดังนี้ โดยใน fishprevention ด้านล่าง ทางผมได้ configure report server เสร็จไว้ก่อนแล้ว จึงแสดงขึ้นมา, ของนักเรียน เมื่อเข้ามา มันจะยังไม่มี fishprevention folder เหมือนด้านล่างนี้
ติดตั้ง font ภาษาไทยให้ Jasper Server
ให้กลับไปที่ .\5.Tools\docker แล้วหาไฟล์ชื่อ setupFont.txt ซึ่งจะมีคำสั่งดังนี้
docker cp "TH Sarabun New.jar" jasperserver:/bitnami/tomcat/webapps/jasperserver/WEB-INF/lib
docker cp "TH SarabunPSK.jar" jasperserver:/bitnami/tomcat/webapps/jasperserver/WEB-INF/lib
docker compose stop
docker compose startให้รันคำสั่งจนครบ เพื่อให้ jasper server สามารถแสดงฟอนต์ ภาษาไทย ได้อย่าง ถูกต้อง
การกำหนด Data source ให้แก่ Jasper Server
เพื่อให้ jasper server สามารถเชื่อมต่อกับ database ได้ จะทำการกำหนดค่า ดังนี้
- สร้าง folder ชื่อ fishprevention (ไม่ได้แสดงในรูปด้านล่าง ให้กดเองได้เลย เพราะมันง่าย)
- กด Add Resource -> Data source
จากนั้นกำหนดค่า ดังนี้ โดย user/pass คือรหัสผ่านเพื่อต่อเข้า Database, หากกด Test Connction จนสำเร็จแล้ว แปลว่า ต่อ DB ได้แล้ว
การติดตั้ง Jaspersoft Studio เพื่อพัฒนา report
ให้ทำการดาวโหลดโปรแกรมจาก URL https://community.jaspersoft.com/download-jaspersoft/community-edition/
ระหว่างเรียนในคอสนี้ ขอให้ใช้เวอชัน 6 ก่อนตามกรอบแดง, นักเรียนสามารถดาวโหลดตาม OS ของเครื่องที่ใช้เรียน ได้เลย
โดยเมื่อติดตั้งเรียบร้อย จนสามารถเปิดโปรแกรมได้ จะพบดังนี้ โดยเวอชันของเครื่องผม จะเก่ากว่าในรูปข้างต้น เพราะติดตั้งมานานกว่า
เพื่อให้ jaspersoft studio สามารถแก้ไขภาษาไทยได้ ให้ดำเนินการ ดังนี้
ดาวโหลดฟอน ไทยสารบัญ จากที่ต่างๆเช่น
https://www.f0nt.com/release/th-sarabun-new/
https://www.f0nt.com/release/13-free-fonts-from-sipa/
จากนั้น ไปที่เมนูตามกรอบแดง
จากนั้น ทำการ Add font ตามขั้นตอนในกรอบแดง, โดยใส่ให้ครบทั้ง Normal, Bold, Italic, Bold Italic และอย่าลืมติกด้านล่างในกรอบแดง, จากนั้น กด Apply and cl
การเปิด Report เพื่อ Review
ในพาทของโปรเจค ให้สังเกตุว่า ไฟล์ jasper report อยู่ในพาท .\5.Tools\reports
ใน Jaspersoft Studio ให้กดเลือก Create new folder ตามตัวอย่างด้านล่าง
จากนั้นให้ใส่พาทและตั้งชื่อ ดังนี้
หากทำถูกต้อง จะสามารถเปิดรายงานมาแก้ไขได้ ดังนี้
การกำหนด Data Adaper ให้ Jasper Report
ใน tab Repository Explorer ให้ทำการ Create Data Adapter ดังนี้
โดยทำการใส่รายละเอียดตามด้านล่างนี้ โดย user/pass คือ รหัสที่ใช้ในการเข้า database (อ่านหัวข้อก่อนหน้า เกี่ยวกับ DB ประกอบ)
ถ้ากด Test แล้วขึ้นสำเร็จแบบนี้ แปลว่า ต่อได้สำเร็จ
ทำการเลือก DB ให้กับ Report โดยคลิกดังนี้
เลือก Connection ที่สร้างขึ้น
จากนั้น ทดลองดึงข้อมูลผ่าน รายงาน จะพบดังนี้ (ข้อมูลในกรอบแดง จะเกิดจาก ผมได้เพิ่มข้อมูลลงในโปรแกรมไว้ก่อนแล้ว)
การ publish Report ขึ้นไปที่ Jasper Server
ให้ทำการกำหนดค่า Report Server ใน Reporsitory ก่อน ดังนี้
จากนั้นกำหนดค่าตามลำดับ จนสำเร็จตามรูปด้านล่าง
จากนั้น ทำการ publish รายงานขึ้นไปบน server ดังนี้
ทำไปเรื่อยๆตามรูปข้างล่างนี้
หากเรียบร้อย เมื่อกลับไปเช็คที่ Jasper Report Server จะพบว่า มีรายงานชื่อ foundHistory โผล่ขึ้นมา ดังนี้
ทดสอบดูรายงานใน .NET Web Application
เข้าไปที่เมนู รายงานการพบปลา จะพบรายงานถูกแสดงอย่างถูกต้อง ตามรูปด้านล่าง
เมื่อดาวโหลดเป็น excel จะสามารถดูไฟล์ได้ ดังนี้
ในที่สุด ก็เขียนจนจบได้สักที ขอเอารูปในโครงการ JSD7 มาให้ดู เพื่อเป็นกำลังใจให้ทุกท่านที่พยายามจะเปลี่ยนสายอาชีพ มาเข้าสู่สาย Tech ให้ประสบความสำเร็จ กันทุกคน นะครับ
