Inhalt

1. Einführung
2. Tech Stack
3. Kurzübersicht
4. API
5. Frontend
6. Mobile App
7. Admin-Dashboard
8. Sehenswürdigkeiten
9. Ressourcen

Quellcode: https://github.com/aelassas/bookcars

Demo: https://bookcars.dynv6.net:3002

Einführung

Die Idee entstand aus dem Wunsch heraus, ohne Grenzen zu bauen – eine vollst?ndig anpassbare Autovermietungs-Website und mobile App, bei der jeder Aspekt in Ihrer Kontrolle liegt:

• Besitzen Sie die Benutzeroberfl?che/UX: Entwerfen Sie einzigartige Kundenerlebnisse, ohne gegen Vorlagenbeschr?nkungen anzuk?mpfen
• Kontrollieren Sie das Backend: Implementieren Sie benutzerdefinierte Gesch?ftslogik und Datenstrukturen, die perfekt zu den Anforderungen passen
• Master DevOps: Stellen Sie die Anwendung mit bevorzugten Tools und Workflows bereit, skalieren und überwachen Sie sie
• Frei erweitern: Fügen Sie neue Funktionen und Integrationen ohne Plattformbeschr?nkungen oder zus?tzliche Gebühren hinzu

Tech-Stack

Hier ist der Tech-Stack, der es m?glich gemacht hat:

• TypeScript
• Node.js
• MongoDB
• Reagieren
• MUI
• Nativ reagieren
• Ausstellung
• Streifen
• Docker

Eine wichtige Designentscheidung wurde aufgrund seiner zahlreichen Vorteile für die Verwendung von TypeScript getroffen. TypeScript bietet starke Typisierung, Tools und Integration, was zu hochwertigem, skalierbarem, besser lesbarem und wartbarem Code führt, der einfach zu debuggen und zu testen ist.

Ich habe mich für React wegen seiner leistungsstarken Rendering-Funktionen, MongoDB für die flexible Datenmodellierung und Stripe für die sichere Zahlungsabwicklung entschieden.

Wenn Sie sich für diesen Stack entscheiden, erstellen Sie nicht nur eine Website und eine mobile App – Sie investieren in eine Grundlage, die sich mit Ihren Anforderungen weiterentwickeln kann, unterstützt durch robuste Open-Source-Technologien und eine wachsende Entwickler-Community.

React zeichnet sich durch Folgendes als ausgezeichnete Wahl aus:

1. Komponentenbasierte Architektur
   • Erm?glicht die Aufteilung komplexer Benutzeroberfl?chen in kleinere, wiederverwendbare Teile
   • Macht Code wartbarer und einfacher zu testen
   • Erm?glicht eine bessere Codeorganisation und Wiederverwendbarkeit
2. Virtuelle DOM-Leistung
   • Das virtuelle DOM von React aktualisiert effizient nur das Notwendige
   • Führt zu schnelleren Seitenladevorg?ngen und einem besseren Benutzererlebnis
   • Reduziert unn?tiges erneutes Rendern
3. Reichhaltiges ?kosystem
   • Umfangreiche Bibliothek vorgefertigter Komponenten
   • Umfangreiche Werkzeugausstattung
   • Gro?e Community für Unterstützung und Ressourcen
4. Starke Entwicklererfahrung
   • Hei?es Nachladen für sofortiges Feedback
   • Ausgezeichnete Debugging-Tools
   • JSX macht das Schreiben von UI-Code intuitiver
5. Industrieunterstützung
   • Unterstützt von Meta (ehemals Facebook)
   • Wird von vielen gro?en Unternehmen verwendet
   • Kontinuierliche Weiterentwicklung und Verbesserungen
6. Flexibilit?t
   • Funktioniert gut für kleine und gro?e Anwendungen
   • Kann schrittweise in bestehende Projekte integriert werden
   • Unterstützt mehrere Rendering-Strategien (clientseitig, serverseitig, statisch)

Schneller überblick

In diesem Abschnitt sehen Sie die Hauptseiten des Frontends, des Admin-Dashboards und der mobilen App.

Frontend

Vom Frontend aus kann der Benutzer nach verfügbaren Autos suchen, ein Auto ausw?hlen und zur Kasse gehen.

Unten befindet sich die Hauptseite des Frontends, auf der der Benutzer Abhol- und Abgabepunkte und -zeiten ausw?hlen und nach verfügbaren Autos suchen kann.

Unten finden Sie das Suchergebnis der Hauptseite, auf der der Benutzer ein Auto zum Mieten ausw?hlen kann.

Unten befindet sich die Checkout-Seite, auf der der Benutzer Mietoptionen und Checkout festlegen kann. Wenn der Benutzer nicht registriert ist, kann er gleichzeitig zur Kasse gehen und sich registrieren. Er erh?lt eine Best?tigungs- und Aktivierungs-E-Mail, um sein Passwort festzulegen, wenn er noch nicht registriert ist.

Unten finden Sie die Anmeldeseite. In der Produktion sind Authentifizierungscookies httpOnly, signiert, sicher und strikt sameSite.?Diese Optionen verhindern XSS-, CSRF- und MITM-Angriffe.?Authentifizierungscookies sind auch über eine benutzerdefinierte Middleware vor XST-Angriffen geschützt.

Unten finden Sie die Anmeldeseite.

Unten befindet sich die Seite, auf der der Benutzer seine Buchungen sehen und verwalten kann.

Unten befindet sich die Seite, auf der der Benutzer eine Buchung im Detail sehen kann.

Unten finden Sie die Kontaktseite.

Unten finden Sie die Seite mit den Autovermietungsstandorten.

Unten finden Sie die Seite, auf der der Kunde seine Benachrichtigungen sehen und verwalten kann.

Es gibt noch andere Seiten, aber dies sind die Hauptseiten des Frontends.

Admin-Dashboard

Es gibt drei Arten von Benutzern:

• Admin: Er hat vollen Zugriff auf das Admin-Dashboard. Er kann alles.
• Lieferant: Er hat eingeschr?nkten Zugriff auf das Admin-Dashboard. Er kann nur seine Autos und Buchungen verwalten.
• Benutzer: Er hat nur Zugriff auf das Frontend und die mobile App. Er kann nicht auf das Admin-Dashboard zugreifen.

Die Plattform ist für die Zusammenarbeit mit mehreren Lieferanten konzipiert. Jeder Lieferant kann seine Fahrzeugflotte und Buchungen über das Admin-Dashboard verwalten. Die Plattform kann auch mit nur einem Lieferanten zusammenarbeiten.

über das Admin-Dashboard kann der Admin-Benutzer Lieferanten, Autos, Standorte, Benutzer und Buchungen erstellen und verwalten.

Wenn der Admin-Benutzer einen neuen Lieferanten erstellt, erh?lt der Lieferant automatisch eine E-Mail zur Erstellung seines Kontos, um auf das Admin-Dashboard zuzugreifen, damit er seine Fahrzeugflotte und Buchungen verwalten kann.

Unten finden Sie die Anmeldeseite des Admin-Dashboards.

Unten finden Sie die Dashboard-Seite des Admin-Dashboards, auf der Administratoren und Lieferanten Buchungen sehen und verwalten k?nnen.

Unten finden Sie die Seite, auf der die Fahrzeugflotte angezeigt und verwaltet werden kann.

Unten finden Sie die Seite, auf der Administratoren und Lieferanten neue Autos erstellen k?nnen, indem sie ein Bild und Fahrzeuginformationen bereitstellen. Damit die Fahrzeugoptionen kostenlos enthalten sind, stellen Sie für die entsprechende Fahrzeugoption den Wert 0 ein. Andernfalls legen Sie den Preis der Option fest oder lassen Sie das Feld leer, wenn Sie sie nicht einschlie?en m?chten.

Unten finden Sie die Seite, auf der Administratoren und Lieferanten Autos bearbeiten k?nnen.

Unten finden Sie die Seite, auf der Administratoren Plattformbenutzer verwalten k?nnen.

Unten finden Sie die Seite, auf der Sie Buchungen bearbeiten k?nnen.

Es gibt noch andere Seiten, aber dies sind die Hauptseiten des Admin-Dashboards.

API

Die API stellt alle Funktionen bereit, die für das Admin-Dashboard, das Frontend und die mobile App ben?tigt werden. Die API folgt dem MVC-Entwurfsmuster. Zur Authentifizierung wird JWT verwendet. Es gibt einige Funktionen, die eine Authentifizierung erfordern, wie zum Beispiel Funktionen im Zusammenhang mit der Verwaltung von Autos, Buchungen und Kunden, und andere, die keine Authentifizierung erfordern, wie zum Beispiel das Abrufen von Standorten und verfügbaren Autos für nicht authentifizierte Benutzer:

• ./api/src/models/ Ordner enth?lt MongoDB-Modelle.
• ./api/src/routes/-Ordner enth?lt Express-Routen.
• ./api/src/controllers/ Ordner enth?lt Controller.
• ./api/src/middlewares/ Ordner enth?lt Middlewares.
• ./api/src/config/env.config.ts enth?lt die Konfiguration und TypeScript-Typdefinitionen.
• ./api/src/lang/-Ordner enth?lt die Lokalisierung.
• ./api/src/app.ts ist der Hauptserver, auf den Routen geladen werden.
• ./api/index.ts ist der Haupteinstiegspunkt der API.

index.ts ist der Haupteinstiegspunkt der API:

import 'dotenv/config'
import process from 'node:process'
import fs from 'node:fs/promises'
import http from 'node:http'
import https, { ServerOptions } from 'node:https'
import * as env from './config/env.config'
import * as databaseHelper from './common/databaseHelper'
import app from './app'
import * as logger from './common/logger'

if (
  await databaseHelper.connect(env.DB_URI, env.DB_SSL, env.DB_DEBUG)
  && await databaseHelper.initialize()
) {
  let server: http.Server | https.Server

  if (env.HTTPS) {
    https.globalAgent.maxSockets = Number.POSITIVE_INFINITY
    const privateKey = await fs.readFile(env.PRIVATE_KEY, 'utf8')
    const certificate = await fs.readFile(env.CERTIFICATE, 'utf8')
    const credentials: ServerOptions = { key: privateKey, cert: certificate }
    server = https.createServer(credentials, app)

    server.listen(env.PORT, () => {
      logger.info('HTTPS server is running on Port', env.PORT)
    })
  } else {
    server = app.listen(env.PORT, () => {
      logger.info('HTTP server is running on Port', env.PORT)
    })
  }

  const close = () => {
    logger.info('Gracefully stopping...')
    server.close(async () => {
      logger.info(`HTTP${env.HTTPS ? 'S' : ''} server closed`)
      await databaseHelper.close(true)
      logger.info('MongoDB connection closed')
      process.exit(0)
    })
  }

  ['SIGINT', 'SIGTERM', 'SIGQUIT'].forEach((signal) => process.on(signal, close))
}

Dies ist eine TypeScript-Datei, die einen Server mit Node.js und Express startet. Es importiert mehrere Module, darunter dotenv, Process, fs, http, https, mongoose und app. Anschlie?end prüft es, ob die HTTPS-Umgebungsvariable auf ?true“ gesetzt ist, und erstellt in diesem Fall mithilfe des https-Moduls und des bereitgestellten privaten Schlüssels und Zertifikats einen HTTPS-Server. Andernfalls wird mithilfe des http-Moduls ein HTTP-Server erstellt. Der Server lauscht auf dem Port, der in der Umgebungsvariablen PORT angegeben ist.

Die Schlie?funktion ist so definiert, dass sie den Server ordnungsgem?? stoppt, wenn ein Beendigungssignal empfangen wird. Es schlie?t den Server und die MongoDB-Verbindung und beendet dann den Prozess mit dem Statuscode 0. Schlie?lich registriert es die Schlie?funktion, die aufgerufen werden soll, wenn der Prozess ein SIGINT-, SIGTERM- oder SIGQUIT-Signal empf?ngt.

app.ts ist der Haupteinstiegspunkt der API:

import express from 'express'
import compression from 'compression'
import helmet from 'helmet'
import nocache from 'nocache'
import cookieParser from 'cookie-parser'
import i18n from './lang/i18n'
import * as env from './config/env.config'
import cors from './middlewares/cors'
import allowedMethods from './middlewares/allowedMethods'
import supplierRoutes from './routes/supplierRoutes'
import bookingRoutes from './routes/bookingRoutes'
import locationRoutes from './routes/locationRoutes'
import notificationRoutes from './routes/notificationRoutes'
import carRoutes from './routes/carRoutes'
import userRoutes from './routes/userRoutes'
import stripeRoutes from './routes/stripeRoutes'
import countryRoutes from './routes/countryRoutes'
import * as helper from './common/helper'

const app = express()

app.use(helmet.contentSecurityPolicy())
app.use(helmet.dnsPrefetchControl())
app.use(helmet.crossOriginEmbedderPolicy())
app.use(helmet.frameguard())
app.use(helmet.hidePoweredBy())
app.use(helmet.hsts())
app.use(helmet.ieNoOpen())
app.use(helmet.noSniff())
app.use(helmet.permittedCrossDomainPolicies())
app.use(helmet.referrerPolicy())
app.use(helmet.xssFilter())
app.use(helmet.originAgentCluster())
app.use(helmet.crossOriginResourcePolicy({ policy: 'cross-origin' }))
app.use(helmet.crossOriginOpenerPolicy())

app.use(nocache())
app.use(compression({ threshold: 0 }))
app.use(express.urlencoded({ limit: '50mb', extended: true }))
app.use(express.json({ limit: '50mb' }))

app.use(cors())
app.options('*', cors())
app.use(cookieParser(env.COOKIE_SECRET))
app.use(allowedMethods)

app.use('/', supplierRoutes)
app.use('/', bookingRoutes)
app.use('/', locationRoutes)
app.use('/', notificationRoutes)
app.use('/', carRoutes)
app.use('/', userRoutes)
app.use('/', stripeRoutes)
app.use('/', countryRoutes)

i18n.locale = env.DEFAULT_LANGUAGE

await helper.mkdir(env.CDN_USERS)
await helper.mkdir(env.CDN_TEMP_USERS)
await helper.mkdir(env.CDN_CARS)
await helper.mkdir(env.CDN_TEMP_CARS)
await helper.mkdir(env.CDN_LOCATIONS)
await helper.mkdir(env.CDN_TEMP_LOCATIONS)

export default app

Zuerst rufen wir die MongoDB-Verbindungszeichenfolge ab und stellen dann eine Verbindung mit der MongoDB-Datenbank her. Dann erstellen wir eine Express-App und laden Middleware wie Cors, Kompression, Helm und Nocache. Mithilfe der Helm-Middleware-Bibliothek haben wir verschiedene Sicherheitsma?nahmen eingerichtet. Wir importieren auch verschiedene Routendateien für verschiedene Teile der Anwendung, z. B. ?supplierRoutes“, ?bookingRoutes“, ?locationRoutes“, ?notificationRoutes“, ?carRoutes“ und ?userRoutes“. Zum Schluss laden wir Express-Routen und exportieren die App.

Es gibt 8 Routen in der API. Jede Route verfügt über einen eigenen Controller, der dem MVC-Entwurfsmuster und den SOLID-Prinzipien folgt. Nachfolgend sind die Hauptrouten aufgeführt:

• userRoutes: Stellt REST-Funktionen für Benutzer bereit
• supplierRoutes: Bietet REST-Funktionen im Zusammenhang mit Lieferanten
• countryRoutes: Bietet REST-Funktionen im Zusammenhang mit L?ndern
• locationRoutes: Bietet REST-Funktionen im Zusammenhang mit Standorten
• carRoutes: Bietet REST-Funktionen im Zusammenhang mit Autos
• bookingRoutes: Bietet REST-Funktionen im Zusammenhang mit Buchungen
• notificationRoutes: Bietet REST-Funktionen im Zusammenhang mit Benachrichtigungen
• stripeRoutes: Bietet REST-Funktionen im Zusammenhang mit dem Stripe-Zahlungsgateway

Wir werden nicht jede Route einzeln erkl?ren. Wir nehmen zum Beispiel ?countryRoutes“ und sehen, wie es erstellt wurde:

import express from 'express'
import routeNames from '../config/countryRoutes.config'
import authJwt from '../middlewares/authJwt'
import * as countryController from '../controllers/countryController'

const routes = express.Router()

routes.route(routeNames.validate).post(authJwt.verifyToken, countryController.validate)
routes.route(routeNames.create).post(authJwt.verifyToken, countryController.create)
routes.route(routeNames.update).put(authJwt.verifyToken, countryController.update)
routes.route(routeNames.delete).delete(authJwt.verifyToken, countryController.deleteCountry)
routes.route(routeNames.getCountry).get(authJwt.verifyToken, countryController.getCountry)
routes.route(routeNames.getCountries).get(authJwt.verifyToken, countryController.getCountries)
routes.route(routeNames.getCountriesWithLocations).get(countryController.getCountriesWithLocations)
routes.route(routeNames.checkCountry).get(authJwt.verifyToken, countryController.checkCountry)
routes.route(routeNames.getCountryId).get(authJwt.verifyToken, countryController.getCountryId)

export default routes

Zuerst erstellen wir einen Express-Router. Anschlie?end erstellen wir die Routen anhand ihres Namens, ihrer Methode, Middleware und Controller.

routeNames enth?lt die Routennamen von countryRoutes:

const routes = {
  validate: '/api/validate-country',
  create: '/api/create-country',
  update: '/api/update-country/:id',
  delete: '/api/delete-country/:id',
  getCountry: '/api/country/:id/:language',
  getCountries: '/api/countries/:page/:size/:language',
  getCountriesWithLocations: '/api/countries-with-locations/:language/:imageRequired/:minLocations',
  checkCountry: '/api/check-country/:id',
  getCountryId: '/api/country-id/:name/:language',
}

export default routes

countryController enth?lt die Hauptgesch?ftslogik in Bezug auf L?nder. Wir werden nicht den gesamten Quellcode des Controllers sehen, da er recht umfangreich ist, aber wir nehmen zum Beispiel die Funktion zum Erstellen eines Controllers.

Unten finden Sie das L?ndermodell:

import { Schema, model } from 'mongoose'
import * as env from '../config/env.config'

const countrySchema = new Schema<env.Country>(
  {
    values: {
      type: [Schema.Types.ObjectId],
      ref: 'LocationValue',
      required: [true, "can't be blank"],
      validate: (value: any): boolean => Array.isArray(value),
    },
  },
  {
    timestamps: true,
    strict: true,
    collection: 'Country',
  },
)

const Country = model<env.Country>('Country', countrySchema)

export default Country

Unten ist der TypeScript-Typ env.Country:

export interface Country extends Document {
  values: Types.ObjectId[]
  name?: string
}

Ein Land hat mehrere Werte. Eine pro Sprache. Standardm??ig werden Englisch und Franz?sisch unterstützt.

Unten ist das LocationValue-Modell:

import 'dotenv/config'
import process from 'node:process'
import fs from 'node:fs/promises'
import http from 'node:http'
import https, { ServerOptions } from 'node:https'
import * as env from './config/env.config'
import * as databaseHelper from './common/databaseHelper'
import app from './app'
import * as logger from './common/logger'

if (
  await databaseHelper.connect(env.DB_URI, env.DB_SSL, env.DB_DEBUG)
  && await databaseHelper.initialize()
) {
  let server: http.Server | https.Server

  if (env.HTTPS) {
    https.globalAgent.maxSockets = Number.POSITIVE_INFINITY
    const privateKey = await fs.readFile(env.PRIVATE_KEY, 'utf8')
    const certificate = await fs.readFile(env.CERTIFICATE, 'utf8')
    const credentials: ServerOptions = { key: privateKey, cert: certificate }
    server = https.createServer(credentials, app)

    server.listen(env.PORT, () => {
      logger.info('HTTPS server is running on Port', env.PORT)
    })
  } else {
    server = app.listen(env.PORT, () => {
      logger.info('HTTP server is running on Port', env.PORT)
    })
  }

  const close = () => {
    logger.info('Gracefully stopping...')
    server.close(async () => {
      logger.info(`HTTP${env.HTTPS ? 'S' : ''} server closed`)
      await databaseHelper.close(true)
      logger.info('MongoDB connection closed')
      process.exit(0)
    })
  }

  ['SIGINT', 'SIGTERM', 'SIGQUIT'].forEach((signal) => process.on(signal, close))
}

Unten ist der TypeScript-Typ env.LocationValue:

import express from 'express'
import compression from 'compression'
import helmet from 'helmet'
import nocache from 'nocache'
import cookieParser from 'cookie-parser'
import i18n from './lang/i18n'
import * as env from './config/env.config'
import cors from './middlewares/cors'
import allowedMethods from './middlewares/allowedMethods'
import supplierRoutes from './routes/supplierRoutes'
import bookingRoutes from './routes/bookingRoutes'
import locationRoutes from './routes/locationRoutes'
import notificationRoutes from './routes/notificationRoutes'
import carRoutes from './routes/carRoutes'
import userRoutes from './routes/userRoutes'
import stripeRoutes from './routes/stripeRoutes'
import countryRoutes from './routes/countryRoutes'
import * as helper from './common/helper'

const app = express()

app.use(helmet.contentSecurityPolicy())
app.use(helmet.dnsPrefetchControl())
app.use(helmet.crossOriginEmbedderPolicy())
app.use(helmet.frameguard())
app.use(helmet.hidePoweredBy())
app.use(helmet.hsts())
app.use(helmet.ieNoOpen())
app.use(helmet.noSniff())
app.use(helmet.permittedCrossDomainPolicies())
app.use(helmet.referrerPolicy())
app.use(helmet.xssFilter())
app.use(helmet.originAgentCluster())
app.use(helmet.crossOriginResourcePolicy({ policy: 'cross-origin' }))
app.use(helmet.crossOriginOpenerPolicy())

app.use(nocache())
app.use(compression({ threshold: 0 }))
app.use(express.urlencoded({ limit: '50mb', extended: true }))
app.use(express.json({ limit: '50mb' }))

app.use(cors())
app.options('*', cors())
app.use(cookieParser(env.COOKIE_SECRET))
app.use(allowedMethods)

app.use('/', supplierRoutes)
app.use('/', bookingRoutes)
app.use('/', locationRoutes)
app.use('/', notificationRoutes)
app.use('/', carRoutes)
app.use('/', userRoutes)
app.use('/', stripeRoutes)
app.use('/', countryRoutes)

i18n.locale = env.DEFAULT_LANGUAGE

await helper.mkdir(env.CDN_USERS)
await helper.mkdir(env.CDN_TEMP_USERS)
await helper.mkdir(env.CDN_CARS)
await helper.mkdir(env.CDN_TEMP_CARS)
await helper.mkdir(env.CDN_LOCATIONS)
await helper.mkdir(env.CDN_TEMP_LOCATIONS)

export default app

Ein LocationValue hat einen Sprachcode (ISO 639-1) und einen Zeichenfolgenwert.

Unten finden Sie die Funktion zum Erstellen eines Controllers:

import express from 'express'
import routeNames from '../config/countryRoutes.config'
import authJwt from '../middlewares/authJwt'
import * as countryController from '../controllers/countryController'

const routes = express.Router()

routes.route(routeNames.validate).post(authJwt.verifyToken, countryController.validate)
routes.route(routeNames.create).post(authJwt.verifyToken, countryController.create)
routes.route(routeNames.update).put(authJwt.verifyToken, countryController.update)
routes.route(routeNames.delete).delete(authJwt.verifyToken, countryController.deleteCountry)
routes.route(routeNames.getCountry).get(authJwt.verifyToken, countryController.getCountry)
routes.route(routeNames.getCountries).get(authJwt.verifyToken, countryController.getCountries)
routes.route(routeNames.getCountriesWithLocations).get(countryController.getCountriesWithLocations)
routes.route(routeNames.checkCountry).get(authJwt.verifyToken, countryController.checkCountry)
routes.route(routeNames.getCountryId).get(authJwt.verifyToken, countryController.getCountryId)

export default routes

In dieser Funktion rufen wir den Hauptteil der Anfrage ab, durchlaufen die im Hauptteil bereitgestellten Werte (ein Wert pro Sprache) und erstellen einen LocationValue. Abschlie?end erstellen wir das Land abh?ngig von den erstellten Standortwerten.

Frontend

Das Frontend ist eine Webanwendung, die mit Node.js, React, MUI und TypeScript erstellt wurde. Im Frontend kann der Kunde je nach Abhol- und Rückgabeort und -zeit nach verfügbaren Autos suchen, ein Auto ausw?hlen und zur Kasse gehen:

• ./frontend/src/assets/ Ordner enth?lt CSS und Bilder.
• ./frontend/src/pages/ Ordner enth?lt React-Seiten.
• ./frontend/src/components/ Ordner enth?lt React-Komponenten.
• ./frontend/src/services/ enth?lt API-Client-Dienste.
• ./frontend/src/App.tsx ist die Haupt-React-App, die Routen enth?lt.
• ./frontend/src/index.tsx ist der Haupteinstiegspunkt des Frontends.

TypeScript-Typdefinitionen werden im Paket ./packages/bookcars-types definiert.

App.tsx ist die Hauptreaktions-App:

const routes = {
  validate: '/api/validate-country',
  create: '/api/create-country',
  update: '/api/update-country/:id',
  delete: '/api/delete-country/:id',
  getCountry: '/api/country/:id/:language',
  getCountries: '/api/countries/:page/:size/:language',
  getCountriesWithLocations: '/api/countries-with-locations/:language/:imageRequired/:minLocations',
  checkCountry: '/api/check-country/:id',
  getCountryId: '/api/country-id/:name/:language',
}

export default routes

Wir verwenden React Lazy Loading, um jede Route zu laden.

Wir werden nicht jede Seite des Frontends behandeln, aber Sie k?nnen den Quellcode ?ffnen und jede einzelne Seite sehen, wenn Sie m?chten.

Mobile App

Die Plattform bietet eine native mobile App für Android und iOS. Die mobile App wurde mit React Native, Expo und TypeScript erstellt. Wie beim Frontend erm?glicht die mobile App dem Kunden, je nach Abhol- und Rückgabeort und -zeit nach verfügbaren Autos zu suchen, ein Auto auszuw?hlen und zur Kasse zu gehen.

Der Kunde erh?lt Push-Benachrichtigungen, wenn seine Buchung aus dem Backend aktualisiert wird. Push-Benachrichtigungen werden mit Node.js, Expo Server SDK und Firebase erstellt.

• ./mobile/assets/ Ordner enth?lt Bilder.
• ./mobile/screens/-Ordner enth?lt die Hauptbildschirme von React Native.
• ./mobile/components/ Ordner enth?lt React Native-Komponenten.
• ./mobile/services/ enth?lt API-Client-Dienste.
• ./mobile/App.tsx ist die wichtigste React Native App.

TypeScript-Typdefinitionen sind definiert in:

• ./mobile/types/index.d.ts
• ./mobile/types/env.d.ts
• ./mobile/miscellaneous/bookcarsTypes.ts

./mobile/types/ wird wie folgt in ./mobile/tsconfig.json geladen:

import { Schema, model } from 'mongoose'
import * as env from '../config/env.config'

const countrySchema = new Schema<env.Country>(
  {
    values: {
      type: [Schema.Types.ObjectId],
      ref: 'LocationValue',
      required: [true, "can't be blank"],
      validate: (value: any): boolean => Array.isArray(value),
    },
  },
  {
    timestamps: true,
    strict: true,
    collection: 'Country',
  },
)

const Country = model<env.Country>('Country', countrySchema)

export default Country

App.tsx ist der Haupteinstiegspunkt der React Native-App:

'react-native-gesture-handler' importieren
importiere React, { useCallback, useEffect, useRef, useState } aus 'react'
importiere { RootSiblingParent } aus 'react-native-root-siblings'
import { NavigationContainer, NavigationContainerRef } aus '@react-navigation/native'
importiere { StatusBar as ExpoStatusBar } aus 'expo-status-bar'
importiere { SafeAreaProvider } aus 'react-native-safe-area-context'
{ Provider } aus 'react-native-paper' importieren
* als SplashScreen aus 'expo-splash-screen' importieren
* als Benachrichtigungen aus ?expo-notifications“ importieren
importiere { StripeProvider } aus '@stripe/stripe-react-native'
SchubladeNavigator aus ?./components/DrawerNavigator“ importieren
* als Helfer aus './common/helper' importieren
* als NotificationService aus './services/NotificationService' importieren
* als UserService aus './services/UserService' importieren
importiere { GlobalProvider } aus './context/GlobalContext'
* als Umgebung aus ?./config/env.config“ importieren

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    ShouldShowAlert: wahr,
    ShouldPlaySound: wahr,
    ShouldSetBadge: true,
  }),
})

//
// Verhindern, dass der native Begrü?ungsbildschirm vor der Deklaration der App-Komponente automatisch ausgeblendet wird
//
SplashScreen.preventAutoHideAsync()
  .then((result) => console.log(`SplashScreen.preventAutoHideAsync() erfolgreich: ${result}`))
  .catch(console.warn) // Es ist gut, jeden Fehler explizit abzufangen und zu untersuchen

const App = () => {
  const [appIsReady, setAppIsReady] = useState(false)

  const ResponseListener = useRef<Notifications.Subscription>()
  const navigationRef = useRef<NavigationContainerRef<StackParams>>(null)

  useEffect(() => {
    const register = async () => {
      const login = Warten auf UserService.loggedIn()
      if (eingeloggt) {
        const currentUser = Warten auf UserService.getCurrentUser()
        if (currentUser?._id) {
          Warten auf helper.registerPushToken(currentUser._id)
        } anders {
          helper.error()
        }
      }
    }

    //
    // Push-Benachrichtigungstoken registrieren
    //
    registrieren()

    //
    // Dieser Listener wird immer dann ausgel?st, wenn ein Benutzer auf eine Benachrichtigung tippt oder mit ihr interagiert (funktioniert, wenn die App im Vordergrund, im Hintergrund oder beendet ist).
    //
    ResponseListener.current = Notifications.addNotificationResponseReceivedListener(async (response) => {
      versuchen {
        if (navigationRef.current) {
          const { data } = Response.notification.request.content

          if (data.booking) {
            if (data.user && data.notification) {
              Warten Sie auf NotificationService.markAsRead(data.user, [data.notification])
            }
            navigationRef.current.navigate('Booking', { id: data.booking })
          } anders {
            navigationRef.current.navigate('Benachrichtigungen', {})
          }
        }
      } Catch (Err) {
        helper.error(err, false)
      }
    })

    return () => {
      Notifications.removeNotificationSubscription(responseListener.current!)
    }
  }, [])

  setTimeout(() => {
    setAppIsReady(true)
  }, 500)

  const onReady = useCallback(async () => {
    if (appIsReady) {
      //
      // Dies weist den Begrü?ungsbildschirm an, sich sofort auszublenden! Wenn wir das nachrufen
      // `setAppIsReady`, dann sehen wir m?glicherweise einen leeren Bildschirm, w?hrend die App l?uft
      // seinen Anfangszustand laden und seine ersten Pixel rendern. Also stattdessen,
      // Wir blenden den Begrü?ungsbildschirm aus, sobald wir wissen, dass die Root-Ansicht dies bereits getan hat
      // Layout ausgeführt.
      //
      Warten Sie auf SplashScreen.hideAsync()
    }
  }, [appIsReady])

  if (!appIsReady) {
    null zurückgeben
  }

  zurückkehren (
    <GlobalProvider>
      <SafeAreaProvider>
        <Anbieter>
          <StripeProvider publizierbarKey={env.STRIPE_PUBLISHABLE_KEY} MerchantIdentifier={env.STRIPE_MERCHANT_IDENTIFIER}>
            <RootSiblingParent>
              <NavigationContainer ref={navigationRef} onReady={onReady}>
                <ExpoStatusBar>



<p>Wir werden nicht jeden Bildschirm der mobilen App behandeln, aber Sie k?nnen den Quellcode ?ffnen und jeden einzelnen Bildschirm sehen, wenn Sie m?chten.</p>

<h2>
  
  
  Admin-Dashboard
</h2>

<p>Das Admin-Dashboard ist eine Webanwendung, die mit Node.js, React, MUI und TypeScript erstellt wurde. Vom Backend aus k?nnen Administratoren Lieferanten, Autos, Standorte, Kunden und Buchungen erstellen und verwalten. Wenn neue Lieferanten über das Backend erstellt werden, erhalten sie eine E-Mail mit der Aufforderung, ein Konto zu erstellen, um auf das Backend zuzugreifen und ihre Fahrzeugflotte und Buchungen zu verwalten.</p>

• ./backend/assets/ Ordner enth?lt CSS und Bilder.
• ./backend/pages/ Ordner enth?lt React-Seiten.
• ./backend/components/ Ordner enth?lt React-Komponenten.
• ./backend/services/ enth?lt API-Client-Dienste.
• ./backend/App.tsx ist die Haupt-React-App, die Routen enth?lt.
• ./backend/index.tsx ist der Haupteinstiegspunkt des Admin-Dashboards.

TypeScript-Typdefinitionen werden im Paket ./packages/bookcars-types definiert.

App.tsx des Backends folgt einer ?hnlichen Logik wie App.tsx des Frontends.

Wir werden nicht jede Seite des Admin-Dashboards behandeln, aber Sie k?nnen den Quellcode ?ffnen und jede einzelne Seite sehen, wenn Sie m?chten.

Sehenswürdigkeiten

Das Erstellen der mobilen App mit React Native und Expo ist sehr einfach. Expo macht die mobile Entwicklung mit React Native sehr einfach.

Die Verwendung derselben Sprache (TypeScript) für Backend-, Frontend- und Mobilentwicklung ist sehr praktisch.

TypeScript ist eine sehr interessante Sprache und hat viele Vorteile. Durch das Hinzufügen statischer Typisierung zu JavaScript k?nnen wir viele Fehler vermeiden und qualitativ hochwertigen, skalierbaren, besser lesbaren und wartbaren Code erstellen, der leicht zu debuggen und zu testen ist.

Das ist es! Ich hoffe, dass Ihnen die Lektüre dieses Artikels gefallen hat.

Ressourcen

1. übersicht
2. Architektur
3. Installation (selbst gehostet)
4. Installieren (VPS)
5. Installieren (Docker)
   1. Docker-Image
   2. SSL
6. Stripe einrichten
7. Mobile App erstellen
8. Demo-Datenbank
   1. Windows, Linux und macOS
   2. Docker
9. Von der Quelle ausführen
10. Führen Sie die mobile App aus
    1. Voraussetzungen
    2. Anleitung
    3. Push-Benachrichtigungen
11. W?hrung ?ndern
12. Neue Sprache hinzufügen
13. Unit-Tests und Abdeckung
14. Protokolle

Das obige ist der detaillierte Inhalt vonVon Null bis Storefront: Meine Reise zum Aufbau einer Autovermietungs-Website und einer mobilen App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!