Begleiten Sie mich auf meiner Reise, auf der ich Go lerne

Ich entwickle ein kleines Spiel mit Go im Backend und React mit TypeScript für das Frontend. In meiner täglichen Arbeit arbeite ich hauptsächlich mit PHP unter Verwendung des Laravel-Frameworks, daher ist Go für mich eine neue Programmiersprache und ich finde, dass man es am besten lernt, indem man es selbst tut. Folgen Sie mir also auf meiner Reise zum Aufbau dieses Projekts. Ich bin bereits zur Hälfte fertig, aber ich werde alle zukünftigen PRs mit Ihnen teilen.

Das Spiel heißt Suspect Recall. Was ich bisher habe, können Sie hier einsehen: https://www.suspectrecall.com Zuerst sehen Sie einen Verdächtigen für ein paar Sekunden und müssen sich dann merken, welche Eigenschaften dieser Verdächtige hatte. Ich werde das Design etwas später verbessern, obwohl das nicht der Schwerpunkt dieses Projekts ist.

Als Nächstes müssen Sie einen zufälligen Verdächtigen holen. Ich habe eine PR für diesen Teil des Codes eröffnet: https://github.com/artisanphil/suspect_recall/pull/4 Code-Rezensionen sind willkommen! Ich habe auch vor, die Antworten zu speichern, damit ich eine Vorstellung davon bekomme, wie viele Leute die Website ausprobieren und wie viele Fehler sie machen.

Ein Überblick über die Codestruktur

Ursprünglich hatte ich zwei Ordner, Backend und Frontend, aber ich fand, dass es tatsächlich am besten funktioniert, den Backend-Code im Stammverzeichnis und den Frontend-Ordner im Backend-Ordner zu haben.
Wir müssen nicht den Frontend-Code bereitstellen, sondern nur den Code, der aus dem Build erstellt wird. Erfahren Sie in der Readme-Datei, wie Sie den Code für die lokale Entwicklung ausführen.

Wenn Sie das Projekt gerade heruntergeladen haben, müssen Sie npm install im Frontend-Ordner ausführen, um die Abhängigkeiten in den Ordner „node_modules“ zu ziehen.
Erstellen Sie eine .env-Datei im Frontend-Ordner und fügen Sie REACT_APP_MODE=development hinzu. Dies ist so, dass beim Ausführen von Frontend-Code mit Live-Neuladen die API-Endpunkte aufgerufen werden, die auf einem anderen Port ausgeführt werden. Führen Sie dann npm run start aus.

Wir können jetzt zu localhost:3000 gehen und das Frontend ansehen. Wie Sie sehen werden, funktionieren die API-Endpunkte nicht. Gehen wir also zum Stammordner und führen Sie „go run“ aus. Beachten Sie, dass wir bei der lokalen Ausführung domänenübergreifende Anforderungen zulassen mussten, da sie auf einem anderen Port (Port 8080, Frontend ist auf 3000).

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

Bei der Ausführung in der Produktion läuft alles auf demselben Port, da wir nur den Backend-Code ausführen, nachdem wir den Frontend-Code mit npm run build erstellt haben, der die statischen Dateien erstellt. Übrigens habe ich den Code in Google App Engine bereitgestellt.

Bitte lesen Sie sich diese PR durch, in der ich eine neue API zum dynamischen Abrufen eines Verdächtigen (der derzeit fest codiert ist) und zum Aufrufen dieses Endpunkts im Frontend hinzufüge: https://github.com/artisanphil/suspect_recall/pull/4

Vielen Dank im Voraus für alle Kommentare dazu, wie der Code verbessert werden kann, und ich werde mein Bestes tun, um alle Fragen zu beantworten, die Sie möglicherweise haben.

Um zukünftige Fortschritte zu sehen, sehen Sie sich bitte dieses Repository an: https://github.com/artisanphil/suspect_recall

Das obige ist der detaillierte Inhalt vonBegleiten Sie mich auf meiner Reise, auf der ich Go lerne. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!