Hogyan készítheti el egy laikus egy nap alatt az INFOÉRA konferencia programlistázó és értékelő mobilalkalmazását? Menyhárt László Gábor Zamárdi, 2014.11.21.

Az előadások a következő témára: "Hogyan készítheti el egy laikus egy nap alatt az INFOÉRA konferencia programlistázó és értékelő mobilalkalmazását? Menyhárt László Gábor Zamárdi, 2014.11.21."— Előadás másolata:

1 Hogyan készítheti el egy laikus egy nap alatt az INFOÉRA konferencia programlistázó és értékelő mobilalkalmazását? Menyhárt László Gábor Zamárdi, 2014.11.21. Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP-4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10.

2 Tartalom Bevezető gondolatok Előkészületek A fejlesztés lépései Bemutató Tapasztalatok Miért mutattam be? Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 2

3 Bevezető gondolatok Először a címről Folyamat és minőség (később: Tapasztalatok) Egy laikus mennyire volt laikus Egy nap = 2 este 5-6 óra 2-3 óra (előkészület) + 0.5-1 óra (tervezés) + 3-4 óra (fejlesztés) + 3-4 óra (tesztelés, finomítás, design) + amíg napközben jár az agyad Hol van? (később: Tapasztalatok) Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 3

4 Bevezető gondolatok 2048 játék Web-en nézegeted a JS-t átírod, hogy 100% valószínűséggel 2048-at adjon minden mezőre Telefonon nézegeted (Android APK letöltöd, unzip, …) UGYANAZ a kód! Hogy is van ez? Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 4

5 Bevezető gondolatok Fejlesztés mobilra Web vagy natív minden platformra? Framework/keretrendszer platform-independent? PhoneGap (persze vannak még ilyenek!) WebApp-ot (HTML, CSS, JS) iPhone-ra, WindowsPhone-ra és Android-ra Natívnak néz ki Eszköz erőforrásait eléri Miért ne használjuk? (később: Miért mutattam be?) Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 5

6 Előkészületek Saját gépre ANT apache-ant-1.9.4 http://ant.apache.org/ NodeJS v0.10.33 http://nodejs.org/ PhoneGap http://phonegap.com/ Projekt fejlesztéshez Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 6

7 PhoneGap Alap az Apache Cordova Natív telefonos alkalmazások fejlesztése HTML, CSS és JS segítségével http://cordova.apache.org/ Apache Licence Plugin-ek Telefonok alap dolgait eléri Partnerek Fájlok GPS Szenzorok Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 7

8 PhoneGap Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 8

9 Előkészületek Fordítás, futtatás emulátoron az SDK-val Saját gépre kell Android SDK https://developer.android.com/sdk/index.html?hl=i Létre kell hozni egy virtuális eszközt android create avd --name --target Emulátorra telepíteni phonegap install android Emulátoron futattni phonegap run android Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 9

10 Előkészületek Több platform miatt Forráskód tárolása szerveren GitHub https://github.com OpenSource  ingyenes https://github.com/laszlogmenyhart/firsttest Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 10

11 Előkészületek Git kliens a lokál gépen git status git add. git commit -m "v$X " #ez akkor kell ha a következő parancsnál nem akarjuk mindig beírni a nevünket/jelszavunkat git config --global credential.helper wincred git push git pull Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 11

12 Előkészületek Fordítás iPhone-ra, WindowsPhone-ra és Androidra PhoneGap oldalán https://build.phonegap.com/ Adobe 3 fizetős szint 1. ingyenes – 1 alkalmazás lehet nem nyilvános Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 12

13 Ez lesz a vége Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 13 Külön köszönet a SmartX Solutions Kft-nek az iOS-es certificate-ért!

14 Ez lesz a vége Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 14

15 A fejlesztés lépései Tervezés Fejlesztés Tesztelés, finomítás és design Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 15

16 Tervezés Natívnak tűnő alkalmazás Webes technológia Szerverre kerüljenek az adatok HTML, CSS JS a kliensen jQuery AJAX window.localStorage Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 16

17 Tervezés Szerver oldalon Egyszerű PHP oldal Fájlba ment Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 17

18 Tervezés - Felület Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 18

19 Tervezés - Adatok Tartalom JS-ben, struktúra Konstans fejlesztési lehetőség: JSON jó lesz frissítéskor Saját lista Telefonon elmentve Értékelt lista Telefonon elmentve Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 19

20 Fejlesztés Azonosító Cím Előadó Időpont Helyszín Pontszám Szöveges értékelés Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 20

21 Fejlesztés Hogyan? Notepad++ Chrome Developer Tools Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 21

22 Tesztelés, finomítás és design … CSS-ben megoldandó feladatok Reszponzív legyen Minden platformon ugyanúgy nézzen ki Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 22

23 Bemutató Képernyőképek Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 23

24 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 24

25 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 25

26 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 26

27 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 27

28 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 28

29 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 29

30 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 30

31 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 31

32 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 32

33 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 33

34 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 34

35 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 35

36 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 36

37 Bemutató Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 37

38 Tapasztalatok Nem használtam natív dolgokat Nem vagyok CSS szakértő Vannak limitációi Lassan renderelt Nem javasolnám „komoly” alkalmazáshoz, de Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 38

39 Miért mutattam be? Iskolában játszani, tanulni elég HTML, CSS, JS kell csak Lokál gépen fejleszthetjük, tesztelhetjük Telefonon futó kód készül Elég egyszerűen lehet kütyüt programozni Diákoknak érdekesség Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 39

40 ???????????? Elérhetőség: menyhart@inf.elte.hu Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP- 4.1.2.B.2-13/1-2013-0007 pályázat keretében 2015. 01. 10. 40