โบนัส-66209030001

  สัปดาห์ที่ 8 เเละ 9:  หลังนำเสนอโปรเจคต์จริงกับผู้จัดการเเล้ว เขาต้องการใช้เเค่ภาษาญี่ปุ่นเท่านั้น ส่วนฟีเจอร์ Auth อาจจะมีในอนาคต   ซึ่งหลังจากนี้จะได้วางเเผนสร้างรายละเอียดเเต่ละหัวข้อเเบบเเยกหน้า โดยผมได้รับมอบหมายให้ทำหน้า IT System เป็นเนื้อหาที่ 5( เพิ่มจาก Mindmap เดิมที่เคยทำสัปดาห์ก่อน ) เเละนี่คือหน้าเว็บที่ผมสร้างขึ้นมา   หลังส่งไฟล์รวมโปรเจคต์เเล้ว ได้ปรึกษาเพื่อนร่วมงานให้เเก้ไข UX UI เล็กน้อย เเละนำเข้ารูปภาพจากบริษัทจริง เพื่อให้ธีมเข้ากับเว็บจริงนั่นเอง

  สัปดาห์ที่ 8:  ตอนนี้พวกเราได้รับเค้าโครงเว็บไซต์จากลูกค้าเเล้ว ต่อไปเพื่อนร่วมทีมเริ่มวางเเผนเเบ่งหน้าที่กันทำเพจคนละหน้า โดยหน้าที่ผมทำ คือ  ContactPage( หน้าส่งความคิดเห็นเเละช่องทางการติดต่อ) ซึ่งใช้เวลาไม่นานก็เสร็จ เเล้วได้เรียนรู้วิธีนำเข้าไอคอนด้วย react-icons ซึ่งทำให้เว็บดูมืออาชีพไปอีกระดับนึง   ในครั้งนี้ ยังได้ใช้ความคิดสร้างสรรค์ในการตั้งชื่อ style ในเเต่ละองค์ประกอบ เพื่อไม่ให้มี CSS ซ้ำเวลารวมไฟล์กับเพื่อนอีกด้วย

   สัปดาห์ที่ 7: ต่อจากโปรเจคต์เดิม ผมได้นำโลโก้จากบริษัทจริงเข้ามาเเทนไอคอน vite เรียบร้อย เเละได้เพิ่มฟีเจอร์เเปลภาษาด้วยโมดูล i18n โดยให้ทั้งเว็บสามารถเเปลภาษาอังกฤษเเละภาษาญี่ปุ่นได้ ดังภาพ    นอกจากนี้ ผมได้ Deploy บนเซิร์ฟเวอร์จริงเพื่อให้เว็บโหลดเร็วขึ้น เเละการันตีว่าโค้ดไม่มีปัญหาหลังใช้คำสั่ง npm run build หน้าเว็บที่ deploy เเล้ว >>   Ken Rack System เเก้ไขสัปดาห์ที่ 2

สัปดาห์ที่ 6:  ผมรู้สึกว่าเริ่มได้รับประสบการณ์อย่างเต็มรูปเเบบเเล้ว😯 ครั้งนี้จะได้ทำงานเป็นทีมเพื่อสร้างโปรเจคต์ให้บริษัทหนึ่งของญี่ปุ่น  พวกเราได้เเบ่งหน้าที่กัน โดยจัดการ Frontend 5 คน , จัดการ Backend เเละ Database 4 คน  โดยจะบอกความคืบหน้า , อธิบายรายละเอียดหน้าเว็บที่ทำปัจจุบัน , โครงสร้างเเละเทคโนโลยีที่ใช้ , สรุปเเละเเผนในอนาคต ซึ่งผมได้ช่วยปรับเเต่งหน้านำเสนอให้ดูทันสมัยยิ่งขึ้น    โดยครั้งนี้ ผมเป็นผู้ที่ออกเเบบอินเทอร์เฟซหน้าเว็บหลักโดยมีคุณสมบัติเป็น Dynamics MindMap โดยเมื่อคลิกที่แต่ละวงกลมใน MindMap จะแสดงรายละเอียดของ Initiative นั้นๆ ทางด้านขวา จัดวางองค์ประกอบอย่างลงตัว รวมถึงได้เชื่อมหน้าล็อกอินจากเพื่อนร่วมทีมอีกด้วย เเผนต่อไปต้องรอ backend, ไฟล์ .env จากเพื่อนร่วมงาน เพื่อเชื่อม API เเละพัฒนาส่วนหน้าอื่นต่อหากเข้าใจจุดประสงค์อย่างเเน่นอน เครดิตงานเเละภาพประกอบ :   Gamma (ไฟล์ที่ดำเนินงาน)     Google Slide (ไฟล์ที่ส่งงาน)  

สัปดาห์ที่ 5: ผมได้ปรับปรุงโปรเจคต์เครื่องคิดเลขครั้งใหญ่ โดยเเยกส่วนโฟลเดอร์ ฝั่งจัดการประวัติ(Backend) , ฝั่งหน้าเว็บ(Frontend) เเละ ฝั่งทดสอบระบบ(Playwright) นอกจากนี้ ยังเขียน Use Case+User Scenerio+Test Case เพื่อบอกหลักการใช้หรือจำลองการใช้เเอปในสถานการณ์ใดได้บ้าง ต่อมา ผมได้ทำให้โปรเจคต์นี้เป็น Desktop App ด้วย ElectronJS สังเกตจากมีเเอปใหม่ปรากฏบน Taskbar เเละปรับเเต่ง UI ให้ดูเป็นระเบียบ สวยงามมากขึ้น  

สัปดาห์ที่ 4 : วันนี้ผมได้เรียนรู้การเขียน TestScript ด้วย Playwright ในโปรเจคต์เครื่องคิดเลขเดิมเพื่อทดสอบว่าเครื่องคิดเลขนั้นทำงานถูกต้องจริงหรือไม่ในทุกกรณี ซึ่งจากภาพตัวอย่างที่ผมเขียน ผมได้ลองทดสอบผลบวก(1️⃣➕1️⃣ = 2️⃣) , ทดสอบผลลบ(2️⃣➖2️⃣ = 0️⃣) , ทดสอบผลคูณ(2️⃣✖️2️⃣ = 4️⃣) ทดสอบผลหาร(🔟➗2️⃣ = 5️⃣) เเละทดสอบปุ่มเคลียร์ผลลัพธ์(©️) ซึ่งตอนนี้ทดสอบออกมาผ่านทั้งหมดทั้งบน Chromium, Firefox, และ WebKit จึงยืนยันเเล้วว่าโปรเจคต์เครื่องคิดเลขของสัปดาห์ที่ 3 นั้นใช้งานได้จริง   (ปล.คลิก READ MORE เพื่อดูผลการทดสอบผ่านเบราว์เซอร์)

  สัปดาห์ที่ 3 : ผมได้ทำเว็บเเอปเครื่องคิดเลขที่สามารถคำนวณ(➕➖✖️➗)ได้ ยังมีคุณสมบัติบันทึกประวัติการคำนวณไว้ในไฟล์ JSON อีกด้วย เเละครั้งนี้ผมได้เรียนรู้การเปิดหน้าเว็บเเบบ Allow all network โดยผมเลือกใช้ ngrok เพราะเป็นวิธีที่ ง่าย รวดเร็ว ผู้ที่มีลิงก์สามารถเข้าได้โดยไม่จำเป็นต้องอยู่ Wi-Fi วงเดียวกัน เเละเมื่อปิด server หน้าเว็บจะหายเเต่ประวัติการคำนวณจะไม่หายไป ซึ่งเป็นอะไรที่ปลอดภัยมาก

สัปดาห์ที่ 2 : ผมได้ศึกษาโปรเจคต์ React + Vite เเละครั้งนี้ผมได้ตกเเต่ง UI ด้วย CSS เเละ bootstrap เเบบที่เคยเรียนจากวิทยาลัยด้วย ซึ่งผมได้ทดลองทำเว็บไซต์ฟังก์ชันการ์ดที่วนลูปด้วย .map() โดยเเบ่งเเยกส่วน Navbar เเละตารางที่เเสดง Cards เเบบ Carousel  ถ้าอยากให้เพิ่มการ์ดอีกบอกได้นะครับ ✈️🧳🛂

  สัปดาห์ที่ 1 :  ต่อมาผมก็ได้ศึกษาโปรเจคต์โดยมีทั้ง Backend(Node.js) เเละ Frontend(React Vite) รวมถึงเริ่มเรียนรู้การใช้ MySQL โดยครั้งนี้ ผมได้ทำระบบ workshop ผ่านเว็บไซต์โดยใช้โมดูล prisma ในการสร้างตารางในฐานข้อมูล เเละทดสอบ CRUD ด้วย postman เพื่อเรียก api ส่งข้อมูลไปยังหน้าเเอป

สัปดาห์ที่ 1  : ผมได้เริ่มศึกษา Express.js อีกครั้ง ซึ่งเป็นโมดูลที่จำเป็นต้องมีสำหรับ Node.js โดยจากภาพนี้ฉันได้ทำระบบบันทึกรายชื่อผู้ใช้งาน โดยที่ยังไม่มี Frontend เเต่จะใช้ไฟล์ .html เเละ .css เเทน ซึ่งมีจุดประสงค์ คือ เเสดงข้อมูลเเบบ JSON หลังเพิ่มผู้ใช้สำเร็จ  เเละวันนี้ผมได้รู้จักกับ Postman เป็นเว็บที่สามารถทดสอบ CRUD(Create , Read , Update , Delete) ด้วยการเชื่อม Route เเละส่ง API โดยเมื่อทำการจัดการข้อมูลผู้ใช้สำเร็จ postman ก็จะส่ง JSON กลับมา ทำให้รายชื่อบนเว็บไซต์ถูกอัปเดตด้วยเช่นกัน

          (こんにちは! Japan System Co.Ltd🔴) ผมเป็นนักศึกษาระดับประกาศนียบัตรวิชาชีพชั้นปีที่ 3 สาขาคอมพิวเตอร์โปรเเกรมเมอร์ จากสถาบันการศึกษาเเห่งหนึ่ง ผมรู้สึกเป็นเกียรติอย่างยิ่งที่ได้มาเป็นนักศึกษาฝึกงานที่นี่ วันเเรกได้ติดตั้ง Node.js เวอร์ชันล่าสุด เเละติดตั้ง MySQL ซึ่งเป็นระบบฐานข้อมูลที่ทางบริษัทใช้ นับได้ว่าเป็นการปฐมนิเทศที่ดี งานไม่ยากเเละไม่ง่ายจนเกินไป หวังเป็นอย่างยิ่งว่า ผมจะได้ประสบการณ์ที่หลากหลายหลังฝึกงานเสร็จสิ้น เเละนำไปพัฒนาตนเองในอนาคตให้ดียิ่งขึ้น 🎓🧑‍💻