จะพัฒนาแอพ Desktop โดยใช้ HTML / CSS / JavaScript ได้อย่างไร? [ปิด]

189

ก่อนอื่นฉันไม่สนใจที่จะทำสิ่งนี้อย่างมืออาชีพ ฉันเป็นผู้พัฒนาเว็บซึ่งเป็นเพื่อนร่วมงานของฉันที่เพิ่งออกจาก Spotify และบอกว่าเขาจะทำงานส่วนใหญ่ใน JavaScript สำหรับแอพ Spotify Desktop เขาบอกว่ามันใช้ "เฟรม Chrome" และทุกอย่างภายในทำเหมือนกับแอปพลิเคชันเว็บ (HTML / JS / CSS)

ในฐานะนักพัฒนาเว็บที่ไม่เคยสร้างอะไรให้กับ Desktop นี่เป็นข่าวดี หากฉันสามารถใช้เทคโนโลยีที่ฉันรู้จักและนำไปใช้ได้จริงภายในเฟรม "" และยังสามารถสร้าง windows หรือแอพข้ามแพลตฟอร์มที่ดีกว่าได้

ฉันรู้ว่าฉันไม่ได้พูดถึงอะไรเกี่ยวกับฐานข้อมูล แต่แม้แต่แอป Hello World บนเดสก์ท็อปที่เรียบง่ายพร้อมเทคโนโลยีเว็บก็ดีสำหรับการเริ่มต้น

ดังนั้นหนึ่งจะไปเกี่ยวกับเรื่องนี้ได้อย่างไร ฉันต้องมีอะไรบ้าง / จำเป็นต้องรู้อย่างแน่นอน

javascript  html  css  desktop-application 
— TK123
แหล่งที่มา
ควรสังเกตว่ามีอย่างน้อยสองระดับที่ไม่ผูกขาดของ web-app-iness หนึ่งอาจเป็นแอพพลิเคชั่นสไตล์ไคลเอ็นต์แบบหน้าเดียวและอีกหนึ่งแอปนั้นเป็นแอปที่รักษาสถานะด้วยฐานข้อมูลหรือบางสิ่งบางอย่าง (แน่นอนว่าแอพที่ดีที่สุดคือทั้งคู่) คุณสามารถเรียนรู้วิธีการทำโดยไม่ต้องเรียนรู้เกี่ยวกับแอปอื่น
— Waleed Khan
อีกเธรดที่เกี่ยวข้องที่นี่ [คุณสามารถทำการพัฒนาเดสก์ท็อปโดยใช้ JavaScript ได้หรือไม่] [1] [1]: stackoverflow.com/questions/109399/… ขอแสดงความนับถือเบ็น
— benbai123 123
คุณทำผิด เว็บไม่ได้ออกแบบมาสำหรับแอปเดสก์ท็อป Period.If คุณต้องการคุณสามารถใช้ QML / QtQuick ซึ่งเป็นการปิดดี ( แต่ก็ยังคงสก์ท็อปไม่เว็บ!)
— เตฟ
— Zhang LongQI
6
— emlai

คำตอบ:

74

คุณอาจเริ่มต้นด้วย Titanium สำหรับเดสก์ท็อป dev นอกจากนี้คุณอาจดูChromium Embedded Frameworkด้วย มันเป็นเว็บเบราว์เซอร์ที่ควบคุมโดยอาศัยโครเมียม

มันเขียนใน C ++ เพื่อให้คุณสามารถทำสิ่งต่าง ๆ ในระดับต่ำ OS ที่คุณต้องการ (คำรามไอคอนถาดเข้าถึงไฟล์ในเครื่องพอร์ต com ฯลฯ ) ในแอปคอนเทนเนอร์ของคุณจากนั้นตรรกะแอปพลิเคชันและ gui ทั้งหมดใน html / javascript อนุญาตให้คุณดักจับการร้องขอ http ใด ๆ เพื่อให้บริการทรัพยากรท้องถิ่นหรือดำเนินการบางอย่างที่กำหนดเอง ตัวอย่างเช่นคำขอไปยังhttp://localapp.com/SetTrayIconState?state=activeอาจถูกดักโดยคอนเทนเนอร์จากนั้นเรียกใช้ฟังก์ชัน C ++ เพื่ออัปเดตไอคอนถาด

นอกจากนี้ยังช่วยให้คุณสร้างฟังก์ชั่นที่สามารถเรียกได้โดยตรงจาก JavaScript

การ debug JavaScript โดยตรงใน CEF ทำได้ยากมาก ไม่มีการสนับสนุนอะไรเช่น Firebug

คุณอาจลองใช้AppJS.com (ช่วยในการสร้างแอปพลิเคชันเดสก์ท็อปสำหรับ Linux, Windows และ Mac โดยใช้ HTML, CSS และ JavaScript)

นอกจากนี้ตามที่ระบุไว้โดย @Clint ทีมงานที่brackets.io (Adobe) ได้สร้างเชลล์ที่ยอดเยี่ยมโดยใช้ Chromium Embedded Framework ที่ทำให้เริ่มต้นได้ง่ายขึ้นมาก มันถูกเรียกว่าเชลล์วงเล็บ: github.com/adobe/brackets-shellค้นหาเพิ่มเติมเกี่ยวกับที่นี่: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

— อัลเฟรด
แหล่งที่มา
3
CEF มีเครื่องมือ dev dev ในตัวเพื่อให้คุณสามารถใช้เพื่อดีบัก js AppJS มีการเข้าถึง OS ในระดับต่ำโดยใช้ nodejs API
— Morteza Milani
1
ทีมงานของ Bracket.io (Adobe) สร้างเชลล์ที่ยอดเยี่ยมโดยใช้ Chromium Embedded Framework ซึ่งทำให้เริ่มต้นได้ง่ายขึ้นมาก มันถูกเรียกว่า shell brackets: github.com/adobe/brackets-shell ค้นหาเพิ่มเติมเกี่ยวกับที่นี่: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
— Clint
ขณะนี้ฉันใช้ CEF และ Eclipse เป็นเครื่องมือ dev และเป็นไปได้ที่จะเชื่อมโยง CEF กับ Chrome Developper Tools โดยผ่าน --remote-debugging-port = 8080 เพื่อกำหนดค่าการเรียกใช้สำหรับโปรแกรม args จากนั้นไปที่ localhost: 8080 ใน Chrome . ดังนั้นโปรดลบส่วนที่ยากต่อการดีบัก JavaScript โดยตรงใน CEF ไม่มีการสนับสนุนอะไรเช่น Firebug -
— ควั่นเด็ก
นอกจากนี้ฉันเริ่มพัฒนา Kontena コンテナgithub.com/jhg/kontenaเพื่อพัฒนาโซลูชันสำหรับ Win32, Linux, Unix like, Mac และสมาร์ทโฟนที่จะใช้ใน CEF, PhoneGap, Backet.io ของ Adobe, AppJS เป็นต้น มันไม่เสถียรและมีเพียงต้นแบบในขณะนี้เพื่อรับ MVP ถูกเขียนใน Python สำหรับแนวคิดการทดสอบ แต่จะแปลรหัสเป็น C ++ / C ด้วย QT5 (ตอนนี้ใช้ QT4) และเมื่ออยู่ใน C ++ / C เริ่มแปลสำหรับมือถือ สนับสนุน.
@JHG เป็นงานที่ดี .. แจ้งให้เราทราบเมื่อมีการเปิดตัวอย่างเป็นทางการและแก้ไขข้อผิดพลาด
— alfred
33

NW.js

(ก่อนหน้านี้รู้จักกันในชื่อว่า node-webkit)

ฉันจะแนะนำNW.jsหากคุณคุ้นเคยกับ Node หรือมีประสบการณ์กับ JavaScript

NW.js เป็นแอปรันไทม์ของแอปโดยใช้ Chromium และ node.js

คุณสมบัติ

  • แอพที่เขียนด้วย HTML5, CSS3, JS และ WebGL ที่ทันสมัย
  • รองรับ Node.js APIs และโมดูลบุคคลที่สามอย่างสมบูรณ์
  • ประสิทธิภาพที่ดี: การทำงานของโหนดและ WebKit ในเธรดเดียวกัน: การเรียกใช้ฟังก์ชันจะทำให้ตรงไปตรงมา วัตถุอยู่ในกองเดียวกันและสามารถอ้างอิงซึ่งกันและกันได้
  • ง่ายต่อการบรรจุและกระจายแอพ
  • พร้อมใช้งานบน Linux, Mac OS X และ Windows

คุณสามารถค้นหา NW.js ซื้อคืนภาคที่นี่และแนะนำที่ดีใน NW.js ที่นี่ หากคุณชอบการเรียนรู้Node.jsฉันอยากจะแนะนำโพสต์ SO นี้พร้อมกับลิงค์ที่ดีมากมาย

— Rawa
แหล่งที่มา
2
หนุน เครื่องมือที่ยอดเยี่ยม
— Erik Reppen
แต่สิ่งนี้ไม่สามารถกระจายระหว่างคนโดยไม่ต้องขอให้ติดตั้งโหนดและ node-webkit ใช่ไหม
— Jānis Gruzis
@ JānisGruzisไม่มีคุณส่งแอปของคุณกับ NW.js ไบนารี
— ประมาณ
27

Awesomiumทำให้ง่ายต่อการใช้ HTML UI ในแอป C ++ หรือ. NET

ปรับปรุง

คำตอบก่อนหน้าของฉันล้าสมัยแล้ว ทุกวันนี้คุณคงไม่บ้าที่จะใช้อิเลคตรอนในเรื่องนี้ แอพเดสก์ท็อปยอดนิยมจำนวนมากได้รับการพัฒนาขึ้นมา

— Ronnie Overby
แหล่งที่มา
16

หมายเหตุ: AppJSเลิกใช้แล้วและไม่แนะนำอีกต่อไป

ลองดูที่NW.jsแทน

— Siwei Shen 申思维
แหล่งที่มา
3
สิ่งนี้ดูเหมือนจะเลิกใช้แล้วโดยผู้สร้าง appjs
— Dan Esparza
@DanEsparza ขอบคุณฉันปรับปรุงคำตอบของฉัน
— Siwei Shen 申思维
9

ดูเหมือนว่าโซลูชันสำหรับแอปเดสก์ท็อป HTML / JS / CSS นั้นไม่มีปัญหา

ทางออกหนึ่งที่ฉันเพิ่งเจอคือ TideSDK: http://www.tidesdk.org/ซึ่งดูเหมือนจะเป็นสัญญาที่ดีมากโดยดูที่เอกสาร

คุณสามารถพัฒนาด้วย Python, PHP หรือ Ruby และจัดทำแพคเกจสำหรับ Mac, Windows หรือ Linux

— mydoghasworms
แหล่งที่มา
1
ดูมีแนวโน้ม แต่ไม่ได้รับการพัฒนาอีกต่อไปดูเหมือนว่า ทีมหลักกำลังทำงานในสิ่งที่เรียกว่า TideKit แต่มันจะใช้เวลาตลอดไปสำหรับพวกเขาที่จะปล่อยมัน - บวกมันจะเสียค่าใช้จ่าย :(
— TheStoryCoder
1
ใช่น่าเสียดาย มันดูสดใสในเวลาที่ฉันตอบ ฉันเดาว่าเป็นเหตุผลหนึ่งที่ทำให้พวกเขาขมวดคิ้วในคำถามเกี่ยวกับคำแนะนำสำหรับสิ่งต่างๆ
— mydoghasworms
3

ขออภัยที่ฟองสบู่ของคุณ แต่ลูกค้าเดสก์ทอป Spotifyเป็นเพียงเบราว์เซอร์ Webkit-based แน่นอนว่ามันทำให้ฟังก์ชั่นเพิ่มเติมที่เฉพาะเจาะจง แต่มันสามารถเรียกใช้ JS และแสดง HTML / CSS เท่านั้นเพราะมันมีเอ็นจิน JS และเอ็นจิ้นการเรนเดอร์ Chromium สิ่งนี้ไม่ได้ช่วยให้คุณเขียนโค้ดเว็บแอปฝั่งไคลเอ็นต์และปรับใช้กับหลายแพลตฟอร์ม

สิ่งที่คุณกำลังมองหาคล้ายกับSencha Touch - เฟรมเวิร์กที่อนุญาตให้แอป HTML5 สามารถนำไปใช้กับอุปกรณ์ iOS, Android และ Blackberry ได้ มันทำหน้าที่เป็นสื่อกลางระหว่างการเรียก API และการทำงานเฉพาะอุปกรณ์ที่มีอยู่

ฉันไม่มีประสบการณ์กับappceleratorบิตดูเหมือนว่าจะทำอย่างนั้น - และได้รับความคิดเห็นที่น่าพอใจมากทางออนไลน์ คุณควรจะไป (ยกเว้นว่าคุณต้องการกลับไปปี 1999 และม้วนด้วยMS HTA ;)

— OV
แหล่งที่มา
มันใช้ webkit สำหรับแอปพลิเคชัน แต่ซอฟต์หลักไม่ได้อิงกับ html / js
— Sucrenoir
1

ฉันรู้ว่ามีของไหลและปริซึม (มีคนอื่นนั่นคือสิ่งที่ฉันเคยใช้) ที่ช่วยให้คุณโหลดเว็บไซต์ลงในสิ่งที่ดูเหมือนแอพแบบสแตนด์อโลน

ใน Chrome คุณสามารถสร้างทางลัดบนเดสก์ท็อปสำหรับเว็บไซต์ได้ (คุณทำเช่นนั้นจากใน Chrome คุณไม่สามารถ / ไม่ควรทำแพ็คเกจด้วยแอปของคุณ) Chrome Frame นั้นแตกต่างกัน:

Google Chrome Frame เป็นปลั๊กอินที่ออกแบบมาสำหรับ Internet Explorer ตามโครงการ Chromium โอเพนซอร์ส มันนำเทคโนโลยีเว็บแบบเปิดของ Google Chrome ไปยัง Internet Explorer

คุณต้องมี wrapper แบบนั้นสำหรับ webapp ของคุณจากนั้นส่วนที่เหลือคือเทคโนโลยีเว็บที่คุณคุ้นเคย คุณสามารถใช้ที่จัดเก็บในตัว HTML5 เพื่อจัดเก็บข้อมูลขณะที่แอปออฟไลน์ ฉันคิดว่าคุณอาจจะสามารถทำงานกับ SQLite ได้

แต่ฉันไม่รู้ว่าคุณจะเข้าถึงฟีเจอร์เฉพาะของ OS ได้อย่างไร สิ่งที่ฉันอธิบายข้างต้นมีข้อ จำกัด เช่นเดียวกับเว็บไซต์ "ปกติ" หวังว่านี่จะให้แนวทางบางอย่างแก่คุณในการเริ่มต้น

— sachleen
แหล่งที่มา
0

CEF เสนอความยืดหยุ่นและตัวเลือกสำหรับการปรับแต่งมากมาย แต่ถ้าเจตนาคือการพัฒนาอย่างรวดเร็ว node-webkit ก็เป็นตัวเลือกที่ดีเช่นกัน ชุดโหนดเว็บยังมีความสามารถในการเรียกโมดูลโหนดโดยตรงจาก DOM

หากไม่มีโมดูลเนทิฟที่จะรวม Node-Webkit สามารถให้คะแนนที่ดีขึ้นได้ ด้วยโมดูลเนทิฟ C / C ++ หรือแม้แต่ C # จะดีกว่ากับ CEF

— harsha
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.