Home / Integrating Your Website With Google Gdrive or Google Gtalk, A Presentation by Babson College [October 24, 2012]

Integrating Your Website With Google Gdrive or Google Gtalk, A Presentation by Babson College [October 24, 2012]

Want to learn more about Acquia's products, services, and happenings in the Drupal Community? Visit our site: http://bit.ly/yLaHO5.

Take advantage of the best that Google and Drupal have to offer and hear about the integration of the two platforms. We’ll dive into the new Droogle and Jabber modules that integrate with Gdrive and Gtalk, respectively. In this webinar, you’ll learn:

• How to make any instance of a username on your site show whether the user is online or offline within Google or Drupal, and upon clicking their username in Drupal, start a chat.
• How to let your users interact with each other for instant feedback and live chat conversation within Drupal's asynchronous forums or with Jabber — all without leaving your Drupal instance.
• How Jabber module integrates with Gtalk or any Jabber (XMPP) instant messenger service and brings your Drupal site to the next level of social interactivity, with your customers, for internal communication, to collaborate between students and other students or students and faculty.
• How the Droogle module lists all of your Gdrive documents within Drupal for easy access and facilitates the use of highly productive Gdrive tools for real-time collaboration on documents and document sharing.

Droogle and Jabber are now live at Babson College and they will share their experiences and ideas for future versions of these modules.

Publish on date: 
Wednesday, October 24, 2012
Click to see video transcript

Janet: Hi everyone. Thank you for joining the webinar today. Today’s webinar is integrating your website with Google Gdrive or Google Gtalk with James Barnett who is an architect IPSG from Babson College.

James: Hello everybody. We’ll be talking about Google and Drupal and integrating with Google drive and Google Talk. I'm going to run through my slides first and then I’ll show you some actual websites that in use. I’ll show you some code also that add on GitHub and we will take a little tour here then answer any questions.

We have Google Drive first which we’ve named Droogle; it’s the Droogle module on drupal.org. It got its name because there is Google module for Blackboard and I thought it’s fitting to have just a sillier name for the Drupal community. It was created for Babson College and it’s currently in production. It’s been in production for a few months now. It pulls in all of your documents and folders for display in a site-way context within Drupal or within inorganic group.

There also can be a block on the side of your page in an organic group that shows your group’s documents. We can talk about how to do it within inorganic group in a short while. Babson pulls in Google drive documents for each course. Documents are uploaded via Blackboard is the way we’ve chosen to do it. Then in Google drive they're existing and they're displayed in Blackboard and Drupal within a course context.

Now Babson has courses corresponding to organic groups in Drupal. The way that we do that in Google drive is we have a user corresponding to each organic group. If you have class number 001, you would have a user 001@babson, an email address that access with the Google with the same username as the course. We make sure it has a unique ID; each course has a unique ID through Babson. We use the unique Blackboard ID in fact. It just makes it possible to identify which Google drive user has the right documents for the course.

Droogle I’ll show in the settings page shortly can handle that in setting up inorganic group so that it can pull the right documents. There is some automation that happens behind the scenes and Droogle provides for that. There are reset of APIs that we’ve developed, myself and also another woman Ellen. These guys let you do almost anything in the Google universe. You can create users, you can submit users, you can create documents if you wanted to, you can delete documents, move them around in different folders, you can share them to different documents and folders.
We chose Google and Google drive in particular because their API is so complete. We found some of the other competitors out there maybe didn’t allow for sharing, things have changed in the last six months to a year. One of the competitors didn’t allow sharing of documents. That meant that when you created the organic group in a class through the API in the backend, it’s all automated when we have a new class. You couldn’t automatically through the API share all the documents, just an automated way. That meant it was not going to be useable for us.

Google has done a great job in opening up that API to do almost anything. It is true, just to be weary that the Google API is very dynamic and they’ve been adding the Google drive a lot. It changes a lot and you have to be a little patient and that the code needs to be updated sometimes to take those changes into account. I try to watch the SEQ very carefully and to use it as canary in the coal mine to see if there are any problems with Droogle. It’s great because then the community helps me find if I needed to change my code immediately or something.

Believe it or not they’ll change the XMLs start share once in a while that Drupal sets that and it will break things a little bit, maybe Excel files aren’t showing up correctly, that happened one time. I get the feeling they don’t need to change things so often, but once in a while there’s a snafu and I've seen it that the Excel file won’t show up one day, then they’ll change and then go back the way it was the day after. Usually it’s very stable and it’s going very very smoothly.

Google drive is an exciting thing and they’ve offered the ability to sync your desktop now and more offline support. We are very excited about it. Since we are very excited about it, let them have their documents wherever they go. If they go on a plane, they can have their documents offline. We have a lot of graduate students that are in industry and they're going say part time at night for their MBA and they're on the move. These are sometimes very important executives and they need their documents to go.

We love the Droogle and Gdrive combination. We are still integrating with Blackboard through that. Probably can be a different discussion set up by Blackboard. We pull the documents into Blackboard and the professors can upload the documents there. Droogle does have the ability to upload documents. We are not presently using that but the capability is there. We will go on to the next slide.

Here is Droogle in action in a site-wide context. It’s just slash Droogle once it’s set up and you can see all the documents there. It panels an infinite number of folders which was a bit tricky. Their XML believe it or not comes back without utilizing the next XML structure which is what it’s best at and it’s kind of flat list. I had to store all the memory and kind of sort it and handle that folder structure so it can handle infinite number of folders and documents within.

Here is the Droogle block in an organic group context. You can see that block in the right hand side and it pulls in all the documents into the block for the class. It’s got ease of use. They can log in through Google drive, they’ll have Google accounts, Google and education accounts are free. That takes that into account and we use it. They can do their documents through Google or they can have easy access and click on the link here in Drupal and you will be taken right to their documents.

It’s always about ease of use and helping them find their way to the information that they need in their busy lives; so they can succeed adoption and also continue to do their jobs and to their families all of that. We have another slide here; it’s just the Droogle settings page. You can define a title for the main Droogle page that's the site-wide context. You can set the username, password.

Droogle uses a CCK field for the organic group’s site. You can set up a CCK field and stick it on the setting stage here. You can name the CCK machine name, field, anything you would like. Then it will show up in your organic group page on the node when you click edit, it’s just regular CCK stuff and you can do the password that way as well. Or you can set a site-wide password which is useful to us. Let’s say we have 500 different organic groups or classes in our case. We want to just have one master password. We can just set it all in this page right here.

Maybe it will be questions about CCK afterwards but that’s maybe another seminar in itself. Basically nodes in Drupal you have the ability to dynamically add fields and you just add another field and it ends up on a forum. You can then add in the username and password on said form in the node. The organic group is essentially a node that then is related to other nodes. Basically all the nodes exist within the group and that’s the organic group module which is wonderful.

Now we have Gtalk which is Google’s XMPP chat. Most chats these days are using XMPP if it’s at this level, the Facebook chat, if you have the Google chat, AOL and some Messenger uses XMPP. Most of the chat protocols that are very very big and popular are using XMPP. The history of the word XMPP is that it used to be called Jabber and there are some confusion as to whether or not Cisco owns the name Jabber. This protocol is now called XMPP. It’s really synonymous the words XMPP and Jabber. I have the link here for the Jabber module and drupal.org.

You can read lots about XMPP online, lots of the specs on how to use it. I'm going to go over some of that too. I think it’s a pretty cool underutilized protocol. The Jabber module for Drupal uses a Punjab server which is a BOSH server. It integrates with any federated XMPP jabber server. Here at Babson, we created some DNS entries, they are SRD records. It maps us to the Google talk servers. Its set to like a DNS server so that chat node, that if you're going to send a chat message to jbarnett@babson.edu it allows it to know that it’s really talking to Gtalk and not a Babson hosted jabber server. You can host your own jabber server.

We just choose to integrate with Google talk in their jabber servers because then when they're in the Google universe, when they log in in Google, they can actually chat and talk to people that are in our Drupal application. We've chosen to use Google jabber servers and BOSH basically is the liaison. BOSH does a couple of things. Now there’s HTML and then there’s XMPP. They are different protocols. What happens is in HTML you’ll hit a HTML page on the BOSH server, on the Punjab server and we haven’t tested with other BOSH servers.

I do know what works with Punjab. You will do a long pull; it will talk to that BOSH server HTML page for a long time, in a long total. It means it talks to that page for a long time waiting for incoming messages, sending any messages and it hangs out there as long as it can. Then when it can’t hang out there any longer, it stops and does another get. It goes to the BOSH server again to the HTML page, waits for more incoming traffic or sends any traffic that needs to go and this is what is known as the long pull. You hit that HTML page in the BOSH server. The BOSH server then sends out the information it needs in the XMPP protocol and will send it to the jabber server at Google or if you have your own jabber servers.

That’s how the BOSH server works. The jabber module actually hasn’t been published on Droogle.org for that long. There’s 16 new right now, so has been out there a short while. It’s a little bit more complicated to set up than Droogle because you need this Punjab server. It’s not so hard to set up, but you have jump through a couple of more hoops. I’ll give you some resources for helping you jump through those hoops. On those resources of course you can always be in touch or preferably through the SQL is a great way to talk.

Jabber is working presently adopter now for a few months. Some of the things we run into if we were showing pictures in the roaster for every user. If you have 10 classes or however many classes and it also brings in your personal contacts, if you're using pictures, you're going to want to have them more dynamically not … you don’t want to have 100 pictures glued on a page if you can do without it because its glow sinks down. We started bringing in pictures dynamically when you open up your buddy list. We’ve done lots of trickery.

You can make Droogle API to add people automatically as buddies if you're in the same class. I don’t know if you're familiar with chat but you have to confirm being a buddy. Yes I want to this person’s buddy; they asked to be my friend. If you're at that time when we have it turned on, so it automatically confirms that intake. We've done some backend API calls to allow that to happen and that’s incorporated in the module as well. Some things you do have to do in the back end if you want to go that far like we have.

One thing that happens at jabber is it connects securely through PHP first using a small library I wrote called the PHP Speaks XMPP. The library I put on github and there’s the URL. The reason you want to Speaks XMPP and PHP first is you don’t want to pass the username and password to JavaScript. It would be insecure that way. What happens is if you grab the unique RID and SID, SID is Session ID and RID, I don’t remember off the top of my head what it stands for.

The unique combination of those two numbers, the RID and the SID is the equivalent of a password. What you can do is then pass the RID and SID to the JavaScript library we’re using which is strophe. Strophe is a module that’s been published in the web and it’s been tested for quite some time. Where everything is handled that needs to happen in XMPP, in chat. You attach the RID and SID to strophe. Then you end up taking over that session. In this way it’s completely secure.

What's nice about having the PHP Speaks, XMPP and JavaScript libraries is you have a large array of tools to do what you want to do. If you want to do some backend stuff with chat, I mean PHP can do that. If you want to utilize the JavaScript, you can do that. Now I’ll be showing off more about these technologies in a little bit. I think they are really cool and underutilized.

I'm going to point out a book that goes into a lot of depth about XMPP. XMPP, this book points out; I think it’s really interesting is you don’t have to just do chat with XMPP. You can have a game. You can have tic-tac-toe, you can have any sort of game that passes information in real time back and forth. A real time drawing app, you can mimic Gdrive itself and have dynamic authoring, people authoring a document at the same time, it’s really just passing information back and forth. It’s a really underutilized protocol that I've really come to admire.

There’s the URL for strophe here. Here’s the name of the book. I actually have a spelling error here. I’ll fix it when we post the slides to the web. It’s a Professional XMPP. That should be XMPP not XMLL. Professional XMPP Programming with JavaScript and Jquery by Jack Motiff. Jack is very active in Google Groups. That’s where he has an issue queue. He’s supporting strophe and he helps support Punjab. He was very very helpful along my journey in learning all these stuff. His book is really well done. Easy to read believe it or not because it’s a very complex subject. He did a great job with it. I really recommend his book. You can find him online.

Usually when he posted the Google Group’s queue, that’s an easily Googleable thing. You can find the XMPP, I see this strophe. If you Google strophe it says Google Groups, you will find his group very quickly. Jack will personally answer a lot of your questions and he’s really been great. Here’s a screenshot of Jabber. You see have apps and Drupal developing group. Usually that would be a class finance 101 or something. We have a class called Drupal Development, Apps and Drupal Development and we have Wikis in there that we use in our development shop. We have discussions there.

It’s also an organic group and as a class so we can also see what students are seeing, how the software is performing. Right here you see our groups here and these are all the group members as part of our team here. You can see its green next to someone who’s online and it does turn red if they choose to be busy and grey if they're just offline. Actually you see the little bubbles in the forum; there are little circles there too next to usernames. The bubbles will turn green and red anywhere that same username is used on the page.

If anywhere that a username appears on the page, we give their chat status and if you click on that little bubble, you can send a chat to that user right from that username. There’s another screen here. We are actually going to redesign this to look more like Google does chat, how Facebook does chat, we saw that’s how students are emphatically are used to seeing it. We are just going to give them that so there’s no confusion. This utilizes in strophe and jabber out of the box.

They use the tab structure where if you have a new chat, it uses Jquery UI tabs to open up another chat window and that’s what you’ve got with the jabber module. Whether or not we have an alternative theme public or drupal.org, I'm not sure we will see. Everything is in a theme conscious and if you choose to theme it differently, you have that ability with the jabber module. You can overwrite the look and feel.

Tips and tricks. The way that we do it so that we know if any username mentioned on the page is online or offline or busy is use the same class in the roaster as you do with the username. You use theme username. If you have the same class and say with CSS, that class dot username is green and online, then every instance of that class will show green as well. It’s a pretty neat trick and you can use theme username to overwrite what your username looks like on the page and you can consult the Drupal documentation for how to use theme username. It’s a great cool trick.

Breathing through my slides here. Here are some actually XMPP. I’ll show you, I'm going to share my screen and I’ll show you a little bit more of that. Just sharing my screen here, hold on. Here is a user online about @babson he's green. I have it in debug mode, so you can see a bit more. People are here. Let’s see, I must have gone offline there for a second. You can see down below these are the XMPP messages. It’s only because I commented something in here.

Here’s the actual code from strophe and I stuck a consult log here so that you can see the XMPP up. Usually this is fire bug here. I have it in debug mode. You can see some of the chats messages that I sent in raw XMPP. Actually the body tag is for the jabber server only. Jabber is actually from here until that end body tag. Here it is. This is actually XMPP right here that I have. I hope you can see the blue highlighted.

To send it through BOSH as a conduit you wrap it in this body tag. I can show you here’s the PHPC XMPP and I’ll run you through the library. I was very frustrated using other PSP libraries out there that you, XMPP they were very very complex. I didn’t see a good reason for it, for the complexity. I thought there are a few lines to code as possible and it’s very easy to read. We will just look at the functions. This function here, jabber send XML, that's what just sends the XMPP through the BOSH server. Jabber gets next RID. What happens is you get a unique SID, that doesn’t change, that’s actually an ID. Then each message, the RID number, it’s just a number. It increases by one.

You constantly have to keep incrementing that RID and if you don’t get the next RID, your chat session will just disconnect. Basically it needs that incrementing RID and SID to continue the session. We are sending the XMPP just using CURL, get jabber, get RID, SID. You're sending your password, you're authenticating, you're getting your first RID and also getting your session ID.

Right here, here are some things you're going to send and its some authentication stuff right here as I've just mentioned and here’s an actual message. This is what sending a message looks like. I'm going to send myself a message. I'm sending to one of my instant message accounts, my other Gmail account. This text has to load from my PHP XMPP API. That actually sends the text. That’s that, it’s a very simple little library I wrote so that you can get your SID and RID so you can securely authenticate and then passing that to strophe. I let strophe do most of the work because that’s what we do here adopting.

If things are a commodity, you don’t want to re-invent the wheel. It’s just silly to re-invent the wheel of course. Also strophe has already been tested. I heard lots of people say that XMPP modules can often times really hammer the server because there’s a lot of traffic. Basically I’ll bring this up gain. Constantly, let’s see if we can find it. Do you see this; its prowling here, this is the long pull. It’s talking to the BOSH server and hanging out there. When it’s done, it’s going to sign up another one of this.

There is a lot of traffic. If you’ve got say 100 users, you’ve got some more messages right there. Maybe you saw that at the bottom of the screen. You constantly have the traffic and if people leave their browsers open, that’s a lot of network traffic. I heard that with some other libraries or home grown things, it can handle things inefficiently and really take down a server. Like I said at the jabber module has been running successfully now for a couple of months at Babson.

We have some other performance things that we are working on but it’s not because of jabber. We’re trying to make things faster, fix our team up. Like I said we’re dealing with these pictures, the people who’d like to see a rich theme, like a lot of pictures we’re are dealing with a lot of sprites and making things faster. Luckily jabber has not bitten me from behind and it seems fairly fast.

Now that being said, if you’ve ever gone to Gmail and you know they have chat on their page, there is a pregnant pause as it connects to a chat, even in Google. I say it takes about an extra half second to a second and then you're on your way. It’s really no slower than what Gmail has. We do have it running on every page of our site. What we do is on every page currently we just get a new RID, SID and reattach the chat. I can show you how we keep track of chat history. Jabber does keep track of chat history.

Here is the jabber cable here. Here’s your current user JID. In chat JID is the unique handle that you … if you send me a chat at jbarnett@babson.edu, that’s my handle and my unique identifier, that's the JID. This is your current user JID and this is your conversation partner JID. We keep track of this chat messages. Jabber will on switching pages load up that chat history up to like, I think it’s like 15, 20 messages per person per chat partner. That’s just to keep the continuity between the pages. If you create pages, you're like, oh you know what? Let me go to this page. I want to tell you about this page.

Let me go look to see what it says. You switch pages and you can pick up right where you left off in your chat with that person and we’re hoping that’s a very good experience. Feedback from our student is they are very happy to be able to collaborate right from this tool. They may start a conversation in jabber, in Drupal but then they might say, “Hey let’s move to Google hangouts.” Let’s move to another tool or just go hang out in Google. Because they're in Drupal, they might be reading the post for their class, their forums for different classes.

They might be seeing it … you can go into Drupal and see if a professor is online. You can see if a classmate that you're collaborating with is online. We have breakout groups and people work in groups in the different classes and they can just quickly go online and see if they're online. Then if they want to go to Google, hang out, that’s fine. We don’t have a current plan to integrate video, but we will see what people are asking for.

Again we are not looking to re-invent the wheel. We are getting great feedback that people like to see who’s available and maybe just send the teacher or classmate a quick question. We’ve gotten some great feedback there. I spent a lot of time with jabber and I definitely didn’t talk about Drupal as much. The cool stuff with Drupal is not only pulling in the documents, but the APIs where you can … let’s see if I can get … this is where I upload the stuff to drupal.org. Here at Googletest.php, I keep a lot of these things commented out.

You can create a collection, they're commented out because they only do one test at a time and I comment out the unused test. You can create through the API, just through the command line a collection which is a folder basically in Google drive. This looks like one line here and there, change permissions on a folder; you can add users, retrieve user information. It’s got a very rich library that we've been able to contribute to the community. Babson has been very generous in letting us share.

Our hope is that not only will people consume this module, but maybe other people will have to contribute and I’ll be happy to work with you if you want to be a co-contributor. If you want to just add patches, I love if there are patches then we can make Droogle and jabber better with everybody’s help. I love hearing if there are any problems, if you have any bugs, it helps us. Sometimes the community finds the bugs before we do. We haven’t had any bug reports in a while.

There are some issues with Droogle with the version of PHP. I’ll be addressing that shortly. Possibly using Droogle as you say in Drupal Six. I'm a little slower in finding the Drupal Seven bugs but the Drupal Seven version, it is out there. Jabber we are using in Drupal Six and Drupal Seven. I think we are going to open things up to questions. I'm not sure Brian or Janet are listening, but …

Janet: Hi James. Yes I'm right here. We had a couple of questions coming in. I just want to announce that if anybody has any additional questions, please ask them in the Q&A tab of the WebEx that you're right now. The first question we had was a question on the Google docs’ module. Does the user must have a Google account? They are asking do you have to have a Google account for the Google docs’ module.

James: Yes, the answer is yes. You can have an individual account if you like and you can store your docs in your Google accounts. If you have a personal account and just have your own blog, yes you can do it that way. You’ll probably be using this site-wise context and not the organic group context. Yes you can definitely do that. Or if you have a Google for business account, or Google for education account, they're really the same thing. You can do it that way as well. Yes you can do either way but you need a Google account.

Janet: Okay, great. The next one is, is there a way to use the Google docs module with files depot module?

James: I'm not familiar with the file depot module, so I can’t really speak to that.

Janet: Okay. Great. That’s it for questions. If anybody has any other question, could you please ask them now? All right, I guess that's it. Thank you everyone for attending. Thank you James for the great presentation. Again files and recording of the webinar will be posted to the website (acquia.com) 48 hours and we will email them out to you as well. Thank you.