ゼロから店頭まで: 不動産レンタル プラットフォームを構築する私の旅

import express from 'express'
import multer from 'multer'
import routeNames from '../config/propertyRoutes.config'
import authJwt from '../middlewares/authJwt'
import * as propertyController from '../controllers/propertyController'

const routes = express.Router()

routes.route(routeNames.create).post(authJwt.verifyToken, propertyController.create)
routes.route(routeNames.update).put(authJwt.verifyToken, propertyController.update)
routes.route(routeNames.checkProperty).get(authJwt.verifyToken, propertyController.checkProperty)
routes.route(routeNames.delete).delete(authJwt.verifyToken, propertyController.deleteProperty)
routes.route(routeNames.uploadImage).post([authJwt.verifyToken, multer({ storage: multer.memoryStorage() }).single('image')], propertyController.uploadImage)
routes.route(routeNames.deleteImage).post(authJwt.verifyToken, propertyController.deleteImage)
routes.route(routeNames.deleteTempImage).post(authJwt.verifyToken, propertyController.deleteTempImage)
routes.route(routeNames.getProperty).get(propertyController.getProperty)
routes.route(routeNames.getProperties).post(authJwt.verifyToken, propertyController.getProperties)
routes.route(routeNames.getBookingProperties).post(authJwt.verifyToken, propertyController.getBookingProperties)
routes.route(routeNames.getFrontendProperties).post(propertyController.getFrontendProperties)

export default routes

const routes = {
  create: '/api/create-property',
  update: '/api/update-property',
  delete: '/api/delete-property/:id',
  uploadImage: '/api/upload-property-image',
  deleteTempImage: '/api/delete-temp-property-image/:fileName',
  deleteImage: '/api/delete-property-image/:property/:image',
  getProperty: '/api/property/:id/:language',
  getProperties: '/api/properties/:page/:size',
  getBookingProperties: '/api/booking-properties/:page/:size',
  getFrontendProperties: '/api/frontend-properties/:page/:size',
  checkProperty: '/api/check-property/:id',
}

export default routes

import { Schema, model } from 'mongoose'
import * as movininTypes from ':movinin-types'
import * as env from '../config/env.config'

const propertySchema = new Schema<env.Property>(
  {
    name: {
      type: String,
      required: [true, "can't be blank"],
    },
    type: {
      type: String,
      enum: [
        movininTypes.PropertyType.House,
        movininTypes.PropertyType.Apartment,
        movininTypes.PropertyType.Townhouse,
        movininTypes.PropertyType.Plot,
        movininTypes.PropertyType.Farm,
        movininTypes.PropertyType.Commercial,
        movininTypes.PropertyType.Industrial,
      ],
      required: [true, "can't be blank"],
    },
    agency: {
      type: Schema.Types.ObjectId,
      required: [true, "can't be blank"],
      ref: 'User',
      index: true,
    },
    description: {
      type: String,
      required: [true, "can't be blank"],
    },
    available: {
      type: Boolean,
      default: true,
    },
    image: {
      type: String,
    },
    images: {
      type: [String],
    },
    bedrooms: {
      type: Number,
      required: [true, "can't be blank"],
      validate: {
        validator: Number.isInteger,
        message: '{VALUE} is not an integer value',
      },
    },
    bathrooms: {
      type: Number,
      required: [true, "can't be blank"],
      validate: {
        validator: Number.isInteger,
        message: '{VALUE} is not an integer value',
      },
    },
    kitchens: {
      type: Number,
      default: 1,
      validate: {
        validator: Number.isInteger,
        message: '{VALUE} is not an integer value',
      },
    },
    parkingSpaces: {
      type: Number,
      default: 0,
      validate: {
        validator: Number.isInteger,
        message: '{VALUE} is not an integer value',
      },
    },
    size: {
      type: Number,
    },
    petsAllowed: {
      type: Boolean,
      required: [true, "can't be blank"],
    },
    furnished: {
      type: Boolean,
      required: [true, "can't be blank"],
    },
    minimumAge: {
      type: Number,
      required: [true, "can't be blank"],
      min: env.MINIMUM_AGE,
      max: 99,
    },
    location: {
      type: Schema.Types.ObjectId,
      ref: 'Location',
      required: [true, "can't be blank"],
    },
    address: {
      type: String,
    },
    price: {
      type: Number,
      required: [true, "can't be blank"],
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    cancellation: {
      type: Number,
      default: 0,
    },
    aircon: {
      type: Boolean,
      default: false,
    },
    rentalTerm: {
      type: String,
      enum: [
        movininTypes.RentalTerm.Monthly,
        movininTypes.RentalTerm.Weekly,
        movininTypes.RentalTerm.Daily,
        movininTypes.RentalTerm.Yearly,
      ],
      required: [true, "can't be blank"],
    },
  },
  {
    timestamps: true,
    strict: true,
    collection: 'Property',
  },
)

const Property = model<env.Property>('Property', propertySchema)

export default Property

export interface Property extends Document {
  name: string
  type: movininTypes.PropertyType
  agency: Types.ObjectId
  description: string
  image: string
  images?: string[]
  bedrooms: number
  bathrooms: number
  kitchens?: number
  parkingSpaces?: number,
  size?: number
  petsAllowed: boolean
  furnished: boolean
  minimumAge: number
  location: Types.ObjectId
  address?: string
  price: number
  hidden?: boolean
  cancellation?: number
  aircon?: boolean
  available?: boolean
  rentalTerm: movininTypes.RentalTerm
}

「react-native-gesture-handler」をインポートします
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { RootSiblingParent } from 'react-native-root-siblings'
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native'
import { StatusBar as ExpoStatusBar } from 'expo-status-bar'
import { SafeAreaProvider } から 'react-native-safe-area-context'
import { Provider } from 'react-native-paper'
import * as SplashScreen from 'expo-splash-screen'
import * 'expo-notifications' からの通知として
import { StripeProvider } から '@ストライプ/ストライプ-反応-ネイティブ'
'./components/DrawerNavigator' から DrawerNavigator をインポートします
import * './common/helper' からヘルパーとして
import * as NoticeService from './services/NotificationService'
import * as UserService from './services/UserService'
'./context/GlobalContext' から { GlobalProvider } をインポートします
import * as env from './config/env.config'

Notices.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true、
    shouldPlaySound: true、
    shouldSetBadge: true、
  })、
})

//
// アプリコンポーネントの宣言前にネイティブのスプラッシュ画面が自動非表示になるのを防ぎます
//
SplashScreen.preventAutoHideAsync()
  .then((result) => console.log(`SplashScreen.preventAutoHideAsync() が成功しました: ${result}`))
  .catch(console.warn) // エラーを明示的にキャッチして検査することは良いことです

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

  const responseListener = useRef<Notifications.Subscription>()
  const NavigationRef = useRef<navigationcontainerref>>(null)

  useEffect(() => {
    const register = async () => {
      const loggedIn = await UserService.loggedIn()
      if (ログイン) {
        const currentUser = await UserService.getCurrentUser()
        if (currentUser?._id) {
          await helper.registerPushToken(currentUser._id)
        } それ以外 {
          helper.error()
        }
      }
    }

    //
    // プッシュ通知トークンを登録する
    //
    登録する（）

    //
    // このリスナーは、ユーザーが通知をタップするか通知を操作するたびに起動されます (アプリがフォアグラウンド、バックグラウンド、または強制終了されたときに機能します)
    //
    responseListener.current = Notices.addNotificationResponseReceivedListener(async (応答) => {
      試す {
        if (navigationRef.current) {
          const { データ } = 応答.通知.リクエスト.コンテンツ

          if (data.booking) {
            if (data.user && data.notification) {
              await NoticeService.markAsRead(data.user, [data.notification])
            }
            NavigationRef.current.navigate('予約', { id: data.booking })
          } それ以外 {
            NavigationRef.current.navigate('通知', {})
          }
        }
      } キャッチ (エラー) {
        helper.error(エラー、偽)
      }
    }）

    return() => {
      Notices.removeNotificationSubscription(responseListener.current!)
    }
  }、[])

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

  const onReady = useCallback(async () => {
    if (appIsReady) {
      //
      // これは、スプラッシュ スクリーンをすぐに非表示にするように指示します。これを後で呼び出すと
      // `setAppIsReady` の場合、アプリの起動中に空白の画面が表示される場合があります。
      // 初期状態をロードし、最初のピクセルをレンダリングします。そこで代わりに、
      // ルート ビューがすでに存在していることがわかったら、スプラッシュ スクリーンを非表示にします。
      // レイアウトを実行しました。
      //
      SplashScreen.hideAsync() を待つ
    }
  }, [appIsReady])

  if (!appIsReady) {
    nullを返す
  }

  戻る （
    <グローバルプロバイダー>
      <セーフエリアプロバイダー>
        ＜プロバイダ＞
          <StripeProvider publicableKey={env.STRIPE_PUBLISHABLE_KEY} MerchantIdentifier={env.STRIPE_MERCHANT_IDENTIFIER}>
            <RootSiblingParent>
              <NavigationContainer ref={navigationRef} onReady={onReady}>
                <expostatusbar>



<p>モバイル アプリの各画面については説明しませんが、ソース コードを参照して各画面を確認することができます。</p>

<h2>
  
  
  管理者ダッシュボード
</h2>

<p>管理者ダッシュボードは、Node.js、React、MUI、TypeScript で構築された Web アプリケーションです。管理者はバックエンドから、サプライヤー、車両、場所、顧客、予約を作成および管理できます。新しいサプライヤーがバックエンドから作成されると、管理ダッシュボードにアクセスして車両の保有車両と予約を管理するためにアカウントを作成するよう求めるメールが送信されます。</p>

<ul>
<li>./backend/assets/ フォルダーには CSS と画像が含まれています。</li>
<li>./backend/pages/ フォルダーには React ページが含まれています。</li>
<li>./backend/components/ フォルダーには React コンポーネントが含まれています。</li>
<li>./backend/services/ には API クライアント サービスが含まれています。</li>
<li>./backend/App.tsx は、ルートを含むメインの React アプリです。</li>
<li>./backend/index.tsx は、管理ダッシュボードのメイン エントリ ポイントです。</li>
</ul>

<p>TypeScript の型定義は、パッケージ ./packages/movinin-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>
インストール(Docker)

<ol>
<li>Docker イメージ</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>


          

            
        </expostatusbar></navigationcontainerref>