FriendFeed & Google & Maps = FriendMap!

引言

本教程源自一个小型开发者指南，旨在集成 Google API 和 FriendFeed API。

背景

首先，您需要两个授权密钥，一个用于 FriendFeed (https://friendfeed.com/account/login?next=%2Fapi%2Fregister)，另一个用于 Google Maps (http://code.google.com/intl/it-IT/apis/maps/signup.html)。

在本教程中，我不想讨论 Google 小部件和其他此类工具的可能集成，我只想解释创建此类工具需要了解的主要内容……

还需要什么？

现在我们有了使用 API 的密钥，并且需要开发我们的应用程序……但首先我们需要了解 FriendFeed 的基本 API 模型。

FriendFeed API 模型

FriendFeed 支持三种身份验证方法：Auth、Installed Application Authentication 和带有特殊密码（称为远程密钥）的 HTTP Basic Auth。出于安全原因，对我们而言，最好的两种是 Auth 和 Installed Apps Authentication，但在此示例中，我们不讨论身份验证过程，因为最简单的身份验证方法（HTTP）足以进行 ff API 的首次测试。因此，您可以下载 HTTP 身份验证的基本模板 (http://friendfeed.com/static/html/remotelogin.html)，然后实现您的 post/get 数据。

接下来，您需要了解如何读取 FriendFeed 帖子和用户数据。

简单地说，如果我们想请求我们的 FriendFeed 主页，我们需要通过以下方式调用“feedlist”命令：

http://friendfeed-api.com/v2/feedlist

或者使用 JSON 回调： 

http://friendfeed-api.com/v2/feedlist?callback=yourfunction

为此，您只需使用 Google Data Request 或其他 JavaScript 框架（jquery、mootools...）的任何 Request 方法，或者更基础的 XmlHttpRequest。

例如，在 mootools 中

var r = new Request.JSON(
{
    method :'get',
    url : ‘http://friendfeed-api.com/v2/feedlist’, 
	//or http://friendfeed-api.com/v2/feedlist?callback=jsonobject
    onSuccess : function(text,json) 
    {
	try 
        {
	    //work with your data..
	} 
        catch (e) 
        {
            alert(e);
        }
    }
}).send();

响应格式非常简单，包含您 FriendFeed 侧边栏中的每个链接

• main[]{} - 侧边栏顶部的所有主要 feed，例如 Home、My discussions 和 Direct messages
• lists[]{} - 经过身份验证的用户的 friend 列表
• groups[]{} - 默认显示在 friendfeed.com 上 Groups 侧边栏中的组
• searches[]{} - 经过身份验证的用户的已保存搜索
• sections[]{} - 一个表示经过身份验证的用户的 FriendFeed 侧边栏的列表。可用于在您的客户端中重新创建 FriendFeed 侧边栏。

每个项目都是一个数组，单个项目结构为：

• name - 该部分的显示名称，例如“Friends”或“Groups”
• id - “friends”、“groups”或“saved-searches”
• feeds - 该部分中的 feed 列表

因此，例如，如果您需要检索主页中的所有 feed，您只需遍历 main[]，然后获取 feed。

现在，要创建您的 feed 列表，您需要了解 feed 项目的结构。

源

• id - feed ID，例如“bret”或“bret/comments”
• name - feed 的显示名称，例如“Bret Taylor”
• description? - 个人资料描述，一个 HTML 字符串
• type - “user”、“group”或“special”之一
• private - 如果 feed 是 private，则为 true
• commands[]? - 经过身份验证的用户在此 feed 上允许的命令列表：“subscribe”、“unsubscribe”、“post”、“dm”、“admin”

对于每个 feed，我们都有一个条目列表，例如：body 或 URL，但特别是我们的教程对象条目：“geo”。

如果此条目在列表中不可用，则可以通过完整的 feed 读取来请求。

http://friendfeed-api.com/v2/feed/feed id

现在您已经了解了 FriendFeed API 的基础知识，我们需要介绍 Google Maps 和我们教程的结论。

GoogleMaps 对象

如您所知，拥有使用 Google Maps 的密钥和 JavaScript 对象非常重要，我们也知道我们可以通过直接代码或 kml 文件发送标记，在 kml 文件中，如果我们愿意，我们可以定义缩放级别或其他有关我们标记的信息。

我认为没有必要花更多时间谈论 Google Maps API，因为有很多示例可以测试和理解本教程的后续部分。

组装代码

现在我们对本教程/开发理念的需求有了简单的介绍。

应用程序草案非常简单

应用程序代码可以使用两种方法：kml overlay 加载或直接 GMarker 创建。

例如，如果您想通过服务器端代码创建 kml 文件，则需要遵守此语法

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
    <Document>
        <name>KML FriedFeed</name>
        <description>FriendFeed markers</description>
        <Placemark>
            <name>Feed 1</name>
            <description>something read from the body entry [FF]</description>
            <Point>
                <coordinates>{acquired by the geo entry [FF]}</coordinates>
            </Point>
        </Placemark>
    </Document>
</kml>  

……以及 JavaScript 代码中  

var kml = new GGeoXml("http://mytestdomain.com/myresponsefeed.kml.php");
map.addOverlay(kml); 

或者，如果您想迭代数组并逐步创建每个标记，您需要类似这样的内容：

for(var i = 0 ;i<feedList.length;i++) 
{
    var point = new GLatLng(feedList[i].geo.lat,feedList[i].geo.lng);
    var marker=new GMarker(point);
    GEvent.addListener(marker, "click", 
    function() 
    {
        marker.openInfoWindowHtml(feedList[i].body+'<br/>Link:' + feedList[i].url;
    });
    mm.addMarker(marker); 
}

现在，如果您想在 gmap 对象中创建一个侧边栏，您需要定义一个自定义 GControl

FeedListControl.prototype = new GControl();
FeedListControl.prototype.initialize = function(map) 
{
    feedContainer = document.createElement("div");
    feedContainer.style.overflow="auto";
    feedContainer.style.backgroundColor = "#ffffff";
    feedContainer.style.border = "1px solid black";
    feedContainer.style.height="250px";
    feedContainer.style.width="130px";
    feedContainer.style.paddingLeft="5px";
    map.getContainer().appendChild(feedContainer);
    return feedContainer;
    //define the position:
    //FeedListControl.prototype.getDefaultPosition = function() 
    //{ 
    //    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(6, 33)); 
    //}
}

然后通过以下方式将项目添加到控件：

feedContainer.innerHTML = my_html_feed_list;

现在，如果您运气好的话，您可能会得到类似这样的结果：

关注点

本文仅为入门说明，旨在提供一种提出新想法的方式，您可以在其中使用各种可用的 API 和工具！

祝您开发顺利！尽情享受！

JSOP 编辑 - 修复了 <pre> 标签中的格式和错误。

历史

• 2010年1月19日：初始帖子