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 อย่าง
- การเจนโค๊ด เพื่อสร้างระบบขึ้นมา
- การสร้าง 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 ในการส่งมอบ กำลังใจ ให้ทุกคน ที่ต้องการเปลี่ยนแปลงตัวเอง นะครับ