ICSI301 Төсөл 6: Аппсервер ба өгөгдлийн сан

Тохиргоо

Та өөрийн систем дээр Mongo.DB болон Node.js татсан байх шаардлагатай. Хэрвээ татаагүй бол суулгах зааврыг дагаж одоо суулгаарай.

Төсөл 6-ийн тохиргоо нь бусад төслүүдээс ялгаатай. Та project6 нэртэй хавтас үүсгээд project5-ын файлуудаа хуулаарай. project6 хавтаст энэ zip file файлыг дотор нь задлаарай. Энэхүү zip файл нь package.json, webServer.js, .eslintrc.json, болон index.html гэх мэт файлуудыг дарж хуулах бөгөөд хэд хэдэн шинэ файл, хавтсуудыг нэмэх болно. Хэрэв та өөрийн project5 хавтас доторх эдгээр файлуудын аль нэгэнд шаардлагатай өөрчлөлтийг хийсэн, гэхдээ магадлал бага байх, тохиолдолд задлах үйлдлийг хийсний дараа өөрийн хийсэн өөрчлөлтийг дахин хийх шаардлагатай болно.

Төсөл 6 файлуудтай болсны дараа дараах командыг ашиглан шаардлагатай программыг татаж авна уу:

npm install

Хэрэв та npm install командыг node_modules хавтсыг арилгахгүйгээр ажилуулбал дараах анхааруулгатай тулгарч магадгүй:

npm WARN library_A requires a peer of library_B but none is installed. You must install peer dependencies yourself.

Энэ болон бусад хичээлийн даалгаврын хувьд бид вэб програмын бүх гурван шатлалууд болох хөтөч, вэб сервер, мэдээллийн санг таны дотоод машин дээр ажиллуулна.

MongoDB өгөгдлийн санг эхлүүлэх

Суулгах зааварт заасны дагуу өөрийн орчинд MongoDB ажиллаж байгаа эсэхийг шалгаарай. . Өгөгдлийн сан хаагдах хүртэл mongod комманд буцаагдахгүй тул та үүнийг тусдаа цонхонд эсвэл арын процесс болгон ажиллуулахыг хүсэх болно. (Жишээ нь: mongod (args) & Linux/MacOS дээр).

MongoDB серверийг ажиллуулсны дараа та дараах коммандыг ажиллуулж зургийн програмын өгөгдлийг ажиллуулж болно:

node loadDatabase.js

Бид MongooseJS Object Definition Language (ODL)-ийг ашиглан MongoDB-д photo app өгөгдлийг хадгалах schema -ийг тодорхойлно. Схемийн тодорхойлсон файлууд нь лавлах(directory) schema-д байна:

• schema/user.js - Хэрэглэгч бүрийг дүрсэлсэн объектуудыг агуулсан Хэрэглэгчийн цуглуулгыг тодорхойлно.
• schema/photo.js - Зураг бүрийг дүрсэлсэн объектуудыг агуулсан Photos цуглуулгыг тодорхойлно. Энэ нь мөн зураг дээр бичсэн сэтгэгдлийг хадгалахад ашигладаг объектуудыг тодорхойлдог.
• schema/schemaInfo.js - Схемийн хувилбарыг тодорхойлсон объектыг агуулсан SchemaInfo цуглуулгыг тодорхойлно.

Node.js вэб серверийг эхлүүлэх

Мэдээллийн санг ажиллуулсны дараа вэб серверээ эхлүүлэх хэрэгтэй болно. Үүнийг өмнөх даалгавартай ижил тушаалаар хийж болно (жишээ нь: node webServer.js). Веб серверээ project6 directory ашиглан command хийж эхлүүлээрэй:

node webServer.js

Хэрэв та дээрх командыг ашигладаг бол серверийн кодыг өөрчлөх болгондоо вэб серверээ дахин эхлүүлэхээ мартуузай. Та мөн серверийн кодын өөрчлөлтийг ажиглаж , вэб серверийг автоматаар дахин эхлүүлэх nodemon-г ашиглаж болно:

nodemon webServer.js

node_modules/.bin/nodemon webServer.js

Project 6-ийн шинэ файлуудаар Photo Share програмаа шинэчилж, мэдээллийн сан болон вэб серверийг ажиллуулсны дараа даалгавраа үргэлжлүүлэхийн өмнө програм ажиллаж байгаа эсэхийг шалгана уу.

Өгөгдлийн сан ашигладаг веб сервер болгон хөрвүүлэх (40 оноо)

Энэ төсөлд бидний танд өгөх webServer.js Төслийн 5 webServer.js -тэй адил бөгөөд програмын загвар татах маршрутууд нь мэдээллийн сангаас илүү шидэт ICSI301models загваруудыг ашигладаг. Таны даалгавар бол MongoDB мэдээллийн санг ашиглан бүх маршрутыг хөрвүүлэх явдал юм. Таны кодод ICSI301models-д хандах эрх байх ёсгүй бөгөөд таны програм дараах мөргүйгээр ажиллах ёстой:

const ICSI301models = require('./modelData/photoApp.js').ICSI301models;

Web Server API

Төсөл 5-ын нэгэн адил вэб сервер нь тодорхой URL-ууд руу HTTP GET хүсэлтийн хариуд JSON кодлогдсон загварын өгөгдлийг буцаана. Бид ямар URL-уудыг дэмжих, юуг буцаах талаар дараах тодорхойлолтыг өгөв. Таны вэб сервер дараах загвар татах API-г дэмжих ёстой:

• /test - Өгөгдлийн сангийн схемийн мэдээлэл (/test/info) болон объектын тоо (/test/counts) -ийг буцаана. Энэхүү интерфэйс нь туршилтанд зориулагдсан бөгөөд бид танд жишээ болгон мэдээллийн сангаас мэдээлэл татах программыг санал болгож байна. Та үүнийг өөрчлөх шаардлагагүй болно.
• /user/list - Навигацийн хажуугийн жагсаалтад тохирох хэрэглэгчдийн загваруудын жагсаалтыг буцаана. Бид олон тооны хэрэглэгчдийг хүлээж байгаа тул энэ API нь зөвхөн навигацийн хажуугийн самбарт шаардлагатай хэрэглэгчийн шинж чанаруудын массивыг буцаана (_id, first_name, last_name). Энэ нь өгсөн код дахь ICSI301models.userListModel() дуудлагыг орлоно.
• /user/:id - id-ийн _id-тэй хэрэглэгчийн дэлгэрэнгүй мэдээллийг буцаана. Энэ нь хэрэглэгчийн талаарх дэлгэрэнгүй мэдээллийг (_id, first_name, last_name, location, description, occupation) буцааж өгөх ба ICSI301models.userModel() дуудлагыг солих ёстой. Хэрэв хэрэглэгчийн id-ээс өөр зүйл өгсөн бол хариу нь HTTP статус 400 ба мэдээллийн мессеж байх ёстой.
• /photosOfUser/:id - :id - id-ийн _id-тэй хэрэглэгчийн зургийг буцаана. Энэ дуудлага нь хэрэглэгчийн бүх зураг, мөн зураг дээрх сэтгэгдлүүд зэрэг зураг үзэхэд шаардлагатай бүх загварын өгөгдлийг үүсгэдэг. Зургийн шинж чанарууд нь (_id, user_id, comments, file_name, date_time) байх ба тайлбарын массивын элементүүд (comment, date_time, _id, user) байх ёстой бөгөөд зөвхөн хамгийн бага хэрэглэгч-ийн объектын мэдээлэл (_id, first_name, last_name) байх ёстой. Энэ нь ICSI301models.photoOfUserModel() дуудлагыг орлоно. Хэрэв хэрэглэгчийн id-ээс өөр зүйл өгсөн бол хариу нь HTTP статус 400 ба мэдээллийн мессеж байх ёстой. Энэ API-д мэдээллийн сан дахь олон өөр объектоос угсрах шаардлагатай болохыг анхаарна уу. Mongoose-ээс өгсөн мэдээллийн баазын асинхрон интерфэйс нь эдгээр олон объект татах үйлдлийг нэгэн зэрэг хийх боломжтой гэсэн үг юм. Таны код татан авалтыг шаардлагагүй цуваа болгох ёсгүй. Даалгаврын package.json файл нь async модулийг татаж авдаг бөгөөд энэ нь зэрэгцээ таталтыг удирдахад тустай.

Таны вэб сервер зохих API-д нийцэж байгаа эсэхийг шалгахын тулд бид дэд лавлахtest багцыг санал болгож байна.. Илгээхээсээ өмнө багц дахь бүх шалгалтыг давсан эсэхийг шалгана уу.Дэлгэрэнгүйг доорх Туршилтын хэсгээс үзнэ үү.

Таны GET хүсэлтүүд нь ICSI301models функцүүдийн буцаадаг зүйлтэй яг ижил зүйлийг буцаадаггүй боловч харагдац бүрийн загварын өгөгдлийг нэг fetchModel дуудлагаар харуулахын тулд таны апп-д шаардлагатай мэдээллийг буцаах шаардлагатай. Та UI-ийн хэрэгцээг хангахын тулд өөрийн хариултыг бий болгохын тулд мэдээллийн сангаас ирж буй объектуудыг дэд тохиргоо болон/эсвэл нэмэгдүүлэх шаардлагатай болно. Энэ даалгаврын хувьд та мэдээллийн сангийн схемийг ямар нэгэн байдлаар өөрчлөх эрхгүй.

Эдгээр Экспресс хүсэлт боловсруулагчийг хэрэгжүүлэхийн тулд хоёр өөр "загвар" өгөгдлийн объекттой харилцах шаардлагатай. Mongoose систем нь MongoDB-д хадгалагдсан объектуудаас models-уудыг буцаадаг бол хүсэлт нь өөрөө Photo App харагдацад шаардлагатай өгөгдлийн загваруудыг буцаах ёстой. Харамсалтай нь, Mongoose загварууд нь мэдээллийн сангийн схемээр, урд талын загварууд нь UI-ийн харагдацын шаардлагаар тохируулагддаг тул тэдгээр нь төгс нийцдэггүй. Эдгээр хүсэлтийг шийдвэрлэхийн тулд мэдээллийн сангаас буцаасан Mongoose загваруудаас урд хэсэгт шаардлагатай загварыг угсрахын тулд боловсруулах шаардлагатай болно.

Mongoose-ийн буцаасан загварууд нь JavaScript объектууд боловч тэдгээрт тусгай боловсруулалт хийгдсэн тул зарлагдсан схемд тохирохгүй аливаа өөрчлөлтийг хаях тул энэ боловсруулалтыг хийхдээ болгоомжтой байх хэрэгтэй. Энэ нь Mongoose загварыг урд талын хүлээгдэж буй шинж чанаруудтай болгохын тулд зүгээр л шинэчлэх нь санаснаар болохгүй гэсэн үг юм.

Энэ асуудлыг шийдэх нэг арга бол шинэ JavaScript объект үүсгэж, Mongoose загвараас авсан талбаруудаар дүүргэх явдал юм. API-д заасан яг JavaScript өгөгдлийн бүтцийг ийм байдлаар бүтээж, HTTP хариултанд буцааж өгч болно. API загвар нь Mongoose загвартай нягт таарч байгаа REST эндпойнтыэ хувьд өөр нэг арга бол Mongoose проекцын операторыг (сонгож) ашиглан хайлт нь зөвхөн API-ийн заасан загварын талбаруудыг буцаана. Хэсэг нь эдгээр техникийг илүү нарийвчлан авч үзэх болно.

Mongoose болон API загварууд ижил байсан ч проекц хийхгүйгээр Mongoose загварыг буцаах нь програмчлалын муу практик юм. Ирээдүйн төслүүд өгөгдлийн сангийн схемийг өргөтгөх болно (жишээ нь, хэрэглэгчийн загварт нууц үг нэмэх), гэхдээ бид эдгээр шинж чанаруудыг API загварт оруулахыг хүсэхгүй байна.

Даалгавар 2: Өөрийн програмыг axios ашигладаг болгох (10 оноо)

Бид REST API-г илүү ашиглах дараагийн даалгаварт бэлтгэхийн тулд вэб серверээс загваруудыг татахын тулд өөрийн fetchModel горимоос илүү axios ашиглахаар зургийн програмаа хөрвүүлээрэй. Axios бол өгөгдөл татах боломжтой олон npm багцуудын нэг юм. Энэ нь манай fetchModel функцээс илүү хурдан бөгөөд илүү олон функцтэй бөгөөд бид үүнийг цаашид хүсэлтээ гаргахад ашиглах болно. Энэ асуудлыг дуусгасны дараа таны зургийн апп fetchModel функцийн тодорхойлолтгүйгээр ажиллах ёстой. fetchModel функцийн тодорхойлолтыг арилгахын өмнө болон дараа нь таны програмын ажиллагаа яг ижил байх ёстой -- энэ шилжүүлгийг хийх явцад ямар нэгэн зүйл эвдэхгүй байгаа эсэхийг шалгаарай.

Ялангуяа та photoShare.jsx эсвэл бусад бүрэлдэхүүн хэсгүүдэд fetchModel руу залгах бүртээ үүнийг axios.get руу залгах хэрэгтэй.. Дэлгэрэнгүй мэдээллийг axios баримтаас үзнэ үү.

axios руу шилжих зарим зөвлөмжийг энд оруулав:

• axios ашиглан өгөгдөл татаж авах аливаа бүрэлдэхүүн хэсэгт дараах байдлаар импортлохоо мартуузай:

   import axios from 'axios';
            

• axios.get нь fetchModel шиг амлалт буцаадаг болохыг анхаарна уу.. Бид .then болон .catch тус тус ашиглан амжилт ба алдаа зохицуулагчийг хавсаргаж болно. Аливаа хүсэлтийн амжилт болон алдааны тохиолдлуудыг хоёуланг нь зохицуулах нь чухал юм. axios.get -д хавсаргахдаа fetchModel-аас зохицуулагчийн логикийг маш их эсвэл огт өөрчлөх шаардлагагүй.

Тест

Лавлах тестийн хувьд бид таны програмын зөвхөн арын хэсгийн test өгдөг. Тест нь Тест нь Node.js тест бичихэд зориулагдсан түгээмэл хүрээ болох Mochaашигладаг. Туршилтын орчныг тохируулахын тулд test-ийн дэд директор дотроос Mocha болон холбогдох бүх хамаарлыг татахын тулд npm install хийгээрэй. Үүнийг хийснийхээ дараа та тестийн лавлах доторх тушаалыг ажиллуулж тестийг ажиллуулж болно: npm test.

npm test Mocha хэл дээр бичигдсэн программ (жишээ нь. describe() and it()) гэсэн гурван Photo App backend URL (/user/list, /user/ID, /photosOfUser/ID)-ийг шалгадаг test/serverApiTest.js файлыг ажиллуулдаг. Арын чиглүүлэлтийн функцууд нь техникийн үзүүлэлтэд нийцэж байгаа гэдэгт итгэлтэй байхын тулд илгээхээсээ өмнө бидний өгсөн бүх туршилтыг давсан эсэхийг шалгана уу. Таны төслийн үнэлгээний нэг хэсэг нь эдгээр шалгалтын хэд нь тэнцсэнээс хамаарна.

Нэмэлт оноо (10 оноо)

Таны Photo App-ын маркетингийн хэлтэс нь програмыг нийгмийн сүлжээнд илүү ээлтэй болгохын тулд "жижиг" засвар хийсэн. Өөрчлөлт нь:

• Хэрэглэгчдийн жагсаалтыг агуулсан хажуугийн навигацийн талбарт хэрэглэгчийн нэр бүрийн хажууд тоолох хоёр count bubbles байх ёстой. Эхний тооны бөмбөлөг (ногоон өнгөтэй) нь хэрэглэгчийн системд байгаа зургийн тоо байх ёстой. Хоёр дахь бөмбөлөг (улаан өнгөтэй) нь хэрэглэгчийн бичсэн сэтгэгдлүүдийн тоо байх ёстой.
• Хэрэглэгчийн сэтгэгдлийг тоолох хөөс дээр дарснаар хэрэглэгчийн бүх сэтгэгдлийг харуулдаг шинэ харах бүрэлдэхүүн хэсэг рүү очно. Хэрэглэгчийн сэтгэгдэл бүрийн хувьд сэтгэгдэл бичсэн зургийн жижиг өнгөц зураг болон сэтгэгдлийн текстийг харуулах ёстой. Сэтгэгдэл эсвэл зураг дээр дарснаар тухайн зураг болон түүний бүх тайлбарыг агуулсан зургийн дэлгэрэнгүй харагдац руу шилжих хэрэгтэй. Та 5-р төсөлд stepper нэмэлт кредитийг хэрэгжүүлсэн эсэхээс яг тодорхой харагдах байдал хамаарна.
• Төслийн 5-ын дэвшилтэт функцийн туг идэвхжсэн тохиолдолд л энэ өөрчлөлт харагдах болно. Хэрэв та Төслийн 5-ын нэмэлт кредитийг хийгээгүй бол алхам алхамыг хийх шаардлагагүй, гэхдээ дээрх нэмэлт зээлийн функцийг асаах, унтраах боломжтой болгохын тулд дэвшилтэт функцийн туг удирдлагыг хэрэгжүүлэх шаардлагатай хэвээр байна.

Үүнийг хэрэгжүүлэхдээ та шинэ серверийн API дуудлагуудыг нэмэх эсвэл одоо байгаа дуудлагуудыг сайжруулах боломжтой. Хэрэв та үүнийг хийвэл шинэ функцээ шалгахын тулд Mocha тестийг (test/serverApiTest.js) шинэчлэх шаардлагатай. Хэрэв та шинэ API-үүдийг нэмбэл, бусад тестүүдэд ашигласан загварын дагуу шинэ describe() блокт оруулна уу. Бүртгүүлэхээсээ өмнө өгсөн тестүүд тэнцсэн хэвээр байгаа эсэхийг шалгаарай. Та Mongoose схемд шинэ шинж чанарууд нэмэх ёсгүй, гэхдээ та үүнийг илүү том өгөгдлийн багц дээр ажиллуулахын тулд шаардлагатай индексүүдийг нэмж болно.

Хичээлийн ажилтнууд үнэлгээ өгөхийн тулд таны аппликейшн дээр (хэрэв байгаа бол) Нарийвчилсан функцүүдийн тохиргоог идэвхжүүлж, нэмэлт кредит хэсэгт үнэлгээ өгөх эсэхийг тодорхойлохын тулд UI тоолох бөмбөлөгүүдийг хайж олох болно.

Загварын оноо (5 оноо)

Хэрэв таны даалгаврт MVC бүтцийг зөв зохион байгуулж хэрэгжүүлсэн бол энэ оноог олгоно. Нэмж дурдахад, таны код болон модулиуд нь цэвэр, уншигдахуйц байх ёстой бөгөөд таны апп нь гадаад төрх, харагдацын хувьд "боломжийн сайхан" байх ёстой.

Илгээхээсээ өмнө npm run lint ажиллуулахаа мартуузай. Линтер нь алдаа гаргахгүй байх ёстой.

Хүлээлгэн өгөх үр дүн

project6 төсөлийг илгээхдээ стандарт класс submission mechanism ашиглана уу. Таны код ямар ч lint болон анхааруулгагүй байх ба өгсөн асуудлын шаардлагуудаа хангасан байх хэрэгтэй.