Créer une application de bureau dans le navigateur: 3 étapes

Créer une application de bureau dans le navigateur: 3 étapes

Table des matières:

Anonim

Pour ce faire, nous allons utiliser une application que j'ai développée appelée WebDGap. Cela nous permettra de convertir n'importe quel site Web ou application Web HTML / CSS / JavaScript / NodeJS en application de bureau native. WebDGap utilise la structure nwjs pour que vos applications s'exécutent sur des processeurs 32 bits et 64 bits.

Provisions:

Étape 1: Commencer

WebDGap nécessite que vous ajoutiez d'abord le nom de votre application.

- Chargez le logo de votre application en second.

- Enfin, chargez le code source de votre application dans un fichier zip.

IMPORTANT!!! (votre fichier zip doit ressembler à ceci, lors de son exportation en tant qu'application de bureau / chrome, ou extension)

- index.html

- css / style.css

- js / jquery.js

- js / script.js

L'exemple de zip ci-dessous NE FONCTIONNERA PAS !!!

- NomApp / index.html

- AppName / css / style.css

- AppName / js / jquery.js

- AppName / js / script.js

REMARQUE: Les fichiers zip volumineux prennent plus de temps à charger et à exporter!

Si votre application contient de l'audio, consultez l'article "Utilisation de MP3 et MP4 (H.264) à l'aide des balises video & audio" - http://github.com/nwjs/nw.js/wiki/Using-MP3-&-MP …

Désormais, lorsque vous lancerez WebDGap pour la première fois, une vidéo "Comment utiliser" vous sera présentée. Vous pouvez regarder cela ou continuer, car nous allons créer une application Mac sur notre téléphone Android! Pourquoi? Parce que de nombreuses personnes croient toujours que vous ne pouvez pas créer d'applications Mac sur des appareils autres que Mac. En leur montrant que vous pouvez créer une application Mac sur un téléphone Android, vous obtiendrez le facteur WOW dont elles ont besoin: D

Étape 2: Exporter pour Mac

Désormais, le menu de fichier est codé différemment sur un Mac que sous Windows et Linux (nous n'en discuterons pas ici). Il s’affiche également différemment sous Windows et Linux. Nous allons simplement nous assurer que le nom de notre application est visible dans le Finder Mac.

Exporter notre application Mac!

- Choisissez d'abord le nom de votre application! (Ceci sera utilisé dans l'application, il faudra le modifier plus tard pour qu'il soit visible sur les appareils Mac via le Finder)

- Chargement suivant dans le logo de vos applications (nous devrons le modifier ultérieurement pour qu'il soit visible sur les appareils Mac)

- Prochain chargement dans votre fichier zip

- Exportez maintenant pour Mac

Réglage de l'icône!

- Tout comme pour Windows, vous pouvez convertir n’importe quelle image en icône Mac en allant sur `Icônes iConvert`

- Ensuite, ouvrez le contenu de votre application Mac (what.app). Sur Android, vous pouvez utiliser ES File Explorer si le vôtre n’a pas d’explorateur de fichiers intégré.

- Remplacez le fichier `nw.icns` par la nouvelle icône que vous avez exportée (Assurez-vous que la nouvelle icône que vous avez exportée est nommée nw.icns)

Affichage du nom de l'application dans le Finder!

- Ouvrez le fichier `info.plist` dans l'éditeur de texte ou de code de votre choix. Parce que nous faisons cela sur un téléphone Android, nous pouvons utiliser DroidEdit.

- Changez le nom de l'application en votre nom d'application en ligne 10 et 49. (Devrait être à côté de CFBundleDisplayName et CFBundleName)

Maintenant, vous pouvez compresser / compresser et distribuer. Ainsi, les utilisateurs de Mac ne devraient avoir aucun problème à exécuter votre application!

Étape 3: Résumé

L'exportation pour les ordinateurs de bureau est très facile, mais les appareils mobiles nécessitent plus de travail. Maintenant, des gens de MAAANY me le demandent. "Pourquoi est-ce gratuit?" Ma réponse est simple. Parce qu'il est plus rapide et plus facile de rendre le monde meilleur. Arrêtez de vous plaindre et profitez-en. Sinon, faites un don et / ou aidez à contribuer: D

Mucho amor a todos. Prenez soin de vous et amusez-vous toujours:)