×
Namespaces

Variants
Actions
(Difference between revisions)

Display Facebook Friend position with Nokia Maps API for Qt

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Implementation)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(26 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Qt WebKit]][[Category:HERE Maps]][[Category:Code Examples]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Web Services]]
{{Abstract| This article demonstrates how to display Facebook friends on Nokia Map using [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API for Qt].}}
+
{{Abstract| This article demonstrates how to display Facebook friends on Nokia Map using [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API for Qt].}}
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media: FacebookFriends_NokiaMap.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [[Media: FacebookFriends NokiaMap.zip]]
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices=N9/ N950  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= N9/ N950  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
 
|sdk= [https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1.4]
 
|sdk= [https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1.4]
 
|platform= Symbian^3 and later/MeeGo, Qt 4.7.3 and later <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= Symbian^3 and later/MeeGo, Qt 4.7.3 and later <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= GPS  <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= GPS  <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=Self-Signed<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= Self-Signed<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= NetworkServices <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= NetworkServices <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Facebook, Map <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= Facebook, Map <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|creationdate= 31st    January, 2012<!-- Format YYYYMMDD -->
+
|translated-by= <!-- [[User:XXXX]] -->
|author= [[User: somnathbanik]] <!-- Display as link [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20120131
 +
|author= [[User:Somnathbanik]]
 
}}
 
}}
 
==Introduction==
 
==Introduction==
The example combines gets information about Facebook friends and display the location of the friends on [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map] using pushpin. We create dynamic pushpins with friend’s image using  [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML].  This article also talks about Facebook login and authentication using [http://developers.facebook.com/docs/authentication/ OAuth]. To start with the application first create a Facebook app from [https://developers.facebook.com/apps here] and get the '''Key''' and '''Secret''' for future use.  
+
The example combines getting information about Facebook friends and displays their location on [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Maps] using pushpin. We create dynamic pushpins with friend’s image using  [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML].  This article also talks about Facebook login and authentication using [http://developers.facebook.com/docs/authentication/ OAuth]. To start with the application first create a Facebook app from [https://developers.facebook.com/apps here] and get the '''Key''' and '''Secret''' for future use.  
  
 
<gallery widths=185px heights=300px>
 
<gallery widths=185px heights=300px>
Line 25: Line 33:
  
 
==Implementation ==
 
==Implementation ==
We create two pages in {{Icode|MainPage.qml}}, one is for displaying Facebook friend list and the other is to display friends on [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map].  When we start the application we load the Facebook login dialog in the first screen, which calls the Facebook login page
+
We create two pages in {{Icode|MainPage.qml}}, one is for displaying Facebook friend list and the other is to display friends on [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map].  When we start the application we load the Facebook login dialog in the first screen, which calls the Facebook login ''URL''.
 
<code xml>
 
<code xml>
 
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html  
 
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html  
 
</code>
 
</code>
By default the application will ask for the authentication of ''basic information''  about the user in Facebook. As we use user location and other information we need to request for more [http://developers.facebook.com/docs/reference/api/permissions/ permissions] from the user, which can be done with the ''scope'' parameter. So our ''URL'' should look like this
 
  
 +
By default the application will ask for the authentication of ''basic information''  about the user in Facebook. As we use user location and other information we need to request for more [http://developers.facebook.com/docs/reference/api/permissions/ permissions] from the user, which can be done with the ''scope'' parameter. So our ''URL'' should look like below.
 
<code xml>
 
<code xml>
 
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events
 
https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events
 
</code>
 
</code>
The login page is an HTML page, so we display it on [http://doc.qt.nokia.com/4.7/qml-webview.html QML WebView].
 
  
<code cpp>
+
The login page is an HTML page, so we display it on [http://doc.qt.nokia.com/4.7/qml-webview.html QML WebView].
 +
<code cpp-qt>
 
WebView {
 
WebView {
 
             id: webView
 
             id: webView
Line 52: Line 60:
  
 
</code>
 
</code>
Once the user is authenticated and authorizes the application, the browser will get an alpha-numeric number in the ''code'' parameter of its response. We parse the ''code'' for further use.  
+
 
<code cpp>
+
Once the user is authenticated and authorizes the application, the browser will get an alpha-numeric number in the ''code'' parameter of its response. We parse the ''code'' for further use.  
 +
<code cpp-qt>
 
onFinished: {
 
onFinished: {
 
                 if(url.indexOf("code=")>0) {
 
                 if(url.indexOf("code=")>0) {
Line 69: Line 78:
 
</code>
 
</code>
 
   
 
   
{{Icode|getAccessToken()}} function pass the ''code'' as its parameter and calls the ''URL'' to get the access token.  
+
{{Icode|getAccessToken()}} function pass the ''code'' as its parameter and calls the ''URL'' to get the access token.  
 
+
 
+
 
<code javascript>
 
<code javascript>
 
function getAccessToken(code) {
 
function getAccessToken(code) {
Line 80: Line 87:
  
 
</code>
 
</code>
 +
 
And then we parse the access token from the response  
 
And then we parse the access token from the response  
<code Javascript>
+
<code javascript>
  
 
//parse the access token
 
//parse the access token
Line 92: Line 100:
  
 
</code>
 
</code>
{{Icode|loadFriends()}} gets friends information from Facebook  and load the information on  [http://doc.qt.nokia.com/4.7/qml-listmodel.html ListModel]
 
<code javascript>
 
  
 +
{{Icode|loadFriends()}} gets friends information from Facebook and load the information on  [http://doc.qt.nokia.com/4.7/qml-listmodel.html ListModel]
 +
<code javascript>
 
function parseFriends(response) {
 
function parseFriends(response) {
 
     var data = eval("[" + response + "]")[0].data;
 
     var data = eval("[" + response + "]")[0].data;
Line 123: Line 131:
  
 
</code>
 
</code>
 +
 
Once the information are loaded in the [http://doc.qt.nokia.com/4.7/qml-listmodel.html ListModel],  we display the list of Facebook friend List on the page
 
Once the information are loaded in the [http://doc.qt.nokia.com/4.7/qml-listmodel.html ListModel],  we display the list of Facebook friend List on the page
<code cpp>
+
<code cpp-qt>
  
 
//display friends in list view
 
//display friends in list view
Line 137: Line 146:
  
  
On clicking the menu ''Friends on Map'' we call the function {{Icode|startcalculatingfrineds()}}, which first calculates the number of friends loaded in the model and then gets the location name for each friends.
+
On clicking the menu ''Friends on Map'' we call the function {{Icode|startcalculatingfrineds()}}, which first calculates the number of friends loaded in the model and then gets the location name for each friends.
 
+
 
<code javascript>
 
<code javascript>
  
Line 173: Line 181:
  
 
</code>
 
</code>
As the [[developers.facebook.com/docs/authentication/ Facebook API]] we used here doesn’t provide the ''latitude'' and ''longitude'' information of friends in the friend list, so we will use [http://code.google.com/apis/maps/documentation/webservices/ Google API] to get the ''latitude'' and ''longitude'' of each location individually.   
+
 
<code cpp>
+
The [https://developers.facebook.com/docs/ Facebook API] we used here doesn’t provide the ''latitude'' and ''longitude'' information of friends in the friend list.
 +
<code xml>
 +
https://graph.facebook.com/me/friends?fields=name,id,birthday,location,picture&" + accessToken
 +
</code>
 +
 
 +
Though the below [http://developers.facebook.com/docs/reference/fql/ Facebook Query Language] gives the ''latitude'' and ''longitude'' information of the user's location, but not for all location id.
 +
 
 +
<code xml>
 +
https://api.facebook.com/method/fql.query?query=SELECT location,name FROM page WHERE page_id = <user location id>&access_token=<Your Access Token>
 +
</code>
 +
So we though of using  [http://code.google.com/apis/maps/documentation/webservices/ Google API] to get the ''latitude'' and ''longitude'' of each location individually.   
 +
<code xml>
 +
http://maps.googleapis.com/maps/api/geocode/xml?address="+locationName+"&sensor=false
 +
</code>
 +
 
 +
 
 +
<code cpp-qt>
  
 
XmlListModel {
 
XmlListModel {
Line 191: Line 215:
 
     XmlRole { name: "lng"; query: "lng/string()" }
 
     XmlRole { name: "lng"; query: "lng/string()" }
 
}
 
}
</Code>
+
</code>
  
And then calls the {{Icode|addPushPin()}} function which first creates instances of {{Icode|PushPin.qml}} component dynamically using  [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML]. Each instance is a [http://doc.qt.nokia.com/qtmobility-1.2/qml-mapimage.html MapImage] with properties ''latitude'',''longitude'',''name'' and ''image''. When the instances are ready we call the method  {{Icode|addMapObject()}} to add the instance on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
+
And then calls the {{Icode|addPushPin()}} function which first creates instances of {{Icode|PushPin.qml}} component dynamically using  [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML]. Each instance is a [http://doc.qt.nokia.com/qtmobility-1.2/qml-mapimage.html MapImage] with properties ''latitude'',''longitude'',''name'' and ''image''. When the instances are ready we call the method  {{Icode|addMapObject()}} to add the instance on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
 
+
<code javascript>
<Code javascript>
+
  
 
function addPushPin( latitude, longitude,name,friendImage)
 
function addPushPin( latitude, longitude,name,friendImage)
Line 234: Line 257:
 
}
 
}
  
</Code>
+
</code>
We also put the entire pushpins object into an ''Array'', so that we can have a track of all the pushpin plotted on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
+
  
 +
We also put the entire pushpins object into an ''Array'', so that we can have a track of all the pushpin plotted on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
 
So when ever user switches from Facebook friends List View to Map View it will display the friends location on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Nokia Map].
 
So when ever user switches from Facebook friends List View to Map View it will display the friends location on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Nokia Map].
  
 
==Summary==  
 
==Summary==  
  
This article shows the use of [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API] along with [https://developers.facebook.com/docs/ Facebook API]. It also talks about how to create a [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] object dynamically using [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML].   
+
This article shows the use of [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API] along with [https://developers.facebook.com/docs/ Facebook API]. It also talks about how to create a [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] object dynamically using [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML].   
  
 
==Source Code==
 
==Source Code==
The full source code of the example is available here: [[File: FacebookFriends_NokiaMap.zip]]
+
The full source code of the example is available here: [[File: FacebookFriends NokiaMap.zip]]
 +
 
 +
==Related Article==
 +
* [[Google Landmarks on a Nokia Map using Qt Quick]]
 +
 
 +
 
 +
{{Note| We will also come up with the same article on Windows Phone 7 . Please share your feedback to improvise the same. }}

Latest revision as of 09:33, 24 April 2013

This article demonstrates how to display Facebook friends on Nokia Map using Nokia Map API for Qt.

Article Metadata
Code ExampleTested with
Devices(s): N9/ N950
Compatibility
Platform(s): Symbian^3 and later/MeeGo, Qt 4.7.3 and later
Symbian
Device(s): GPS
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices
Article
Keywords: Facebook, Map
Created: somnathbanik (31 Jan 2012)
Last edited: hamishwillee (24 Apr 2013)

Contents

[edit] Introduction

The example combines getting information about Facebook friends and displays their location on Nokia Maps using pushpin. We create dynamic pushpins with friend’s image using Dynamic Object Management in QML. This article also talks about Facebook login and authentication using OAuth. To start with the application first create a Facebook app from here and get the Key and Secret for future use.

[edit] Implementation

We create two pages in MainPage.qml, one is for displaying Facebook friend list and the other is to display friends on Nokia Map. When we start the application we load the Facebook login dialog in the first screen, which calls the Facebook login URL.

https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html

By default the application will ask for the authentication of basic information about the user in Facebook. As we use user location and other information we need to request for more permissions from the user, which can be done with the scope parameter. So our URL should look like below.

https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events

The login page is an HTML page, so we display it on QML WebView.

WebView {
id: webView
anchors.fill: parent
preferredHeight: height
preferredWidth: Math.max(parent.width,640)
url: "https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events";//&display=touch";
onLoadFinished: {
loginDialog.finished( webView.url );
}
onLoadFailed: {
loginDialog.loadFailed();
}
}

Once the user is authenticated and authorizes the application, the browser will get an alpha-numeric number in the code parameter of its response. We parse the code for further use.

onFinished: {
if(url.indexOf("code=")>0) {
login.visible = false;
friendsList.visible= true;
var codeStart = url.indexOf("code=");
//CODE from facebook
var code = url.substring(codeStart + 5);
//get the access token
Facebook.getAccessToken(code);
console.log("Code: "+code);
}
}

getAccessToken() function pass the code as its parameter and calls the URL to get the access token.

function getAccessToken(code) {
//access token URL request
var url = "https://graph.facebook.com/oauth/access_token?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&client_secret=<Your Secret>&code=" +code;
doWebRequest("GET", url, "", parseAccessToken);
}

And then we parse the access token from the response

//parse the access token
function parseAccessToken(response) {
accessToken = "access_token=" + parseParameter(response, "access_token");
console.log("parseAccessToken:"+accessToken);
//load friends on list
loadFriends();
}

loadFriends() gets friends information from Facebook and load the information on ListModel

function parseFriends(response) {
var data = eval("[" + response + "]")[0].data;
data = data.sort(sortByName);
friendsModel.clear();
for(var i in data) {
var user = data[i];
if(user.location!==undefined)
{
if(user.location.id !== "" || user.location.name !== null )
{
//save friends data in model
friendsModel.append({
"id": user.id,
"name": user.name,
// "profileImageUrl":"https://graph.facebook.com/" + user.id + "/picture",
"profileImageUrl":user.picture ,
"lid": (user.location!==undefined ? user.location.id : ""),
"lname": (user.location!==undefined ? user.location.name : ""),
});
}
}
}
//count number of content in the list model
friendsCount= friendsModel.count;
console.log("parseFriends : "+friendsCount);
}

Once the information are loaded in the ListModel, we display the list of Facebook friend List on the page

//display friends in list view
FriendsList {
id: friendsList
friendsModel: friendsModel
y: commonTools.height
height: parent.height - commonTools.height
}


On clicking the menu Friends on Map we call the function startcalculatingfrineds(), which first calculates the number of friends loaded in the model and then gets the location name for each friends.

function parseFriendsLocation()
{
//when friend list is more then zero
// get information about each friend from the model
if( i <friendsNumber)
{
fid = friendsModel.get(i).id;
fname = friendsModel.get(i).name;
fprofileImageUrl = friendsModel.get(i).profileImageUrl;
flid = (friendsModel.get(i).lid!==undefined ? friendsModel.get(i).lid : "" );
flname = (friendsModel.get(i).lname!==undefined ? friendsModel.get(i).lname :"");
i++;
if(flname !== "" || flid!== "" )
{
//pass friend location to get the latitude and longitude
feedModel.locationName = flname;
feedModel.reload();
}
else
{
//no user
console.log("no location for the user");
}
}
else
{
//count else
console.log("Stopped : "+friendsNumber);
}
}

The Facebook API we used here doesn’t provide the latitude and longitude information of friends in the friend list.

https://graph.facebook.com/me/friends?fields=name,id,birthday,location,picture&" + accessToken

Though the below Facebook Query Language gives the latitude and longitude information of the user's location, but not for all location id.

https://api.facebook.com/method/fql.query?query=SELECT location,name FROM page WHERE page_id = <user location id>&access_token=<Your Access Token>

So we though of using Google API to get the latitude and longitude of each location individually.

http://maps.googleapis.com/maps/api/geocode/xml?address="+locationName+"&sensor=false


XmlListModel {
id: feedModel
property string access_Token: ""
property string xmlData:"";
property string locationID:"";
property string locationName:""
// using Google API to get latitude and longitude of a location
source:"http://maps.googleapis.com/maps/api/geocode/xml?address="+locationName+"&sensor=false"
query:"/GeocodeResponse/result/geometry/location" //google query
namespaceDeclarations:""
//get latitude and longitude
//google
XmlRole { name: "lat"; query: "lat/string()" }
XmlRole { name: "lng"; query: "lng/string()" }
}

And then calls the addPushPin() function which first creates instances of PushPin.qml component dynamically using Dynamic Object Management in QML. Each instance is a MapImage with properties latitude,longitude,name and image. When the instances are ready we call the method addMapObject() to add the instance on the Map.

function addPushPin( latitude, longitude,name,friendImage)
{
count = map.markers.length
counter++
component = Qt.createComponent("PushPin.qml");
console.log(" Call "+component.status + " " + Component.Null);
//create pushpin object
object = component.createObject(container,
{ "latid": latitude, "longit": longitude,"name":name, "friendImage":friendImage}
);
if (object.status == Component.Ready)
{
console.log("Component ready");
map.addMapObject(object);
myArray = new Array()
for (var i = 0; i<count; i++){
myArray.push(map.markers[i])
}
myArray.push(object)
map.markers = myArray
}
else // when status is ready add the pushpin on the map
object.statusChanged.connect(addRemoteImages);
}
//add pushpn on the map
function addRemoteImages()
{
// console.log("addRemoteImages");
map.addMapObject(object);
myArray = new Array()
for (var i = 0; i<count; i++){
myArray.push(map.markers[i])
}
myArray.push(object)
map.markers = myArray
}

We also put the entire pushpins object into an Array, so that we can have a track of all the pushpin plotted on the Map. So when ever user switches from Facebook friends List View to Map View it will display the friends location on the Nokia Map.

[edit] Summary

This article shows the use of Nokia Map API along with Facebook API. It also talks about how to create a Map object dynamically using Dynamic Object Management in QML.

[edit] Source Code

The full source code of the example is available here: File:FacebookFriends NokiaMap.zip

[edit] Related Article


Note.pngNote: We will also come up with the same article on Windows Phone 7 . Please share your feedback to improvise the same.

This page was last modified on 24 April 2013, at 09:33.
354 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×