Kev Kawm Web-app: 13 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:25

Txoj haujlwm no tau tsim los ua lub luag haujlwm rau chav kawm vis dis aus thiab TV uas peb yuav tsum daws qhov teeb meem ntawm kev qhia thiab kawm hauv peb qib: Txheej txheem, Ua haujlwm thiab lub tswv yim.

Txoj haujlwm no tau tsim los ua txoj haujlwm rau chav kawm vis dis aus thiab digital TV, uas peb yuav tsum daws qhov teeb meem ntawm kev qhia thiab kev kawm hauv peb qib no: Txheej Txheem, Ua Haujlwm thiab lub tswvyim. Peb txiav txim siab daws qhov teeb meem no siv lub vev xaib, uas cov tub ntxhais kawm thiab cov kws qhia ntawv ntawm chav kawm tuaj yeem nkag mus. Cov tub ntxhais kawm tuaj yeem tuaj yeem nkag mus rau cov vis dis aus qhia txog cov ncauj lus xws li cov lej cim thiab cov vis dis aus, tom qab lawv tau kawm lub tswv yim ib feem ntawm lub ncauj lus lawv tuaj yeem npaj ua qhov ntsuas. Kev tshuaj xyuas muaj peb yam haujlwm; txhua qhov haujlwm yuav muaj cov vis dis aus qhia cov ncauj lus ntsig txog cov lej thiab cov vis dis aus thiab tib lub sijhawm txhua qhov haujlwm muaj lub hom phiaj sib txawv, yog li nrog lub platform no peb tuaj yeem ua tiav kev qhia thiab ntsuas ntawm cov txheej txheem, ua haujlwm tau zoo thiab lub tswv yim ib feem. Txhawm rau ua tiav txhua qhov no, peb siv Angular 4 thiab Firebase, siv cov tsev qiv ntawv xws li AngularFire5 thiab dragula. Txog cov yeeb yaj kiab peb siv lub vev xaib-app "PowToon".

Rau qhov kev qhia no koj yuav xav tau:

• NodeJs
• Lub kaum ntse ntse 4
• Qhov project Firebase
• Ib lub computer

Kauj ruam 1: Kev teeb tsa

• Nruab nodejs 8.9.1 nrog NPM (Node Package Manager)
• Nruab Angular -CLI (Command Line Interface) ntaus ntawv ntawm lub console "npm nruab -g @angular/cli"

Kauj Ruam 2: Tsim Txoj Haujlwm

• Tsim ib qhov haujlwm siv "ng tshiab kuv-app"
• Nruab node pob nrog "npm nruab"
• Nruab dragula nrog "npm nruab dragula --save"
• Nruab AngularFire2 nrog "npm nruab firebase angularfire2 --save"

Kauj ruam 3: Firebase

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

• Tsim ib tus account google
• Nyem rau "Mus rau console"
• tsim ib qhov project
• Mus rau qhov dav thiab tuav tus yuam sij rau cov neeg siv khoom

Kauj Ruam 4: Tsim Cov Txheej Txheem

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Tsim cov khoom siv rau lub app.

Siv "ng g c" tiv npe lub npe "" rau txhua qhov hauv qab no:

• Nplooj Ntawv Kawm
• Cov Ntsiab Lus Page
• Nplooj ntawv yees duab
• Nplooj Ntawv Ntsuam Xyuas
• Nplooj ntawv txheej txheem
• Nplooj Siab
• Nplooj ntawv muaj nuj nqi
• Cov lus pom
• Admin

Kauj Ruam 5: Nplooj Ntawv Kawm

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Tsim cov html thiab ts

Hauv ts koj yuav sau cov laj thawj tom qab autentication, yog tias tus neeg siv yog tub ntxhais kawm lossis tus Thawj Coj, thiab koj yuav sau lub rooj nrog cov ntaub ntawv qhia los ntawm cov tub ntxhais kawm. Txog qhov ntawd koj tuaj yeem siv qhov kev pabcuam txheeb xyuas qhov tseeb thiab kev pabcuam database ob qho tib si muab rau thaum kawg ntawm cov lus qhia no.

Kauj Ruam 6: Nplooj Ntawv

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Hauv ntu no koj yuav sau html thiab ts.

Zoo ib yam li chav kawm tshwj tsis yog koj tsis tas yuav txheeb xyuas yog tias tus neeg siv yog tus thawj coj lossis tub ntxhais kawm, koj tsuas yog yuav tsum sau qhov kev lees paub thiab muab cov npe ntawm cov ncauj lus hauv chav kawm.

Kauj Ruam 7: Nplooj Video

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Hauv ntu no koj yuav sau html thiab ts.

Txog qhov tivthaiv no koj yuav muab qhov txuas los ntawm powToon txhawm rau ua yeeb yaj kiab, thiab cov lus tawm tswv yim

Kauj Ruam 8: Nplooj Ntawv Ntsuam Xyuas

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

rau qhov khoom siv no koj yuav siv tib cov vis dis aus nrog cov yeeb yaj kiab sib txawv hauv qhov uas koj yuav piav qhia qhov txheej txheem ntsuas.

Tom qab ntawd tsuas yog muaj lub pob uas txuas rau nplooj ntawv lub tswv yim

Kauj Ruam 9: Nplooj Ntawv Ntsiab Lus

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Hauv nplooj ntawv no koj yuav tsim ob qho html thiab ts.

• Tsim ob daim vis dis aus nrog khawm
• Tsim cov kab ntawm ob qho yeeb yaj kiab nrog boolean "isCorrect"
• Sau ib qho CheckScore () ua haujlwm
• Rub cov qhab nia mus rau lub chaw khaws ntaub ntawv
• Thauj mus rau nplooj ntawv tom ntej

Kauj Ruam 10: Nplooj Ntawv Txheej Txheem

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Hauv nplooj ntawv no koj yuav tsim ob qho html thiab ts.

• Koj yuav siv dragula, rau qhov uas nyeem cov ntawv ntawm dragula
• Tsim cov yeeb yaj kiab
• Tsim qhov kev txiav txim ntawm cov yeeb yaj kiab
• sau Daim Ntawv Txheeb Xyuas
• Upload Score
• Mus rau nplooj ntawv tom ntej

Kauj Ruam 11: Nplooj Ntawv Ua Haujlwm

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

Hauv nplooj ntawv no koj yuav tsim ob qho html thiab ts.

• Ib yam li nplooj ntawv lub tswv yim koj yuav muaj cov nyees khawm thiab cov vis dis aus raws li kev xaiv.
• Hauv html sau qhov teeb meem rau tus neeg siv los daws
• Tom qab ntawd muab cov vis dis aus tso rau hauv kab nrog boolean "IsCorrect"
• Rub cov qhab nia mus rau lub chaw khaws ntaub ntawv

Kauj ruam 12: ID nkag mus nplooj ntawv

Rau qhov no koj tuaj yeem tshawb xyuas cov duab ntawm cov kauj ruam no

• Tsim cov html thiab ts
• Muab tso rau hauv html daim duab
• Sau daim ntawv hauv html
• Xa daim foos hauv ts mus rau qhov kev pabcuam auth
• Txuag tus neeg siv hauv lub database

Kauj Ruam 13: Rub Tawm Cov Cai thiab Cov Kev Pabcuam

Yog tias koj muaj teeb meem, ntawm no yog rar nrog cov khoom siv thiab cov kev pabcuam