Programozási ismeretek oktatása: kód vagy algoritmus Menyhárt László, Dr. Pap Gáborné IV. Oktatás-Informatikai Konferencia Budapest, 2014.02.07-08.

Bevezetés Miről lesz szó? Miért kezdődött el a munka? Mi lett belőle? Hogyan lehet használni? Mivel lehet folytatni?

Alapok ELTE-IK-n Programozási Alapismeretek oktatása Rá kell vennünk a hallgatókat a módszeres gondolkodásra Algoritmust először Kell egy programozási nyelv is Kódot másodszor Megvalósítás, kipróbálás Most C++-t használunk

Alapok Tehát kell mindkettő Miért? Hogyan? Algoritmus Kód Általánosabb Módszeres feladatmegoldás Kód Speciális nyelvi kifejezések Futtatás miatt szükséges

Módszeres feladatmegoldás Feladat megértése / specifikálás Adatmodell (be/kimenet, elő/utófeltétel) Algoritmus készítés (nyelvfüggetlen) Implementálás Code::Blocks IDE, C++ nyelv Futtatás, hibakeresés/javítás Tesztelés Dokumentálás (csak házi feladatban)

Tapasztalatok Specifikáció hiányos (ha van) Nekiesnek a kódnak Algoritmus a kódból visszafejtve ReplaceAll (informatikus -> inciklusmatikus) Tesztelés összecsapott Dokumentáció <- mintadokumentációból a végén benne maradnak részek a mintából (pl specifikáció)

Ötlet Adjunk egy alkalmazást, ami segít Adatot gyűjteni Dupla munka kiküszöbölése Dokumentáció, kód előgenerálás (időt spórolunk a diáknak copy-paste helyett) Win-win helyzet kialakítása Mindenki nyerjen Mert az erőszak nem használ

Saját készítésű web-es alkalmazás Programming Fundamentals Wizard - PFW Web-es rendszer (langs: HU, EN) Java-ban fejlesztve (JSP, HTML, CSS, JS, XSLT) Glassfish Application Server-en fut Az egyetemi szerveren Felhasználó azonosítása Gmail (OpenID), inf.elte.hu-s vagy regisztrált név/jelszó párral Az adatok tárolása speciális XML formátumban

PFW Adatgyűjtés helye Általános információk (fejlesztés előtt) Feladat szövege, készítő, … Egy feladat több részfeladatot tartalmazhat Bemenet és előfeltételben lehetnek közös részek Részfeladatonként Kiegészítő bemenet és előfeltétel Kimenet, utófeltétel és algoritmus Kiegészítő információk (kódolás után) Tesztelés, fejlesztési lehetőségek

Algoritmus leírók Eljárás összegzés(N, X[], S): S:=0; ciklus i:=1-től N-ig S:=S+X[i]; ciklus vége Eljárás vége void subtask_1(int N, int X[], int & S){ S:=0; for (int i=0; i<N; i++) { S=S+X[i]; }

Algoritmus a PFW-ben NSD (Nassi-Shneiderman Diagram, struktogram) Komplex diagram Dobozok jelekkel és jelentésekkel Nyelvfüggetlen (programozási és természetes) Külföldi hallgatók képzése angol nyelven Pszeudókód angolul hasonlít a programozási nyelvekhez Anyanyelvüket én nem beszélem Nehéz rajzolni (papíron, hibajavítás, …)

Kitekintés - „NSD szerkesztők” Ben Shneiderman 2003-ban összegyűjtötte http://www.cs.umd.edu/hcil/members/bshneiderman/nsd/ StruktoGraaf 3.0 Holland, fizetős, € 84,- EasyCode Német EuroSoftInc kezdte, EasyCode, kód generálás, fizetős (14 nap próba) SmartDraw Amerika Kaliforniai, $ 197,-

Kitekintés - „NSD szerkesztők” Microsoft Visio SourceCoder Már nem elérhető a HREF Tools Corp. Cég honlapja szerint. Még pár (6-10) link nem elérhető

Kitekintés - „NSD szerkesztők” Nem szerepeltek az oldalon Egyéb Microsoft termékek Paint eszközök Javításkor elölről kell újrarajzolni Structorizer Luxemburgi, weben applet, letölthető Stukimania ELTE-s szakdolgozat Webes

PFW-ben megoldva Java, JSP, HTML, JS, CSS XML XSLT NSD szerkesztés Új TML nyelv (task, feladat leírás, AML-re épül) XSLT Generálásokhoz, NSD megjelenítéshez NSD szerkesztés Egér jobb-gomb, Ajax hívás, újratöltés

PFW – így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW - így néz ki

PFW, mint generátor Van sok információnk Lehetséges a generálás Dokumentációt és algoritmust Nem 100%-os megoldást! Sablont az ismert adatokkal

Dokumentáció generálása Kattintunk egy gombon MS Word dokumentum letöltése HTML doc kiterjesztéssel és mime típussal Betöltődik a programba Lehetne OpenOffice is (más kiterjesztés és mime) Piros színnel jelzi, hogy hol kell belenyúlnia a hallgatónak. „Javítsd!” Képernyő képek, saját kiegészítések, …

Generált dokumentáció NSD

Forráskód generálása Kattintás egy gombon Tömörített (zip) könyvtár letöltése Code::Blocks projekt <rövidnév>.cbp, main.cpp, subtasks.h, subtasks.cpp

Generált forráskód NSD

Generált forráskód main.cpp Változók generálása a specifikációból (be-/kimenet) Függvényhívások minden részfeladathoz Adatok beolvasását implementálni kell Klaviatúra vagy fájl Adatok kiírását implementálni kell Képernyő vagy fájl

Generált forráskód subtasks.h subtasks.cpp Minden függvényhez a fejléc információk Paraméterek a specifikációból (be-/kimenet) subtasks.cpp Generált forráskód az algoritmusból A hibás szintaxisú kódot javítani kell! void subtask_1(int N, int X[], int & S){ S:=0; while (i:=1..N) { S:=S+X[i]; }

Generált forráskód Lehetséges a nyelvspecifikus kifejezések használata de inkább NE! Algoritmus maradjon nyelvfüggetlen! void subtask_1(int N, int X[], int & S){ S=0; int i=0; while (i<N){ S=S+X[i]; i++; }

Módszertan Szeretnénk ha a hallgatók tartanák a sorrendet: 1. Algoritmus, 2. Forráskód Nincs elég időnk Időt spórolunk a generálással Régi sablonból hibás információk nem maradnak Könnyen szerkeszthető NSD Egységes kinézetű specifikáció és algoritmus Nyelvfüggetlen algoritmus

Módszertan Vonalvezetőt adunk a lépések betartásához Meg tudjuk mutatni a kapcsolatot a specifikáció és forráskód között Meg tudjuk mutatni a kapcsolatot az algoritmus és forráskód között A szintaktika javításával is tanulható a programozási nyelv Elektronikus felületet biztosítunk a gyakorláshoz

Módszertan Segítünk, de Nem helyettesítjük a gondolkodást kódolást dokumentálást

Módszertan Módszeres, szisztematikus Élményközpontú és sikerorientált Folyamat, amit be kell tartani Élményközpontú és sikerorientált gyorsan és látható eredmény kis módosítással futó kód Felfedeztető Specifikáció és függvény paraméterek kapcsolata Algoritmus és kód összehasonlítása

A jövő Fejlesztési lehetőségek MathML beépítése az elő- és utófeltételekhez Házi feladatokhoz Kivonat generálás A4-es PDF Feladat szöveg, specifikáció és algoritmus Fejlesztés megkezdése előtt be lehetne adni Email küldéssel beadás a rendszerből Automatizált kiértékelés (legalább elő feldolgozás)

Irodalom I. Nassi, B. Shneiderman: Flowchart techniques for structured programming, ACM SIGPLAN Notices, Volume 8 Issue 8, August 1973, Pages 12 - 26 Dijkstra E.W.: A Discipline of Programming, Prentice-Hall, Englewood Cli_s, 1973. Szlávi Péter, Zsakó László: Módszeres programozás: Programozási bevezető, 18. Mikrológia Sz. Csepregi, A. Dezső, T. Gregorics, S. Sike: Automatic Implementation of Service Required by Components, Workshop on Property Verification for Software Components and Services ,PROVECS 2007, http://lina.atlanstic.net/provecs/2007/provecs2007proceedings.pdf

Irodalom Menyhárt László: Can a language be before "the first programming language"?, Teaching Mathematics and Computer Science, 2011, Volume IX, Issue II, 209-224 ISSN: 1589-7389, http://tmcs.math.klte.hu/Contents/2011-Vol-IX-Issue-II.html Menyhárt László, Pap Gáborné: Dokumentáció alapú programfejlesztés; INFODIDACT 2012 konferencia, Zamárdi, Magyarország, 2012.11.15- 2012.11.16. Menyhárt László, Pap Gáborné: How can we get our students to think while we help their work too?: Document based development; Proceedings of the 7th International Multi-Conference on Society, Cybernetics and Informatics. Konferencia helye, ideje: Orlando, Amerikai Egyesült Államok, 2013.07.09-2013.07.12. Florida: International Institute of Informatics and Systemics (IIIS), 2013. pp. 97-102. (ISBN:ISBN-13: 978- 1-936338-83-2)

Irodalom Vladimir Averbukh, Mikhail Bakhterev: The analysis of visual parallel programming languages, ACSIJ Advances in Computer Science: an International Journal, Vol.2, Issue3, No. 4,2013, ISSN : 2322-5157 Martin Weise: A Model for Teaching Informatics to German Secondary School Students in English-language Bilingual Education, Proceedings of the 6th International Conference ISSEP 2013; Oldenburg, Germany, February 26–March 2, 2013/Diethelm et al. (Eds.)/ Potsdam: Universitätsverlag Potsdam, 2013/ S.127-137 B. Shneiderman: A short history of structured flowcharts (Nassi- Shneiderman Diagrams), University Maryland, 2003, http://www.cs.umd.edu/hcil/members/bshneiderman/nsd/ Bob Fisch: Structorizer, http://structorizer.fisch.lu/ Molnár Tamás: StukiMania, http://stukimania.hu, 2013

Irodalom https://157.181.166.134:8181/PFW/index2_HU.jsp http://xml.inf.elte.hu/2013_14_1/progalap/anyagok/PFW_leiras.pdf https://docs.google.com/forms/d/1LfhO64yJRFhywHqRBfoJzawK8PBZDi zImWkTFnI4HmA/viewform https://docs.google.com/spreadsheet/viewform?usp=drive_web&formkey=d ERsTi1rS1V6OGc3Rzc3cm85YW5KNFE6MA#gid=0

Köszönjük a figyelmet! Elérhetőség Menyhárt László Gábor Dr. Pap Gáborné menyhart@inf.elte.hu papne@inf.elte.hu Tel.: +36 1 209-0555 / 8652 , 8469 Fax: +36 1 381-2140 Cím: 1117. Budapest, Pázmány Péter sétány 1/C. 2.406