Suivez-moi dans mon voyage d'apprentissage Go

Je développe un petit jeu en utilisant Go en backend et React avec TypeScript pour le frontend. Dans mon travail quotidien, je travaille principalement avec PHP en utilisant le framework Laravel, donc Go est un nouveau langage de programmation pour moi et je trouve que la meilleure façon d'apprendre est par la pratique. Alors suivez-moi dans mon parcours pour construire ce projet. J'ai déjà fait la moitié du chemin, mais je partagerai avec vous tous les futurs PR.

Le jeu s'appelle Suspect Recall. Vous pouvez voir ce que j'ai jusqu'à présent ici : https://www.suspectrecall.com Vous voyez d'abord un suspect pendant quelques secondes, puis vous devez vous rappeler quels attributs ce suspect avait. J'améliorerai le design un peu plus tard, même si ce n'est pas l'objet de ce projet.

La prochaine étape consiste à aller chercher un suspect au hasard. J'ai ouvert un PR pour cette partie du code : https://github.com/artisanphil/suspect_recall/pull/4 Les révisions de code sont les bienvenues ! Je prévois également de sauvegarder les réponses afin de pouvoir avoir une idée du nombre de personnes qui essaient le site Web et du nombre d'erreurs qu'elles commettent.

Un aperçu de la structure du code

À l'origine, j'avais deux dossiers, backend et frontend, mais j'ai trouvé qu'il était préférable d'avoir le code backend à la racine et le dossier frontend à l'intérieur du dossier backend.
Nous n'avons pas besoin de déployer le code frontend, juste le code créé à partir de la build. Découvrez dans le fichier Lisezmoi comment exécuter le code pour le développement local.

Si vous venez de télécharger le projet, vous devrez exécuter npm install dans le dossier frontend pour extraire les dépendances dans le dossier 'node_modules'.
Créez un fichier .env dans le dossier frontend et ajoutez REACT_APP_MODE=development. Ainsi, lors de l'exécution du code frontal avec rechargement en direct, il appellera les points de terminaison de l'API qui s'exécutent sur un autre port. Ensuite, exécutez npm run start.

Nous pouvons maintenant accéder à localhost:3000 et voir le frontend. Comme vous le verrez, les points de terminaison de l'API ne fonctionneront pas, alors allons dans le dossier racine et exécutons go run .. Notez que nous devions autoriser les requêtes inter-domaines lors de l'exécution locale, car elles s'exécutent sur un autre port (port 8080, le frontend est sur 3000).

c := cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowedHeaders:   []string{"Origin", "Content-Type", "Accept"},
        AllowCredentials: true,
    })

Lors de l'exécution en production, tout s'exécutera sur le même port car nous exécutons simplement le code backend après avoir construit le code frontend avec npm run build qui crée les fichiers statiques. BTW, j'ai déployé le code sur Google App Engine.

Veuillez consulter ce PR où j'ajoute une nouvelle API pour récupérer dynamiquement un suspect (qui est actuellement codé en dur) et appeler ce point de terminaison dans le frontend : https://github.com/artisanphil/suspect_recall/pull/4

Merci d'avance pour tout commentaire sur la façon dont le code peut être amélioré et je ferai de mon mieux pour répondre à toutes vos questions.

Afin de visualiser les progrès futurs, veuillez consulter ce référentiel : https://github.com/artisanphil/suspect_recall

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!