Programozási ismeretek oktatása: kód vagy algoritmus

1. 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.

2. 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?

3. 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

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

5. 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)

6. 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ó)

7. Ö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

8. 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

9. 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

10. 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]; } }

11. 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, …)

12. 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,-

13. 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ő

14. 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

15. PFW-ben megoldva • Java, JSP, HTML, JS, CSS • XML • Ú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

16. PFW – így néz ki

17. PFW - így néz ki

18. PFW - így néz ki

19. PFW - így néz ki

20. PFW - így néz ki

21. PFW - így néz ki

22. PFW - így néz ki

23. PFW - így néz ki

24. PFW - így néz ki

25. 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

26. 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, …

27. Generált dokumentáció • NSD

28. 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

29. Generált forráskód • NSD

30. 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

31. Generált forráskód • subtasks.h • 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]; } }

32. 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++; } }

33. 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

34. 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

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

36. Módszertan • Módszeres, szisztematikus • 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

37. 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)

38. 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

39. 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)

40. 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

41. 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/1LfhO64yJRFhywHqRBfoJzawK8PBZDizImWkTFnI4HmA/viewform • https://docs.google.com/spreadsheet/viewform?usp=drive_web&formkey=dERsTi1rS1V6OGc3Rzc3cm85YW5KNFE6MA#gid=0

42. 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