สร้างไฟล์ Setup.exe หรือ Install.exe ให้กับโปรเจ็คของเรากันเถอะ

สวัสดีครับ วันนี้เราจะมาสร้างไฟล์สำหรับติดตั้ง (Install) โปรเจ็คของเรา ไม่ว่าจะเป็นเกม  บทเรียนสำเร็จรูป (CAI) หรือโปรเจ็คงานอื่นๆ ที่ต้องการให้เพื่อนหรือผู้สนใจนำไปติดตั้งลงในเครื่องคอมพิวเตอร์ของเขา สะดวกและอย่างง่ายดาย เช่นเดียวกับการติดตั้งโปรแกรมอื่นๆ  ก่อนอื่นเราต้องจัดเตรียมทรัพยากรกันก่อนนะครับ

1.  ทำการส่งออกไฟล์ (Export) ให้อยู่ในรูปแบบ NW.js

2. เมื่อส่งออกเรียบร้อยให้ทำการสร้างโฟล์เดอร์ชื่อ icons ไว้ในโฟล์เดอร์งานที่เราต้องจะนำไปทำไฟล์ติดตั้ง ในที่นี้คือ โฟลเดอร์ win32

3. คัดลอกไฟล์ icon ไปเก็บไว้ในโฟล์เดอร์ icons และเปลี่ยนชื่อเป็น myicon.ico

4. ติดตั้งโปรแกรม Inno Setup Compiler  ดาวน์โหลดได้ที่นี่ http://jrsoftware.org/download.php/is.exe เป็นโปรแกรมที่ใช้รวมไฟล์งานของเราทั้งหมดให้เป็นไฟล์เดียว

5. เมื่อติดตั้งเสร็จสมบูรณ์ ให้เปิดโปรแกรม Inno Setup Compiler ขึ้นมา

6. คลิกเลือก Cancel เพื่อปิดหน้าต่างต้อนรับ

7. เลือก เมนู File > New

8. คลิก Next

9. ใส่ชื่อแอ็พพลิเคชัน เวอร์ชัน และรายละเอียดต่างๆ ลงในช่องดังตัวอย่าง แล้วคลิก Next

10. ขั้นตอนนี้ไม่ต้องปรับแต่งอะไร คลิก Next ทำขั้นตอนต่อไป

11. คลิก Browse… เพื่อเลือกหรือค้นหาที่เก็บไฟล์ .exe โปรเจ็คของเรา (nw.exe)

12. คลิก Add folder… เพื่อเลือกโฟลเดอร์ที่เก็บงานของเราทั้งหมด ในที่นี้คือ win32

13. คลิก Yes เพื่อดำเนินการต่อไป

14. เมื่อเลือกไฟล์ปฏิบัติการหลัก และโฟลเดอร์ต่างๆ ของโปรแกรมที่จะรวบรวมเรียบร้อยแล้ว ให้คลิก Next เพื่อทำขั้นต่อไป

15. คลิกเลือกกล่องรายการดังตัวอย่างในรูป จากนั้นให้คลิก Next ทำขั้นต่อไป

16. เลือกที่อยู่ของไฟล์ต่างๆ จากนั้น คลิก Next

17. เลือกภาษาสำหรับการติดตั้งโปรแกรมของคุณ

18. ตั้งค่าต่างของไฟล์งานของคุณ

  • เลือกปลายทางของที่เก็บไฟล์ติดตั้งของคุณ
  • ตั้งชื่อไฟล์งานของคุณ
  • เลือกที่เก็บไฟล์ icon เพื่อแสดงเป็นสัญลักษณ์งานของคุณ
  • รหัสผ่านในการติดตั้งงานของคุณ (ถ้ามี)

เมื่อใส่ข้อมูลครบแล้วให้คลิก Next เพื่อทำงานต่อไป

19. คลิก Next เพื่อทำงานต่อไป

20. คลิก Finish เพื่อยืนยันการตั้งค่าทั้งหมด

21. สำหรับในขั้นตอนนี้ให้คลิก No เพื่อแก้ไขสคริปต์บางส่วน

22. ค้นหาบรรทัด [Icons] แล้วแก้ไขดังนี้ [เพื่อให้หลังการติดตั้งโปรแกรมของคุณ (Setup หรือ Install) ไอคอนที่แสดงบนหน้าจอและบนเมนูบาร์ แสดงเป็นรูปไอคอนของคุณเอง]

[Icons]
Name: "{group}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; IconFilename: "{app}\icons\myicon.ico";
Name: "{group}\{cm:UninstallProgram,{#MyAppName}}"; Filename: "{uninstallexe}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; IconFilename: "{app}\icons\myicon.ico";  Tasks: desktopicon
Name: "{userappdata}\Microsoft\Internet Explorer\Quick Launch\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: quicklaunchicon

 

23. เมื่อแก้ไขเสร็จเรียบร้อย เลือกแถบเมนู Build > Compile

24. เลือก Yes ถ้าต้องการเลือกสถานที่เก็บไฟล์สคริปต์  ถ้าไม่ต้องการให้เลือก No

25. รอการดำเนินการเสร็จสิ้น คุณสามารถสังเกตดูความคืบหน้าในการรวบรวมได้จากแถบสีเขียวด้านล่าง

26. เมื่อดำเนินการเสร็จสิ้น ให้เปิดโฟล์เดอร์เก็บไฟล์ Setup.exe โดยเลือกแถบเมนู Build > Open Output Folder

27. เมื่อเปิดโฟลเดอร์จะพบไฟล์สำหรับติดตั้งโปรเจ็คของเราดังรูป

28. เสร็จสิ้นกระบวนการการทำไฟล์ติดตั้ง (Install) วิธีการนำไปใช้เพียงแค่ดับเบิ้ลคลิกที่ไฟล์ Setup.exe เหมือนการติดตั้งโปรแกรมหรือซอฟต์แวร์อื่นๆ จากนั้นทำตามขั้นตอนจนเสร็จสิ้นกระบวนการ ก็เป็นอันเรียบร้อย

ขอให้ทุกท่านสนุกกับการทำงานนะครับ แล้วพบกันใหม่

สวัสดีครับ

ตัวอย่างงานที่ทำเสร็จแล้ว =>> https://drive.google.com/open?id=1zdF…

ดาวน์โหลด Icon ฟรี =>> http://www.iconarchive.com/

ดาวน์โหลดโปรแกรมรวมไฟล์ที่นี่ =>> http://jrsoftware.org/download.php/is.exe