제로에서 매장까지: 자동차 렌탈 웹사이트와 모바일 앱을 구축하는 나의 여정

내용물

1. 소개
2. 테크스택
3. 빠른 개요
4. API
5. 프런트엔드
6. 모바일 앱
7. 관리 대시보드
8. 관심지역
9. 리소스

소스코드: https://github.com/aelassas/bookcars

데모: https://bookcars.dynv6.net:3002

소개

이 아이디어는 경계 없이 모든 측면을 제어할 수 있는 완전 맞춤형 자동차 렌탈 웹사이트와 모바일 앱을 만들고자 하는 열망에서 탄생했습니다.

• UI/UX 소유: 템플릿 제한에 맞서지 않고 고유한 고객 경험을 디자인하세요
• 백엔드 제어: 요구 사항에 완벽하게 맞는 맞춤형 비즈니스 로직 및 데이터 구조 구현
• 마스터 DevOps: 선호하는 도구와 워크플로를 사용하여 애플리케이션 배포, 확장 및 모니터링
• 자유로운 확장: 플랫폼 제약이나 추가 비용 없이 새로운 기능과 통합을 추가하세요

기술 스택

이를 가능하게 한 기술 스택은 다음과 같습니다.

• 타입스크립트
• Node.js
• 몽고DB
• 반응
• 무이
• 리액트 네이티브
• 엑스포
• 스트라이프
• 도커

TypeScript의 수많은 장점 때문에 주요 디자인 결정이 TypeScript를 사용하기로 결정되었습니다. TypeScript는 강력한 타이핑, 도구 및 통합을 제공하여 디버그 및 테스트가 쉬운 고품질, 확장성, 읽기 쉽고 유지 관리가 쉬운 코드를 제공합니다.

저는 강력한 렌더링 기능을 위해 React를 선택했고, 유연한 데이터 모델링을 위해 MongoDB를, 안전한 결제 처리를 위해 Stripe를 선택했습니다.

이 스택을 선택하면 단순히 웹사이트와 모바일 앱을 구축하는 것이 아니라 강력한 오픈 소스 기술과 성장하는 개발자 커뮤니티를 기반으로 필요에 따라 발전할 수 있는 기반에 투자하는 것입니다.

React는 다음과 같은 이유로 탁월한 선택입니다.

1. 구성요소 기반 아키텍처
   • 복잡한 UI를 재사용 가능한 작은 조각으로 나눌 수 있습니다
   • 코드를 더욱 유지 관리하고 테스트하기 쉽게 만듭니다
   • 더 나은 코드 구성 및 재사용 가능
2. 가상 DOM 성능
   • React의 가상 DOM은 필요한 것만 효율적으로 업데이트합니다
   • 페이지 로드 속도가 빨라지고 사용자 경험이 향상됩니다
   • 불필요한 재렌더링 감소
3. 풍부한 생태계
   • 사전 구축된 구성 요소로 구성된 방대한 라이브러리
   • 광범위한 도구
   • 지원과 리소스를 위한 대규모 커뮤니티
4. 강력한 개발자 경험
   • 즉각적인 피드백을 위한 핫 리로딩
   • 뛰어난 디버깅 도구
   • JSX를 사용하면 UI 코드 작성을 더욱 직관적으로 만들 수 있습니다
5. 업계 지원
   • Meta(이전 Facebook) 지원
   • 많은 대기업에서 사용
   • 지속적인 개발과 개선
6. 유연성
   • 소규모 및 대규모 애플리케이션 모두에 적합
   • 기존 프로젝트에 점진적으로 통합 가능
   • 다양한 렌더링 전략 지원(클라이언트측, 서버측, 정적)

빠른 개요

이 섹션에서는 프런트엔드, 관리자 대시보드 및 모바일 앱의 기본 페이지를 볼 수 있습니다.

프런트엔드

프런트엔드에서 사용자는 이용 가능한 차량을 검색하고 차량을 선택한 후 결제할 수 있습니다.

아래는 사용자가 승하차 지점과 시간을 선택하고 이용 가능한 차량을 검색할 수 있는 프런트엔드 메인 페이지입니다.

아래는 렌트카를 선택할 수 있는 메인 페이지의 검색 결과입니다.

아래는 사용자가 대여 옵션을 설정하고 결제할 수 있는 결제 페이지입니다. 사용자가 등록되지 않은 경우 결제와 등록을 동시에 할 수 있습니다. 아직 등록하지 않은 경우 비밀번호 설정을 위한 확인 및 활성화 이메일을 받게 됩니다.

아래는 로그인 페이지입니다. 프로덕션에서 인증 쿠키는 httpOnly, 서명, 보안 및 엄격한 sameSite입니다. 이러한 옵션은 XSS, CSRF 및 MITM 공격을 방지합니다. 인증 쿠키는 맞춤형 미들웨어를 통해 XST 공격으로부터도 보호됩니다.

아래는 회원가입 페이지입니다.

아래는 사용자가 예약 내역을 확인하고 관리할 수 있는 페이지입니다.

아래는 사용자가 예약 내역을 자세히 볼 수 있는 페이지입니다.

아래는 문의 페이지입니다.

아래는 렌터카 위치 페이지입니다.

아래는 고객이 자신의 알림을 확인하고 관리할 수 있는 페이지입니다.

다른 페이지도 있지만 프론트엔드의 메인 페이지입니다.

관리 대시보드

사용자에는 세 가지 유형이 있습니다.

• 관리자: 관리자 대시보드에 대한 전체 액세스 권한이 있습니다. 그는 무엇이든 할 수 있습니다.
• 공급자: 관리자 대시보드에 대한 액세스가 제한되어 있습니다. 그는 차량과 예약만 관리할 수 있습니다.
• 사용자: 프런트엔드와 모바일 앱에만 액세스할 수 있습니다. 관리자 대시보드에 액세스할 수 없습니다.

이 플랫폼은 여러 공급업체와 협력하도록 설계되었습니다. 각 공급업체는 관리 대시보드에서 차량 및 예약을 관리할 수 있습니다. 플랫폼은 단 하나의 공급업체와만 협력할 수도 있습니다.

관리 대시보드에서 관리자는 공급업체, 자동차, 위치, 사용자 및 예약을 생성하고 관리할 수 있습니다.

관리자가 새 공급업체를 생성하면 해당 공급업체는 차량 및 예약을 관리할 수 있도록 관리 대시보드에 액세스할 수 있는 계정 생성을 위한 자동 이메일을 받게 됩니다.

아래는 관리자 대시보드 로그인 페이지입니다.

아래는 관리자와 공급업체가 예약을 확인하고 관리할 수 있는 관리자 대시보드의 대시보드 페이지입니다.

아래는 보유차량을 조회하고 관리할 수 있는 페이지입니다.

아래는 관리자와 공급업체가 이미지와 자동차 정보를 제공하여 새 자동차를 만들 수 있는 페이지입니다. 자동차 옵션을 무료로 포함하려면 해당 자동차 옵션을 0으로 설정하세요. 그렇지 않은 경우 옵션 가격을 설정하거나 포함하지 않으려면 비워 두세요.

아래는 관리자와 공급업체가 자동차를 편집할 수 있는 페이지입니다.

아래는 관리자가 플랫폼 사용자를 관리할 수 있는 페이지입니다.

아래는 예약 수정 페이지입니다.

다른 페이지도 있지만 관리자 대시보드의 메인 페이지입니다.

API

API는 관리 대시보드, 프런트엔드 및 모바일 앱에 필요한 모든 기능을 노출합니다. API는 MVC 디자인 패턴을 따릅니다. 인증에는 JWT가 사용됩니다. 자동차 관리, 예약, 고객 관련 기능 등 인증이 필요한 기능도 있고, 인증되지 않은 사용자의 위치 및 이용 가능한 차량 검색 등 인증이 필요하지 않은 기능도 있습니다.

• ./api/src/models/ 폴더에는 MongoDB 모델이 포함되어 있습니다.
• ./api/src/routes/ 폴더에는 Express 경로가 포함되어 있습니다.
• ./api/src/controllers/ 폴더에는 컨트롤러가 포함되어 있습니다.
• ./api/src/middlewares/ 폴더에는 미들웨어가 포함되어 있습니다.
• ./api/src/config/env.config.ts에는 구성 및 TypeScript 유형 정의가 포함되어 있습니다.
• ./api/src/lang/ 폴더에는 현지화가 포함되어 있습니다.
• ./api/src/app.ts는 경로가 로드되는 기본 서버입니다.
• ./api/index.ts는 API의 주요 진입점입니다.

index.ts는 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))
}

Node.js와 Express를 사용하여 서버를 시작하는 TypeScript 파일입니다. dotenv, process, fs, http, https, mongoose 및 app을 포함한 여러 모듈을 가져옵니다. 그런 다음 HTTPS 환경 변수가 true로 설정되어 있는지 확인하고, 그렇다면 https 모듈과 제공된 개인 키 및 인증서를 사용하여 HTTPS 서버를 생성합니다. 그렇지 않으면 http 모듈을 사용하여 HTTP 서버를 생성합니다. 서버는 PORT 환경 변수에 지정된 포트에서 수신 대기합니다.

종료 신호가 수신되면 서버를 정상적으로 중지하도록 닫기 기능이 정의되어 있습니다. 서버와 MongoDB 연결을 닫은 후 상태 코드 0으로 프로세스를 종료합니다. 마지막으로 프로세스가 SIGINT, SIGTERM 또는 SIGQUIT 신호를 수신할 때 호출할 닫기 함수를 등록합니다.

app.ts는 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

먼저 MongoDB 연결 문자열을 검색한 다음 MongoDB 데이터베이스와 연결을 설정합니다. 그런 다음 Express 앱을 만들고 cors, 압축, 헬멧 및 nocache와 같은 미들웨어를 로드합니다. 헬멧 미들웨어 라이브러리를 이용하여 다양한 보안 대책을 마련했습니다. 또한 공급자 경로, 예약 경로, 위치 경로, 알림 경로, 자동차 경로, 사용자 경로 등 애플리케이션의 다양한 부분에 대한 다양한 경로 파일을 가져옵니다. 마지막으로 Express 경로를 로드하고 앱을 내보냅니다.

API에는 8개의 경로가 있습니다. 각 경로에는 MVC 디자인 패턴과 SOLID 원칙을 따르는 자체 컨트롤러가 있습니다. 주요 경로는 다음과 같습니다.

• userRoutes: 사용자와 관련된 REST 기능을 제공
• supplierRoutes: 공급자 관련 REST 기능을 제공
• countryRoutes: 국가 관련 REST 기능 제공
• locationRoutes: 위치와 관련된 REST 기능 제공
• carRoutes: 자동차 관련 REST 기능 제공
• bookingRoutes: 예약 관련 REST 기능 제공
• notificationRoutes: 알림 관련 REST 기능 제공
• stripeRoutes: Stripe 결제 게이트웨이 관련 REST 기능을 제공합니다

각 경로를 하나씩 설명하지는 않겠습니다. 예를 들어 countryRoutes를 사용하여 그것이 어떻게 만들어졌는지 살펴보겠습니다.

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

먼저 Express Router를 만듭니다. 그런 다음 이름, 메서드, 미들웨어 및 컨트롤러를 사용하여 경로를 생성합니다.

routeNames에는 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에는 국가에 관한 주요 비즈니스 로직이 포함되어 있습니다. 컨트롤러의 소스 코드는 꽤 크기 때문에 모든 소스 코드를 볼 수는 없지만 컨트롤러 생성 기능을 예로 들어보겠습니다.

아래는 국가별 모델입니다.

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
</env.country></env.country>

아래는 env.Country TypeScript 유형입니다:

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

국가에는 여러 가지 값이 있습니다. 언어당 하나씩. 기본적으로 영어와 프랑스어가 지원됩니다.

아래는 LocationValue 모델입니다:

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))
}

아래는 env.LocationValue TypeScript 유형입니다:

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

LocationValue에는 언어 코드(ISO 639-1)와 문자열 값이 있습니다.

아래는 컨트롤러 생성 기능입니다:

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

이 함수에서는 요청 본문을 검색하고 본문에 제공된 값(언어당 하나의 값)을 반복하고 LocationValue를 생성합니다. 마지막으로 생성된 위치 값에 따라 국가를 생성합니다.

프런트엔드

프런트엔드는 Node.js, React, MUI 및 TypeScript로 구축된 웹 애플리케이션입니다. 고객은 프런트엔드에서 승하차 지점과 시간에 따라 이용 가능한 차량을 검색하고 차량을 선택한 후 결제를 진행할 수 있습니다.

• ./frontend/src/assets/ 폴더에는 CSS와 이미지가 포함되어 있습니다.
• ./frontend/src/pages/ 폴더에는 React 페이지가 포함되어 있습니다.
• ./frontend/src/comComponents/ 폴더에는 React 구성 요소가 포함되어 있습니다.
• ./frontend/src/services/에는 API 클라이언트 서비스가 포함되어 있습니다.
• ./frontend/src/App.tsx는 경로가 포함된 주요 React 앱입니다.
• ./frontend/src/index.tsx는 프런트엔드의 주요 진입점입니다.

TypeScript 유형 정의는 ./packages/bookcars-types 패키지에 정의되어 있습니다.

App.tsx가 주요 반응 앱입니다:

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

각 경로를 로드하기 위해 React 지연 로딩을 사용하고 있습니다.

프런트엔드의 각 페이지를 다루지는 않지만 원하시면 소스코드를 열어서 각 페이지를 보실 수 있습니다.

모바일 앱

이 플랫폼은 Android 및 iOS용 기본 모바일 앱을 제공합니다. 모바일 앱은 React Native, Expo 및 TypeScript로 구축되었습니다. 프런트엔드와 마찬가지로 모바일 앱에서도 고객이 승하차 지점과 시간에 따라 이용 가능한 차량을 검색하고 차량을 선택한 후 결제를 진행할 수 있습니다.

백엔드에서 예약이 업데이트되면 고객은 푸시 알림을 받습니다. 푸시 알림은 Node.js, Expo Server SDK 및 Firebase로 구축되었습니다.

• ./mobile/assets/ 폴더에는 이미지가 포함되어 있습니다.
• ./mobile/screens/ 폴더에는 기본 React Native 화면이 포함되어 있습니다.
• ./mobile/comComponents/ 폴더에는 React Native 구성 요소가 포함되어 있습니다.
• ./mobile/services/에는 API 클라이언트 서비스가 포함되어 있습니다.
• ./mobile/App.tsx가 주요 React Native 앱입니다.

TypeScript 유형 정의는 다음 위치에 정의되어 있습니다.

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

./mobile/types/는 다음과 같이 ./mobile/tsconfig.json에 로드됩니다.

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
</env.country></env.country>

App.tsx는 React Native 앱의 주요 진입점입니다.

'react-native-gesture-handler' 가져오기
import React, { useCallback, useEffect, useRef, useState } from 'react'
'react-native-root-siblings'에서 { RootSiblingParent } 가져오기
'@react-navigation/native'에서 { NavigationContainer, NavigationContainerRef }를 가져옵니다.
'expo-status-bar'에서 { StatusBar를 ExpoStatusBar로 } 가져오기
'react-native-safe-area-context'에서 { SafeAreaProvider } 가져오기
'react-native-paper'에서 { 제공자 } 가져오기
*를 'expo-splash-screen'에서 SplashScreen으로 가져오기
*를 'expo-notifications'에서 알림으로 가져오기
'@stripe/stripe-react-native'에서 { StripeProvider } 가져오기
'./comComponents/DrawerNavigator'에서 DrawerNavigator 가져오기
*를 './common/helper'에서 도우미로 가져오기
*를 './services/NotificationService'에서 NotificationService로 가져오기
*를 './services/UserService'에서 UserService로 가져오기
'./context/GlobalContext'에서 { GlobalProvider } 가져오기
* './config/env.config'에서 env로 가져오기

알림.setNotificationHandler({
  handlerNotification: async () => ({
    shouldShowAlert: 사실,
    shouldPlaySound: 사실,
    shouldSetBadge: 사실,
  }),
})

//
// 앱 구성요소 선언 전에 기본 스플래시 화면이 자동 숨김되는 것을 방지합니다.
//
SplashScreen.preventAutoHideAsync()
  .then((result) => console.log(`SplashScreen.preventAutoHideAsync() 성공: ${result}`))
  .catch(console.warn) // 오류를 명시적으로 포착하고 검사하는 것이 좋습니다.

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

  const responseListener = useRef<notifications.subscription>()
  const NavigationRef = useRef<navigationcontainerref>>(null)

  useEffect(() => {
    const 레지스터 = 비동기() => {
      const LoggedIn = UserService.loggedIn()을 기다립니다.
      if (loggedIn) {
        const currentUser = UserService.getCurrentUser()를 기다립니다.
        if (현재사용자?._id) {
          helper.registerPushToken(currentUser._id)을 기다립니다.
        } 또 다른 {
          도우미.오류()
        }
      }
    }

    //
    // 푸시 알림 토큰 등록
    //
    등록하다()

    //
    // 이 리스너는 사용자가 알림을 탭하거나 알림과 상호작용할 때마다 시작됩니다(앱이 포그라운드, 백그라운드 또는 종료될 때 작동).
    //
    responseListener.current = 알림.addNotificationResponseReceivedListener(async (응답) => {
      노력하다 {
        if (navigationRef.current) {
          const { 데이터 } = response.notification.request.content

          if (data.booking) {
            if (data.user && data.notification) {
              알림Service.markAsRead(data.user, [data.notification])를 기다립니다.
            }
            NavigationRef.current.navigate('예약', { id: data.booking })
          } 또 다른 {
            NavigationRef.current.navigate('알림', {})
          }
        }
      } 잡기 (오류) {
        helper.error(err, false)
      }
    })

    반환() => {
      알림.제거알림구독(responseListener.current!)
    }
  }, [])

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

  const onReady = useCallback(async () => {
    if (appIsReady) {
      //
      // 스플래시 화면을 즉시 숨기도록 지시합니다! 나중에 이것을 호출하면
      // `setAppIsReady`, 그러면 앱이 실행되는 동안 빈 화면이 나타날 수 있습니다.
      // 초기 상태를 로드하고 첫 번째 픽셀을 렌더링합니다. 그래서 대신,
      // 루트 뷰가 이미 있다는 것을 알고 나면 스플래시 화면을 숨깁니다.
      // 레이아웃을 수행했습니다.
      //
      SplashScreen.hideAsync()를 기다립니다.
    }
  }, [appIsReady])

  if (!appIsReady) {
    null을 반환
  }

  반품 (
    
      <safeareaprovider>
        
          <stripeprovider merchantidentifier="{env.STRIPE_MERCHANT_IDENTIFIER}">
            <rootsiblingparent>
              <navigationcontainer ref="{navigationRef}" onready="{onReady}">
                



<p>모바일 앱의 화면을 일일이 다루지는 않겠지만, 원하시면 소스코드를 열어서 하나하나 보실 수 있습니다.</p>

<h2>
  
  
  관리 대시보드
</h2>

<p>관리 대시보드는 Node.js, React, MUI 및 TypeScript로 구축된 웹 애플리케이션입니다. 백엔드에서 관리자는 공급업체, 자동차, 위치, 고객 및 예약을 생성하고 관리할 수 있습니다. 백엔드에서 새로운 공급업체가 생성되면 백엔드에 액세스하고 차량 및 예약을 관리하기 위해 계정을 생성하라는 이메일을 받게 됩니다.</p>

<ul>
<li>./backend/assets/ 폴더에는 CSS와 이미지가 포함되어 있습니다.</li>
<li>./backend/pages/ 폴더에는 React 페이지가 포함되어 있습니다.</li>
<li>./backend/comComponents/ 폴더에는 React 구성 요소가 포함되어 있습니다.</li>
<li>./backend/services/에는 API 클라이언트 서비스가 포함되어 있습니다.</li>
<li>./backend/App.tsx는 경로가 포함된 기본 React 앱입니다.</li>
<li>./backend/index.tsx는 관리 대시보드의 주요 진입점입니다.</li>
</ul>

<p>TypeScript 유형 정의는 ./packages/bookcars-types 패키지에 정의되어 있습니다.</p>

<p>백엔드의 App.tsx는 프런트엔드의 App.tsx와 유사한 로직을 따릅니다.</p>

<p>관리 대시보드의 각 페이지를 다루지는 않지만 원하시면 소스 코드를 열어 각 페이지를 보실 수 있습니다.</p>

<h2>
  
  
  관심 장소
</h2>

<p>React Native와 Expo를 사용하여 모바일 앱을 구축하는 것은 매우 쉽습니다. Expo는 React Native를 사용한 모바일 개발을 매우 간단하게 만듭니다.</p>

<p>백엔드, 프론트엔드, 모바일 개발에 동일한 언어(TypeScript)를 사용하면 매우 편리합니다.</p>

<p>TypeScript는 매우 흥미로운 언어이며 많은 장점을 가지고 있습니다. JavaScript에 정적 유형 지정을 추가하면 많은 버그를 방지하고 디버그 및 테스트가 쉬운 고품질, 확장성, 읽기 및 유지 관리가 용이한 코드를 생성할 수 있습니다.</p>

<p>그렇습니다! 이 글을 재미있게 읽으셨기를 바랍니다.</p>
<h2>
  
  
  자원
</h2>

<ol>
<li>개요</li>
<li>건축</li>
<li>설치(자체 호스팅)</li>
<li>(VPS) 설치</li>
<li>
설치 중(도커)

<ol>
<li>도커 이미지</li>
<li>SSL</li>
</ol>


</li>

<li>스트라이프 설정</li>

<li>모바일 앱 구축</li>

<li>

데모 데이터베이스

<ol>
<li>Windows, Linux 및 macOS</li>
<li>도커</li>
</ol>


</li>

<li>소스에서 실행</li>

<li>

모바일 앱 실행

<ol>
<li>전제조건</li>
<li>지침</li>
<li>푸시 알림</li>
</ol>


</li>

<li>통화 변경</li>

<li>새 언어 추가</li>

<li>단위 테스트 및 적용 범위</li>

<li>로그</li>

</ol>


          

            
        </navigationcontainer></rootsiblingparent></stripeprovider></safeareaprovider></navigationcontainerref></notifications.subscription>

위 내용은 제로에서 매장까지: 자동차 렌탈 웹사이트와 모바일 앱을 구축하는 나의 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!