Media Społecznos ciowe Google+

Transkrypt

1 Media Społecznos ciowe Google+ Laboratorium 6 Google+ API Zad 1. Łatwo i przyjemnie, czyli jak uniknąć Potrzebna będzie strona internetowa zawierająca obrazek oraz konto Google z aktywną usługą Google+. W ramach Google+ w kręgu powinno być kilka osób. Zaleca się ustawienie awatarów i opisów. Zad Do strony dodaj Google +1 Button skojarzony z obrazkiem z przygotowanej strony. Sprawdź działanie przycisku przy pomocy osób z kręgu i spoza kręgu. Zaobserwuj rezultaty tych interakcji na koncie Google i stworzonej stronie. +1 button przyciski +1 ułatwiają Twoim znajomym znajdowanie ciekawych rzeczy. Gdy dasz wpisowi +1, osoby w twoich kręgach rozszerzonych będą mogły zobaczyć to w strumieniach. Żeby zabrać rekomendację, należy kliknąć powtórnie na przycisk. Dodanie przycisku wymaga umieszczenia 2 kawałków kodu pierwszy stanowi odwołanie do API Google.  <script src=" async defer> {lang: 'pl' </script> Drugi fragment kodu z kolei określa cechy przycisku. Najważniejszy element, to adres elementu (strony jako całości lub jakiejś jej składowej np. obrazku), który otrzyma +1. URL musi być dostępny publicznie, w przeciwnym wypadku wystąpi błąd. <!-- Umieść ten tag w miejscu, w którym ma być widoczny przycisk > <div class="g-plusone" data-annotation="inline" data-width="300" datahref=" Kod przycisku można wygenerować na stronie

2 Na podstawie dokumentacji zmodyfikuj przycisk, aby otrzymał następujący wygląd: Zad Utwórz stronę w ramach Google+ ze skompletowanym profilem i społeczność. Przyjmij za potwierdzeniem kilku użytkowników do społeczności. Do strony dodaj przyciski odznaki (Google+ Badge) dla Twojego profilu użytkownika, strony oraz społeczności. Sprawdź działanie przycisku przy pomocy osób z kręgu i spoza kręgu. Zaobserwuj rezultaty tych interakcji na koncie Google i stworzonej stronie. Są 3 typy odznak (Badge) dodaj do strony odznaki o układzie zaprezentowanym na obrazkach : 1. Profiles ułatwia ludziom odnalezienie Twojego profilu użytkownika i dodanie go do kręgu bezpośrednio z Twojej strony internetowej. Odznaka jest powiązana z URL do profilu użytkownika. 2. Pages ułatwia ludziom odnalezienie Twojej strony utworzonej w Google+. Odznaka jest powiązana z URL strony użytkownika w Google+. 3. Communities ułatwia ludziom odnalezienie Twojej społeczności i skupienie się wokół wspólnej idei lub tematu. Przyjmij jakiegoś użytkownika Google+ do społeczności. Poszczególne odznaki można wygenerować na stronie

3 Zwróć uwagę, że kod do wklejenia w nagłówku strony jest taki sam, jak dla +1 button i nie trzeba go powielać. Zad Dodaj przycisk obserwuj (Google+ Follow) dla Twojego profilu użytkownika oraz strony Google+. Sprawdź działanie przycisku przy pomocy osób z kręgu i spoza kręgu. Zaobserwuj rezultaty tych interakcji na koncie Google i stworzonej stronie. Przycisk obserwuj (Follow button) umożliwia szybkie dodanie twojego profilu lub strony do kręgu klikającego użytkownika. Kod przycisków można wygenerować na stronie Zwróć uwagę, że kod do wklejenia w nagłówku strony jest taki sam, jak dla +1 button i nie trzeba go powielać. Zad Dodaj przycisk współdziel (Google+ Share) dla Twojego profilu użytkownika oraz strony Google+. Przy pomocy przycisku współdziel adres z członkami Twojej społeczności. Sprawdź działanie przycisku przy pomocy osób z kręgu i spoza kręgu. Zaobserwuj rezultaty tych interakcji na koncie Google (w szczególności stronie społeczności) i stworzonej stronie. Kod przycisków można wygenerować na stronie Zwróć uwagę, że kod do wklejenia w nagłówku strony jest taki sam, jak dla +1 button i nie trzeba go powielać. Zad. 1.5 W treści strony osadź publiczny wpis z Google+ z możliwością dodawania komentarzy, celem zebrania opinii. Wpis może zawierać video albo grafikę (ona też zostanie osadzona na stronie). Sprawdź, co można zrobić z tak osadzonym wpisem przy udziale osób z kręgu i spoza kręgu. Zaobserwuj rezultaty tych interakcji na koncie Google (czy komentarze ze strony pojawiły się na koncie Google+?) i stworzonej stronie (czy komentarze dodane w Google+ pojawiły się na stronie?). Na stronie można osadzać wpisy, które zawierają: tekst, hiperłącza, obrazki, filmy. Na stronie nie można osadzać wpisów: Publikowanych w ramach społeczności (Google+ Community)

4 Zastrzeżonych dla domeny Google Apps Prywatnych Typu Event post Typu Hangout on Air Poniższy obrazek przedstawia, jak uzyskać kod potrzebny do osadzenia wpisu na tworzonej stronie. Zad.1.6 W treści strony osadź przycisk uruchamiający Google Hangout. Zaproś kilka osób do rozmowy o watermelon cat i przetestuj możliwości wtyczki. Skonfiguruj przycisk, aby sugerował domyślny zestaw ludzi, z którymi ma być nawiązana rozmowa (2 osoby wg rzeczywistego adresu ; 2 osoby wg rzeczywistego identyfikatora użytkownika Google+; 1 istniejący krąg osób). Zaproszenia mogą być sygnalizowane em, komunikatem w Google+, sygnałem dźwiękowym (jeśli jest wyłączona metoda powiadomienia Ciche zaproszenie ). Aby osadzić na stronie przycisk Hangout wystarczy następujący kawałek kodu <g:hangout render="createhangout"></g:hangout> Aby domyślnie zapraszać do rozmowy określoną grupę osób, należy wykorzystać parametr invites dodając go np. zaraz po parametrze render. Jego struktura dla 3 osób byłaby następująca: invites="[{ id : 'odpowiedni_id1', invite_type : 'typ_zaproszenia1', { id : 'odpowiedni_id2', invite_type : 'typ_zaproszenia2', { id : 'odpowiedni_id3', invite_type : 'typ_zaproszenia1' ]" Przykład zaproszenia 1 osoby przy pomocy adresu invites="[{ id : 'foo@example.com', invite_type : ' ' ]"

5 Pozostałe dostępne typy zaproszeń (inaczej dopuszczalne wartości dla invite_type), to: 1. PROFILE wartość dla id, to identyfikator profilu osoby na Google+. 2. CIRCLE wartość dla id, to identyfikator kręgu na Google+. 3. PHONE wartość dla id, to numer telefonu. Wtedy można zaprosić tylko 1 osobę. Aby uzyskać identyfikator profilu osoby na Google+, można skopiować adres odnośnika do profilu. Ciąg cyfr po ostatnim ukośniku, to identyfikator profilu. Szczegółowa dokumentacja znajduje się pod adresem Zad. 2. A co pod spodem? - Wykonaj Step 1, polegający na aktywacji Google+ API, ze strony Projekt można później usunąć w sekcji Billings&Settings panelu administracyjnego Google. Zad Uruchom poniższy kod (wykorzystuje mechanizm uwierzytelniania OAuth 2.0) i przetestuj jego działanie. Tekst wyświetlony w TextArea przez wywołanie console.log(gapi.auth.gettoken()); będzie podstawą dla kolejnego zadania. <html> <head>  <script src=" <script src=" <script> //dane uwierzytelniające aplikację var config = { 'client_id': ' apps.googleusercontent.com', 'scope': ' ; // BEGIN - SHOW USER PRIMARY //funkcja odpowiedzialna za uwierzytelnienie usera //w rezultacie zalogowania daje komunikaty na konsolę i stronę function auth() { gapi.auth.authorize(config, function() { console.log('login complete'); console.log(gapi.auth.gettoken()); document.getelementbyid('responsecontainer').value = 'Login completed '; );

6 //funkcja odpowiedzialna za uwierzytelnienie usera //jeśli user jest zalogowany, wywołuje funkcję apiclientloaded function showmail() { gapi.auth.authorize(config, gapi.client.load('plus', 'v1', apiclientloaded)); //funkcja wyciągająca dane - obiekt z informacjami o użytkowniku //handle response - wywołanie funkcji wykonującej operacje // na wyciągniętych danych function apiclientloaded() { gapi.client.plus.people.get({userid: 'me').execute(handle response); //funkcji wykonująca operacje na wyciągniętych danych function handle response(resp) { var primary ; //user może mieć wiele i, zwrócone dane zawierają ich tablicę //za główny przyjęto typu 'account' for (var i=0; i < resp. s.length; i++) { if (resp. s[i].type === 'account') primary = resp. s[i].value; //wyświetlenie głównego a i całej odpowiedzi na request w text area document.getelementbyid('responsecontainer').value = 'Primary ' + primary + '\n\nfull Response:\n' + JSON.stringify(resp); // END - SHOW USER PRIMARY </script> </head> <body>  <button onclick="auth()">authorize</button>  <button onclick="showmail()">show </button>  <div id="response" class="hide"> <textarea id="responsecontainer" style="width:100%; height:200px"></textarea> </div> </body> </html> Zad Zmodyfikuj kod aplikacji z zadania 2.1 tak, aby uzyskać funkcjonalność pokazaną na rysunku. W tym celu należy: 1. Dodać przycisk Show user data. 2. Dodać hiperłącze, które będzie prowadzić do profilu zalogowanego użytkownika. 3. Dodać obrazek będący awatarem zalogowanego użytkownika. Kliknięcie przycisku Show user data powoduje następujący ciąg czynności: 1. W TextArea wyświetlają się, w sposób przedstawiony na rysunku, informacje o użytkowniku znajdujące się w obiekcie resp zwróconym przez wywołanie Google API. 2. Hiperłącze dostaje adres konta Google+ zalogowanego użytkownika. 3. Obrazek dostaje adres awatara zalogowanego użytkownika. Najłatwiejszym sposobem realizacji jest powielenie metod JavaScript z sekcji SHOW USER PRIMARY przykładowego kodu. Należy oczywiście zadbać, aby nazwy metod się nie dublowały, a w <BODY></BODY> umieścić odpowiednie elementy interfejsu.

7 Zad Do tworzonej aplikacji dodaj kilka elementów wykorzystanych w zadaniu 1 i sprawdź ich działanie. Zad Dodaj do aplikacji przycisk umożliwiający wylogowanie z aplikacji na żądanie użytkownika. Najprościej w rezultacie kliknięcia przycisku przekierować użytkownika na adres Można wykorzystać funkcję gapi.auth.signout() jednakże nie zawsze udaje się ją zmusić do działania. Wtedy warto spróbować:

8 Użycie funkcji signout(), jako ciała obsługi zdarzenia kliknięcia na przycisk, powoduje jedynie wylogowanie z aplikacji. Natomiast przekierowanie na stronę powoduje wylogowanie ze wszystkich usług Google skojarzonych z danym kontem użytkownika.