tag:blogger.com,1999:blog-28655983233668204092024-03-05T08:28:25.647+01:00Facebook alkalmazás készítéseFacebook alkalmazások létrehozása, beállítása és elkészítése könnyen, érthetően, lépésről lépésre.Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-2865598323366820409.post-22797484341898769142013-05-03T13:12:00.002+02:002013-05-03T13:14:52.089+02:00HAMAROSAN! Egy kis ajándék tőlem Nektek :)Közeleg a születésnapom... Ennek alkalmából pedig meg szeretnék lepni minden olvasót egy kis "segítséggel", ha nevezhetjük így a dolgot :)<br />
Megint sikerült egy kicsit eltűnnöm, és közben sokat filóztam azon, hogy miket és hogy lenne célszerű megosztanom majd itt a blogon... Az ötlet a következő: kaptok tőlem hamarosan egy FACEBOOK-APP KERETET :D amivel olyan könnyű lesz facebook App-okat írni, amennyire még sosem :)<br />
<br />
<b>Az elképzelésem az alábbi: </b><br />
Nincs többé hosszú bonyesz kódok írogatása... hozzáférési kérelmek böngészése, funkciók elérésének csesztetése, azon agyalni, hogy mit írhattunk jól-rosszul, jó helyen hívjuk-e meg az átirányításokat, stb.<br />
Egyszerűen csak megadjuk pár kezdeti változóban az APP_ID-t, az APP_SECRET-et, stb... majd be include-oljuk az általam megírt PHP fájlt, és egy ilyen paranccsal PL: <span style="font-family: "Courier New",Courier,monospace;">get_fb_acces();</span> már le is zajlik a hozzáférések kérése, és megadott változókban máris tárolásra kerül minden alap USER info.<br />A falra posztolás csak ennyi lesz: <span style="font-family: "Courier New",Courier,monospace;"> </span><br />
<span style="font-family: "Courier New",Courier,monospace;">post::feed("A poszt szövege","Cím","Leírás","http://link","http://képlink");</span><br />
Hogy lájkolták-e az oldalt, már azonnal tárolásra kerül egyetlen változóban, semmilyen kódot nem kell majd írnunk érte, az ismerősök listája is egy rövid paranccsal máris kezelhető, lesz benne falra posztolás, képposztolás, app-request küldés, illetve üzent-küldő ablak is :) Egyelőre... aztán később kiderül...<br />
<br />
<b>A kérdéseim:</b><br />
1) Van rá igény egyáltalán? :) <br />
2) Milyen funkciókat látnátok még benne szívesen?
<br />
<br />
<fb:comments data-colorscheme="dark" href="http://facebookalkalmazaskeszitese.blogspot.hu/2013/05/hamarosan-egy-kis-ajandek-tolem-nektek.html" num_posts="2" width="530"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-37225807222990074962012-04-22T21:40:00.001+02:002012-04-22T21:42:50.953+02:00Szabálytalan működésű alkalmazások!<div style="text-align: justify;">
Mint azt már tapasztalhatjátok, a profilom, s vele együtt a Facebook-oldalam is határozatlan ideig (de az is meglehet, hogy véglegesen) nem elérhető. Ennek oka pedig az alkalmazások körül gyökeredzik. Amennyiben Ti is kísérletezgettek Facebook-alkalmazásokkal, amiket mondjuk Facebook-oldalatok népszerűsítésére szeretnétek használni, mindenképpen olvassátok el ezt a cikkemet:<br />
<a href="http://penz-es-marketing-a-neten.blog.hu/2012/04/22/hogy_miert_celszeru_eloszor_profilkent_letrehozni_a_facebook_oldalad" target="_blank">hogy_miert_celszeru_eloszor_profilkent_letrehozni_a_facebook_oldalad</a>. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Én már beszoptam ezt, ne kelljen Nektek is ugyanebbe a pocsék helyzetbe kerülni.<br />
<br />
<br /></div>
<fb:comments data-colorscheme="dark" href="http://facebookalkalmazaskeszitese.blogspot.com/2012/04/szabalytalan-mukodesu-alkalmazasok.html" num_posts="2" width="530"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-32473611647363104562012-04-21T15:39:00.001+02:002012-04-21T15:41:46.331+02:00Like-kapu készítése<div style="text-align: justify;">
Ez gondolom egy olyan cikk, amire már sokan epekedve várnak. Eljött az ideje, hogy minden olvasó elkészítse a saját Like-kapuval zárt Facebook-aloldalát (ha most hirtelen azon kaptad magad, hogy fogalmad sincs, miről van szó, akkor itt utána olvashatsz: <a href="http://penz-es-marketing-a-neten.blog.hu/2012/04/19/a_like_kapu_hatalma" target="_blank">penz-es-marketing-a-neten.blog.hu/2012/04/19/a_like_kapu_hatalma</a>). </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>A mai feladat:</b></div>
<div style="text-align: justify;">
Készítsünk egy olyan - Facebook-honlapba integrált - alkalmazást, aminek lényegi része csak azt követően jelenik meg, hogy a látogató lájkolta az oldalt. Ha már úgyis felmerült az előző bejegyzések kommentjei között: legyen az a lényegi tartalom egy egyszerűbb kvízes megoldás.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>A működés (felhasználói szemmel):</b></div>
<div style="text-align: justify;">
Valahol rábukkanok (majd rá is kattintok) egy linkre, ami egy kvízes app-hoz vezet... Amit tapasztalok: egy lap köszönt, ami felhívja rá a figyelmem, hogy amennyiben szeretném kitölteni a kvízt, Like-olnom kell az oldalt... Miután ezt megtettem: jön egymásután (tehát válaszadások után) 3 kérdés, 3 lehetséges válasszal (mindegyiknél csak 1 helyes válasz lesz)... A 3 válaszadást követően a program kiértékeli, hogy mennyire vagyok jó a témában. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Na, akkor fejlesszünk:</b></div>
<div style="text-align: justify;">
Ahhoz, hogy kivitelezhessük a fent leírt eljárást, le kell kérdeznünk valahogy a "lájkolási állapotot". Miután ezzel tisztában vagyunk, a kapott értéknek megfelelően más-más tartalmat jelenítünk meg. Ehhez a lekérdezéshez az alábbi rövid kódrészletre van csak szükség a PHP kódodban:</div>
<div style="text-align: justify;">
<br /></div>
<table align="center" style="width: 420px;"><tbody>
<tr><td><div style="text-align: justify;">
<span style="font-family: 'Courier New';">$app_id = "123456789012345";</span><br />
<span style="font-family: 'Courier New';">$app_secret = "1234567890abcdef1234567890abcdef";</span><br />
<span style="font-family: 'Courier New';"><br /></span><br />
<span style="font-family: 'Courier New';">require 'facebook-php-sdk/src/facebook.php';</span><br />
<span style="font-family: 'Courier New';">$code = $_REQUEST["code"];</span><br />
<span style="font-family: 'Courier New';"><br /></span><br />
<span style="font-family: 'Courier New';">$facebook = new Facebook(array(</span><br />
<span style="font-family: 'Courier New';"> 'appId' => $app_id,</span><br />
<span style="font-family: 'Courier New';"> 'secret' => $app_secret,</span><br />
<span style="font-family: 'Courier New';"> 'cookie' => true</span><br />
<span style="font-family: 'Courier New';">));</span><br />
<span style="font-family: 'Courier New';"><br /></span><br />
<span style="font-family: 'Courier New';">$signed_request = $facebook->getSignedRequest();</span><br />
<span style="font-family: 'Courier New';">$like_status = $signed_request["page"]["liked"];</span></div>
<span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table>
<br />
<div>
<div style="text-align: justify;">
Ennek a rövid kódnak is a java része már ismerős kell, hogy legyen, mivel ez magában foglalja a Facebook-SDK meghívását, a Facebook-osztály létrehozását, stb. Az első belépéskor a "like_status" változó hordozza magában a titkot: lájkolták-e az oldalt? Ha igen, akkor "true" értéket kap. Ekkor gyakorlatilag már csak annyi van hátra, hogy egy létrehozunk egy elágazás, ami a feltétel részben ezt a változót vizsgálja. Egy egyszerű példa erre:</div>
<div style="text-align: justify;">
<br /></div>
</div>
<table align="center" style="width: 420px;"><tbody>
<tr><td><div style="text-align: justify;">
<span style="font-family: 'Courier New';">if ($like_status)</span><br />
<span style="font-family: 'Courier New';"> echo 'Köszönjük a Lájkot!';</span><br />
<span style="font-family: 'Courier New';">else</span><br />
<span style="font-family: 'Courier New';"> ehco 'Kérjük, Lájkold az oldalt!';</span></div>
<span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table>
<br /><div style="text-align: justify;">
Az pedig gondolom nyilvánvaló, hogy melyik esetben melyik felirat kerül kiíratásra :) Itt már csak annyi az extra feladat, hogy kitaláljuk, mi legyen az a tartalom, amivel az embereket magunkhoz tudjuk csalogatni, és amiért megéri nekik lájkolni minket.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Jöhet a kvíz:</b></div>
<div style="text-align: justify;">
A legcélszerűbbnek azt láttam, hogy nagy vonalakban, vázlatosan leírom a program működését, és mellékelek egy szabadon letölthető forráskódot, amiben pedig teljes egészében láthatóak a parancsok. Egy "pont" nevű session-változóban tároljuk el a helyes válaszok számát (ez a betöltéskor nulla lesz). A kérdésekete és válaszokat 3 tömbben tároljuk: a "kerdesek" nevű a kérdések listáját tartalmazza, a "valaszok" két-dimenziós mátrix az adott indexű kérdéshez tartozó 3 válasz-lehetőséget őrzi magában, majd a "helyesvalaszok" tömb még azt tárolja el, hogy adott indexű kérdéshez hányadik indexű válasz a helyes. Lesz egy - GET metódussal, a linkeken keresztül érkező - "step" nevű bemenő paraméter, ami azt jelzi, hogy hányadik lépésnél tartunk (illetve, hogy egyáltalán játékban vagyunk-e). Ha a "like_status" értéke nem igaz és a "step" is azt mutatja, hogy éppen nem vagyunk játékban, akkor jön az a képernyő, hogy Like-olnunk kell a játékért. Ha ez megtörtént, a "step" értéke máris 1 lesz, így a játék kezdetét veszi. Amennyiben volt válaszadás ("answ" paraméter), megnézzük, hogy változik a pontszám, ha a "step" eléri a kérdések maximális számát, akkor következik a kiértékelés (a "step" pedig újra nullázódik), ha pedig a "step" még mindig játékban van, kiírjuk a következő kérdés adatait, a válaszoknak megfelelő linkeket generálunk (amik már 1-gyel nagyobb "step" értéket adnak majd). Ez a koncepció röviden :) Remélem, könnyen át sikerül majd látni a forráskódot is. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Letöltés:</b></div>
<div style="text-align: justify;">
Az általam kreált Like-kapuval ellátott Kvíz-alkalmazást letöltheted az alábbi linkre kattintva:<br /><a href="http://www.facebook.com/penzesmarketinganeten/app_431315400216415?ref=ts" target="_blank">facebook.com/penzesmarketinganeten/app_431315400216415</a>. </div>
<div style="text-align: justify;">
Ha bármilyen észrevételetek akad, vagy hibát találtok benne, értesítsetek és együtt orvosoljuk azt :)</div>
<div style="text-align: justify;">
<br />Akkor jó munkát a használathoz! Kellemes hétvégét!<br/><br/><br/></div>
<fb:comments data-colorscheme="dark" href="http://facebookalkalmazaskeszitese.blogspot.com/2012/04/like-kapu-keszitese.html" num_posts="2" width="530"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-46545893943352893342012-04-18T08:54:00.004+02:002012-04-18T14:20:51.322+02:00Facebook-alkalmazás Heroku tárhelyen<div style="text-align: justify;">Gondolom, felmerült a fejlesztőkben a gondolat, hogy sokaknak bosszúságot jelent a saját tárhely problémája (nem beszélve azokról, akiknek van, csak a biztonságos megjelenést nem tudják biztosítani, s ezzel jó pár látogatótól elesnek), ezért most már az új app létrehozásakor (ahol a legelején meg kell adni a nevet, és az elérhetőségének nevét is) kiválaszthatunk egy "Webhosting" lehetőséget is, ami biztosít az alkalmazásunk számára egy Heroku tárhelyet. Elég sok képpel teleszórom ezt a bejegyzést, próbálom jó alaposan levázolni a teendőket. Nem lettem persze profi se "git", se "heroku" téren, de azt az infót mindenképp átadom, ami bennem van :)</div><div style="text-align: justify;">Szóval tehát új alkalmazás létrehozása... App name, namespace... Pipáljuk be a "Yes, I would like free web hosting..." jelölőt, és hozzuk létre úgy az új appunkat. </div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23AhPiBjuIYfhZvNvqBUhjJIDXPq0s5A40ElpAHOSTPFbEHY_nMdmN2Hu9kH48A0W5-7NnHUbpvRCRaHuz6Ds-RW2FKddVS04Txw4NQTBXlWO7uWXWVW8scRCkbgOZq1QtIa4NCKNAiSA/s1600/03_02.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23AhPiBjuIYfhZvNvqBUhjJIDXPq0s5A40ElpAHOSTPFbEHY_nMdmN2Hu9kH48A0W5-7NnHUbpvRCRaHuz6Ds-RW2FKddVS04Txw4NQTBXlWO7uWXWVW8scRCkbgOZq1QtIa4NCKNAiSA/s400/03_02.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">A továbbiakban szükség lesz az e-mail címünkre, amelyhez kapunk egy Heroku-hozzáférést (ehhez máris berakja a Te profilod e-mail címét), valamint meg kell adnunk a környezetet, amiben fejleszteni szeretnénk (ez alap esetben "PHP" és nekünk éppen az is kell). Ezt követően az alkalmazásunk el is készült, a beállításoknál lényegében semmit nem kell beírnunk, már alapból kitöltött minket. A Canvas URL-eknél látható is, hogy megkaptuk a tárhelyet is, amin futni fog és már be is van "lőve". Ha ránézünk az alkalmazásunkra (Canvas Page) a következő látvány fogad minket:</div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0e_qw4bHcDccCDaNKMk3T3L5ubYZfnh0UlfKNJF3abmQtEf8IxjzGPnvcAy9zEjCzpH9bLRaYOGk0oYA5HtXtdTztcrEggbaRm4v4jz3Ua07Fxv6qBWivHiVd0o7eNxdEQ54aYlUtUUW/s1600/03_03.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0e_qw4bHcDccCDaNKMk3T3L5ubYZfnh0UlfKNJF3abmQtEf8IxjzGPnvcAy9zEjCzpH9bLRaYOGk0oYA5HtXtdTztcrEggbaRm4v4jz3Ua07Fxv6qBWivHiVd0o7eNxdEQ54aYlUtUUW/s400/03_03.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Lényegében az alkalmazásunk futásra kész, és jelenleg ez az App. Ez a bemutató alkalmazás, amit majd kedvedre módosíthatsz. Érdemes felül rámenni a "log in" gomba és a hozzáférést engedélyezni, ekkor kicsit megváltozik a felület, ott lesz a neved, profilképed, pár ismerősöd, fotók, oldalak, amiket lájkoltál, stb... éppen ezért majd érdemes lesz külön elmentened valahova ennek a bemutatónak a forrását, mert láthatóan sok hasznos dolog megtalálható benne, amire majd a továbbiakban szükséged lehet. </div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7dxSECXF-5jv_I2sNNQgtGhCnM92NnqfcG6m1VhAbJOgzcHUGQDtBvxPZkDwtT6ramFI4fewYG4I5vtJo2OSSF7N4BqVHMmMqkBzQiuiW_8wcJ2gmuuJlQbAlRBJ97S7kQp76q_J8-YU/s1600/03_05.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7dxSECXF-5jv_I2sNNQgtGhCnM92NnqfcG6m1VhAbJOgzcHUGQDtBvxPZkDwtT6ramFI4fewYG4I5vtJo2OSSF7N4BqVHMmMqkBzQiuiW_8wcJ2gmuuJlQbAlRBJ97S7kQp76q_J8-YU/s320/03_05.JPG" width="320" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Közben kaptál egy e-mailt is a Heroku-tól, melyen a felső linkre kattintva jön létre a hozzáférésed, amihez utána csak annyit kell tenned, hogy megadod a jelszót, amivel el szeretnéd érni a későbbiekben a tárhelyed.</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR59X9wQaqmmE5hFNbS6_7K7Vlibj3gLG1kvuFzaWZ9SExga3A-Cy7rgVprsHaNTkzldJMDO6OWuXjbxCknGIYI8eBVAOer70KW6xAWTUXL_yhkI8s4oh3KTjJu3DBssP6IxvKZrjCFNXF/s1600/03_06.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR59X9wQaqmmE5hFNbS6_7K7Vlibj3gLG1kvuFzaWZ9SExga3A-Cy7rgVprsHaNTkzldJMDO6OWuXjbxCknGIYI8eBVAOer70KW6xAWTUXL_yhkI8s4oh3KTjJu3DBssP6IxvKZrjCFNXF/s320/03_06.JPG" width="259" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Természetesen a jelszó kétszeri beírását követően a "save" gomb viszi tovább a történetet :) Ezután jön a szükséges program letöltése. Megjelenik előtted egy cucc, amiről virít, hogy arra vár, hogy letöltsd:</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemFAeJGAxY5-1Qka8zfGkZodIMS0AnAHZCOUeu-3_xKOd6Dx76M14XuItEZzi-DqL2KDgVShzpq7ce4utu5hBB33Re0NiPDx4OVzWhhq1AyhNL4Aw4J8iQ3ovEcp_IaBq8I5UPG9KjUOg/s1600/03_07.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemFAeJGAxY5-1Qka8zfGkZodIMS0AnAHZCOUeu-3_xKOd6Dx76M14XuItEZzi-DqL2KDgVShzpq7ce4utu5hBB33Re0NiPDx4OVzWhhq1AyhNL4Aw4J8iQ3ovEcp_IaBq8I5UPG9KjUOg/s320/03_07.JPG" width="320" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Természetesen a fejlesztők kedvesek és gondoltak mindenkire, így több rendszerre is letölthető a kívánt szoftver. Amúgy itt most hozzátenném, hogy én Windows-on kísérleteztem, így én csak a Windows-os progihoz kapcsolódó tapasztalataimról tudok beszámolni, de feltételezem, más rendszereken is hasonló a sztori :)</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSAj289o-in6xYVy2NWRsNPmXrF7eaX2OAGkJD9uWTWHxaTtjw-4fJBHj2Zp1BuV7fELyHZ1mP5iBO5B_G-cexyKAozBBX51g1bprbxaNG-YtPZbFxXHze3hjj0aIMhwTJgARSvDB5B3A/s1600/03_08.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSAj289o-in6xYVy2NWRsNPmXrF7eaX2OAGkJD9uWTWHxaTtjw-4fJBHj2Zp1BuV7fELyHZ1mP5iBO5B_G-cexyKAozBBX51g1bprbxaNG-YtPZbFxXHze3hjj0aIMhwTJgARSvDB5B3A/s320/03_08.JPG" width="320" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Ekkor kerül le a gépedre a "heroku-toolbelt.exe", amit már futtathatsz is. A telepítés menete a szokásos, egyértelmű procedúra: Next... cél-könyvtár megadása, Next... "Full installation" kiválasztása, Next... majd Install... és végül Finish. Na, ez is megvolt :) Örülsz, hogy végre túl vagyunk a nehezén? Hát ne tedd, mert még korántsem :) Innentől lesz szopás a dolog... legalábbis így elsőre.</div><div style="text-align: justify;">A dolog röviden így megy tovább: szinkronizálni kell a tárhelyeddel, azaz klónozni kell a fájlokat a Te gépedre, majd azokat (miután módosítottad) visszatölteni oda. Ezt ezzel a programmal tudod végrehajtani, és ami pedig a legszebb: parancssorból kell csinálni :) Tehát a következő lépés a jó öreg "cmd" megnyitása (a biztonság kedvéért: start menü... keresés: "cmd"). Akkor most el kell jutnunk a gépünkre feltelepült progi BIN mappájába (ehhez ugye a CD utasításra lesz szükség), én hagytam az alapértelmezetten megadott útvonalat, szóval nálam ez akkor valahogy így nézett ki: </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><table align="center" style="width: 320px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">cd c:\Program Files (x86)\Heroku\bin\</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table></div><div style="text-align: justify;"><br />
Ekkor következik a csatlakozás a "heroku login" paranccsal. Kicsit várunk, majd a hozzáférés megadásához meg kell adnunk az e-mail címet, amivel regisztráltunk, majd azt követően a jelszavunkat (ne ijedjünk meg, ha a jelszó beírásakor nem látunk változást, a jelszó karakterei nem láthatóak, csak pötyögj be és üssünk ENTER-t). </div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMhp7GfPGDRtF_toALZddjRDeAb0KKBm0t4Tokbsa4fKdiRoeTONzT-fUhcQ6Ca7XYSzMbiFZXlhbEYTPC7P_J3tPMc9hhfMU6DZhgk6D3FkW7XU7kXRJGBsdw8DgV4wkS4iURwZDES-9/s1600/03_10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMhp7GfPGDRtF_toALZddjRDeAb0KKBm0t4Tokbsa4fKdiRoeTONzT-fUhcQ6Ca7XYSzMbiFZXlhbEYTPC7P_J3tPMc9hhfMU6DZhgk6D3FkW7XU7kXRJGBsdw8DgV4wkS4iURwZDES-9/s320/03_10.JPG" width="320" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Ha az "Authentication successful" feliratot pillantjuk meg a képernyőn, akkor sikeres volt az azonosítás, eddig teljesen sínen vagyunk (azt ismét hozzáteszem: csak azt írom le, amit csináltam, ahhoz, hogy működjön, sajna ha hibát ír ki, még nem tudom megmondani, mi a baj, épp ezért nagyon bízom benne, hogy mindegyikőtöknek gördülékenyen megy majd a dolog :D ).<br />
Na, itt akkor már ideje rátérni egy fontos dologra: amikor létrejött az appod tárhelye, kaptál egy egyedi azonosítót a Herokutól, ami két szóból és egy négyjegyű számból áll. Ha megnézed az alkalmazásod adatainál például a Site URL-t, akkor az valahogy így néz ki: "https://valami-akarmi-1234.herokuapp.com/", ami alapján az alkalmazásod azonosítója a "valami-akarmi-1234", erre még szükséged lesz.<br />
Akkor jöjjön az a rész, amikor klónozzuk a gépünkre a tárhelyen levő fájlokat. Ehhez szükség lesz az előbb említett azonosítóra, a parancs ehhez pedig a következőképpen néz ki:<br />
<br />
<table align="center" style="width: 400px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">git clone git@heroku.com:valami-akarmi-1234.git <br />
-o heroku</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table><br />
A program ellenőrzi, hogy a megadott azonosítójú alkalmazás valóban a Te e-mail címed bírtokában van-e, s amennyiben igen (és minden más is rendben zajlik), akkor az alábbi szövegeket kell magad előtt látnod a parancssorban:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLa4kJqPrlJIvvCMuVUCS10TF8sTOWCKwicqttT1fs13lkQtqOCzKU6e2r4yUBeVTRzf1IGIQpBKQ1jyjtUQTkC_rFOOX58NvUR4Cji2oNI5fHO7wBiyUYPETklvBmRK8KT5890WAQRNzm/s1600/03_11.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLa4kJqPrlJIvvCMuVUCS10TF8sTOWCKwicqttT1fs13lkQtqOCzKU6e2r4yUBeVTRzf1IGIQpBKQ1jyjtUQTkC_rFOOX58NvUR4Cji2oNI5fHO7wBiyUYPETklvBmRK8KT5890WAQRNzm/s400/03_11.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Ekkor elméletileg a fájlok már megtalálhatóak a gépeden, most meg kell keresned őket. Célszerű nyomnod egy keresést, egy olyan mappát keress, aminek a neve az appod azonosítója (valami-akarmi-1234). Nálam ez valahol itt helyezkedett el: </div><div style="text-align: justify;">c:\Users\Felhasznalonev\AppData\Local\VirtualStore\Program Files (x86)\Git\bin\valami-akarmi-1234\</div><div style="text-align: justify;">Itt vannak a fájlok, ebben a mappában van az "index.php" is (ahogy már említettem, célszerű ezeket átmásolni valahova, hogy tanulmányozhasd a benne lévő parancsokat, függvényeket, stb., utána meg nyugodtan módosíthatod ezt, ahogy csak akarod). Akkor már csak azt kell tudnunk, hogy miként módosíthatjuk a fent elhelyezkedő alkalmazásunkat. Először is nyissuk meg az "index.php"-t és csak próbaképp változtassunk benne meg valamit (én csak megkerestem benne azt a részt, ahol van az a szöveg, hogy "Welcome to your Facebook app, running on heroku!" és ezt átírtam). Mentsük el, majd jöhet a feltöltés. Ehhez át kell lépnünk az alkalmazásunk fájljainak mappájába... Esetemben ugye:</div><div style="text-align: justify;"><br />
</div><table align="center" style="width: 500px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">cd c:\Users\Felhasznalonev\AppData\Local<br />
\VirtualStore\Program Files (x86)\Git\bin\valami-akarmi-1234\</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table></div><div style="text-align: justify;"><br />
A feltöltés csak úgy működik, ha ebben a mappában írjuk be a parancsokat. Itt már csak két utasítás választ el minket a céltól. Az első így néz ki (az idézőjelek közt elvileg bármi lehet):<br />
<br />
<table align="center" style="width: 250px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">git commit -am "valtozas"</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table></div><div style="text-align: justify;"><br />
Ezáltal elvileg a program tisztában lesz azzal, hogy milyen módosítások történtek a legutóbbi feltöltés óta (vagy a tárhelyen elhelyezkedő fájlokhoz képest). Egyébként ez volt az a rész, amiről nem tudtam, hogy kell és emiatt nem működött nekem sokáig a dolog (ebből látszik, hogy ez a lépés kihagyhatatlan :D ). Íme az eredmény:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAi7lyXHVWWKJCEejSmZHLKGbMiTNPqeOQsKTurMOYv_MEPK5sPWEgpmXTrFz7tfA1vFAVAfFZH_2_0WG15jlALOR0usWlrRchC5ycWj0ytGoYJZgueuMjEmCumIVVnt8pBbYB4IQg3RDY/s1600/03_12.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAi7lyXHVWWKJCEejSmZHLKGbMiTNPqeOQsKTurMOYv_MEPK5sPWEgpmXTrFz7tfA1vFAVAfFZH_2_0WG15jlALOR0usWlrRchC5ycWj0ytGoYJZgueuMjEmCumIVVnt8pBbYB4IQg3RDY/s400/03_12.JPG" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: justify;">Na, már csak egy lépés van hátra :) kitartás! Az új információk feltöltéséhez (továbbra is ebben a mappában maradva) ezt a parancsot kell begépelned:</div><br />
<table align="center" style="width: 250px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">git push heroku master</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table><br />
És elméletileg ezután fejeződik be a procedúra. Ha minden jól megy, a feltöltés békésen zavartalanul lezajlik, a módosított fájlok felkerülnek a szerverre, és a következő képernyő fogad:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2_bVyNVTSt-OcYWgMUvBIuMOJ5in6ZNnUb1ZTVZfmp2Sk7aohM7KpTrZ7n-b23_v86e7cqM459QX31pzy94L1rMYTg06ieQpNkHXzN601pdVj44JMU6kUmYrXqV14JSOI0Oc-76Ms9TW/s1600/03_13.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2_bVyNVTSt-OcYWgMUvBIuMOJ5in6ZNnUb1ZTVZfmp2Sk7aohM7KpTrZ7n-b23_v86e7cqM459QX31pzy94L1rMYTg06ieQpNkHXzN601pdVj44JMU6kUmYrXqV14JSOI0Oc-76Ms9TW/s400/03_13.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div>Pörögnek a sorok (és ezek szerint az események is), történik egy csomó dolog, és ha minden igaz, felkerült a módosított "index.php" fájl is, tehát ha újra betöltöm az alkalmazásom, akkor már az új szöveget kell látnom benne. Nálam ez sikerült is, a belső szöveg a frissítés után már így nézett ki:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnb3GRxUkhISMGFi-S5262s5_J05REmndA0GiomnX7I3exiHqlnHQma18xi279rp2WEq_XU99bEtnMHaky3gYDw5WPvQI7dCn4mYP8L_Xb9fnqubo_c4JJxb2P3aEj0l_eKdE4zj56EK_/s1600/03_14.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnb3GRxUkhISMGFi-S5262s5_J05REmndA0GiomnX7I3exiHqlnHQma18xi279rp2WEq_XU99bEtnMHaky3gYDw5WPvQI7dCn4mYP8L_Xb9fnqubo_c4JJxb2P3aEj0l_eKdE4zj56EK_/s400/03_14.JPG" width="400" /></a></div><div style="text-align: center;"><br />
<div style="text-align: justify;">Tehát sikerre jártam :) még ha jópár hajszálam bánta is. Bízom benne, hogy Ti is mind sikerrel jártok. Tudom, kicsit hosszúra sikerült ez a bejegyzés, remélem nem idegesítően szájbarágós (és persze emellett azt is remélem, hogy 100%-ban érthető és követhető is volt). Amennyiben kérdésetek merülne fel, igyekszem megválaszolni, ha módomban áll :) További szép napot! Nemsoká újra jövök.<br />
<br />
<b>Még egy kis kiegészítés (hozzátenném, hogy köszönet Sam Po közreműködéséért):</b><br />
<br />
Ha bővíted fájlokkal a könyvtáradat (PL: egy háttérképet adsz hozzá), nem elég a fájlt a helyére rakni, és még ha hivatkozol rá a forrásban, az sem jelzi a rendszer számára, hogy új fájl vár feltöltésre. Így tehát ha például az "images" mappádban van egy "back.jpg", akkor a szinkronizáláshoz kell az alábbi parancs:<br />
<br />
</div><table align="center" style="width: 270px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">git add images/back.jpg</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table></div></div><br />
<div style="text-align: justify;">És innentől ismét jöhet a "commit", majd "push". Ennyi lett volna a kiegészítés, köszi még egyszer a hozzászólást, ezzel tuti sok próbálkozót óvtál meg egy újabb (valószínűleg mindenkinél előforduló) problémától :)<br />
<br />
<br />
</div><fb:comments data-colorscheme="dark" href="http://facebookalkalmazaskeszitese.blogspot.com/2012/04/facebook-alkalmazas-heroku-tarhelyen.html" num_posts="2" width="530"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-70847861060277994102012-04-17T08:12:00.002+02:002012-04-17T10:22:04.820+02:00Facebook-alkalmazás hozzáadása Facebook-oldalhoz<div style="text-align: justify;">Egyelőre még csak olyan alkalmazást tudunk készíteni, ami gyakorlatilag egy statikus weboldal beágyazva a facebook-ba applikációként. Mi hasznát tudjuk venni ennek? Ennek is van valami haszna :) például ha van egy facebook-oldalunk, ahol minden promóciós célkitűzés nélkül szeretnénk valami pofás, egyedi tartalmat megjeleníteni, akkor azt egy már létező alkalmazás hozzáadásával (amitől lényegében egy új füllel bővül az oldalunk) megtehetjük. </div><div style="text-align: justify;">Érdemes megemlíteni, hogy ez hogy nézett ki régebben: volt egy facebook-oldalunk, kész volt az alkalmazásunk, megtekintettük az app profilját, majd az "add To my Page" linkre kattintva már el is indult a folyamat. Hogy néz ki most? Nos... ha ugyanezt a vonalat próbáljuk követni: a developersben kiválasztod az adott alkalmazás adatainak szerkesztését, már nem látod azt a lehetőséget, hogy "app profile", viszont látsz egy olyat, hogy "See App Timeline View" és sanszos, hogy ez az, amit keresünk. Viszont én, amikor erre ráklikkelek, akkor bravúrosan az üzenőfalamon kötök ki :D hát ez egyszerűen zseniális. Persze létre tudsz hozni egy saját oldalt az alkalmazásod számára, de ez megint nem az, ami nekünk kell... :)</div><div style="text-align: justify;">Na, lássuk, hogy tudjuk ezt megoldani... a kezdeti lépések: menj az alkalmazás szerkesztéséhez (developers, majd a kiválasztott app-nál "Edit Settings"), legalul nyisd ki a "Page Tab" űrlapot, ezzel definiáljuk az alkalmazásunkat facebook-oldal füleként. A Page Tab Name lesz e megjelenítendő neve, a Page Tab URL és a Secure Page Tab URL ugyanazok, mint a Canvas URL és Secure Canvas URL, a Page Tab Image ad lehetőséget, hogy kiválasszuk a megjelenítendő "ikon-képet", a Page Tab Width esetében pedig a neked szimpi szélességet válaszd. Ezután "Save Changes", az alapok definiálása kész... De még mindig a nagy kérdés: Hogy a *** adjuk az oldalhoz??? Na, most végre elérkeztünk ide is. Ehhez egy linkre lesz szükséged:<br />
<br />
</div><div style="text-align: justify;"><table align="center" style="width: 300px;"><tbody>
<tr><td><div style="text-align: justify;"><span style="font-family: 'Courier New';">http://www.facebook.com/dialog/pagetab?app_id=APP_ID&next=CANVAS_URL</span></div><span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Na, egy ilyen URL jelenti majd a megoldást a problémára. Ugye mennyivel egyszerűbb ez a megoldás? :D Csak meg kell találnod valahol ezt a linket és Neked kell bemásolgatnod a paramétereket... Na mindegy, a lényeg, hogy kivitelezhető. Az "APP_ID" helyére másold be az alkalmazásod App ID-jét, a "CANVAS_URL" helyére pedig a Canvas URL-t (pl: http://oldalam.hu/fb_alkalmazasom/ ). Ekkor - ha jó adatokat illesztettél be - az alábbi látvány fogad:</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlukJfyQr6cSS8DEW-xF4bwNqd_aVz0U9WmwAGEJPYtObgbOjwrFLYgIaVQa_zD2DqwKVn0-H8gqIPNmZ5jw_mJevZfzaJXE9C1Wjth4XmYmhC559GUdX23xWTGnvVmcfogjmJFdt40g1u/s1600/02_01.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlukJfyQr6cSS8DEW-xF4bwNqd_aVz0U9WmwAGEJPYtObgbOjwrFLYgIaVQa_zD2DqwKVn0-H8gqIPNmZ5jw_mJevZfzaJXE9C1Wjth4XmYmhC559GUdX23xWTGnvVmcfogjmJFdt40g1u/s400/02_01.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Ekkor csak klikk a "Choose Facebook Pages"-re és a listából válaszd ki az oldalt, amelyikhez hozzá akarod adni, majd "Add Page Tab". Ezután valamiért átirányít téged a Canvas URL-ben levő címre, de ez ne zavarjon meg :) látogasd meg a facebook-oldalad és alul máris látni fogod az új "menüt".</div><div style="text-align: justify;">Sajnos egy igen fontos funkció (ami anno nagyon hasznos volt) ma már valamiért nem játszik: azelőtt ha facebook-oldalad szerkesztetted, volt olyan választási lehetőség, hogy "default landing tab", mellyel meghatároztad, hogy új látogatóid melyik lapot lássák először az oldaladon (pl: az alkalmazásodét), viszont valamilyen okból ma már ez nincs... vagy lesz később, vagy ez már csak privilégium... passz. Csak azt tudod tenni, hogy azt az URL-t promózod másoknak, ami közvetlenül arra a lapra vezet (ez tipikusan így néz ki: http://www.facebook.com/oldalam/app_123456789012345).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Természetesen, amikor programozni fogjuk az appokat, akkor azok facebook-oldalba integrálva is ugyanúgy fognak működni, szóval ez a hozzáadásos dolog mindig működik minden alkalmazásnál. Nem is... hazudtam egy kicsit, mert például a Like-kapura ez nem igaz, mert az nem működik, ha nem egy oldalon belül fut az alkalmazás. De azt is meglátjuk, hogy néz ki... :)</div><br />
<fb:comments href="http://facebookalkalmazaskeszitese.blogspot.com/2012/04/facebook-alkalmazas-hozzaadasa-facebook.html" num_posts="2" width="530" data-colorscheme="dark"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-87918574366829860172012-04-16T15:54:00.007+02:002012-04-17T10:22:46.809+02:00Alkalmazás létrehozása az új felületen<div style="text-align: justify;">Nem biztos, hogy nagy problémát jelent mindenkinek a változás, de azért lehet, hogy érdemes újra onnan indulnunk, hogy mégis hogy hozom létre az új facebook-appunkat. A folyamat nagyjából ugyanaz, de azért megmutatom az alapbeállításokat. Most is azzal kezdünk, hogy meglátogatjuk a fejlesztői webhelyet: <a href="http://facebook.com/developers/" target="_blank">http://facebook.com/developers/</a>. Ha még nem jártál itt, akkor először telepítened a facebook-fejlesztői alkalmazást, ugyanúgy, ahogy anno is kellett, viszont ha már fejlesztettél, akkor itt az eddigi appjaid listáját (illetve a kijelölt app összefoglalóját) látod. Nem árulok el nagy infót azzal, hogy új létrehozása a fenti "+ Create New App" gombra kattintva kezdődik :)<a href="http://www.blogger.com/"></a></div><div style="text-align: justify;">Ekkor feljön egy kis form, ami megkérdi az új alkalmazásunk megjelenítési nevét (App Name) és az elérhetőségben (linkben) szereplő nevét (App Namespace - csak kisbetű és alulvonás lehet benne), igényelhető még Web Hosting szolgáltatás is, ami nem tudom, hogy miként műkszik, mert még nem próbáltam :) ha van saját tárhelyünk, akkor erre nincs szükség. Akkor csak haladjunk tovább, feljön a jó öreg "Security Check Required" form a csodás kis krikszkrakszokkal, amiket a 3. próbálkozásra talán sikeresen ki is tudsz olvasni :) majd már létre is jött az alkalmazásod profilja. Ha minden igaz, a létrehozást követően egy ilyen látvány fogad Téged:</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK311eeDICo9q3aINXGbpU6z__VwJx70ioS6uGahPs58NvyGQK3DwawxkEgWv6WasyzzN2vrVPGo6Nj0USdB7KzvON9-qRr8C3EOKWlu7t87tQmnDBR9AKiUmVoqiGFxxns7DEoW4CNQ5-/s1600/01_01.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK311eeDICo9q3aINXGbpU6z__VwJx70ioS6uGahPs58NvyGQK3DwawxkEgWv6WasyzzN2vrVPGo6Nj0USdB7KzvON9-qRr8C3EOKWlu7t87tQmnDBR9AKiUmVoqiGFxxns7DEoW4CNQ5-/s400/01_01.JPG" width="400" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: justify;">Felül, és az alapadatoknál is megjelenik az alkalmazásod neve, felül láthatod az egyedi azonosítóját és a titkos azonosítót, amit csak Te tudhatsz. Az "edit icon" linkkel új mini ikon-képet tölthetsz fel, valamint ha a nagyobb képre viszed az egeret ott is megjelenik a lehetőség, hogy módosítsd az app alapértelmezett képét.<br />
Alul látunk pár aranyos kis kategóriát ("website", "App on Facebook", stb), amikre kattintva újabb űrlapok nyílnak le. Ezek közül most amire szükségünk van, az az "App on Facebook" rész. Itt meg kell adnunk a Canvas URL-t, ami a tárhelyünkön lévő "weboldalra" mutat (PL: http://oldalam.hu/facebook_appom/). Azt mondanom sem kell, hogy azon a helyen egy index.php-ra fog keresni a facebook :) És már kötelező megadni a Secure Canvas URL-t, ami valószínűleg csak annyiban tér el a másiktól, hogy "https"-sel kezdődik (ha a tárhely nem élvez SSL támogatást, akkor azok a facebook lakók, akiknél be lett kapcsolva a biztonságos böngészés, nem látják az alkalmazásodat). A Canvas Page mutatja, hogy a facebook-on milyen URL-en keresztül lesz elérhető az alkalmazásod. Az oldal legalján található a gomb, amivel mentheted a változásokat.<br />
Akkor most hozzunk létre a már említett "index.php" fájlt, amibe egyelőre csak ezt a pár sort írjuk bele:<br />
<table align="center"><tbody>
<tr><td><span style="font-family: 'Courier New'; text-align: justify;"><html></span><br />
<span style="font-family: 'Courier New';"> <body></span><br />
<span style="font-family: 'Courier New';"> <h1>Ez már egy Facebook-alkalmazásként</span><br />
<span style="font-family: 'Courier New';"> megjelenő weboldal</h1></span><br />
<span style="font-family: 'Courier New';"> </body></span><br />
<span style="font-family: 'Courier New';"></html></span><br />
<span style="font-family: 'Courier New';"> </span></td></tr>
</tbody></table><br />
Mentsük el és töltsük fel a tárhelyünkre, a Canvas URL-ként megadott helyre. Ekkor ha megnyitod az alkalmazásod Canvas Page-ként megadott linkjét, máris láthatod az eredményt. Tehát bármilyen weboldalként elkészíthető tartalmat megjeleníthetsz egy facebook-alkalmazásként, ha értesz a weboldalkészítéshez, akkor formázhatod, díszítheted, ahogy csak szeretnéd.<br />
<br />
Na, akkor kész is! Így csinálsz alkalmazást. De ez nem elég... Te nem ezért vagy itt :) Te programozni is akarod az appod, dinamikus tartalmakat is akarsz generálni vele és használni akarod a facebook-SDK által nyújtott lehetőségeket :) Nemsoká az következik ;)</div><br />
<br />
<fb:comments href="http://facebookalkalmazaskeszitese.blogspot.com/2012/04/alkalmazas-letrehozasa-az-uj-feluleten.html" num_posts="2" width="530" data-colorscheme="dark"></fb:comments>Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-40123762305386149142012-04-13T13:52:00.000+02:002012-04-13T13:52:14.164+02:00Újra beindulunkÜdvözlök Mindenkit!<br />
Mint azt gondolom Ti is észrevettétek, az utóbbi időkben nagyon el sikerült tűnnöm. Ennek egyik oka az egyetemi élet által közölt stressz :) de nagyobb százalékban a Facebook rengeteg újítása.<br />
Elég rendesen megváltozott az alkalmazások fejlesztésének módja is, elvileg a régebbi bejegyzésekben található kódok már nem is működnek. De szerencsére, sikerül szép lassan felzárkóznom és már újabb infókkal tudok szolgálni.<br />
Hamarosan megmutatom, hogy kell az új felületen létrehozni egy alkalmazást, elérni az alap adatokat, beleintegrálni azt egy Facebook-oldalba, LIKE-kapuval ellátni, valamint nyilvánosság elé dobok egy olyan kulcsrakész alkalmazást, amit sehol máshol nem találtok meg: a jó öreg "tudd meg te is, hogy..." alkalmazást, ami képeket posztol a falakra és ezzel kőkeményen reklámozza a facebook-oldalad.<br />
Hamarosan érkezem ;)Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-55123512066856554162011-02-21T10:06:00.006+01:002011-02-21T10:09:18.551+01:00Alkalmazás létrehozása<p align=justify>A legelső alapkritérium, ami szerintem senkit sem fog meglepni: kell, hogy legyen egy Facebook profilunk. Ha van profilom, akkor már lehet saját alkalmazásom, aminek én leszek az adminisztrátora. Ezen kívül pedig még kell egy saját web-tárhely is, ahol a programom elhelyezem. Ha ezek adottak, mehetünk tovább.<br />
Legelőször látogassunk el ide: <a href=http://www.facebook.com/developers/ target='_blank'>http://www.facebook.com/developers/</a><br />
Itt található a „<b>Fejlesztő</b>” alkalmazás, ami első látogatásunkkor engedélyt fog kérni az adatainkhoz. Ahhoz, hogy a Fejlesztőt felvehessük a saját alkalmazásaink közé, engedélyeznünk kell a hozzáférést.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/001.jpg></center><p align=justify>Miután ez megtörtént, már láthatóvá válik egy olyan gomb, hogy „<b>Új alkalmazás készítése</b>”. Igen, jól sejtitek, ez lesz az :) Klikkeljünk csak rá bátran!<br />
Máris két nagy döntéssel kell szembesülnünk. Az első: mi legyen az alkalmazásunk neve. A második: elfogadjuk e a Facebook szabályzatát. De az utóbbi esetében biztos, ami biztos… fogadjuk el :) Én azt a nevet adom most neki, hogy „<b>myFirstApp</b>”. Majd ráklikkelek a „<b>Create App</b>” gombra a program létrehozásához.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/002.jpg></center><p align=justify>Ezután egy biztonsági ellenőrzés következik. Értelem szerűen be kell gépelni a két szót, amiket kissé elcseszetten, de azért látni vélünk, majd a „<b>Küldés</b>” gombra kattintunk. Ezt követően bejön egy aranyos kis profilocska, ahol egy csomó dolgot beállíthatunk a mi kis programunkkal kapcsolatban. Adhatunk róla egy rövidke leírást, adhatunk neki ikont, feltölthetünk egy képet logónak, stb… meg kell adnunk, hogy az alkalmazásban milyen nyelvet fogunk használni.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/003.jpg></center><p align=justify>A baloldalon ezután menjünk a „<b>Web Site</b>” fülre, ahol más mezők kerülnek a szemünk elé. Itt ami igazán fontos lesz, az a „<b>Site URL</b>” szövegmező lesz, ahova be kell írnunk azt a címet, ahol a saját tárhelyünkön a program elhelyezkedik. Az én példámban ez az URL: „http://oldalam.hu/myapp/”, ami természetesen a „myapp” mappában lévő „index.php” fájlt fogja jelenteni.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/004.jpg></center><p align=justify>Ezután a „<b>Facebook Integration</b>” fül következik, ahol ismét fontos információkat kell megadnunk, illetve feljegyeznünk. Az „<b>Application ID</b>” lesz az alkalmazásunk azonosítója, ezt majd alkalmaznunk is kell, úgy ahogy az „<b>Application Secret</b>” kódot is, ami viszont egyfajta jelszóként funkcionál, így azt ne adjuk mások tudtára! A „<b>Canvas Page</b>” résznél megadhatjuk, hogy milyen link-néven legyen majd elérhető az alkalmazás, a „<b>Canvas URL</b>”-nél pedig adjuk meg újra a program elérésének útvonalát. Alul pedig a „<b>Canvas Type</b>”-nál az legyen bejelölve, hogy „<b>IFrame</b>” típusú alkalmazást hozunk létre (mert ilyet fogunk létrehozni).<br />
<center><img src=http://elviweb.hu/facebookapps/blog/005.jpg></center><p align=justify>Minden lényeges dolgot beállítottunk, úgyhogy ezután alul menjünk a „<b>Változások mentése</b>” gombra. Láthatjuk a progink profilját, a lényegesebb adatokat… <br />
De máris megyünk tovább: szükségünk lesz egy, a Facebook-kos kódok futtatását lehetővé tevő csomagra, amihez le kell töltenünk egy tömörített állományt a következő címről: http://github.com/facebook/php-sdk/tarball/master<br />
Ennek a cuccnak a tartalmát, ami egy „facebook-php-sdk-2343fca” mappa, fel kell másolnunk a tárhelyünkre, hogy majd beágyazhassuk a PHP állományunkba a megfelelő fájlt.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/006.jpg></center><p align=justify>Tehát akkor most a web-tárhelyünkön a megadott mappában vagyunk: van egy „index.php” állományunk és itt van már az előbb említett mappa is.<br />
<center><img src=http://elviweb.hu/facebookapps/blog/007.jpg></center><p align=justify>Az „example code” linkre kattintva jön elő egy lap, amint fent a bekeretezett részben látunk. A „2. lépés…” rész alatti kódot az „index.php” fájlunkba kell másolnunk. Láthatjuk, hogy szerepel benne az „appId” és a „secret” azonosítók is, amik egyértelműsítik, hogy erről az alkalmazásról van szó. A „facebook.php” eléréséhez kicsit módosítani kell az útvonalat annak megfelelően, hogy mi a mappa pontos neven, amiben elhelyezkedik. <br />
Akkor jelenleg az „index.php” fájlunk valahogy így néz ki:<br />
<table width=80% align=center><tr><td><font face='Courier New'><br />
<?php<br />
require_once ' facebook-php-sdk-2343fca/src/facebook.php';<br />
<br />
$facebook = new Facebook(array(<br />
'appId' => 'xxxxxxxxxx',<br />
'secret' => 'yyyyyyyyyy',<br />
'cookie' => true,<br />
));<br />
</font></table><br><br />
Természetesen az „x”-ek és „y”-ok helyére mindenki a saját „app” és „secret” azonosítóit gondolja oda. A „require_once” résznél pedig a fenti hivatkozás csak akkor lesz működőképes, ha tényleg a megadott „facebook-php-sdk-2343fca/src/facebook.php” elérési útvonalon keresztül érhető el a fájl az alkalmazás könyvtárából!<br />
Most pedig még így a legelején megspékeljük valamivel a kis programot: hozzáteszünk egy kódot, amellyel hozzáférhetünk az aktuális felhasználó publikus adataihoz, persze mindezt kezdve azzal, hogy a legelső látogatáskor az alkalmazás hozzáférési engedélyt fog kérni. Ehhez még ennyi kód részlet kell:<br />
<table width=80% align=center><tr><td><font face='Courier New'><br />
$session = $facebook->getSession();<br />
$me = null;<br />
if ($session) {<br />
try {<br />
$uid = $facebook->getUser();<br />
$me = $facebook->api('/me');<br />
} catch (FacebookApiException $e) {<br />
error_log($e);<br />
}<br />
}<br />
<br />
if($me){<br />
$logoutUrl = $facebook->getLogoutUrl();<br />
}else{<br />
$loginUrl = $facebook->getLoginUrl( array(<br />
'canvas' => 1<br />
, 'fbconnect' => 0<br />
, 'req_perms' => 'read_stream,publish_stream,offline_access'<br />
, 'display' => 'page'<br />
));<br />
echo "<script>top.location.href = '".$loginUrl."';</script>";<br />
exit;<br />
}<br />
?><br />
</font></table><br><br />
A végén a PHP lezárás ki ne maradjon :) Nos, ebben a kódban a „$me” az „én” leszek, azaz az épp aktuális felhasználó. A lényeg, hogy ezekkel a cuccokkal elértük, hogy ha az alkalmazás még nincs hozzánk felvéve, akkor engedélyt kér. Sasoljuk csak meg az oldalt, ahol elvileg már működőképesen találhatjuk meg a kis proginkat (a példában ez volt a „http://apps.facebook.com/myfirstapp”, ezt mindenki maga tudja, hogy mit adott meg).<br />
<center><img src=http://elviweb.hu/facebookapps/blog/008.jpg></center><p align=justify>Ekkor már csak rá kell menni, hogy engedélyezzük, és máris használhatjuk az alkalmazást. Persze egyelőre nem fogunk utána semmi extrát tapasztalni, csak a nagy fehérséget, mivel még nincs megírva maga a program, se design nincs készítve :)<br />
Azért mielőtt ezt az első „fejezetet” itt lezárom, egy apróságot még hozzáteszünk, hogy legyen legalább egy kis sikerélményünk: köszönjön nekünk a program. Írjuk hozzá a kódunkhoz az alábbi sort (természetesen a „?>” jelek elé):<br />
<table width=80% align=center><tr><td><font face='Courier New'><br />
print("Szia, ".iconv('utf-8','ISO-8859-2',$me['first_name'])."!");<br />
</font></table><br><br />
Ha most frissítünk, annyi változást észlelünk, hogy kiírja: „Szia, XY!”, méghozzá a keresztnevünkön szólít minket (amennyiben be vagyunk jelentkezve). A következő bejegyzésben kifejtem, hogy itt mi mit jelent, majd tovább haladunk egy komolyabb program kifejlesztésében.Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-42104273820405908032011-02-20T00:21:00.002+01:002011-02-20T00:21:51.535+01:00Milyen tudásra lesz szükség?<p align="justify">Mielőtt nekiugrunk az alkotásnak, kénytelen leszek elszomorítani, illetve feldobni pár lelkes olvasót, mert még közölnöm kell, hogy mikre lesz szükség a készítéshez. Egy kevéske HTML, CSS, és PHP ismeret a fontos mindössze, aki ezekben nem jártas, holnapig még lesz ideje gyorsan beleásni magát a témába :)<br />
Az alkalmazás, amit készíteni fogunk, HTML alapú lesz, gyakorlatilag egy amolyan beágyazott weboldal féleség, pár stílusbeállításhoz fog kelleni egy csekély CSS, a PHP pedig azért kell, hogy legyen valami program is, tehát az alkalmazásunk csináljon is valamit. <br />
Holnap tehát létrehozzuk első Facebook alkalmazásunk :)Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.comtag:blogger.com,1999:blog-2865598323366820409.post-4752255690998826482011-02-19T17:21:00.000+01:002011-02-19T17:22:24.110+01:00Rövid bevezető<p align=justify>Nincs már ember, aki ne találkozott volna a Facebook-kal és a benne lévő kimeríthetetlen lehetőségekkel. Egy rakat ember a gép előtt töltött idejének legnagyobb részében ezt az oldalt lesi, azon belül is főleg az üzenőfalat, melyen értesülhetünk ismerőseink aktuális tevékenységeiről, valamint újabb és újabb kis alkalmazásokba sikerül ütköznünk. Temérdek olyan van belőlük, ami totál haszontalan, de vannak vicces tartalmúak, melyeket szívesen kipróbálnak az emberek, és persze sokan ezt alkalmazzák marketing céllal.<br />
Általában mit tud egy ilyen kis program? Kinéz valahogy... csinál valamit... talán a profilunkból ki kap egy-két publikus infót, amiket felhasznál, és valami érdekes, esetleg szórakoztató végeredményt dob ki, melyet végül akár közzé is tehetünk, megjelenik az üzenőfalunkon, meglátják ismerőseink, akik ha kapnak a témán, ugyanígy felveszek az alkalmazást, majd ők is kipróbálják. Tehát ha kreatívak vagyunk és van egy jó ötletünk, az alkalmazásunk hamar elterjedhet a Facebook lakóinak körében.<br />
A kérdés már csak az: Hogy készül el egy ilyen kis program? Én kb csak egy napja tudom, hogy hogyan kell, sok mindent összeollóztam, hogy tudjam. Sokat szívtam vele, de így már elég könnyűnek tűnik, gondoltam másoknak legyen könnyebb, és megosztom a tapasztalatom. Sok dolog van, aminek nem tudom a miért-jét, annyira nem ástam bele magam, a lényeg, hogy kipróbáltam és működik :) akinek több infó kell, az majd utána jár...<br />
Akkor kezdjünk el FB-s alkalmazást készíteni. A következő bejegyzés már erről fog szólni...Hunterhttp://www.blogger.com/profile/14654734841897374477noreply@blogger.com