Vkontakte APIでのIFrameアプリケーションの開発

数日前、VKontakteに十分な機能がなかったため、私の友人からオンライン投票の作成を手伝ってほしいと頼まれました(15人の投票しか作成できません)。 このタスクは興味深いことがわかりました。 だから、ポイントに!



この投稿を使用できるユーザー:







ステージ1:はじめに




私たちは連絡を取って最初のアプリケーションを作成します-あなたはここでそれを行うことができます (そこに記入する必要があるものについては説明しません、誰もがそれを理解したと思います)



ステージ2:サーバー側




アプリケーションが作成されたら、それをどこに配置するかを検討します。 ためらうことなく、私は自分のサーバーに行き、そこに新しいサブドメインを作成しました(それが何と呼ばれようと-誰もそれを知りません)



サーバーソフトウェアが最も一般的です。





Joomlaをインストールします-すべてがかなり透明で明確です。



ステージ3:JS APIおよび「API in Contact」




サービスの内容:VKontakteの新しいアプリケーションと、標準のJoomlaテンプレートで作成されたサイト。



次に、VkontakteのAPIにすぐに注意を払いたいと思います。



APIには2つのタイプがあります。



  1. Javascript API
  2. 連絡先のAPI




最初のダイアログボックスを使用すると、さまざまなダイアログボックスを呼び出すことができます(友人をアプリケーションに招待する、投票を記録する、ユーザーデータへのアクセスを設定するなど)。これらのメソッドの詳細な説明は、 ここにあります



2番目の可能性はもっと大きいです! スクリプトwww.vkontakte.ru/api.phpは、AJAXリクエストまたはサーバーからのHTTPリクエストなど、便利な方法でアクセスできます。 すべてのapiメソッドの説明はこちらです。



APIの初期化とそれらの操作について詳しく説明します。 順番に始めましょう:



JS APIは、次のjavascriptをテンプレートに追加することにより初期化されます。



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



VK.init(function() {

// API initialization succeeded

// Your code here

});









「API初期化が成功しました」というこの行は、正当な理由でここに記述されており、APIが動作する準備ができたときにVK.init関数が実行されることを示しています。 しかし、あなたのウェブリソースではありません。 jsコードの実行準備を確認するには、お気に入りのjsライブラリまたはフレームワークを使用できます。 個人的には、Mootoolsが好きです-私はそれを使いました。



私の初期化コードは次のようになります。



VK.init(function() {

// API initialization succeeded

window.addEvent('domready', function(){

//DOM ready

})

});









今何ができますか? そして、APIを使用して、たとえば、ユーザーが自分のデータに必要なアプリケーションアクセスパラメーターを選択したかどうかを確認できます。 たとえば、次のように:



VK.api('getUserSettings', function(data){

if (data.response){

if (!(256 & data.response))

VK.callMethod('showSettingsBox', 263);

}

if (data.error){

alert('Error Code:'+data.error.error);

}

});









これを行うには、まずgetUserSettings関数を呼び出します。この関数は、現在のユーザーの設定のビットマスクを返します。 呼び出しはVK.apiメソッドを使用して行われます。最初のパラメーターは関数の名前で、2番目のCallBack関数です。 データ変数はgetUserSettings関数の結果です。data.errorが返された場合はエラーをチェックし、エラーが発生したかどうかをチェックする必要があります。 エラーは2つの理由である可能性があります(私の意見では):アプリケーションがサイト管理者によって承認されていません(承認前にgetProfilesのみが私のために働いていました、ところで、私は後でフォーラムですべてがテストモードで機能するという投稿に会いました)。 関数がdata.responseを返した場合、作業を続行し、現在の権限と必要な権限のビットマスクを確認し、単一のパラメーターでJS API showSettingsBox関数を呼び出します(必要な権限のマスク、263があります-これは写真、友達、ユーザーの左側のメニューのアプリケーションへのリンクです)



マスクの詳細はこちら



私の意見では、JS APIを使用して「API in Contact」メソッドを呼び出すことは、どういうわけか良くありません。 これは単純なタスクに便利です。 JSで構築された完全なIframeアプリケーションは非常に時間がかかります。 それで、APIへのHTTPリクエストの調査に進みます。



ステージ4:PHPと「API in Contact」




これを行うために、リンクvkapi.class.phpで取得する Joomlaとクラスがあります



PHP経由でAPIを使用するには、2つの定数を作成する必要があります。これには、アプリケーションのapi_idがリクエストに含まれます(アプリケーションへのリンクをクリックするとアドレスバーに直接表示されます)。アプリケーションの作成時に秘密キーが発行されます(長く、変更可能です)アプリケーション設定で)



PHPによるAPI呼び出しの意味は次のとおりです。



foreach ($this->items as $item){

$uids[] = $item->item;

}

$api = new vkapi();

$ans = $api->api('getProfiles', array('uids' => implode(',',$uids), 'fields' => 'photo, photo_big'));









最初のforeachは、登録済みのすべてのユーザーをアプリケーションから取得します(ただし、1000人以下)。その後、「連絡先のAPI」にリクエストを送信して、これらのユーザーに関するデータをダウンロードします。 出力には、次の形式の値の配列があります:$ ans ['response'] [$ i] ['field']、ここでresponseはユーザーデータの配列、次に$ i要素、最後にユーザーフィールドの必須プロパティ(first_name(name)またはphoto)。



このアプローチの利点:



1.安全なAPIメソッドが利用可能になります。残高を確認したり、投票を登録/撤回する必要がある場合は、重要ではありません。

2. APIを使用するためにJSで「数千」行のコードを記述する必要はありません

3.管理しやすいサイトとアプリケーションを同時に取得します。



非常に長い間Joomlaで正確に何をしたのか、その必要はありません。アプリケーションのおおよそのロジックのみを提供します。



すべてのJoomlaコンポーネントがMVCパターンに基づいていることは秘密ではありません。 それは棚にすべてを置きます!



コンポーネントのコントローラーは、すべてのユーザーコマンド/リクエストを受け入れます(少なくとも、JSを使用したAJAXリクエストを使用して、リンクをたどるときのユーザーアクションに対して)



モデルは、コンポーネントのデータベースを使用したすべての操作を担当します。たとえば、投票自体、特定の投票参加者の投票者リスト、検証と再投票への回答、その他の補助機能を表示します。



ビューは、さまざまなレイアウトの出力と、モデルからレイアウトへのデータの転送を制御します。



Joomlaのコンポーネントの開発に携わる人々はすべて非常に明確です。



アプリケーションのどこでもvkapi.class.phpクラスを使用することを誰も気にしません。個人的には、出力用のデータを準備するためにビューでのみ使用しました(たとえば、アプリケーションを配置する連絡先のユーザーのuidによって、写真のアドレスをロードしました)



ステージ5:ウィジェット




すでに誰もがソーシャルネットワークの膨大な数の異なるフォームとボタンに慣れています。 Iframeアプリケーションでもこれが必要でした。 コメントウィジェットを接続する方法:



次のコードをページに追加しないでください。



src = " userapi.com/js/api/openapi.js?22 "



サイトには適していますが、iframeアプリケーションには適していません!



このようにするだけで十分です:



VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});









JS APIは、ウィジェットを追加するための機能を既に実装しています。



コメント自体については、ユーザーがアプリケーションのあるページにコメントを残すと、彼は自分のウォールにもそれを公開しますが、アプリケーションではなくあなたのサイトへのリンクがあります! これを回避するには、www.vkontakte.ru / app {app_id}の形式でアプリケーションのアドレスを示すpageURLパラメーターを使用する必要があります



最終的には、次のようになりました。



VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});









ステージ6:結論




出力では、複雑ではなく、Vkontakteで動作するアプリケーションがあります。 お気に入りのCMSとVkontakteのAPIおよびJS APIを使用して新しい機能とコンポーネントを追加することで、簡単に拡張および開発できます。



ここに私が得たものがあります: vkontakte.ru/app2176209



ダニラ、ご静聴ありがとうございました。



PS政権は1日後に申請を承認し、10票の誓約を求めました。

PPSこの1時間半後、いくつかの購入オファーが届きました! すぐにそれは非売品だと言いますが、要点はわかりません。



All Articles