SE for non-tech day 03

สวัสดีคับ วันนี้ เป็นคอส SE for non-tech วันที่ 3 ซึ่งเป็น private class แบบฟรี จัดเพื่อให้คนที่ไม่ใช่สาย tech แล้วต้องการศึกษางานทางด้าน Software Engineer แบบรวบรัด เน้นมีของ deliver ได้, custom code ได้ เพื่อนำเสนอลูกค้าได้แบบเร็วๆ

หลังจาก day 02 ที่ได้เรียนรู้โครงสร้าง project และการรันในเครื่องไปเบื้องต้นแล้ว วันนี้ เป็นการเรียนครั้งที่ 03 เราจะมาเรียน การสร้าง application แบบรวบรัด โดยการใช้โปรแกรม Gen code ออกมา แล้วมา custom เพื่อให้ตรงตามความต้องการลูกค้ามากขึ้น กันคับ โดยวันนี้ จะเรียนกัน 2 อย่าง

1. การเจนโค๊ด เพื่อสร้างระบบขึ้นมา
2. การสร้าง report เพื่อนำไปใช้ในระบบที่จัดทำ

อนึ่ง การเรียนใน class นี้ เป็นเน้นการปฏิบัติและส่งการบ้าน, บทความนี้ จะเขียนเพื่อเป็นเอกสารอ้างอิงและคู่มือการเรียนการสอนเท่านั้น, หากท่านอ่านบทความนี้ แล้วมีความสนใจ สามารถติดต่อผมได้ เพื่อเข้าคลาสที่อาจจะจัดรอบถัดๆไปคับ

ทำความเข้าใจ วิธีการ Gen Code กันก่อน

ในตัวอย่างโปรเจค จะมีพาทที่มี excel ที่เป็นตัวอย่างในการเจน code ที่ใช้ในโปรแกรม ขึ้นมา ดังนี้

เมื่อเปิด User.xlsx ขึ้นมา จะพบดังนี้

จากข้างต้น จะสามารถอธิบายคอลัมต่างๆ ได้ดังนี้

• Column Name — ชื่อคอลัมที่จะใช้ในการสร้าง column ใน database และสร้าง UI id, API parameter และอื่นๆ
• Data Type — ประเภท data type ที่จะใช้งาน โดยอ้างอิงภาษา C#
• Size — ขนาดของข้อมูลที่เก็บ, ในกรณี string จะเป็นขนาดความยาวตัวอักษรที่เก็บได้, ในกรณีอื่นๆ เช่น decimal/double/float, จะเป็นขนาดตัวเลขและทศนิยม ที่เก็บได้
• Primary Key — มีค่าได้ 3 แบบ ได้แก่ yes คือ เป็น primary key ใน database, name เป็นคอลัมที่เป็นตัวแทนในการเรียกขานของข้อมูล ใน row ดังกล่าว, search เป็นคอลัมที่กำหนดให้ มีการ gen code ให้ support การ search ด้วย
• FK — เป็นชื่อตารางอื่น ที่มีความเชื่อมโยงถึงกัน
• UI — เป็นประเภทของ User Interface ที่ต้องการจะให้ Gen เป็น Code ขึ้นมา เช่น TextBox, CheckBox, HiddenField
• MultiSelectionTable — ไม่ได้ใช้แล้ว
• Desc — เป็นคำอธิบายเป็นภาษาไทย ว่าคอลัมดังกล่าว มีชื่อเรียกว่าอย่างไร และจะใช้ในการ Gen เป็น Label ใน UI
• Desc EN — เป็นคำอธิบายเป็นภาษาอังกฤษ ว่าคอลัมดังกล่าว มีชื่อเรียกอย่างไร, ทำเพื่อ support 2 language application (แต่ในคลาสนี้ จะเรียนกันแค่ ภาษาเดียว เพื่อความง่าย)
• row — ตำแหน่งใน UI ที่ต้องการให้ Control ไปโผล่
• column — ตำแหน่งใน UI ที่ต้องการให้ Control ไปโผล่
• length — ความยาวของ UI โดยวัดเกณฑ์หลัก grid 12 column
• on grid — ในหน้าจอที่เป็นตารางแสดงรายการ จะให้แสดงคอลัมข้อมูลให้เห็นหรือไม่

ทำความเข้าใจผลลัพท์ที่ Gen ออกมาแล้ว

ให้ทำการเปิดไฟล์ FoundHistory.xlsx ขึ้นมา จะพบดังนี้

จาก excel ข้างต้น เมื่อเจนเป็นโปรแกรมออกมาแล้ว, จะมีหน้าตา UI ดังนี้,

• โดยที่มี “รายละเอียดเพิ่มเติม” โผล่มาให้ค้นหา เพราะว่า ใน excel, ถ้ามีค่าใดๆในคอลัม Primary Key จะทำให้มีการ search เสมอ
• คอลัมที่แสดงในตาราง จะตรงกับ excel ที่มีการกำหนด on grid เป็น yes

โดยเมื่อกดเพิ่ม หรือ แก้ไข จะพบ UI ดังนี้

เมื่อเปิด Swagger ขึ้นมา ผ่าน URL ข้างล่างนี้ จะพบรายละเอียด API ตามภาพ

https://localhost:58115/swagger/index.html

เมื่อกดดู พารามิเตอร์ ในเมธอด GetListBySearch จะพบว่า มีการค้นหาข้อมูลด้วย id และ note เพราะว่า ใน excel, ถ้ามีค่าใดๆในคอลัม Primary Key จะทำให้มีการ search เสมอ

วิธีการใช้งานโปรแกรม Gen Code

ให้ติดต่อขอโปรแกรมจาก พี่ต้น TTSS ซึ่งเมื่อได้ไปแล้ว จะได้โปรแกรม หน้าตาแบบนี้

ให้เปิดไฟล์ config.xlsx ขึ้นมา จะพบดังนี้, โดย ให้แก้ไข ดังนี้

• rootpath — แก้ไขเป็น พาท ที่มีไฟล์ excel ต้นแบบที่จะใช้เจนเป็น code
• targetpath — แก้ไขเป็น พาท ที่ใช้สำหรับเก็บผลลัพท์ของไฟล์ source code ที่จะ export ออกมา

เมื่อกำหนดค่าแล้ว ทำการรันโปรแกรม ดังนี้

โดยเมื่อ ไปที่พาท ที่เราตั้งให้เป็น output เราจะพบดังนี้

การเอา code ไปใส่ใน project

เมื่อเจน code ขึ้นมาแล้ว

ให้ทำการ copy code ไปวางตามตำแหน่งต่างๆดังรูป

หลังจากนั้น ให้รันคำสั่งดังนี้ใน พาทของ .\3.Infra\App.Database โดยให้แก้ไข DemoCommandForTraining ให้เป็นชื่อ migration ที่เราต้องการจะตั้ง

dotnet ef migrations add DemoCommandForTraining
dotnet ef database update

เมื่อรันแล้ว ควรจะได้ดังนี้

โดยหลังจากรันแล้ว, เมื่อตรวจเช็คใน DB ก็จะพบ migration ใหม่ แสดงขึ้นมา ดังนี้

การสร้าง Report ใหม่

เมื่อเราทำการ Gen Code ขึ้นมาแล้ว และต้องการสร้าง Report ใหม่ เราสามารถทำดังตามขั้นตอนดังนี้ (ในขั้นตอนต่อไปนี้ จะทำต่อจากสิ่งที่ setup ไว้ใน day02 นะครับ)

ในตัวอย่างนี้ เราจะสร้างรายงานง่ายๆ ในการไปดึงข้อมูลจากตาราง ActionType มาแสดง นะครับ

ออกแบบรายงานอย่างง่าย

ทำการลากฟิล ลงมาวางในกรอบแดงตามตัวอย่าง

เปลี่ยนฟอนเป็นภาษาไทย

กด Preview

Publish ขึ้น Report Server

ทำตามขั้นตอนใน Day02 ดังนี้

การตรวจสอบรายงานใน jasper server

ทำตามขั้นตอนใน Day02 โดย login เข้าไปใน jasper server จะพบว่า มีรายงานใหม่ โผล่มา ดังนี้

กดดับเบิลคลิก เพื่อดูรายงาน

การเอารายงาน ไปใส่ใน Web Application

ให้เปิด code API ของ ActionType ดังนี้ โดยตัว โปรแกรม Gen Code มันจะเจน API + Service เพื่อรองรับการให้บริการรายงานไว้แล้ว โดยแก้ไขตรงกรอบแดง เป็นชื่อรายงาน ที่เราต้องการ

แก้ไขตามกรอบแดง แล้วรัน API ใหม่ ดังนี้

ให้เปิดโค๊ด MVC ขึ้นมา, มันจะมี endpoint ที่เชื่อมกับหน้าแสดงรายงาน อยู่แล้ว

ให้ลบคอมเม้นออก ตามกรอบแดง แล้วรันโปรแกรมขึ้นมาใหม่

จากนั้น ให้เข้า URL ตามข้างล่างนี้ จะพบหน้าจอ report แสดงขึ้นมา

https://localhost:58116/ActionTypeView/ActionType_report

ทำการเพิ่มเมนูใหม่ เข้าไปในระบบงาน

เราจะเพิ่มเมนูด้านซ้ายเข้าไป โดยเปิดไฟล์ และหาตำแหน่งโค๊ด ดังรูป

ให้ทำการเพิ่ม code เข้าไป ดังนี้ แล้วรันโปรแกรมใหม่

เมื่อเปิดโปรแกรมขึ้นมา จะพบเมนูใหม่ ดังนี้

ข้อควรระวังของการใช้ Source Gen

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

จบบทความของ SE for non-tech day 03 แล้วนะครับ เขียนจบตอนเที่ยงพอดี เตรียมสอนสด ตอนช่วงบ่ายวันนี้, ขอให้ผู้สนใจ ตั้งใจทำ lab เพื่อจะได้ทำเป็นกันไวๆ แล้วในครั้งถัดไป เราจะมาเรียน advance custom กันนะครับ

สุดท้าย ขอส่ง น้องดิว เป็นตัวแทนหมู่บ้าน TTSS ในการส่งมอบ กำลังใจ ให้ทุกคน ที่ต้องการเปลี่ยนแปลงตัวเอง นะครับ