tutoriel Mettre son rétro en app

[SailorEudes 431]

Pour avoir accès à ce lien, merci de vous connecter.

 

Bien le bonjour moussaillon, j'espère que tu vas bien... Moi ça va, en tout cas pour le moment, car je me suis décidé...

 

Je me suis décidé à te donner l'opportunité de faire comme tous les plus grands rétros, en proposant à ta communauté, une app MacOS et Windows, compatible Flash et te permettant de faire perdurer ton rétro.

 

Bien que cette solution ne soit pas la meilleure, et qu'il soit toujours mieux de partir sur de l'HTML5, je peux comprendre la détresse que tu ressens lorsque l'on te parle d'HTML5, car ce n'est pas évident pour tout le monde de pouvoir créer, et utiliser de l'HTML5. Du coup, l'alternative que je te propose aujourd'hui, c'est celle de bénéficier de ces avantages sans avoir forcément un développeur à payer.

 

Avant de lancer ce sujet, j'ai effectivement fait les modifications de mon côté et les tests nécessaires afin de ne pas te donner quelque chose d'instable voir de non fonctionnel.

 

Dans ce tutoriel, il va falloir se sortir les doigts du cul, et te débrouiller tel un bon moussaillon, car niveau difficulté, même un bébé sait le faire, alors si toi tu ne t'en sens pas capable, je te propose passer par quelqu'un pour te le faire, même si je trouve ça incongru et totalement inutile.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Avant de commencer, il faut avoir de quoi travailler, car ce n'est pas avec un bloc-notes que tu vas pouvoir développer ce petit système sympa et bien utile pour tes projets futurs...

 

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

 

Maintenant que tu as toute ton armure, tu peux t'aventurer dans la jungle du développement...

 

Si tu souhaites obtenir quelques explications au sujet des choses que je te fais télécharger afin de te rassurer, tu peux lire ce qui va suivre :

[hide]

Citation

Un cerveau :
"Le cerveau est le principal organe du système nerveux des animaux bilatériens. Ce terme tient du langage courant (non scientifique) et chez les chordés, comme les humains, il peut désigner l'encéphale, ou uniquement une partie de l'encéphale, le prosencéphale (télencéphale + diencéphale), voire seulement le télencéphale. Néanmoins, dans cet article, le terme cerveau prend son sens le plus large." - Source

Pour avoir accès à ce lien, merci de vous connecter.

 

Citation

VS Code :

"Visual Studio Code est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS. Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git intégré." - Source

Pour avoir accès à ce lien, merci de vous connecter.

 

Citation

NodeJS :
"Node.js est une plateforme logicielle libre en JavaScript orientée vers les applications réseau événementielles hautement concurrentes qui doivent pouvoir monter en charge. Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements, et implémente sous licence MIT les spécifications CommonJS." - Source

Pour avoir accès à ce lien, merci de vous connecter.

 

Citation

AsteroidApp :
Navigateur web alternatif avec Flash Player pour Windows 7/10 (x32/x64) et MacOS.

[/hide]
 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Révélation

Étape n°1 :
Tu vas commencer par installer NodeJS, VSCode et AsteroidApp sur ton pc.

 

Révélation

Étape n°2 :
Tu vas ouvrir ton CMD (Windows) ou ton Terminal (MacOS)

Comment ouvrir son CMD ?

[hide]
Il te faudra te rendre dans le dossier ou aura été décompressé AsteroidApp, puis faire ceci :

[/hide]

Comment ouvrir son Terminal ?
[hide]
Il faudra cliquer sur le dossier ou tu aura décompressé AsteroidApp et faire comme suit :

[/hide]

 

Révélation

Étape n°3 :

1. Une fois dans ton Terminal, ou ta CMD, tu devras écrire et cliquer sur "Entrer" : 

npm install

2. Puis il faudra te rendre dans le fichier config.env à la racine de ton dossier (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

URL = LIENDETONRETRO
SHORT_URL = LIENDETONRETRO OU SHORTLIEN

 

3. Une fois le fichier sauvegardé, tu devras te rendre dans le fichier package.json à la racine de ton dossier (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

"productName": "NOM RETRO",
"version": "1.0.0",
"description": "DESCRIPTION RETRO",

 

4. Une fois le fichier sauvegardé, tu devras te rendre dans le fichier Main.js qui se trouve dans le dossier "src" (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

e.setAppUserModelId("nl.habbo.NOMRETRO");

 

 

Bonus modification des images :
[hide]

Révélation

 

Si tu souhaites personnaliser les icônes du haut de l'app, avant de générer les apps, tu peux, en te rendant dans le dossier "ressources/img".

Pour modifier l'icône de l'application, il faudra te rendre dans le dossier "Build", et remplacer les icônes déjà existantes, tout en respectant leurs extensions !

 

[/hide]

 

Bonus pour tester l'app avant de la mettre au format executable :
[hide]

Révélation

Une fois que tu aura tout configuré, il faudra retourner dans ton Terminal ou CMS, et cliquer sur "Entrer" pour tester ton app : 

npm start

 

[/hide]

 

Révélation

Étape n°4 :

Une fois que tu aura tout configuré, il faudra retourner dans ton Terminal ou CMS, et cliquer sur "Entrer" pour générer le .exe de ton app : 

npm run windows

 

Puis, une fois la commandé validé et le traitement terminé, il faudra retourner dans ton Terminal ou CMS, et cliquer sur "Entrer" pour générer le .dmg de ton app : 

npm run mac

 

Puis, une fois le commandé validé et le traitement terminé, tu pourras te rendre dans le dossier "dist", et tu retrouveras la version DMG et EXE de ton rétro, tu n'auras plus qu'à cliquer dessus, pour profiter !

 

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Eh bien nous voici dans la section des flemmards... Si tu as la flemme de faire la commande :

npm install

 

Et si tu souhaites avoir les indications "NOMRETRO" "LIENRETRO" dans le code pour t'y retrouver, tu peux télécharger l'archive qui fait 141.42MB :

[hide]

Citation

Tu peux télécharger

Pour avoir accès à ce lien, merci de vous connecter.

.

[/hide]

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Je préfère être transparent avec toi...

Cette configuration simple, ce n'est pas comme si que je te demandais de recréer l'application de zéro moussaillon...

Tout l'environnement est à ta disposition, et ce tutoriel, complet, donc je n'offrirais aucun support...

Si tu tiens à ton projet, et que tu veux tout de même user de ma gentillesse et de mon temps, je te demanderai une contribution tarifaire (ce que je trouve normal et loyal), d'une valeur de 5 à 10 Euros (au choix).

 

Tu peux aussi passer par @ notaryzqui est une personne de confiance, et qui est dans la capacité de te le faire, GRATUITEMENT ou SOUS RÉSERVE DE PAIEMENT (c'est selon son humeur).

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Si j'ai décidé de partager ce tutoriel à ce jour, c'est parce que je trouve ça injuste que des personnes proposent des systèmes intéressants, sans tutoriel, et donc accessibles seulement par des personnes ayant les compétences nécessaires.

 

Tout le monde devrait s'entraider, et c'est donc pour ça que j'ai pris une petite heure pour rédiger ce sujet.

Bien que cette méthode soit loin d'être la meilleure, elle permettra aux personnes n'ayant pas les compétences, de proposer une suite à leur communauté.

 

Si tu souhaites aller plus loin avec ce genre de système, @ notaryza fait un petit sujet intéressant, avec le même principe, mais 100% "

Pour avoir accès à ce lien, merci de vous connecter.

", contrairement à ce sujet ou ce n'est que du "

Pour avoir accès à ce lien, merci de vous connecter.

".

 

Si tu souhaites aller encore plus loin, et intégrer Nitro sur ton rétro afin de proposer une version HTML5, @ Stown a fait un petit sujet bien sympa

Pour avoir accès à ce lien, merci de vous connecter.

.

 

Tu trouveras le sujet de @ notaryz 

Pour avoir accès à ce lien, merci de vous connecter.

.

 

Bon, eh bien, nos chemins s'arrêtent ici moussaillon, mais ne t'inquiète dont pas, nous nous divisions pour mieux nous retrouver sur un autre sujet palpitant ! 

Et que la mer soit avec toi !

[Masako 102]

C'est cool d'avoir fait un sujet pour les gens qui ne savent pas faire, après il suffit de chercher un peu et de trouver le topic de Nigo sur les forums anglais mais bon on va dire que personne ne connais tout les forums^^

 

 

[SailorEudes 431]

à l’instant, Masako a dit :

C'est cool d'avoir fait un sujet pour les gens qui ne savent pas faire, après il suffit de chercher un peu et de trouver le topic de Nigo sur les forums anglais mais bon on va dire que personne ne connais tout les forums^^

 

 

 

Il y a aussi les membres qui ne comprennent pas l'Anglais, et surtout avec la nouvelle génération. Nous sommes tous passés par cette phase d'apprentissage ^^

[Overlife 14]

merci

[MatYou 864]

Superbe sujet comme toujours ! Ça en aidera plus d'un

 

[Narzo 759]

Un vrai tutoriel de capitaine.

 

Que la mer soit avec toi.

[Kylianr 0]

Merci je vais essayer

[Python 32]

C’est sympa de partager un tutoriel pour créer son projet habbo mais malheureusement la communauté n’est plus comme avant surtout en 2021 je ne trouve plus l’utilité d’ouvrir un projet habbo

 

Merci encore pour ce tutoriel capitaine !

[ardix 0]

nice !

[ardix 0]

nice !!!!!!!!!!!

 

[ReznovITA 0]

Le 27/1/2021 à 17:10, Eudes a dit :

Pour avoir accès à ce lien, merci de vous connecter.

 

Bien le bonjour moussaillon, j'espère que tu vas bien... Moi ça va, en tout cas pour le moment, car je me suis décidé...

 

Je me suis décidé à te donner l'opportunité de faire comme tous les plus grands rétros, en proposant à ta communauté, une app MacOS et Windows, compatible Flash et te permettant de faire perdurer ton rétro.

 

Bien que cette solution ne soit pas la meilleure, et qu'il soit toujours mieux de partir sur de l'HTML5, je peux comprendre la détresse que tu ressens lorsque l'on te parle d'HTML5, car ce n'est pas évident pour tout le monde de pouvoir créer, et utiliser de l'HTML5. Du coup, l'alternative que je te propose aujourd'hui, c'est celle de bénéficier de ces avantages sans avoir forcément un développeur à payer.

 

Avant de lancer ce sujet, j'ai effectivement fait les modifications de mon côté et les tests nécessaires afin de ne pas te donner quelque chose d'instable voir de non fonctionnel.

 

Dans ce tutoriel, il va falloir se sortir les doigts du cul, et te débrouiller tel un bon moussaillon, car niveau difficulté, même un bébé sait le faire, alors si toi tu ne t'en sens pas capable, je te propose passer par quelqu'un pour te le faire, même si je trouve ça incongru et totalement inutile.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Avant de commencer, il faut avoir de quoi travailler, car ce n'est pas avec un bloc-notes que tu vas pouvoir développer ce petit système sympa et bien utile pour tes projets futurs...

 

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

Pour avoir accès à ce lien, merci de vous connecter.

 

Come hai tutta la tua armatura, puoi avventurarti nella giungla dello sviluppo ...

 

Se vuoi avere qualche spiegazione sulle cose che ti sto facendo scaricare per rassicurarti, puoi leggere quanto segue :

 

Contenuto nascosto

• Rispondi a questo per vedere i contenuti nascosti.

 

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Pour avoir accès à ce lien, merci de vous connecter.

Rivela i contenuti nascosti

Étape n°1 :
Tu vas commencer par installer NodeJS, VSCode et AsteroidApp sur ton pc.

 

Pour avoir accès à ce lien, merci de vous connecter.

Rivela i contenuti nascosti

Étape n°2 :
Tu vas ouvrir ton CMD (Windows) ou ton Terminal (MacOS)

Comment ouvrir son CMD ?

 

Contenu caché

• Répondez à ce sujet pour voir le contenu masqué.

 

Comment ouvrir son Terminal ?

 

Contenu caché

• Répondez à ce sujet pour voir le contenu masqué.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

Rivela i contenuti nascosti

Étape n°3 :

1. Une fois dans ton Terminal, ou ta CMD, tu devras écrire et cliquer sur "Entrer" : 

npm install

2. Puis il faudra te rendre dans le fichier config.env à la racine de ton dossier (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

URL = LIENDETONRETRO
SHORT_URL = LIENDETONRETRO OU SHORTLIEN

 

3. Une fois le fichier sauvegardé, tu devras te rendre dans le fichier package.json à la racine de ton dossier (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

"productName": "NOM RETRO",
"version": "1.0.0",
"description": "DESCRIPTION RETRO",

 

4. Une fois le fichier sauvegardé, tu devras te rendre dans le fichier Main.js qui se trouve dans le dossier "src" (tu devras l'ouvrir avec VSCode), et une fois dedans, tu devras configurer comme suit :

e.setAppUserModelId("nl.habbo.NOMRETRO");

 

 

Modifica dell'immagine bonus:

Contenuto nascosto

• Rispondi a questo per vedere i contenuti nascosti.

 

 

Bonus per testare l'app prima di metterla in formato eseguibile:

Contenuto nascosto

• Rispondi a questo per vedere i contenuti nascosti.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

Rivela i contenuti nascosti

Étape n°4 :

Une fois que tu aura tout configuré, il faudra retourner dans ton Terminal ou CMS, et cliquer sur "Entrer" pour générer le .exe de ton app : 

npm run windows

 

Puis, une fois la commandé validé et le traitement terminé, il faudra retourner dans ton Terminal ou CMS, et cliquer sur "Entrer" pour générer le .dmg de ton app : 

npm run mac

 

Puis, une fois le commandé validé et le traitement terminé, tu pourras te rendre dans le dossier "dist", et tu retrouveras la version DMG et EXE de ton rétro, tu n'auras plus qu'à cliquer dessus, pour profiter !

 

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Io sto bene qui siamo nella sezione del pigro ... Se siete troppo pigri per fare il comando:

 

E se vuoi avere le indicazioni "NOMRETRO" "LIENRETRO" nel codice per orientarti, puoi scaricare l'archivio che è di 141,42MB :

 

Contenuto nascosto

• Rispondi a questo per vedere i contenuti nascosti.

 

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Io preferisco essere trasparente con te ...

C ette configurazione semplice, non è come se ti chiedessi di ricreare l'applicazione zero matey ...

T fuori l'ambiente è davanti a voi, e questo tutorial, completo, quindi vorrei offrire alcun supporto ...

S mi piaci al progetto, e si vuole ancora usare la mia bontà e il mio tempo, mi chiedo per una tariffa contributo (che trovo normale e giusto), da 5 a 10 euro (a tua scelta ).

 

Puoi anche passare@ notaio chi è una persona di fiducia, e chi è in grado di farlo a te, GRATUITAMENTE o SOGGETTO A PAGAMENTO ( a  seconda del suo umore ).

 

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Se finora ho deciso di condividere questo tutorial è perché trovo ingiusto che le persone escogitino sistemi interessanti, senza un tutorial, e quindi accessibili solo da persone con le competenze necessarie.

 

T Ogni individuo dovrebbe aiutarci a vicenda, ecco perché ho preso un'ora per scrivere questo.

B Sebbene questo metodo sia lungi dall'essere il migliore, consentirà alle persone prive delle competenze di proporre un seguito alla loro comunità.

 

Se vuoi andare oltre con questo tipo di sistema,@ notaio fatto un piccolo soggetto interessante, con lo stesso principio, ma al 100% "

Pour avoir accès à ce lien, merci de vous connecter.

", a differenza di questo soggetto o è solo "

Pour avoir accès à ce lien, merci de vous connecter.

".

 

Se vuoi andare ancora oltre e integrare Nitro sul tuo retro per offrire una versione HTML5,@ Stown  fatto un bel piccolo argomento

Pour avoir accès à ce lien, merci de vous connecter.

.

 

Troverai l'oggetto di@ notaio  

Pour avoir accès à ce lien, merci de vous connecter.

.

 

B si, beh, i nostri percorsi si fermeranno qui amico, ma non ti preoccupare che noi divisioni ci rincontreremo meglio su un altro appassionante argomento! 

E che il mare sia con te!

 

[XILEV 1]

Thx

[wattsans 2]

nice

[warven 0]

Un bon sujet qui va probablement servir à pas mal de monde

[erwan17240 4]

Merci

 

[Flash123 0]

Merci !

 

[Karadoc 2]

merci

[NatoTR 0]

th++++

 

[Node 0]

Merci

[Ze0xrfr 0]

laisse moi voir

[Triplego 0]

merci

[esbornia 0]

Dia 1º.

[Node 0]

Merci

[Jamesssss 0]

Thanks!

[MayZelastreet 1]

merci