Transcript Hogyan készítheti el egy laikus egy nap alatt az INFOÉ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.
2015.04.08.
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
Tartalom
• Bevezető gondolatok
• Előkészületek
• A fejlesztés lépései
• Bemutató
• Tapasztalatok
• Miért mutattam be?
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
2
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)
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
3
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?
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
4
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?)
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
5
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
6
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
•
•
•
•
2015.04.08.
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ÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
7
PhoneGap
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
8
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 <name> --target <targetID>
• Emulátorra telepíteni
• phonegap install android
• Emulátoron futattni
• phonegap run android
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
9
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
10
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
11
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
12
Ez lesz a vége
Külön köszönet a SmartX Solutions Kft-nek az iOS-es certificate-ért!
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
13
Ez lesz a vége
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
14
A fejlesztés lépései
• Tervezés
• Fejlesztés
• Tesztelés, finomítás és design
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
15
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
16
Tervezés
• Szerver oldalon
• Egyszerű PHP oldal
• Fájlba ment
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
17
Tervezés - Felület
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
18
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
19
Fejlesztés
• Azonosító
• Cím
• Előadó
• Időpont
• Helyszín
• Pontszám
• Szöveges értékelés
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
20
Fejlesztés
• Hogyan?
• Notepad++
• Chrome
• Developer Tools
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
21
Tesztelés, finomítás és design
•…
• CSS-ben megoldandó feladatok
• Reszponzív legyen
• Minden platformon ugyanúgy nézzen ki
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
22
Bemutató
• Képernyőképek
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
23
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
24
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
25
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
26
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
27
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
28
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
29
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
30
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
31
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
32
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
33
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
34
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
35
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
36
Bemutató
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
37
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
38
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
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
39
?
?
?
Elérhetőség:
[email protected]
2015.04.08.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP4.1.2.B.2-13/1-2013-0007 pályázat keretében
40