Kod sumber: https://github.com/aelassas/bookcars
Demo: https://bookcars.dynv6.net:3002
Idea muncul daripada keinginan untuk membina tanpa sempadan – tapak web sewa kereta yang boleh disesuaikan sepenuhnya dan apl mudah alih di mana setiap aspek berada dalam kawalan anda:
Berikut ialah susunan teknologi yang membolehkannya:
Keputusan reka bentuk utama telah dibuat untuk menggunakan TypeScript kerana banyak kelebihannya. TypeScript menawarkan penaipan, perkakasan dan penyepaduan yang kuat, menghasilkan kod berkualiti tinggi, berskala, lebih mudah dibaca dan boleh diselenggara yang mudah untuk nyahpepijat dan diuji.
Saya memilih React untuk keupayaan pemaparan yang berkuasa, MongoDB untuk pemodelan data yang fleksibel dan Stripe untuk pemprosesan pembayaran yang selamat.
Dengan memilih timbunan ini, anda bukan sahaja membina tapak web dan apl mudah alih – anda melabur dalam asas yang boleh berkembang mengikut keperluan anda, disokong oleh teknologi sumber terbuka yang teguh dan komuniti pembangun yang semakin berkembang.
React menonjol sebagai pilihan yang sangat baik kerana:
Dalam bahagian ini, anda akan melihat halaman utama bahagian hadapan, papan pemuka pentadbir dan apl mudah alih.
Dari bahagian hadapan, pengguna boleh mencari kereta yang tersedia, memilih kereta dan daftar keluar.
Di bawah ialah halaman utama bahagian hadapan di mana pengguna boleh memilih tempat pengambilan dan penghantaran serta masa serta mencari kereta yang tersedia.
Di bawah ialah hasil carian halaman utama yang membolehkan pengguna memilih kereta untuk disewa.
Di bawah ialah halaman daftar keluar di mana pengguna boleh menetapkan pilihan sewa dan pembayaran. Jika pengguna tidak berdaftar, dia boleh mendaftar keluar dan mendaftar pada masa yang sama. Dia akan menerima e-mel pengesahan dan pengaktifan untuk menetapkan kata laluannya jika dia belum berdaftar.
Di bawah ialah halaman log masuk. Pada pengeluaran, kuki pengesahan adalah httpSahaja, ditandatangani, selamat dan ketat samaSite. Pilihan ini menghalang serangan XSS, CSRF dan MITM. Kuki pengesahan dilindungi daripada serangan XST juga melalui perisian tengah tersuai.
Di bawah ialah halaman pendaftaran.
Di bawah ialah halaman yang membolehkan pengguna melihat dan mengurus tempahannya.
Di bawah ialah halaman yang membolehkan pengguna melihat tempahan secara terperinci.
Di bawah ialah halaman kenalan.
Di bawah ialah halaman lokasi sewa kereta.
Di bawah ialah halaman yang membolehkan pelanggan melihat dan mengurus pemberitahuannya.
Terdapat halaman lain tetapi ini adalah halaman utama bahagian hadapan.
Terdapat tiga jenis pengguna:
Platform ini direka bentuk untuk berfungsi dengan berbilang pembekal. Setiap pembekal boleh menguruskan armada keretanya dan tempahan dari papan pemuka pentadbir. Platform ini juga boleh berfungsi dengan hanya satu pembekal.
Daripada papan pemuka pentadbir, pengguna pentadbir boleh membuat dan mengurus pembekal, kereta, lokasi, pengguna dan tempahan.
Apabila pengguna pentadbir mencipta pembekal baharu, pembekal akan menerima e-mel automatik untuk membuat akaunnya untuk mengakses papan pemuka pentadbir supaya dia boleh menguruskan armada dan tempahan keretanya.
Di bawah ialah halaman log masuk papan pemuka pentadbir.
Di bawah ialah halaman papan pemuka papan pemuka pentadbir tempat pentadbir dan pembekal boleh melihat dan mengurus tempahan.
Di bawah ialah halaman di mana armada kereta dipaparkan dan boleh diurus.
Di bawah ialah halaman di mana pentadbir dan pembekal boleh mencipta kereta baharu dengan memberikan imej dan maklumat kereta. Untuk pilihan kereta disertakan secara percuma, tetapkan 0 untuk pilihan kereta yang sepadan. Jika tidak, tetapkan harga pilihan atau biarkan ia kosong jika anda tidak mahu memasukkannya.
Di bawah ialah halaman tempat pentadbir dan pembekal boleh mengedit kereta.
Di bawah ialah halaman tempat pentadbir boleh mengurus pengguna platform.
Di bawah ialah halaman untuk mengedit tempahan.
Ada halaman lain tetapi ini adalah halaman utama papan pemuka pentadbir.
Api mendedahkan semua fungsi yang diperlukan untuk papan pemuka pentadbir, bahagian hadapan dan apl mudah alih. API mengikut corak reka bentuk MVC. JWT digunakan untuk pengesahan. Terdapat beberapa fungsi yang memerlukan pengesahan seperti fungsi yang berkaitan dengan pengurusan kereta, tempahan dan pelanggan, dan lain-lain yang tidak memerlukan pengesahan seperti mendapatkan semula lokasi dan kereta yang tersedia untuk pengguna yang tidak disahkan:
index.ts ialah titik masuk utama 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))
}
Ini ialah fail TypeScript yang memulakan pelayan menggunakan Node.js dan Express. Ia mengimport beberapa modul termasuk dotenv, proses, fs, http, https, mongoose dan aplikasi. Ia kemudian menyemak sama ada pembolehubah persekitaran HTTPS ditetapkan kepada benar, dan jika ya, mencipta pelayan HTTPS menggunakan modul https dan kunci peribadi serta sijil yang disediakan. Jika tidak, ia mencipta pelayan HTTP menggunakan modul http. Pelayan mendengar pada port yang dinyatakan dalam pembolehubah persekitaran PORT.
Fungsi tutup ditakrifkan untuk menghentikan pelayan dengan anggun apabila isyarat penamatan diterima. Ia menutup pelayan dan sambungan MongoDB, dan kemudian keluar dari proses dengan kod status 0. Akhir sekali, ia mendaftarkan fungsi tutup untuk dipanggil apabila proses menerima isyarat SIGINT, SIGTERM atau SIGQUIT.
app.ts ialah titik masuk utama 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
Pertama sekali, kami mendapatkan semula rentetan sambungan MongoDB, kemudian kami mewujudkan sambungan dengan pangkalan data MongoDB. Kemudian kami mencipta apl Express dan memuatkan perisian tengah seperti cors, mampatan, topi keledar dan nocache. Kami menyediakan pelbagai langkah keselamatan menggunakan perpustakaan middleware topi keledar. kami juga mengimport pelbagai fail laluan untuk bahagian aplikasi yang berbeza seperti Laluan pembekal, Laluan tempahan, Laluan lokasi, Laluan pemberitahuan, Laluan kereta dan Laluan pengguna. Akhir sekali, kami memuatkan laluan Ekspres dan apl eksport.
Terdapat 8 laluan dalam api. Setiap laluan mempunyai pengawal sendiri mengikut corak reka bentuk MVC dan prinsip SOLID. Di bawah adalah laluan utama:
Kami tidak akan menerangkan setiap laluan satu demi satu. Kami akan mengambil, sebagai contoh, countryRoutes dan melihat cara ia dibuat:
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
Pertama sekali, kami mencipta Penghala Ekspres. Kemudian, kami mencipta laluan menggunakan nama, kaedah, perisian tengah dan pengawalnya.
Nama laluan mengandungi nama laluan 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 mengandungi logik perniagaan utama berkenaan negara. Kami tidak akan melihat semua kod sumber pengawal kerana ia agak besar tetapi kami akan mengambil fungsi pengawal sebagai contoh.
Di bawah ialah model Country:
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
Di bawah ialah env.Country TypeScript type:
export interface Country extends Document {
values: Types.ObjectId[]
name?: string
}
Negara mempunyai pelbagai nilai. Satu setiap bahasa. Secara lalai, bahasa Inggeris dan Perancis disokong.
Di bawah ialah model 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))
}
Di bawah ialah jenis 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 mempunyai kod bahasa (ISO 639-1) dan nilai rentetan.
Di bawah ialah cipta fungsi pengawal:
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
Dalam fungsi ini, kami mendapatkan semula isi permintaan, kami mengulangi nilai yang disediakan dalam kandungan (satu nilai setiap bahasa) dan kami mencipta LocationValue. Akhir sekali, kami mencipta negara bergantung pada nilai lokasi yang dibuat.
Halaman hadapan ialah aplikasi web yang dibina dengan Node.js, React, MUI dan TypeScript. Dari bahagian hadapan, pelanggan boleh mencari kereta yang tersedia bergantung pada tempat pengambilan dan penghantaran serta masa, pilih kereta dan teruskan ke pembayaran:
Takrif jenis TypeScript ditakrifkan dalam pakej ./packages/bookcars-types.
App.tsx ialah Apl tindak balas utama:
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
Kami menggunakan React lazy loading untuk memuatkan setiap laluan.
Kami tidak akan menutup setiap halaman bahagian hadapan, tetapi anda boleh membuka kod sumber dan melihat setiap satu jika anda mahu.
Platform ini menyediakan apl mudah alih asli untuk Android dan iOS. Apl mudah alih dibina dengan React Native, Expo dan TypeScript. Seperti untuk bahagian hadapan, apl mudah alih membolehkan pelanggan mencari kereta yang tersedia bergantung pada tempat pengambilan dan penghantaran serta masa, pilih kereta dan teruskan ke pembayaran.
Pelanggan menerima pemberitahuan tolak jika tempahannya dikemas kini dari bahagian belakang. Pemberitahuan tolak dibina dengan Node.js, SDK Pelayan Ekspo dan Firebase.
Takrif jenis TypeScript ditakrifkan dalam:
./mobile/types/ dimuatkan dalam ./mobile/tsconfig.json seperti berikut:
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 ialah pintu masuk utama apl React Native:
import 'react-native-gesture-handler'
import React, { useCallback, useEffect, useRef, useState } daripada 'react'
import { RootSiblingParent } daripada 'react-native-root-siblings'
import { NavigationContainer, NavigationContainerRef } daripada '@react-navigation/native'
import { StatusBar sebagai ExpoStatusBar } daripada 'expo-status-bar'
import { SafeAreaProvider } daripada 'react-native-safe-area-context'
import { Provider } daripada 'react-native-paper'
import * sebagai SplashScreen daripada 'expo-splash-screen'
import * sebagai Pemberitahuan daripada 'pemberitahuan ekspo'
import { StripeProvider } daripada '@stripe/stripe-react-native'
import DrawerNavigator daripada './components/DrawerNavigator'
import * sebagai pembantu daripada './common/helper'
import * sebagai NotificationService daripada './services/NotificationService'
import * sebagai UserService daripada './services/UserService'
import { GlobalProvider } daripada './context/GlobalContext'
import * sebagai env daripada './config/env.config'
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: benar,
shouldPlaySound: benar,
shouldSetBadge: benar,
}),
})
//
// Cegah skrin percikan asli daripada menyorok secara automatik sebelum pengisytiharan komponen Apl
//
SplashScreen.preventAutoHideAsync()
.then((result) => console.log(`SplashScreen.preventAutoHideAsync() berjaya: ${result}`))
.catch(console.warn) // adalah baik untuk menangkap dan memeriksa sebarang ralat secara eksplisit
const App = () => {
const [appIsReady, setAppIsReady] = useState(false)
const responseListener = useRef<Pemberitahuan.Langganan>()
const navigationRef = useRef<NavigationContainerRef<StackParams>>(null)
useEffect(() => {
daftar const = tak segerak () => {
const loggedIn = tunggu UserService.loggedIn()
jika (log masuk) {
const currentUser = menunggu UserService.getCurrentUser()
jika (Pengguna semasa?._id) {
tunggu helper.registerPushToken(currentUser._id)
} lain {
helper.error()
}
}
}
//
// Daftar token pemberitahuan tolak
//
daftar()
//
// Pendengar ini dipecat apabila pengguna mengetik atau berinteraksi dengan pemberitahuan (berfungsi apabila apl di latar depan, berlatar belakang atau dimatikan)
//
responseListener.current = Notifications.addNotificationResponseReceivedListener(async (respons) => {
cuba {
jika (navigationRef.current) {
const { data } = respons.notification.request.content
jika (data.booking) {
if (data.user && data.notification) {
tunggu NotificationService.markAsRead(data.user, [data.notification])
}
navigationRef.current.navigate('Booking', { id: data.booking })
} lain {
navigationRef.current.navigate('Pemberitahuan', {})
}
}
} tangkap (err) {
helper.error(err, false)
}
})
pulangan () => {
Notifications.removeNotificationSubscription(responseListener.current!)
}
}, [])
setTimeout(() => {
setAppIsReady(benar)
}, 500)
const onReady = useCallback(async () => {
jika (appIsReady) {
//
// Ini memberitahu skrin percikan untuk bersembunyi serta-merta! Jika kita memanggil ini selepas
// `setAppIsReady`, maka kita mungkin melihat skrin kosong semasa apl itu
// memuatkan keadaan awalnya dan memaparkan piksel pertamanya. Jadi sebaliknya,
// kami menyembunyikan skrin percikan sebaik sahaja kami mengetahui paparan akar sudah ada
// susun atur yang dilakukan.
//
tunggu SplashScreen.hideAsync()
}
}, [appIsReady])
jika (!appIsReady) {
kembali null
}
kembali (
<Penyedia Global>
<SafeAreaProvider>
<Pembekal>
<StripeProvider publishableKey={env.STRIPE_PUBLISHABLE_KEY} merchantIdentifier={env.STRIPE_MERCHANT_IDENTIFIER}>
<RootSiblingParent>
<NavigationContainer ref={navigationRef} onReady={onReady}>
<ExpoStatusBar>
<p>Kami tidak akan menutup setiap skrin apl mudah alih, tetapi anda boleh membuka kod sumber dan melihat setiap satu jika anda mahu.</p>
<h2>
Papan Pemuka Pentadbir
</h2>
<p>Papan pemuka pentadbir ialah aplikasi web yang dibina dengan Node.js, React, MUI dan TypeScript. Dari bahagian belakang, pentadbir boleh membuat dan mengurus pembekal, kereta, lokasi, pelanggan dan tempahan. Apabila pembekal baharu dibuat dari bahagian belakang, mereka akan menerima e-mel yang menggesa mereka untuk membuat akaun untuk mengakses bahagian belakang dan mengurus armada dan tempahan kereta mereka.</p>
Takrif jenis TypeScript ditakrifkan dalam pakej ./packages/bookcars-types.
App.tsx bahagian belakang mengikut logik yang serupa seperti App.tsx bahagian hadapan.
Kami tidak akan menutup setiap halaman papan pemuka pentadbir tetapi anda boleh membuka kod sumber dan melihat setiap satu jika anda mahu.
Membina apl mudah alih dengan React Native dan Expo adalah sangat mudah. Ekspo menjadikan pembangunan mudah alih dengan React Native sangat mudah.
Menggunakan bahasa yang sama (TypeScript) untuk pembangunan hujung belakang, bahagian hadapan dan mudah alih adalah sangat mudah.
TypeScript ialah bahasa yang sangat menarik dan mempunyai banyak kelebihan. Dengan menambahkan penaipan statik pada JavaScript, kami boleh mengelakkan banyak pepijat dan menghasilkan kod berkualiti tinggi, berskala, lebih mudah dibaca dan boleh diselenggara yang mudah untuk nyahpepijat dan diuji.
Itu sahaja! Saya harap anda seronok membaca artikel ini.
Atas ialah kandungan terperinci Dari Sifar ke Etalase: Perjalanan Saya Membina Laman Web Sewa Kereta dan Apl Mudah Alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
