Fullkomin vefsíða – Framendi og bakendi samþætting
Tilgangur
Að nemendur skilji hvernig framendi (front-end) og bakendi (back-end) vefsíðu vinna saman og búi til einfalda fullstakk vefslausn.
Hæfniviðmið og námsmarkmið
Nemandi getur búið til einfalda fullstakk veflausn þar sem framendi og bakendi vinna saman.
- Nemandi skilur muninn á framenda og bakenda í vefforritun
- Nemandi getur sett upp einfaldan Flask vefþjón í Python
- Nemandi getur sent gögn á milli framenda og bakenda og birt niðurstöðu
Getustig og forsendur nemenda
- Lestur: Nemendur geta lesið HTML, CSS, JavaScript og Python kóða.
- Tækni: Nemendur þekkja HTML/CSS/JavaScript framendavinnu og Python forritun.
- Aðrar forsendur: Nemendur þurfa skilning á hvernig vefurinn virkar (biðlari og þjónn).
Lýsing á kennslustund
Nemendur byggja vefsíðu sem tengir saman HTML/CSS/JavaScript framenda og Python Flask bakenda. Þeir búa til vefsíðu sem sendir gögn á bakenda sem vinnur úr þeim og sendir niðurstöðu til baka. Þetta gefur heildrænan skilning á vefforritun og hvernig hugbúnaður á netinu virkar.
1. Kynning – Hvernig virkar vefurinn? (10 mín): Kennarinn teiknar á töflu: Vafri (biðlari) → beiðni → Þjónn (bakendi) → svar. Samlíking: Þú pantar mat á veitingastað (beiðni) – kokkurinn eldair (bakendi) – þjónninn kemur með matinn (svar). 2. Flask uppsetning og 'Halló heimur' (15 mín): Kennarinn leiðir nemendur: (a) Setja upp Flask (pip install flask), (b) Skrifa minnsta Flask forritið: from flask import Flask; app = Flask(__name__); @app.route('/'); def hello(): return 'Halló heimur!', (c) Keyra og opna í vafra: localhost:5000. 3. HTML templates (15 mín): Kennarinn sýnir render_template og hvernig á að birta HTML síðu frá Flask. Nemendur búa til HTML síðu með formi. 4. Gagnasending (25 mín): Nemendur forrita fullstakk verkefni: (a) HTML form þar sem notandi skrifar nafn og velur efni, (b) Flask tekur á móti gögnum (request.form), (c) Python vinnur úr (t.d. búa til persónulega kveðju eða reikna eitthvað), (d) Niðurstaða birt á nýrri HTML síðu. Dæmi: Persónuleg vefsíða sem spyr um uppáhalds efni og býr til sérsniðna síðu. 5. Samantekt (15 mín): Nemendur sýna veflausnir. Kennarinn dregur saman: Þið eruð nú fullstakk-forritarar! Framendi + bakendi = fullkomin vefsíða.
Verkfæri og hugbúnaður
Flask er einfaldasta Python vefumhverfið og hentar vel til að kenna grunnatriði bakenda.
VS Code styður bæði Python og vefmál og hefur terminal til að keyra Flask þjón.
Framendamálin sem nemendur þekkja nú þegar.
Kennsluaðferðir
Kennarinn sýnir hvernig allir hlutarnir vinna saman – vafri sendir beiðni, þjónn tekur á móti, Python vinnur úr gögnum, niðurstaða fer til baka.
Rannsóknargrundvöllur: Wing (2006) – Reiknihugsun felur í sér skilning á kerfum og hvernig hlutar tengjast saman.
Nemendur byggja veflausnina skref-fyrir-skref, frá einföldum Flask þjóni upp í fulla virkni.
Rannsóknargrundvöllur: Bruner (1960) – Spiral Curriculum: Smám saman aukin flókni á traustum grunni.
Matsaðferðir
- Verkefnamat: Virkar framenda-bakenda tengingin? Berast gögn rétt á milli?
- Kóðagæðamat: Er kóðinn skipulegur? Eru HTML og Python vel aðskilin?
- Munnlegt mat: Getur nemandinn útskýrt hvernig gögn ferðast frá vafra til þjóns og til baka?
Aðlögun
Nemendur bæta við SQLite gagnagrunn til að geyma gögn varanlega eða nota API til að sækja utanaðkomandi gögn.
Nemandinn fær Flask byrjunarverkefni (boilerplate) tilbúið og einbeitir sér að einni tengingu á milli framenda og bakenda.
Þverfaglegar tengingar
- Enska – tæknilegt tungumál og skjölun
- Samfélagsfræði – hvernig vefþjónustur og stafræn kerfi virka í samfélaginu