L'argomento è creato per le API VK fittizie ma per i programmatori che capiscono cosa sono php, javascript, jquery, css.

Se conosci tutto quanto sopra, dedica qualche minuto alla lettura di questo argomento e segui le istruzioni. Non ti ci vorrà molto! Sarai in grado di espandere le tue capacità e raggiungere nuovo mercato... Il clou delle applicazioni è che VK dà traffico e la tua applicazione sarà vista da mille persone subito dopo l'approvazione (1-2 giorni). V questa lezione Ti dirò come creare un'applicazione e visualizzare gli avatar degli amici in una colonna.

Per me personalmente, è stato molto difficile capire cosa e dove, ecco perché è nata l'idea di questo argomento.

1. Andiamo alla pagina degli sviluppatori: vk.com/developers.php

2. Creiamo un'applicazione facendo clic sul pulsante blu.

3. Inserisci il nome, seleziona il tipo - iframe / Flash e qualsiasi categoria

4. Riceviamo SMS da VK, confermiamo che non siamo un bot. Siamo habramen!

5. Evviva - evviva - evviva! Hai creato la tua prima app (o forse non la prima)! Quindi, vai su "Impostazioni".

6. Selezioniamo: Stato - l'applicazione è abilitata e visibile a tutti, Tipo di applicazione: iframe. Installazione dell'applicazione - richiesta. Richiedi l'accesso a - accesso agli amici. Inserisci l'indirizzo per lo script (nel mio caso, lo script verrà posizionato sulla LAN).
Attenzione! Larghezza massima applicazioni - 827 px

7. Ora apriamo il nostro index.php e compilalo:

8. Sembra che non ci sia nulla di complicato nel codice sopra. Continuiamo. ora collegheremo gli script all'API Vkontakte.

9. Ora utilizzeremo uno script per modificare l'altezza dell'Iframe in base al contenuto. Diciamo che l'altezza dell'applicazione nelle impostazioni è di 500 pixel. E se avessimo 200 amici e 200 avatar per colonna? Cosa fare? Pertanto, creiamo uno script - vk_height.js

VK.init (funzione () ()); funzione autosize (larghezza) (// Controlla la presenza dell'elemento body. if (! document.getElementById ("body")) (alert ("error"); return;) // Lo script VK è connesso correttamente if (typeof VK .callMethod ! = "undefined") (/ * Chiama la funzione vk js api per controllare la finestra. VK.callMethod ("funzione", parametri) in questo caso abbiamo - VK.callMethod ("change_window_size", larghezza, altezza); Aggiungiamo anche altri 60 pixel in modo che ci sia una piccola distanza. * / VK.callMethod ("resizeWindow", 840, document.getElementById ("corpo"). ClientHeight + 60); ) else (alert ("error # 2");)) $ (document) .ready (function () (// Richiama la funzione di regolazione dell'altezza ogni mezzo secondo. setInterval ("autosize (607)", 500);) );

10. Ora colleghiamo il nostro vk_height.js Per index.php

11. Scriviamo Ciao, mondo! v index.php
Ciao mondo!

12. È ora di lavorare con l'API VK JS stessa.

L'API VK mi ricorda molto jquery. Le persone che conoscono $ .post, $ .get, $ .ajax capiranno immediatamente di cosa si tratta. Attenzione! Per impostazione predefinita, i dati di VK arrivano in json.

Osserviamo subito come è diminuita la dimensione della finestra...

Sfortunatamente, da qualche parte potrei dimenticare alcune sottigliezze. Ad esempio, ho accidentalmente ricordato il fatto che i dati arrivano su json prima della pubblicazione. Su questo dire se quello.

Tag: php, javascript, jquery, vkontakte api

Oggi parleremo della creazione della tua prima applicazione per il sito Web Vkontakte. Ebbene, come tradizione storicamente consolidata, sarà il programma "Hello World!".
Si tratta di un'applicazione IFrame. Per chi non lo sapesse, questa tecnologia consente di creare un'applicazione utilizzando le risorse del proprio sito. In altre parole, un'applicazione è un frame con il tuo indirizzo Internet.

Lascia che il nostro sito si trovi su: http://mysite.ru. Per non sporcare la directory del sito principale, crea una cartella nella radice del sito e chiamala "vk".

Creiamo un file "index.php" nella nostra nuova cartella con il contenuto di un documento HTML vuoto.

Aggiungi un campo in cui verranno visualizzati il ​​nome e il cognome della persona che ha aperto l'applicazione.

Ciao mondo, ?!

Ora, entriamo nel vivo della questione. La prima cosa da fare è connettere i metodi per lavorare con l'API del contatto. Per fare ciò, aggiungi la seguente riga al tag HEAD:

Ciao mondo, ?!

Alcuni commenti sul codice sopra. I parametri per l'applicazione vengono trasmessi da una richiesta GET, tutti i parametri possono essere visualizzati sul sito Web VKontakte o chiamando la funzione avviso (location.href);

VK.init- Funzione obbligatoria che inizializza l'oggetto VK globale, necessario per il funzionamento dell'applicazione.

VK.api- La funzione di chiamare la procedura API VK, il primo parametro è la funzione da chiamare, il secondo parametro sono i parametri della funzione chiamata, il terzo parametro è la funzione callBack, ad es. una funzione che verrà chiamata dopo l'esecuzione del metodo specificato. Nel nostro caso, la funzione "getProfiles" restituisce informazioni sull'utente, ha un parametro richiesto: l'id dell'utente sul sito Web VKontakte.

Importante: Alla pagina dell'applicazione vengono passati due parametri responsabili dell'identificazione dell'utente: viewer_id e user_id. viewer_id - id dell'utente che visualizza l'applicazione, user_id - id dell'utente che ha invitato questo utente all'applicazione. Ad esempio, quando si fa clic sul collegamento http://vkontakte.ru/app2270785, la variabile user_id sarà uguale a zero e quando si fa clic sul collegamento http://vkontakte.ru/app2270785_3596080 questa variabile sarà uguale a 3596080.

dati- nel nostro caso, l'oggetto restituito dalla funzione API. Può avere un campo di errore o di risposta, nel primo caso significa che la richiesta è fallita, nel secondo caso abbiamo un array dei risultati della funzione. Nel nostro caso, abbiamo richiesto informazioni a un utente, il che significa che abbiamo ottenuto un array a elemento singolo.

Per familiarizzare con i metodi e i valori restituiti, puoi seguire questo link: http://vkontakte.ru/developers.php#devstep2

Sviluppo di un'applicazione IFrame in VKontakte, utilizzando l'API Vkontakte

• Sviluppo del sito web

Installa Joomla: lì tutto è abbastanza trasparente e comprensibile.

Fase 3: API JS e "API in contatto"

Quello che abbiamo nel nostro arsenale: una nuova applicazione in VKontakte e un sito appena creato su alcuni template Joomla standard.

Qui vorrei attirare la vostra attenzione sull'API in VKontakte!

Esistono 2 tipi di API:

1. API Javascript
2. API in Contatti

Usando il primo, puoi chiamare varie finestre di dialogo (invitare amici all'applicazione, registrare voti, impostare l'accesso ai dati utente, ecc. È possibile trovare una descrizione dettagliata di questi metodi.

Le possibilità del secondo sono molto maggiori! È possibile accedere allo script www.vkontakte.ru/api.php in qualsiasi modo conveniente, che si tratti di una richiesta AJAX o di una richiesta HTTP direttamente dal server. C'è una descrizione di tutti i metodi API.

Ora ulteriori informazioni sull'inizializzazione delle API e sul lavoro con esse. Iniziamo in ordine:

L'API JS viene inizializzata aggiungendo il seguente javascript al nostro modello:

Src = http: //vkontakte.ru/js/api/xd_connection.js?2

VK.init (funzione () (

// Il tuo codice qui
});

Vorrei notare subito che "inizializzazione API riuscita" questa riga è stata scritta qui per un motivo e dice che la funzione VK.init verrà eseguita quando l'API sarà pronta per funzionare! Ma non la tua risorsa web. Per verificare la prontezza per l'esecuzione del tuo codice js, puoi utilizzare la tua libreria o framework js preferito. Personalmente, preferisco Mootools - è quello che ho usato.

Il mio codice di inizializzazione è simile a questo:

VK.init (funzione () (
// Inizializzazione API riuscita
window.addEvent ("domready", function () (
// DOM pronto
})
});

Cosa possiamo fare adesso? E ora possiamo utilizzare l'API, ovvero, ad esempio, verificare se l'utente ha selezionato i parametri di accesso dell'applicazione richiesti ai suoi dati. Ad esempio così:

VK.api ("getUserSettings", funzione (dati) (
if (data.response) (
if (! (256 & data.response))
VK.callMethod ("showSettingsBox", 263);
}
if (data.error) (
alert ("Codice errore:" + data.error.error);
}
});

Per fare ciò, chiamiamo prima la funzione getUserSettings, che restituirà la maschera di bit delle impostazioni utente correnti. La chiamata viene effettuata utilizzando il metodo VK.api, dove il primo parametro è il nome della funzione e il secondo è la funzione CallBack. La variabile data è il risultato della funzione getUserSettings, che deve essere controllata per un errore, se viene restituito data.error, significa un errore! L'errore può essere dovuto a due (secondo me) motivi: l'applicazione non è stata approvata dall'amministrazione del sito (prima dell'approvazione, solo getProfiles ha funzionato per me, a proposito, in seguito ho incontrato post sui forum che tutto funziona in modalità di test) . Se la funzione ha restituito data.response, allora continuiamo a lavorare, controlliamo le maschere di bit dei diritti correnti e quelle richieste e chiamiamo la funzione dell'API JS showSettingsBox con un singolo parametro (la maschera dei diritti richiesti, ho 263 - questo è l'accesso a foto, amici e un collegamento all'applicazione nel menu utente a sinistra)

A mio parere, chiamare i metodi "API in Contact" utilizzando l'API JS in qualche modo non va bene. Questo è utile per compiti semplici. L'applicazione completamente Iframe basata su JS richiede molto tempo. E quindi passiamo all'esame delle richieste HTTP all'API.

Fase 4: PHP e "API in contatto"

Per fare questo, abbiamo Joomla e una classe che prendiamo dal link

Per lavorare con l'API tramite PHP, devi creare due costanti, questo api_id della tua applicazione sarà incluso in ogni richiesta (puoi vederlo direttamente nella barra degli indirizzi quando fai clic sul collegamento all'applicazione) e la chiave segreta - viene rilasciato durante la creazione dell'applicazione (è lungo e può essere modificato nelle impostazioni dell'applicazione)

Una chiamata API che utilizza PHP ha il seguente aspetto:

Foreach ($ this-> items as $ item) (
$ uid = $ oggetto-> oggetto;
}
$ api = nuovo vkapi ();
$ ans = $ api-> api ("getProfiles", array ("uids" => implode (",", $ uids), "fields" => "photo, photo_big"));

Il primo per ciascuno prende tutti gli utenti registrati dalla mia applicazione (ma non più di 1000), quindi viene fatta una richiesta all'"API in contatto" per scaricare i dati su questi utenti. In output abbiamo un array di valori della forma: $ ans ["response"] [$ i] ["field"], dove response è un array di dati sugli utenti, quindi $ i elemento e infine il richiesto campo delle proprietà dell'utente es. first_name (nome) o foto.

I vantaggi di questo approccio:

1. Diventano disponibili metodi API sicuri, il che non è poco importante se hai bisogno di scoprire il saldo o aggiungere/ritirare voti.
2. Non è necessario scrivere "migliaia" di righe di codice JS per lavorare con l'API
3. Otteniamo un sito e un'applicazione facili da amministrare allo stesso tempo.

Esattamente quello che ho fatto in Joomla, ci vuole molto tempo per dirlo e non è necessario, do solo una logica approssimativa della mia applicazione.

Non è un segreto che tutti i componenti di Joomla siano basati sul pattern MVC. Che mette tutto sugli scaffali!

Il controller del componente accetta tutti i comandi / richieste dell'utente (almeno per le azioni dell'utente quando si fa clic sui collegamenti, almeno utilizzando le richieste AJAX utilizzando JS)

Il modello è responsabile di tutte le operazioni con il database del nostro componente, per me, ad esempio: visualizza il voto stesso, le liste di coloro che hanno votato per un determinato partecipante al voto, risponde al controllo e al nuovo voto e qualche altro ausiliario funzioni.

View gestisce la visualizzazione dei vari Layout e il trasferimento dei dati dal modello agli stessi.

Per coloro che hanno sviluppato componenti per Joomla, tutto è molto chiaro.

Nessuno ci impedisce di utilizzare la classe vkapi.class.php ovunque nell'applicazione, personalmente, l'ho usata solo nella vista per preparare i dati per l'output (ad esempio, dall'uid degli utenti nel contatto che la mia applicazione ha messo, ho caricato gli indirizzi delle foto)

Fase 5: widget

Tutti sono già abituati a un numero enorme di moduli e pulsanti diversi dai social network. Volevo anche questo nella mia applicazione Iframe. Come collegare il widget dei commenti:

Non aggiungere in nessun caso il seguente codice alla pagina:

Questo va bene per i siti web, ma non va bene per le applicazioni Iframe!

È sufficiente fare così:

VK.Widgets.Comments ("vk_comments", (limite: 10, larghezza: "578", allega: "*"));

L'API JS ha già implementato funzioni per l'aggiunta di widget.

Per quanto riguarda i commenti stessi, sai che quando un utente lascia un commento su una pagina con un'applicazione, viene pubblicato anche sulla sua bacheca, ma con un link al tuo sito, non all'applicazione! Per evitare ciò, è necessario utilizzare il parametro pageURL, che indicherà l'indirizzo dell'applicazione nel formato www.vkontakte.ru/app (app_id)

Alla fine ho finito così:

VK.Widgets.Comments ("vk_comments", (limite: 10, larghezza: "578", allegato: "*", pageURL: "http://vkontakte.ru/app2176209"));

Fase 6: Conclusione

All'uscita, abbiamo un'applicazione non complicata, ma funzionante in VKontakte. Che può essere facilmente ampliato e sviluppato aggiungendo nuove e nuove funzionalità e componenti utilizzando il tuo CMS preferito in combinazione con l'API in VKontakte e l'API JS.

Questo è quello che ho fatto.

Buon pomeriggio. In questo post, vorrei analizzare il servizio per la visualizzazione di amici comuni e membri del gruppo comuni in vk.com. Voglio anche dirti cosa ho riscontrato quando ho passato la moderazione al catalogo delle applicazioni.

E quindi per aggiungere la tua applicazione a vk.com, devi prima farlo creare.

I. Impostazione del progetto e un po 'della prima richiesta di API

Dopo che noi ha creato un'applicazione iframe, dobbiamo personalizzarlo. Andiamo alle impostazioni dell'applicazione.

Mando la prima richiesta in modo che quando avvio l'applicazione, VK.COM me la restituisca immediatamente, usando OTTENERE parametro api_result, dati dettagliati sull'utente che ha inserito l'applicazione.

Prima richiesta a API:

metodo = users.get & user_ids = (viewer_id) & campi = foto_50 & formato = json & v = 5.28

II. Punti salienti dell'implementazione su Js

Potrebbero sorgere difficoltà di implementazione al momento della ricezione dei membri del gruppo, l'API VK non restituisce più di 1000 membri per richiesta. Se richiedi 1 di tali richieste, il processo per ottenere un elenco dei partecipanti sarà molto lungo. Ho risolto questo problema applicando il codice descritto nel mio precedente articolo, con il quale puoi ottenere 25.000 partecipanti alla volta.

Vorrei anche spiegare perché non ho applicato il metodo già pronto per gli utenti VK amici.getMutual che restituisce un elenco di identificatori di amici comuni tra una coppia di utenti... Il fatto è che il servizio funziona non solo con gli utenti, ma anche con i gruppi, quindi sarebbe superfluo fare un mucchio di elaborazioni, ad esempio, se c'è un utente e un gruppo. Sì, può essere elaborato e in alcuni casi accelererà anche il lavoro.

Tutti i metodi nelle statistiche delle richieste API funzionano senza errori, ad eccezione del metodo utils.resolveScreenName, ciò è dovuto al fatto che gli utenti inseriscono collegamenti errati nel campo di input.

III. Passiamo la moderazione al catalogo delle applicazioni

Dopo aver inviato l'applicazione finita per la revisione, il moderatore l'ha rifiutata dopo 2 giorni, poiché l'applicazione non ha funzionato HTTPS protocollo. Ho risolto questo problema caricando l'applicazione dal mio server al server github basato su protocollo HTTPS.

Installa Joomla: lì tutto è abbastanza trasparente e comprensibile.

Fase 3: API JS e "API in contatto"

Quello che abbiamo nel nostro arsenale: una nuova applicazione in VKontakte e un sito appena creato su alcuni template Joomla standard.

Qui vorrei attirare la vostra attenzione sull'API in VKontakte!

Esistono 2 tipi di API:

1. API Javascript
2. API in Contatti

Usando il primo, puoi chiamare varie finestre di dialogo (invitare amici all'applicazione, registrare voti, impostare l'accesso ai dati utente, ecc. È possibile trovare una descrizione dettagliata di questi metodi.

Le possibilità del secondo sono molto maggiori! È possibile accedere allo script www.vkontakte.ru/api.php in qualsiasi modo conveniente, che si tratti di una richiesta AJAX o di una richiesta HTTP direttamente dal server. C'è una descrizione di tutti i metodi API.

Ora ulteriori informazioni sull'inizializzazione delle API e sul lavoro con esse. Iniziamo in ordine:

L'API JS viene inizializzata aggiungendo il seguente javascript al nostro modello:

Src = http: //vkontakte.ru/js/api/xd_connection.js?2

VK.init (funzione () (

// Il tuo codice qui
});

Vorrei notare subito che "inizializzazione API riuscita" questa riga è stata scritta qui per un motivo e dice che la funzione VK.init verrà eseguita quando l'API sarà pronta per funzionare! Ma non la tua risorsa web. Per verificare la prontezza per l'esecuzione del tuo codice js, puoi utilizzare la tua libreria o framework js preferito. Personalmente, preferisco Mootools - è quello che ho usato.

Il mio codice di inizializzazione è simile a questo:

VK.init (funzione () (
// Inizializzazione API riuscita
window.addEvent ("domready", function () (
// DOM pronto
})
});

Cosa possiamo fare adesso? E ora possiamo utilizzare l'API, ovvero, ad esempio, verificare se l'utente ha selezionato i parametri di accesso dell'applicazione richiesti ai suoi dati. Ad esempio così:

VK.api ("getUserSettings", funzione (dati) (
if (data.response) (
if (! (256 & data.response))
VK.callMethod ("showSettingsBox", 263);
}
if (data.error) (
alert ("Codice errore:" + data.error.error);
}
});

Per fare ciò, chiamiamo prima la funzione getUserSettings, che restituirà la maschera di bit delle impostazioni utente correnti. La chiamata viene effettuata utilizzando il metodo VK.api, dove il primo parametro è il nome della funzione e il secondo è la funzione CallBack. La variabile data è il risultato della funzione getUserSettings, che deve essere controllata per un errore, se viene restituito data.error, significa un errore! L'errore può essere dovuto a due (secondo me) motivi: l'applicazione non è stata approvata dall'amministrazione del sito (prima dell'approvazione, solo getProfiles ha funzionato per me, a proposito, in seguito ho incontrato post sui forum che tutto funziona in modalità di test) . Se la funzione ha restituito data.response, allora continuiamo a lavorare, controlliamo le maschere di bit dei diritti correnti e quelle richieste e chiamiamo la funzione dell'API JS showSettingsBox con un singolo parametro (la maschera dei diritti richiesti, ho 263 - questo è l'accesso a foto, amici e un collegamento all'applicazione nel menu utente a sinistra)

A mio parere, chiamare i metodi "API in Contact" utilizzando l'API JS in qualche modo non va bene. Questo è utile per compiti semplici. L'applicazione completamente Iframe basata su JS richiede molto tempo. E quindi passiamo all'esame delle richieste HTTP all'API.

Fase 4: PHP e "API in contatto"

Per fare questo, abbiamo Joomla e una classe che prendiamo dal link

Per lavorare con l'API tramite PHP, devi creare due costanti, questo api_id della tua applicazione sarà incluso in ogni richiesta (puoi vederlo direttamente nella barra degli indirizzi quando fai clic sul collegamento all'applicazione) e la chiave segreta - viene rilasciato durante la creazione dell'applicazione (è lungo e può essere modificato nelle impostazioni dell'applicazione)

Una chiamata API che utilizza PHP ha il seguente aspetto:

Foreach ($ this-> items as $ item) (
$ uid = $ oggetto-> oggetto;
}
$ api = nuovo vkapi ();
$ ans = $ api-> api ("getProfiles", array ("uids" => implode (",", $ uids), "fields" => "photo, photo_big"));

Il primo per ciascuno prende tutti gli utenti registrati dalla mia applicazione (ma non più di 1000), quindi viene fatta una richiesta all'"API in contatto" per scaricare i dati su questi utenti. In output abbiamo un array di valori della forma: $ ans ["response"] [$ i] ["field"], dove response è un array di dati sugli utenti, quindi $ i elemento e infine il richiesto campo delle proprietà dell'utente es. first_name (nome) o foto.

I vantaggi di questo approccio:

1. Diventano disponibili metodi API sicuri, il che non è poco importante se hai bisogno di scoprire il saldo o aggiungere/ritirare voti.
2. Non è necessario scrivere "migliaia" di righe di codice JS per lavorare con l'API
3. Otteniamo un sito e un'applicazione facili da amministrare allo stesso tempo.

Esattamente quello che ho fatto in Joomla, ci vuole molto tempo per dirlo e non è necessario, do solo una logica approssimativa della mia applicazione.

Non è un segreto che tutti i componenti di Joomla siano basati sul pattern MVC. Che mette tutto sugli scaffali!

Il controller del componente accetta tutti i comandi / richieste dell'utente (almeno per le azioni dell'utente quando si fa clic sui collegamenti, almeno utilizzando le richieste AJAX utilizzando JS)

Il modello è responsabile di tutte le operazioni con il database del nostro componente, per me, ad esempio: visualizza il voto stesso, le liste di coloro che hanno votato per un determinato partecipante al voto, risponde al controllo e al nuovo voto e qualche altro ausiliario funzioni.

View gestisce la visualizzazione dei vari Layout e il trasferimento dei dati dal modello agli stessi.

Per coloro che hanno sviluppato componenti per Joomla, tutto è molto chiaro.

Nessuno ci impedisce di utilizzare la classe vkapi.class.php ovunque nell'applicazione, personalmente, l'ho usata solo nella vista per preparare i dati per l'output (ad esempio, dall'uid degli utenti nel contatto che la mia applicazione ha messo, ho caricato gli indirizzi delle foto)

Fase 5: widget

Tutti sono già abituati a un numero enorme di moduli e pulsanti diversi dai social network. Volevo anche questo nella mia applicazione Iframe. Come collegare il widget dei commenti:

Non aggiungere in nessun caso il seguente codice alla pagina:

Questo va bene per i siti web, ma non va bene per le applicazioni Iframe!

È sufficiente fare così:

VK.Widgets.Comments ("vk_comments", (limite: 10, larghezza: "578", allega: "*"));

L'API JS ha già implementato funzioni per l'aggiunta di widget.

Per quanto riguarda i commenti stessi, sai che quando un utente lascia un commento su una pagina con un'applicazione, viene pubblicato anche sulla sua bacheca, ma con un link al tuo sito, non all'applicazione! Per evitare ciò, è necessario utilizzare il parametro pageURL, che indicherà l'indirizzo dell'applicazione nel formato www.vkontakte.ru/app (app_id)

Alla fine ho finito così:

VK.Widgets.Comments ("vk_comments", (limite: 10, larghezza: "578", allegato: "*", pageURL: "http://vkontakte.ru/app2176209"));

Fase 6: Conclusione

All'uscita, abbiamo un'applicazione non complicata, ma funzionante in VKontakte. Che può essere facilmente ampliato e sviluppato aggiungendo nuove e nuove funzionalità e componenti utilizzando il tuo CMS preferito in combinazione con l'API in VKontakte e l'API JS.

Questo è quello che ho fatto.