Tema je stvorena za VK API lutke ali za programere koji razumiju što su php, javascript, jquery, css.
Ako znate sve gore navedeno, odvojite nekoliko minuta da pročitate ovu temu i slijedite upute. Neće vam trebati dugo! Moći ćete proširiti svoje mogućnosti i doseg novo tržište. Vrhunac aplikacija je što VK daje promet i vašu će aplikaciju odmah nakon odobrenja (1-2 dana) vidjeti tisuću ljudi. NA ovu lekciju Reći ću vam kako napraviti aplikaciju i prikazati avatare prijatelja u stupcu.
Meni osobno je bilo jako teško shvatiti što i gdje, zato se i pojavila ideja o ovoj temi.
1. Idite na stranicu programera: vk.com/developers.php
2. Aplikaciju kreiramo klikom na plavi gumb.
3. Unesite naziv, odaberite vrstu - iframe/Flash i bilo koju kategoriju
4. Primamo SMS od VK, potvrdite da nismo bot. Mi smo habrameni!
5. Ura - ura - ura! Napravili ste svoju prvu aplikaciju (ili možda ne prvu)! Zatim idite na "Postavke".
6.
Odaberite: Stanje - aplikacija je omogućena i vidljiva svima, Vrsta aplikacije: iframe. Potrebna je instalacija aplikacije. Zatražite pristup - pristup prijateljima. Unesite adresu za skriptu (u mom slučaju, skripta će biti lokalno hostirana).
Pažnja! Maksimalna širina aplikacija - 827 pix.
7.
Sada otvaramo naše index.php i ispunite ga:
8. Čini se da u gornjem kodu nema ništa komplicirano. Nastavimo. sada ćemo povezati Vkontakte API skripte.
9. Sada ćemo koristiti skriptu za promjenu visine iframea na temelju sadržaja. Recimo da imamo visinu aplikacije u postavkama – 500 piksela. A ako imamo 200 prijatelja i bit će 200 avatara u koloni? Što uraditi? Kreirajmo skriptu za ovo - vk_height.js
VK.init(function()( )); function autosize(width) ( //Provjera prisutnosti elementa tijela. if (!document.getElementById("body")) ( alert("error"); return; ) // Je li VK skripta uspješno povezana if (typeof VK.callMethod != "undefined") ( /* Pozovite vk js api funkciju za kontrolu prozora. VK.callMethod("function", parametri) ovaj slučaj imamo - VK.callMethod("window_size_change", width, height); Također dodajemo još 60 piksela tako da postoji mala udaljenost. */ VK.callMethod("resizeWindow", 840, document.getElementById("body").clientHeight + 60); ) else ( alert("error #2"); ) ) $(document).ready(function()( //Pozovi funkciju podešavanja visine svake pola sekunde. setInterval("autosize(607)", 500); )) ;
10.
Sada spojimo naše vk_height.js do index.php
11.
Napišimo Zdravo, svijete! u index.php
12. Vrijeme je za rad sa samim VK JS API-jem.
Api VK me dosta podsjeća na jquery. Ljudi koji znaju $.post, $.get, $.ajax odmah će shvatiti što je što. Pažnja! Prema zadanim postavkama, podaci iz VK-a dolaze u json-u.
Odmah promatramo kako se veličina prozora smanjila ...
Nažalost, negdje sam mogao zaboraviti na neke suptilnosti. Na primjer, slučajno sam se sjetio da podaci dolaze u json prije objave. O ovome reci ako išta.
Oznake: php, javascript, jquery, vkontakte api
Danas ćemo razgovarati o stvaranju vaše prve aplikacije za web stranicu Vkontakte. Eto, po povijesnoj tradiciji bit će to program "Zdravo, svijet!".
Riječ je o aplikaciji IFrame. Za one koji ne znaju, ova tehnologija omogućuje izradu aplikacije koristeći resurse svoje stranice. Drugim riječima, aplikacija je okvir s vašom internet adresom.
Neka se naša stranica nalazi na: http://mysite.ru. Kako ne bismo zatrpali direktorij glavne stranice, napravimo mapu u korijenu stranice i nazovimo je "vk".
Kreirajmo datoteku "index.php" u našoj novoj mapi sa sadržajem praznog HTML dokumenta.
Dodajmo polje u kojem će biti prikazano ime i prezime osobe koja je otvorila aplikaciju.
Prijeđimo odmah na srž stvari. Prva stvar koju trebate učiniti je povezati metode za rad s Contact API-jem. Da biste to učinili, dodajte sljedeći redak u oznaku HEAD:
Nekoliko komentara na gornji kod. Parametri za aplikaciju se prenose GET zahtjevom, svi parametri se mogu vidjeti na web stranici VKontakte ili pozivom funkcije upozorenje(lokacija.href);
VK.init— Obavezna funkcija koja inicijalizira globalni VK objekt potreban za rad aplikacije.
VK.api- Funkcija pozivanja VK API procedure, prvi parametar je funkcija za pozivanje, drugi parametar su parametri pozvane funkcije, treći parametar je callBack funkcija, t.j. funkcija koja će biti pozvana nakon izvršenja navedene metode. U našem slučaju, funkcija "getProfiles" vraća informacije o korisniku, ima jedan potrebni parametar - korisnički ID na web stranici VKontakte.
Važno: Na stranicu aplikacije prosljeđuju se dva parametra odgovorna za identifikaciju korisnika - to su viewer_id i user_id. viewer_id - id korisnika koji pregledava aplikaciju, user_id - id korisnika koji je ovog korisnika pozvao u aplikaciju. Na primjer, kada slijedite vezu http://vkontakte.ru/app2270785, varijabla user_id bit će jednaka nuli, a kada slijedite vezu http://vkontakte.ru/app2270785_3596080, ova će varijabla biti jednaka 3596080.
podaci- u našem slučaju, vraćeni objekt API funkcije. Može imati polje za pogrešku ili odgovor, u prvom slučaju označava da zahtjev nije uspio, u drugom slučaju imamo niz rezultata funkcije. U našem slučaju smo zatražili podatke jednog korisnika, što znači da smo dobili jednoelementno polje.
Da biste se upoznali s metodama i povratnim vrijednostima, možete slijediti ovu vezu: http://vkontakte.ru/developers.php#devstep2
6. ožujka 2011. u 14:13 satiRazvoj IFrame aplikacije u Vkontakteu, koristeći Vkontakte API
- Izrada web stranica
Instalirajte Joomla - tamo je sve prilično transparentno i razumljivo.
Faza 3: JS API i "API u kontaktu"
Ono što imamo na usluzi: svježu aplikaciju u VKontakteu i novostvorenu stranicu na nekom standardnom Joomla predlošku.
Ovdje odmah želim obratiti pažnju na API u Vkontakteu!
Postoje 2 vrste API-ja:
- Javascript API
- API u Kontaktu
Koristeći prvi, možete pozvati različite dijaloške okvire (pozivanje prijatelja u aplikaciju, upisivanje glasova, postavljanje pristupa korisničkim podacima itd. detaljan opis ovih metoda može se pronaći.
Mogućnosti drugog su puno veće! Pristup skripti www.vkontakte.ru/api.php može se obaviti na bilo koji prikladan način, bilo da se radi o AJAX zahtjevu ili HTTP zahtjevu izravno s poslužitelja. Opis svih api metoda je .
Sada više o inicijalizaciji API-ja i radu s njima. Počnimo redom:
JS API se inicijalizira dodavanjem sljedećeg javascripta našem predlošku:
Src=http://vkontakte.ru/js/api/xd_connection.js?2
VK.init(function() (
// Vaš kod ovdje
});
Želio bih odmah primijetiti da je "inicijalizacija API-ja uspjela" ovaj redak je ovdje napisan s razlogom i kaže da će se funkcija VK.init izvršiti kada API bude spreman za rad! Ali ne i vaš web resurs. Kako biste provjerili spremnost za izvođenje vašeg js koda, možete koristiti svoju omiljenu js biblioteku ili framework. Osobno više volim Mootools – koristio sam ga.
Moj inicijalizacijski kod izgleda ovako:
VK.init(function() (
// Inicijalizacija API-ja je uspjela
window.addEvent("domready", function()(
//DOM spreman
})
});
Što sada možemo učiniti? A sada možemo koristiti API, odnosno, na primjer, provjeriti je li korisnik odabrao potrebne parametre da bi aplikacija pristupila njegovim podacima. Na primjer ovako:
VK.api("getUserSettings", funkcija(podaci)(
if (podaci.odgovor)(
ako (!(256 & data.response))
VK.callMethod("showSettingsBox", 263);
}
if(podaci.pogreška)(
alert("Kôd pogreške:"+data.error.error);
}
});
Da bismo to učinili, prvo pozivamo funkciju getUserSettings, koja će vratiti bitmasku trenutnih korisničkih postavki. Poziv se vrši pomoću metode VK.api, gdje je prvi parametar naziv funkcije, a drugi je CallBack funkcija. Podatkovna varijabla rezultat je funkcije getUserSettings, koju treba provjeriti ima li greške, ako se vrati data.error, to znači pogrešku! Greška može biti zbog dva (po mom mišljenju) razloga: aplikacija nije odobrena od strane administracije stranice (prije odobrenja mi je radio samo getProfiles, usput rečeno, kasnije sam vidio postove na forumima da sve radi u test modu ). Ako je funkcija vratila data.response, nastavljamo s radom, provjeravamo bitne maske trenutnih prava i potrebnih i pozivamo showSettingsBox JS API funkciju s jedinim parametrom (maska potrebnih prava, imam 263 - ovo je pristup fotografijama, prijateljima i poveznici na aplikaciju u lijevom korisničkom izborniku)
Po mom mišljenju, pozivanje metoda "API u kontaktu" pomoću JS API-ja nekako nije dobro. Ovo je zgodno za jednostavne zadatke. Potpuno Iframe aplikacija izgrađena na JS-u vrlo je radno intenzivna. Stoga se okrećemo proučavanju HTTP zahtjeva prema API-ju.
Faza 4: PHP i "API u kontaktu"
Da bismo to učinili, imamo Joomlu i klasu koju preuzimamo s veze
Za rad s API-jem putem PHP-a, morat ćete kreirati dvije konstante, koje će biti uključene u svaki zahtjev - api_id vaše aplikacije (može se vidjeti izravno u adresnoj traci kada kliknete na link na aplikaciju) i tajni ključ - izdaje se kada se aplikacija kreira (dugačak je i može se promijeniti u postavkama aplikacije)
Pozivanje API-ja pomoću PHP-a izgleda ovako:
Foreach ($this->items kao $item)(
$uids = $stavka->stavka;
}
$api = novi vkapi();
$ans = $api->api("getProfiles", array("uids" => implode(",",$uids), "fields" => "photo, photo_big"));
Prvi foreach uzima sve registrirane korisnike iz moje aplikacije (ali ne više od 1000), a zatim se šalje zahtjev "API u kontaktu" za učitavanje podataka o tim korisnicima. Na izlazu imamo niz vrijednosti oblika: $ans["response"][$i]["field"], gdje je odgovor niz podataka o korisnicima, zatim element $i i na kraju potrebno polje korisničkog svojstva, na primjer ime (ime) ili fotografija.
Prednosti ovog pristupa:
1. Sigurne API metode postaju dostupne, što nije nevažno ako trebate saznati stanje ili upisati/povući glasove.
2. Nema potrebe pisati "tisuće" redaka koda u JS za rad s API-jem
3. Istodobno dobivamo web stranicu i aplikaciju laku za administraciju.
Što sam točno radio u Joomli pričati jako dugo i nije potrebno, dat ću samo približnu logiku svoje aplikacije.
Nije tajna da se sve komponente Joomle temelje na MVC uzorku. Tko sve stavlja na police!
Kontroler komponente prihvaća sve korisničke naredbe/zahtjeve (čak i za radnje korisnika prilikom klikanja na linkove, čak i uz pomoć AJAX zahtjeva koji koriste JS)
Model je odgovoran za sve operacije s bazom podataka naše komponente, za mene npr.: prikazuje samo glasovanje, popise onih koji su glasali za određenog sudionika glasanja, odgovara na provjeru i ponovno glasovanje te još nekoliko pomoćnih funkcija .
View kontrolira izlaz različitih Layouta i prijenos podataka iz modela na njih.
Za one koji su razvijali komponente za Joomlu, sve je vrlo jasno.
Nitko nas ne brani da koristimo klasu vkapi.class.php bilo gdje u aplikaciji, osobno sam je koristio samo u prikazu za pripremu podataka za izlaz (npr. uid-om korisnika u kontaktu na koji je moja aplikacija instalirana, ja učitao adrese fotografija)
5. faza: Widgeti
Svi su već navikli na ogroman broj različitih oblika i gumba s društvenih mreža. To sam također želio u svojoj Iframe aplikaciji. Kako povezati widget za komentare:
Nikada na stranicu nemojte dodavati sljedeći kod:
Ovo je prikladno za web stranice, ali nije prikladno za iframe aplikacije!
Dovoljno je učiniti ovo:
VK.Widgets.Comments("vk_comments", (ograničenje: 10, širina: "578", priložiti: "*"));
JS API već ima implementirane funkcije za dodavanje widgeta.
Što se samih komentara tiče, znate da kada korisnik ostavi komentar na stranici s aplikacijom, on se također objavljuje na njegovom zidu, ali s linkom na vašu stranicu, a ne na aplikaciju! Da biste to izbjegli, morate koristiti parametar pageURL, koji će sadržavati adresu aplikacije u formatu www.vkontakte.ru/app (app_id)
Kao rezultat, dobio sam ovo:
VK.Widgets.Comments("vk_comments", (ograničenje: 10, širina: "578", priložiti: "*", URL stranice: "http://vkontakte.ru/app2176209"));
Faza 6: Zaključak
Kao rezultat toga, imamo jednostavnu, ali radnu aplikaciju u VKontakteu. Koji se lako može proširiti i razviti dodavanjem sve više i više novih značajki i komponenti pomoću vašeg omiljenog CMS-a u kombinaciji s API-jem u Contact i JS API-jem.
Evo što sam dobio.
Dobar dan. U ovom postu želio bih analizirati uslugu pregleda zajedničkih prijatelja i zajedničkih članova grupe na vk.com. Također vam želim reći na što sam se susreo prilikom prosljeđivanja moderiranja u katalog aplikacija.
I tako da svoju aplikaciju dodate na vk.com, morate prvo stvoriti.
I. Postavljanje projekta i malo o prvom zahtjevu za API
Nakon što smo stvorio iframe aplikaciju, moramo ga postaviti. Idemo na postavke aplikacije.
Šaljem prvi zahtjev da mi se odmah nakon pokretanja aplikacije VK.COM vrati koristeći DOBITI parametar api_result, detaljni podaci o korisniku koji se prijavio u aplikaciju.
Prvi zahtjev za API:
method=users.get&user_ids=(viewer_id)&fields=photo_50&format=json&v=5.28
II. Naglasci implementacije na JS
Poteškoće u implementaciji mogu nastati u trenutku primanja članova grupe, VK API vraća najviše 1000 članova u jednom zahtjevu. Ako zatražite 1 takav zahtjev, tada će proces dobivanja popisa sudionika biti vrlo dug. Taj sam problem riješio primjenom koda opisanog u mom prethodnom članku, s kojim možete dobiti 25.000 sudionika odjednom.
Također bih želio objasniti zašto nisam koristio gotovu metodu za korisnike VK-a prijatelji.getMutual, koji vraća popis identifikatora zajedničkih prijatelja između para korisnika... Činjenica je da servis ne radi samo s korisnicima, već i s grupama, pa bi bilo suvišno raditi hrpu obrade npr. ako postoji jedan korisnik i jedna grupa. Da, možete ga obraditi, a to će čak i ubrzati rad u nekim slučajevima.
Sve metode u statistici zahtjeva API-ja rade bez grešaka, osim metode utils.resolveScreenName, to je zbog toga što korisnici unose nevažeće veze u polje za unos.
III. Prolazimo moderaciju u katalogu aplikacija
Nakon što je gotovu prijavu poslao na provjeru, moderator ju je 2 dana kasnije odbio jer aplikacija nije radila prema HTTPS protokol. Riješio sam ovaj problem uploadom aplikacije sa svog poslužitelja na poslužitelj github, radi po protokolu HTTPS.
Instalirajte Joomla - tamo je sve prilično transparentno i razumljivo.
Faza 3: JS API i "API u kontaktu"
Ono što imamo na usluzi: svježu aplikaciju u VKontakteu i novostvorenu stranicu na nekom standardnom Joomla predlošku.
Ovdje odmah želim obratiti pažnju na API u Vkontakteu!
Postoje 2 vrste API-ja:
- Javascript API
- API u Kontaktu
Koristeći prvi, možete pozvati različite dijaloške okvire (pozivanje prijatelja u aplikaciju, upisivanje glasova, postavljanje pristupa korisničkim podacima itd. detaljan opis ovih metoda može se pronaći.
Mogućnosti drugog su puno veće! Pristup skripti www.vkontakte.ru/api.php može se obaviti na bilo koji prikladan način, bilo da se radi o AJAX zahtjevu ili HTTP zahtjevu izravno s poslužitelja. Opis svih api metoda je .
Sada više o inicijalizaciji API-ja i radu s njima. Počnimo redom:
JS API se inicijalizira dodavanjem sljedećeg javascripta našem predlošku:
Src=http://vkontakte.ru/js/api/xd_connection.js?2
VK.init(function() (
// Vaš kod ovdje
});
Želio bih odmah primijetiti da je "inicijalizacija API-ja uspjela" ovaj redak je ovdje napisan s razlogom i kaže da će se funkcija VK.init izvršiti kada API bude spreman za rad! Ali ne i vaš web resurs. Kako biste provjerili spremnost za izvođenje vašeg js koda, možete koristiti svoju omiljenu js biblioteku ili framework. Osobno više volim Mootools – koristio sam ga.
Moj inicijalizacijski kod izgleda ovako:
VK.init(function() (
// Inicijalizacija API-ja je uspjela
window.addEvent("domready", function()(
//DOM spreman
})
});
Što sada možemo učiniti? A sada možemo koristiti API, odnosno, na primjer, provjeriti je li korisnik odabrao potrebne parametre da bi aplikacija pristupila njegovim podacima. Na primjer ovako:
VK.api("getUserSettings", funkcija(podaci)(
if (podaci.odgovor)(
ako (!(256 & data.response))
VK.callMethod("showSettingsBox", 263);
}
if(podaci.pogreška)(
alert("Kôd pogreške:"+data.error.error);
}
});
Da bismo to učinili, prvo pozivamo funkciju getUserSettings, koja će vratiti bitmasku trenutnih korisničkih postavki. Poziv se vrši pomoću metode VK.api, gdje je prvi parametar naziv funkcije, a drugi je CallBack funkcija. Podatkovna varijabla rezultat je funkcije getUserSettings, koju treba provjeriti ima li greške, ako se vrati data.error, to znači pogrešku! Greška može biti zbog dva (po mom mišljenju) razloga: aplikacija nije odobrena od strane administracije stranice (prije odobrenja mi je radio samo getProfiles, usput rečeno, kasnije sam vidio postove na forumima da sve radi u test modu ). Ako je funkcija vratila data.response, nastavljamo s radom, provjeravamo bitne maske trenutnih prava i potrebnih i pozivamo showSettingsBox JS API funkciju s jedinim parametrom (maska potrebnih prava, imam 263 - ovo je pristup fotografijama, prijateljima i poveznici na aplikaciju u lijevom korisničkom izborniku)
Po mom mišljenju, pozivanje metoda "API u kontaktu" pomoću JS API-ja nekako nije dobro. Ovo je zgodno za jednostavne zadatke. Potpuno Iframe aplikacija izgrađena na JS-u vrlo je radno intenzivna. Stoga se okrećemo proučavanju HTTP zahtjeva prema API-ju.
Faza 4: PHP i "API u kontaktu"
Da bismo to učinili, imamo Joomlu i klasu koju preuzimamo s veze
Za rad s API-jem putem PHP-a, morat ćete kreirati dvije konstante, koje će biti uključene u svaki zahtjev - api_id vaše aplikacije (može se vidjeti izravno u adresnoj traci kada kliknete na link na aplikaciju) i tajni ključ - izdaje se kada se aplikacija kreira (dugačak je i može se promijeniti u postavkama aplikacije)
Pozivanje API-ja pomoću PHP-a izgleda ovako:
Foreach ($this->items kao $item)(
$uids = $stavka->stavka;
}
$api = novi vkapi();
$ans = $api->api("getProfiles", array("uids" => implode(",",$uids), "fields" => "photo, photo_big"));
Prvi foreach uzima sve registrirane korisnike iz moje aplikacije (ali ne više od 1000), a zatim se šalje zahtjev "API u kontaktu" za učitavanje podataka o tim korisnicima. Na izlazu imamo niz vrijednosti oblika: $ans["response"][$i]["field"], gdje je odgovor niz podataka o korisnicima, zatim element $i i na kraju potrebno polje korisničkog svojstva, na primjer ime (ime) ili fotografija.
Prednosti ovog pristupa:
1. Sigurne API metode postaju dostupne, što nije nevažno ako trebate saznati stanje ili upisati/povući glasove.
2. Nema potrebe pisati "tisuće" redaka koda u JS za rad s API-jem
3. Istodobno dobivamo web stranicu i aplikaciju laku za administraciju.
Što sam točno radio u Joomli pričati jako dugo i nije potrebno, dat ću samo približnu logiku svoje aplikacije.
Nije tajna da se sve komponente Joomle temelje na MVC uzorku. Tko sve stavlja na police!
Kontroler komponente prihvaća sve korisničke naredbe/zahtjeve (čak i za radnje korisnika prilikom klikanja na linkove, čak i uz pomoć AJAX zahtjeva koji koriste JS)
Model je odgovoran za sve operacije s bazom podataka naše komponente, za mene npr.: prikazuje samo glasovanje, popise onih koji su glasali za određenog sudionika glasanja, odgovara na provjeru i ponovno glasovanje te još nekoliko pomoćnih funkcija .
View kontrolira izlaz različitih Layouta i prijenos podataka iz modela na njih.
Za one koji su razvijali komponente za Joomlu, sve je vrlo jasno.
Nitko nas ne brani da koristimo klasu vkapi.class.php bilo gdje u aplikaciji, osobno sam je koristio samo u prikazu za pripremu podataka za izlaz (npr. uid-om korisnika u kontaktu na koji je moja aplikacija instalirana, ja učitao adrese fotografija)
5. faza: Widgeti
Svi su već navikli na ogroman broj različitih oblika i gumba s društvenih mreža. To sam također želio u svojoj Iframe aplikaciji. Kako povezati widget za komentare:
Nikada na stranicu nemojte dodavati sljedeći kod:
Ovo je prikladno za web stranice, ali nije prikladno za iframe aplikacije!
Dovoljno je učiniti ovo:
VK.Widgets.Comments("vk_comments", (ograničenje: 10, širina: "578", priložiti: "*"));
JS API već ima implementirane funkcije za dodavanje widgeta.
Što se samih komentara tiče, znate da kada korisnik ostavi komentar na stranici s aplikacijom, on se također objavljuje na njegovom zidu, ali s linkom na vašu stranicu, a ne na aplikaciju! Da biste to izbjegli, morate koristiti parametar pageURL, koji će sadržavati adresu aplikacije u formatu www.vkontakte.ru/app (app_id)
Kao rezultat, dobio sam ovo:
VK.Widgets.Comments("vk_comments", (ograničenje: 10, širina: "578", priložiti: "*", URL stranice: "http://vkontakte.ru/app2176209"));
Faza 6: Zaključak
Kao rezultat toga, imamo jednostavnu, ali radnu aplikaciju u VKontakteu. Koji se lako može proširiti i razviti dodavanjem sve više i više novih značajki i komponenti pomoću vašeg omiljenog CMS-a u kombinaciji s API-jem u Contact i JS API-jem.
Evo što sam dobio.
