Entwicklerdokumentation

1. Voraussetzungen
2. Einstieg
3. Weitere Befehle
4. Lerne mehr über Next.js

Das ist ein Next.js 13 Projekt bootstrapped mit create-next-app.

Voraussetzungen

Folgendes wirst du benötigen, um GameUnity ausführen zu können.

• Node.js (Version: >=20.x)

Einstieg

Klone zunächst dieses Repo.

git clone https://gitlab.bht-berlin.de/s86116/project_ss23.git

Kopiere .env.example und benenne es zu .env um.

Diese .env benötigt erstmal paar geheime Variablen, zb. API-Keys:

• DATABASE_URL ist deine Verbindungs Url zu deiner PostgreSQL Datenbank, mit deine Anmelde Daten.
• UPLOADTHING_SECRET und UPLOADTHING_APP_ID kriegst du über ubloadthing in dem du dich mit einem Github Account einen Account erstellst.
  Erstelle nun eine "neue App" und in der App unter API Keys findest du die Variablen.
  Wir nutzen uploadthing um Media Dateien zu speichern (Blop Storage).
• Für Twitch Auth folge die "Account Creation" der IGDB Dokumentation, diese ist für die IGDB api verbindung nötig. TWITCH_CLIENT_ID und TWITCH_CLIENT_SECRET sind deine "Client ID" und "Secret" deiner Twitch Developers App.
• (Optional) Du kannst ein sicheres NEXTAUTH_SECRET generieren, indem du openssl rand -base64 32 in das Bash-Terminal eingibst.
• Für GITHUB_CLIENT_ID und GITHUB_CLIENT_SECRET brauchst du auch ein Github Account.
  Wenn du diesen hast gehe dann in die Profil Einstellungen und dann unter
  Entwickler Einstellungen > OAuth Apps > Neue OAuth App.
  Hier ein Beispiel was du eintragen kannst:

// Application name
gameunity
// Homepage URL
http://localhost:3000
// Authorization callback URL
http://localhost:3000/api/auth/callback/github

• Zu guter Letzt brauchst du noch eine Email und das Passwort der Email für NODEMAIL_MAIL und NODEMAIL_PW. Dieser übernimmt den Versand von Verifizierungs-Emails.

Jetzt musst du nur noch Prisma und die Datenbank verbinden, indem du eine Migrations deines Schema's machst (in diesem Fall wird die Migration init heißen), und die dependencies installierst. Mache dazu:

npx prisma migrate dev --name init

npm install

Du Kannst jetzt mitentwickeln!

Um den jetztigen Stand der Anwendung anzusehen kannst du zuerst den Entwicklungsserver aus führen:

npm run dev

Öffne http://localhost:3000 auf deinem Browser und siehe das Ergebnis.

Weitere Befehle

Baut den Production build und startet ihn (npm run build && npm start)

npm run preview

Generiert die Typen für PrismaClient (wird als postinstall npm script schon ausgeführt)

npx prisma generate

Startet Prisma Studio (ein Visueller DB Editor)

npx prisma studio

Lerne mehr über Next.js

Schau dir die untenstehenden Links an um mehr über Next.js zu lernen:

• Next.js Dokumentation - lerne die Features und die API von Next.js kennen.
• Lerne Next.js - eine ineraktive Next.js Anleitung.