Google+ Integration

[jagtalon]

Uses Google's API to search for people on Google+. It has the same format as the Alternative to plug-in. I'm not sure but it could be better if it had some bio and the most recent post like the Twitter plugin.

https://duckduckhack.uservoice.com/forums/5168-plugins/suggestions/2871127-google-integration

[jagtalon]

Is it possible to call multiple external API calls? I think a second call is needed to get a user's bio or posts.

[garyrh]

@jagtalon No, not yet. I had this same problem with the reddit plugin.

[jagtalon]

Thanks, @MithrandirAgain !

[yegg]

This is possible, it is just not the most straightforward right now. Within the JS callback you can call another endpoint and have it callback another function.

Would the second call have the same format?

The other reason we don't like to do it is because it ends up being significantly slower. One hybrid approach is to do the alternative-to type setup and then have the clicks do a re-query on DDG that triggers a second plugin that displays the bio information. Does that make sense?

[jagtalon]

Hi, @yegg. I think the hybrid approach is a great idea. The user could click on the user's profile (http://i.imgur.com/5big2.png) and it sends another query to DuckDuckGo to display the user's bio information.

Would it still work if it had a different format?

The XKCD plugin looks very similar to this description so I'll try imitating that. Thanks for the tip!

[yegg]

Not sure what you mean by a different format. The Twitter plugin you mentioned is another good one to look at is it has bio information and picture.

[jagtalon]

I have a bit of a problem and I'm not really sure what's happening. Everything is fine when I call the API that searches for Google+ users. Here is an example call that the handler makes:

https://www.googleapis.com/plus/v1/people?query=steve%20martin&maxResults=5&key=AIzaSyD_aE2kPIhGFPiQWFLcNsldSFKfjTkA3nM&callback=ddg_spice_google_plus

But it doesn't work when I change the spice handler function to call something else (I wanted the user's bio) and I think it's because an error occurs in duckpan. The handler calls:

https://www.googleapis.com/plus/v1/people/105409238756204175774?key=AIzaSyD_aE2kPIhGFPiQWFLcNsldSFKfjTkA3nM&callback=ddg_spice_google_plus

and a bunch of error messages appear in the terminal like Body must be bytes and should not contain wide characters. I couldn't check spice.js for errors because my console.log("Hello") wasn't even printing.

Here's the error message. It's a bit lengthy so I did my best to highlight the important things.
Here's the code for the spice handler just in case. It's incomplete but I use it for testing.

I tried the debugging tips on duckduckhack but they don't seem to work. Can anyone help me on this? Thanks!

[jagtalon]

Update:

Whenever I call http://0.0.0.0:5000/js/spice/google_plus/udacity with

spice to => 'https://www.googleapis.com/plus/v1/people?query=$1&key={{ENV{DDG_SPICE_RANDWORD_APIKEY}}}&callback={{callback}}';

the API callback is

// API callback
ddg_spice_google_plus({
 "kind": "plus#peopleFeed",
 "etag": "\"hwUd3NZiCApZB9vzwRg6mpj9rZg/MjMV7G73OPlpoksnGiXoxr91Y1A\"",
 "selfLink": "https://www.googleapis.com/plus/v1/people?query=udacity&maxResults=10",
 "title": "Plus People Search Feed",
 "nextPageToken": "EAoaAA",
 "items": [ ...

which is fine. Then I change it to

spice to => 'https://www.googleapis.com/plus/v1/people/$1?key={{ENV{DDG_SPICE_RANDWORD_APIKEY}}}&callback={{callback}}';

and call http://0.0.0.0:5000/js/spice/google_plus/116286004036789369492 but I get this instead.

Hope this helps!

[jagtalon]

It works now! Sorry for the long comments but I think I know what happened. I first tried it on the profiles of Steve Martin and Udacity and it turns out that their profiles have UTF-8 strings in it (I wish I saw that earlier). Here's an example:

\u003cspan\u003eSteve Martin, one of the most diversified performers in the motion picture industry today—actor,
comedian, author, playwright, producer, musician – has been successful as a writer of and performer in some of the
most popular movies of recent film history.\u003c/span\u003e

But it totally worked on my Google+ profile! It's a limitation but I'll try finishing the plugin anyway.

[jagtalon]

Users can search DDG for Google+ users (a maximum of 5)

Clicking on the user shows a preview of their profile

It shows two links and two organizations at most.

Note: The plugin will fail if profiles with UTF-8 strings are returned by the external API.

[yegg]

Why is UTF8 breaking it though?

[jagtalon]

I'm not sure. Duckpan shows this error. It happens when I get strings like

\u003cspan\u003eSteve Martin, one of the most diversified performers in the motion picture industry today—actor,
comedian, author, playwright, producer, musician – has been successful as a writer of and performer in some of the
most popular movies of recent film history.\u003c/span\u003e

from the API. What can I do to fix this?

[hunterlang]

@yegg it's an issue with duckpan -- I already made the issue, just forgot to say so here. @Getty assures me that he knows what's wrong.
duckduckgo/p5-app-duckpan#2

[jagtalon]

@hunterlang that's good 😃. I think the plugin works pretty well as long as people don't search for foreign names.

[jagtalon]

I almost forgot, you can use this API key to test the plugin AIzaSyD_aE2kPIhGFPiQWFLcNsldSFKfjTkA3nM. Since UTF-8 is already fixed, I can already display the introduction section of a profile. . What can I do to make it shorter? Using object.substring can cut the html tags in the string which might mess up the display.

[moollaza]

@jagtalon Hey, thanks a lot for the plugin, I've been playing around/testing it out and everything seems pretty good. Regarding a few things I've noticed though:

GooglePlus.pm:

1. {{ENV{DDG_SPICE_RANDWORD_APIKEY}}} should be {{ENV{DDG_SPICE_GOOGLE_PLUS_APIKEY}}}
2. For the triggers I think it would be good to add "google plus", "googleplus", maybe even "g+"? (Just trying to think of what the user might type g+ is nice and short

Spice.js:

1. Regarding lines 10-12. I'm not sure changing the value of what the API returned is the best option, as well it looks like your code assumes we'll always get 5 results? I think it would be better to create a limit variable, and do a quick check:

if (google["items"].length > 5) {
limit = 5
} else {
limit = google["items"].length
}

you could also use a ternary if you want it all in one line I suppose.

2. I notice when there is only 1 result returned the "More at Google+" link floats off to the left...not sure I love that, can you add a clear div to make sure it stays below the result?

3. For the user name search I think we should have a header, perhaps something like this:

var query = DDG.get_query();
items[0]['h'] = 'Google+ Users (' + query + ')';

DDG.get_query is a new global function which, well gets the query.
Note you'll need to strip out the trigger word(s) with a regex replace like this line #64.

4. Once the user clicks one of the results I notice the "More at " link, again I think it would be better to say
   "More at Google+"

Other than those few small things the plugin is totally awesome! I hope I don't sound too demanding, let me know what you think and we can go from there.

[jagtalon]

@moollaza It's done! Although I'm having trouble with

var query = DDG.get_query();
items[0]['h'] = 'Google+ Users (' + query + ')';

because it only returns Google+ Users (duckduckhack-template-for-spice). I tried updating duckpan and it still returns the same thing. I also tried following this plugin.

Thanks for the awesome comments!

[moollaza]

@jagtalon Thanks a lot!
Regarding the DDG.get_query(): That's a problem I'm working on as we speak, that only happens locally, don't worry -- its fine when it goes live

[jagtalon]

@moollaza Thanks! I just have to create a regexp that removes the trigger words from the query. Oh, I tried searching google+ google+ and it doesn't hit any plugins. What could be the problem?

[moollaza]

@jagtalon that looks awesome! I'll play around with it some more and then hopefully I can get it deployed today.

Thanks again for all your work!

[moollaza]

@jagtalon Hey, I found a small bug, your regex check for cleaning up the user's url's is actually case sensitive (search "google+ userid:115868784569078797995" ) So, to make it non case-sensitive you need to add and "i" after the last slash in the regex:

var re = /(?:https?:\/\/)?(?:www\.)?([^\/]+).*/;
should be
var re = /(?:https?:\/\/)?(?:www\.)?([^\/]+).*/i;

on that note, because in this example the whole url is ALL CAPS, I think we should first .toLowerCase() the urls and then capitalize the first letter as you have it.

EDIT: Also, I think we should maybe strip out ".com"
EDIT: Just realized you have that already, it just wasn't case-sensitive
EDIT: I'm not thinking straight this morning -- if you just lowercase all the url's first then all your current regex will work, making the case insensitive unnecessary.

[jagtalon]

@moollaza Whoa, I assumed that the links returned are already in lowercase. The links displayed by this profile google+ userid:115868784569078797995 should look better now. Thanks for finding the bug!

[moollaza]

@jagtalon Alright its on GitHub and ready to go live, should be deployed some time soon

Thanks again for all the great work!

[moollaza]

@jagtalon hey, we found a bunch more bugs/visual things I somehow failed to notice:

1. search "g+ duckduckgo" --> click "Nick Meyer" The introduction is justr "..." -- unfortunately it has a value of "
   " so we need to watch out for that. Perhaps a regex check for (\w) to make sure its actually words.

2. On that same profile 'Organizations' has a trailing "," lets get rid of that and make it a "."

3. Lets also add a "." to the end of links

4. Are there other possible sections?

5. search "Zaahir Moolla" - Youtube is repeated in the links which is unfortunately Google's fault as its is actually repeated in the JSON. We need to find a way to keep those out but only if the URL's are identical (which they are in this case)

6. Lets add (Google+) to the header for the user profiles so it looks like: "Zaahir Moolla (Google+)"

[jagtalon]

@moollaza Google returns this value aboutMe: "<br>" -- wouldn't a check for (\w) pass? What do you mean by possible sections? I think I was able to do everything else, thanks for the comments!

[moollaza]

@jagtalon you're right (\w*) will pass wasn't thinking correctly. Possible section, they were wondering if there was more data that could be displayed - I noticed Google gives us relationship status and placed lived -- perhaps we should show those?

Also I think I noticed that your code will display both the tagline and intro if the tagline is present. It should only show the intro if there is no tagline.

Thanks!

[jagtalon]

@moollaza Oh, I was thinking of minimizing the space that it occupies but I'll add it if you guys want. Is this the code? Is it having problems with some users?

        if (google.tagline) {
            out += '<div class="google_profile"><i>Introduction: </i> ' + google.tagline + '</div>';
        } else if(google.aboutMe) {
            out += '<div class="google_profile"><i>Introduction: </i> ' + google.aboutMe.substring(0, 200);
            if(google.aboutMe.length > 200) {
                out += '...' + '</div>';
            } else {
                out += '</div>';
            }
        }

Thanks! Sorry for the numerous bugs in my ZCI!

Edit:
Sometimes, profiles have several links from the same domain. To solve this, I put titles in the links:

What do you think?

[moollaza]

@jagtalon never mind what I said about the "else if" statement -- I'm just crazy.

Regarding the multiple links: yes its good to keep them if the url's aren't identical. For some reason my profile had two links to my YouTube channel which were the same.

[jagtalon]

@moollaza I added just the current place the person is currently living in. What about profiles without a tagline, aboutMe, placesLived? Should I just say "This person has nothing to share with the public."?

[moollaza]

@jagtalon I dont think so, lets just display what they have and not mention what they don't. Also the current location is great, we can leave relationship status out.

[jagtalon]

@moollaza Okay thanks! I just pushed my changes and it should look a lot better than it used to.

[moollaza]

@jagtalon just noticed you fixed the Introduction bug, but it still displays "Introduction:" with just a blank beside it -- can you remove it when there's nothing to display?

[jagtalon]

@moollaza I'm not sure if I have to close it or not because it still returns something (<br>). Maybe I should check if it equals <br>?

[moollaza]

@jagtalon that should work

[jagtalon]

@moollaza Done! Thanks again!

[moollaza]

@jagtalon thanks a lot, it should be live soon -- I found you twitter handle so you'll get a mention when we tweet it out :)

Thanks again!

[jagtalon]

@moollaza Cool, thanks for all your help!

[jagtalon]

@moollaza What if we imitate the shortened links on Hacker News (only remove the http://www and the /)? The current plugin works for things like facebook.com (Facebook) or github.com (Github) but not bbc.com (Bbc) or cnn.com (Cnn).

[moollaza]

@jagtalon sure thing, I think they just force lower case and then strip accordingly.

[moollaza]

@jagtalon btw if you want to make any new changes please make it in a new pull request -- this thread is getting a little long!

[jagtalon]

@moollaza Just made a new pull request, thanks!