Edukasyon Web-app: 13 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:11

Ang proyektong ito ay nilikha bilang isang takdang-aralin para sa video at digital na kurso sa telebisyon kung saan kailangan naming lutasin ang problema ng pagtuturo at pag-aaral sa tatlong antas: Pamamaraan, Pagganap at pang-konsepto.

Ang proyektong ito ay nilikha bilang isang takdang-aralin para sa kurso ng video at digital na telebisyon, kung saan kailangan naming lutasin ang problema ng pagtuturo at pag-aaral sa tatlong antas na ito: Pamamaraan, Magagamit at haka-haka. Nagpasya kaming lutasin ang problemang ito gamit ang isang web platform, kung saan ang mga mag-aaral at guro ng kurso ay maaaring mag-log in. Maaari ring i-access ng mga mag-aaral ang mga video sa pagtuturo na sumasaklaw sa mga paksa tulad ng mga codec at format ng video, pagkatapos nilang malaman ang pang-konsepto na bahagi ng paksa na maaari nilang magpatuloy upang makagawa ng isang pagsusuri. Ang pagsusuri ay binubuo ng tatlong mga aktibidad; ang bawat aktibidad ay magkakaroon ng isang uri ng mga video na nagtuturo ng mga paksa na nauugnay sa mga codec at format ng video at sa parehong oras ay may iba't ibang layunin ang bawat aktibidad, kaya sa platform na ito maaari nating makamit ang pagtuturo at pagsusuri ng bahagi ng pamaraan, pagganap at pang-konsepto. Upang makamit ang lahat ng ito, ginamit namin ang Angular 4 at Firebase, na gumagamit ng mga aklatan tulad ng AngularFire5 at dragula. Para sa mga video na ginamit namin ang web-app na "PowToon".

Para sa pagtuturo na ito kakailanganin mo:

• NodeJs
• Angular4
• Proyekto ng Firebase
• Isang kompyuter

Hakbang 1: Pag-install

• I-install ang nodejs 8.9.1 sa NPM (Node Package Manager)
• I-install ang Angular-CLI (Command Line Interface) na pagta-type sa console na "npm install -g @ angular / ui"

Hakbang 2: Lumilikha ng Proyekto

• Lumikha ng isang proyekto gamit ang "ng bagong my-app"
• Mag-install ng mga node package na may "npm install"
• I-install ang dragula gamit ang "npm install dragula --save"
• I-install ang AngularFire2 gamit ang "npm install firebase angularfire2 --save"

Hakbang 3: Firebase

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

• Lumikha ng isang google account
• Mag-click sa "Pumunta sa console"
• lumikha ng isang proyekto
• Pumunta sa pangkalahatan at kunin ang mga susi ng kliyente

Hakbang 4: Lumilikha ng Mga Sangkap

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Lumikha ng mga bahagi para sa app.

Gamit ang "ng g c" pangalan ng sangkap "" para sa bawat isa sa mga sumusunod na sangkap:

• Pahina ng Kurso
• Pahina ng Mga Paksa
• Pahina ng Video
• Pahina ng Pagsusuri
• Pahina ng Pamamaraan
• Pahina ng Konseptwal
• Functional na Pahina
• Mga bahagi ng mga komento
• Admin

Hakbang 5: Pahina ng Kurso

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Lumikha ng html at ang ts

Sa ts ay isusulat mo ang lohika sa likod ng autentication, kung ang gumagamit ay isang mag-aaral o isang Admin, at magsusulat ka ng isang talahanayan na may impormasyon ng kurso mula sa mag-aaral. Para doon maaari mong gamitin ang isang serbisyo sa pagpapatotoo at isang serbisyo sa database na parehong ibinigay sa pagtatapos ng pagtuturo na ito.

Hakbang 6: Pahina ng Mga Paksa

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Sa sangkap na ito isusulat mo ang html at ts.

Katulad ng pahina ng kurso maliban kung hindi mo kailangang suriin kung ang gumagamit ay isang admin o mag-aaral, magsusulat ka lamang ng pagpapatunay at magbigay sa mga listahan ng mga paksa sa kurso.

Hakbang 7: Pahina ng Video

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Sa sangkap na ito isusulat mo ang html at ts.

Para sa sangkap na ito ibibigay mo ang link mula sa powToon upang mai-play ang video, at ang bahagi ng komento

Hakbang 8: Pahina ng Pagsusuri

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

para sa ocmponent na ito gagamitin mo ang parehong sangkap ng video na may magkakaibang video kung saan ipapaliwanag mo ang proseso ng pagsusuri.

Pagkatapos ay magkaroon lamang ng isang pindutan na nagli-link sa pang-konsepto na pahina

Hakbang 9: Pahina ng Konseptwal

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Sa pahinang ito lilikha ka ng parehong html at ts.

• Lumikha ng dalawang mga bahagi ng video na may isang pindutan
• Lumikha ng isang hanay ng dalawang mga video sa isang boolean na "isCorrect"
• Sumulat ng isang pagpapaandar ng CheckScore ()
• I-upload ang iskor sa database
• Transport sa susunod na pahina

Hakbang 10: Pahina ng Pamamaraan

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Sa pahinang ito lilikha ka ng parehong html at ts.

• Gagamitin mo ang dragula, para doon basahin ang mga doc ng dragula
• Lumikha ng hanay ng mga video
• Lumikha ng pagkakasunud-sunod ng mga video
• sumulat ng Score ng Suriin
• Mag-upload ng Marka
• Pumunta sa susunod na pahina

Hakbang 11: Magagamit na Pahina

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

Sa pahinang ito lilikha ka ng parehong html at ts.

• Kapareho ng pang-konsepto na pahina magkakaroon ka ng mga pindutan at video bilang mga pagpipilian.
• Sa html sumulat ng isang problema para malutas ng gumagamit
• Pagkatapos ilagay ang mga video sa isang array na may boolean na "IsCorrect"
• I-upload ang iskor sa database

Hakbang 12: Pahina sa Pag-login

Para sa mga ito maaari mong suriin ang mga imahe ng hakbang na ito

• Lumikha ng html at ts
• Ilagay sa html ang imahe
• Isulat ang form sa html
• Isumite ang form sa ts sa serbisyo ng auth
• I-save ang gumagamit sa database

Hakbang 13: Mag-download ng Buong Code ng Mga Bahagi at Serbisyo

Kung sakaling mayroon kang mga problema, narito ang rar sa mga bahagi at serbisyo