Erstellen Sie eine Desktop-App im Browser: 3 Schritte

Erstellen Sie eine Desktop-App im Browser: 3 Schritte

Inhaltsverzeichnis:

Anonim

Dazu verwenden wir eine von mir entwickelte Anwendung namens WebDGap. Damit können wir jede Website oder HTML / CSS / JavaScript / NodeJS-Webanwendung als native Desktop-App konvertieren. WebDGap verwendet das nwjs-Framework, damit Ihre Apps sowohl auf 32-Bit- als auch auf 64-Bit-Prozessoren ausgeführt werden können.

Zubehör:

Schritt 1: Erste Schritte

Bei WebDGap müssen Sie zuerst den Namen Ihrer Anwendung hinzufügen.

- Laden Sie das Logo Ihrer Anwendung als zweites.

- Zuletzt laden Sie die Quelle Ihrer Anwendung in einer Zip-Datei.

WICHTIG!!! (Ihre zip-Datei muss so aussehen, wenn Sie sie als Desktop- / Chrome-Anwendung oder als Erweiterung exportieren.)

- index.html

- css / style.css

- js / jquery.js

- js / script.js

Das Zip-Beispiel unten FUNKTIONIERT NICHT !!!

- AppName / index.html

- Anwendungsname / css / style.css

- Anwendungsname / js / jquery.js

- Anwendungsname / js / script.js

HINWEIS: Das Laden und Exportieren größerer ZIP-Dateien dauert länger!

Wenn Ihre Anwendung Audio enthält, lesen Sie bitte "Verwenden von MP3 & MP4 (H.264) mit den Video- & Audio-Tags" - http://github.com/nwjs/nw.js/wiki/Using-MP3-&-MP …

Wenn Sie WebDGap zum ersten Mal starten, wird Ihnen ein "How To Use" -Video angezeigt. Sie können dies beobachten oder fortfahren, während wir eine Mac-App auf unserem Android-Handy erstellen! Warum? Da viele Leute immer noch der Meinung sind, dass Sie keine Mac-Apps auf Nicht-Mac-Geräten erstellen können, und wenn Sie zeigen, dass Sie eine Mac-App auf einem Android-Telefon erstellen können, erhalten sie den von ihnen benötigten WOW-Faktor: D

Schritt 2: Exportieren für Mac

Jetzt ist das Dateimenü auf einem Mac anders codiert als unter Windows und Linux (worauf hier nicht eingegangen wird). Es wird auch unter Windows und Linux unterschiedlich angezeigt. Wir müssen nur sicherstellen, dass der Name unserer Anwendung im Mac Finder angezeigt wird.

Exportieren unserer Mac-Anwendung!

- Wählen Sie zuerst den Namen Ihrer Anwendung! (Wird in der App verwendet und muss später geändert werden, um auf Mac-Geräten über den Finder sichtbar zu sein.)

- Nächstes Laden Ihres Anwendungslogos (Wir müssen es später ändern, damit es auf Mac-Geräten sichtbar ist.)

- Nächstes Laden in Ihre Zip-Datei

- Jetzt für Mac exportieren

Icon setzen!

- Wie unter Windows können Sie jedes Bild in ein Mac-Symbol konvertieren, indem Sie auf "iConvert-Symbole" klicken

- Öffnen Sie als Nächstes den Inhalt Ihrer Mac-App (whatever.app). Unter Android können Sie den ES-Datei-Explorer verwenden, wenn in Ihrem Browser kein Datei-Explorer integriert ist.

- Ersetzen Sie die Datei `nw.icns` durch das neue Symbol, das Sie exportiert haben (Stellen Sie sicher, dass das neue Symbol, das Sie exportiert haben, den Namen trägt nw.icns)

Anzeigen des Anwendungsnamens im Finder!

- Öffnen Sie die Datei "info.plist" in einem Text- oder Code-Editor Ihrer Wahl. Weil wir dies auf einem Android-Handy machen, können wir DroidEdit verwenden.

- Ändern Sie den Anwendungsnamen online in den Namen Ihrer Apps 10 und 49. (Sollte neben sein CFBundleDisplayName und CFBundleName)

Jetzt können Sie komprimieren / zip und verteilen. Somit sollten Mac-Benutzer kein Problem damit haben, Ihre Anwendung auszuführen!

Schritt 3: Zusammenfassung

Der Export für Desktops ist sehr einfach, mobile Geräte erfordern jedoch mehr Arbeit. Jetzt haben mich MAAANY-Leute gefragt. "Warum ist das kostenlos?" Meine Antwort ist einfach. Weil es schneller und einfacher ist, die Welt zu einem besseren Ort zu machen. Hör auf dich zu beschweren und genieße. Ansonsten spende und / oder hilf mit: D

Mucho amor a todos. Pass auf dich auf und hab immer Spaß:)