SlideShare a Scribd company logo
1 of 48
Building OpenSocial
    Applications
  for LinkedIn’s Application Platform
Orientation
What is OpenSocial?
“OpenSocial defines a common API for social
applications across multiple websites. Built from
standard JavaScript and HTML, developers can
create apps with OpenSocial that access a social
network's friends and update feeds. By using a
common API, developers can extend the reach of
their applications more quickly, yielding more
functionality for users.”
What can applications do?




Encourage communication & collaboration
between members
What can applications do?




Allow members to be more expressive in how
they present their professional identities
What can applications do?




Provide novel functionality that leverages a
member’s LinkedIn Network in a moment of
need
Vocabulary
They’re not widgets
Or Gidgets...
They’re Gadgets!
And a Gadget is really
   just a mask for
 something greater...
OpenSocial Gadgets
are just one face of an
      Application



  Website   REST   OpenSocial
Meet the Actors



              The VIEWER

Always the Member currently viewing the gadget.
Meet the Actors



              The OWNER

The member who owns the profile being looked at.
   Sometimes also the owner of a canvas page.
Meet the Container




    A Container is a Social Network that
  provides an environment for OpenSocial
Javascript and REST calls, “views” for gadgets
  to surface on, and underlying Social Data.
Meet the Views




                        Home Page
• Primary point of entry for members
• Owner & Viewer are always the same
• Content should be focused on the Member’s interaction with the
application
Meet the Views




                       Profile Page
• Owner is the person who owns the profile
• Information displayed is seen by all who visit the profile
• Content should be focused on what the member does with the
application
Meet the Views




                        Canvas Page
• Serves many purposes & contexts for an application
• Owner & Viewer might not be the same. Owner is determined by
how it was navigated to.
• Content can be anything related to the application
Let’s get Technical.
Dig the new Science!



•   Technologies Involved

•   Accessible Social Data

•   Viral Features (Messaging, Network Updates)

•   Iterative Hello, World! Example
Technologies
• Javascript (for Controller,View, and Model
  logic)
• JSON (for Social Data in gadget or using in
  OpenSocial REST APIs)
• XML (for Gadget Spec, optional REST)
• HTML (for your View layer)
• REST (for interacting with your server or
  using OpenSocial REST APIs)
Social Data
•   Person
     • friends (connections)
     • id
     • name ( givenName, familyName, unstructured )
     • thumbnailUrl
     • aboutMe
     • currentLocation ( unstructured )
     • jobs ( title, name, description, field, startDate, endDate,)
     • schools ( name, startDate, endDate )
     • urls
     • linkedin-ext ( require the feature in your gadget spec )
        • numConnections
        • distance


                                For more detail on fields available:
           http://code.google.com/apis/opensocial/docs/0.8/reference/#opensocial.Person
the Gadget Spec
Defines an Application

           This is all ceremony.
Virality
  Connection Messaging
requestSendMessage() / requestShareApp()
 On LinkedIn, messages can be sent to 1st degree connections using this function. User
 will be diverted to standard message sending flow. The Javascript callback will never be
 called.


     Network Updates
requestCreateActivity()
 Creates a Network Update on behalf of the Viewer of the
 application. Updates should be contextual based on a user action.
 Good: “Taylor is reading In Watermelon Sugar.”
 Bad: “Taylor just installed this lame application.”
Let’s Begin.

• Start with Hello, World!
• Sprinkle some Social Data
• Support some Views
• Phone Home to your Server
• Celebrate!
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot;>
  <Require feature=quot;opensocial-0.8quot; />
 </ModulePrefs>
 <Content type=quot;htmlquot;>
  <![CDATA[
    Hello, world!
  ]]>
 </Content>
</Module>
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot;>
  <Require feature=quot;opensocial-0.8quot; />
 </ModulePrefs>
 <Content type=quot;htmlquot;>
  <![CDATA[                                I’m a silly joke,
    Hello, world!                         executed poorly.

                                         Still, I’d like to help
  ]]>                                  you write your gadget
                                                   spec!
 </Content>
</Module>
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot;>
  <Require feature=quot;opensocial-0.8quot; />
 </ModulePrefs>
 <Content type=quot;htmlquot;>
  <![CDATA[
    Hello, world!
  ]]>
 </Content>
</Module>
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
                                                   Add OpenSocial features
<Module>
 <ModulePrefs title=quot;Hello World!quot;>
  <Require feature=quot;opensocial-0.8quot; />
 </ModulePrefs>
 <Content type=quot;htmlquot;>      Prepare View Content

  <![CDATA[
    Hello, world!
  ]]>
 </Content>
</Module>
Hello, world!
    From gadget metadata




                From your <Content> block
Adding Social Data

1. Setup a new DataRequest object
2. Add a new fetchPerson request for Actors you
   need data for, fetchPeople requests for
   collections like friends, arrays of member ids...
3. Execute the request with request.send,
   specifying a callback that will act on the data
Adding Social Data
Do something in your
     callback...
Tell the container to
execute this on load...



         This is like body onLoad in normal
                        HTML
And something like this
  will be your result.
Views
Functions to Know
      Get a View Object
var view = new gadgets.views.View(quot;viewName”);

 viewName in this case would be one of our supported views: canvas, profile, home
 You need a view object to request navigation to it.



  Navigate Between Views
gadgets.views.requestNavigateTo(view, optionalParameters)
  This initiates a transition from one view to another.
    • You can’t specify an Owner or Viewer in this context. It carries over from the last.
    • You use this function in an onClick event for a link
    • optionalParameters are JSON-format parameters to be passed only to a Canvas
    page. How to get these parameters on the next page will be detailed on the next
    slide
Functions to Know
 Receive URL Parameters
gadgets.views.getParams()

 Parameters sent via requestNavigateTo (or provided by other means of generating a
 canvas URL) are accessible through this function in JSON Hash format.



    Adjust View Height
gadgets.window.adjustHeight()

 Adjusts the height of your gadget frame, while trying to auto-magically guess how
 much space you need, within the confines of the allowed height. Not always accurate.
   • You can specify an integer representing the exact pixel height to extend to.
Add Support for Views to Your Gadget
           First to ModulePrefs
Add Support for Views to Your Gadget
            Then Change Your
             Content Blocks




                    (You set the view for the block here)
Add Support for Views to Your Gadget
            Then Change Your
             Content Blocks
                     (You set the view for the block here)
Navigation
             Set up params to pass to
                      canvas




             Inspect the params on the
                       canvas
Navigation
       Your link will carry your params...

       gadgets.views.requestNavigateTo




         And you receive them here!

           gadgets.views.getParams()
How to Phone Home
How to Phone Home
               Use gadgets.io.makeRequest()




        Inbound to your server, you’ll receive these parameters:
                      opensocial_owner_id
                     opensocial_viewer_id
                       opensocial_app_id
                       opensocial_app_url

 In addition, you’ll receive an OAuth signature for parameter validation.
Implementation depends on your server-side language and is beyond the
                            scope of this tutorial.
How to Phone Home
            Processing the Callback




• If your content type in the response is HTML, your
  response variable would be a string with that HTML.
• If your content type in the response is JSON, it will
    automatically be destringified into a JSON object.
Celebrate!
What now?!




         You’ve got a lot of reading to do!
http://code.google.com/apis/opensocial/docs/0.8/reference/

More Related Content

What's hot

Go language presentation
Go language presentationGo language presentation
Go language presentationparamisoft
 
Go Programming language, golang
Go Programming language, golangGo Programming language, golang
Go Programming language, golangBasil N G
 
ATO 2014 - So You Think You Know 'Go'? The Go Programming Language
ATO 2014 - So You Think You Know 'Go'? The Go Programming LanguageATO 2014 - So You Think You Know 'Go'? The Go Programming Language
ATO 2014 - So You Think You Know 'Go'? The Go Programming LanguageJohn Potocny
 
really really really awesome php application with bdd behat and iterfaces
really really really awesome php application with bdd behat and iterfacesreally really really awesome php application with bdd behat and iterfaces
really really really awesome php application with bdd behat and iterfacesGiulio De Donato
 
[INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno
 [INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno [INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno
[INNOVATUBE] Tech Talk #3: Golang - Takaaki MizunoNexus FrontierTech
 
Getting started with Go - Florin Patan - Codemotion Rome 2017
Getting started with Go - Florin Patan - Codemotion Rome 2017Getting started with Go - Florin Patan - Codemotion Rome 2017
Getting started with Go - Florin Patan - Codemotion Rome 2017Codemotion
 
An introduction to go programming language
An introduction to go programming languageAn introduction to go programming language
An introduction to go programming languageTechnology Parser
 
Dependency management in golang
Dependency management in golangDependency management in golang
Dependency management in golangRamit Surana
 
Golang for PHP programmers: A practical introduction
Golang for PHP programmers: A practical introductionGolang for PHP programmers: A practical introduction
Golang for PHP programmers: A practical introductionRichard Tuin
 
Building Command Line Tools with Golang
Building Command Line Tools with GolangBuilding Command Line Tools with Golang
Building Command Line Tools with GolangTakaaki Mizuno
 
Let the contribution begin (EST futures)
Let the contribution begin  (EST futures)Let the contribution begin  (EST futures)
Let the contribution begin (EST futures)SeongJae Park
 
Lets Go - An introduction to Google's Go Programming Language
Lets Go - An introduction to Google's Go Programming Language Lets Go - An introduction to Google's Go Programming Language
Lets Go - An introduction to Google's Go Programming Language Ganesh Samarthyam
 
A First Look at Google's Go Programming Language
A First Look at Google's Go Programming LanguageA First Look at Google's Go Programming Language
A First Look at Google's Go Programming LanguageGanesh Samarthyam
 
NodeJS vs Golang - A detailed comparison
NodeJS vs Golang - A detailed comparisonNodeJS vs Golang - A detailed comparison
NodeJS vs Golang - A detailed comparisonDevathon
 
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn [INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn Nexus FrontierTech
 
Go Programming Language by Google
Go Programming Language by GoogleGo Programming Language by Google
Go Programming Language by GoogleUttam Gandhi
 
Plugin Development for Beginners
Plugin Development for BeginnersPlugin Development for Beginners
Plugin Development for BeginnersJoe Cartonia
 

What's hot (19)

Golang
GolangGolang
Golang
 
Go language presentation
Go language presentationGo language presentation
Go language presentation
 
Go Programming language, golang
Go Programming language, golangGo Programming language, golang
Go Programming language, golang
 
ATO 2014 - So You Think You Know 'Go'? The Go Programming Language
ATO 2014 - So You Think You Know 'Go'? The Go Programming LanguageATO 2014 - So You Think You Know 'Go'? The Go Programming Language
ATO 2014 - So You Think You Know 'Go'? The Go Programming Language
 
really really really awesome php application with bdd behat and iterfaces
really really really awesome php application with bdd behat and iterfacesreally really really awesome php application with bdd behat and iterfaces
really really really awesome php application with bdd behat and iterfaces
 
[INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno
 [INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno [INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno
[INNOVATUBE] Tech Talk #3: Golang - Takaaki Mizuno
 
Getting started with Go - Florin Patan - Codemotion Rome 2017
Getting started with Go - Florin Patan - Codemotion Rome 2017Getting started with Go - Florin Patan - Codemotion Rome 2017
Getting started with Go - Florin Patan - Codemotion Rome 2017
 
An introduction to go programming language
An introduction to go programming languageAn introduction to go programming language
An introduction to go programming language
 
Dependency management in golang
Dependency management in golangDependency management in golang
Dependency management in golang
 
Golang for PHP programmers: A practical introduction
Golang for PHP programmers: A practical introductionGolang for PHP programmers: A practical introduction
Golang for PHP programmers: A practical introduction
 
Building Command Line Tools with Golang
Building Command Line Tools with GolangBuilding Command Line Tools with Golang
Building Command Line Tools with Golang
 
Let the contribution begin (EST futures)
Let the contribution begin  (EST futures)Let the contribution begin  (EST futures)
Let the contribution begin (EST futures)
 
Lets Go - An introduction to Google's Go Programming Language
Lets Go - An introduction to Google's Go Programming Language Lets Go - An introduction to Google's Go Programming Language
Lets Go - An introduction to Google's Go Programming Language
 
A First Look at Google's Go Programming Language
A First Look at Google's Go Programming LanguageA First Look at Google's Go Programming Language
A First Look at Google's Go Programming Language
 
NodeJS vs Golang - A detailed comparison
NodeJS vs Golang - A detailed comparisonNodeJS vs Golang - A detailed comparison
NodeJS vs Golang - A detailed comparison
 
Beginning development in go
Beginning development in goBeginning development in go
Beginning development in go
 
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn [INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn
[INNOVATUBE] Tech Talk #3: Golang - Vũ Nguyễn
 
Go Programming Language by Google
Go Programming Language by GoogleGo Programming Language by Google
Go Programming Language by Google
 
Plugin Development for Beginners
Plugin Development for BeginnersPlugin Development for Beginners
Plugin Development for Beginners
 

Similar to Developing for LinkedIn's Application Platform

Google Devfest Singapore - OpenSocial
Google Devfest Singapore - OpenSocialGoogle Devfest Singapore - OpenSocial
Google Devfest Singapore - OpenSocialPatrick Chanezon
 
Jaoo - Open Social A Standard For The Social Web
Jaoo - Open Social A Standard For The Social WebJaoo - Open Social A Standard For The Social Web
Jaoo - Open Social A Standard For The Social WebPatrick Chanezon
 
OpenSocial Intro
OpenSocial IntroOpenSocial Intro
OpenSocial IntroPamela Fox
 
BarCamp KL H20 Open Social Hackathon
BarCamp KL H20 Open Social HackathonBarCamp KL H20 Open Social Hackathon
BarCamp KL H20 Open Social Hackathonmarvin337
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
Goodle Developer Days Madrid 2008 - Open Social Update
Goodle Developer Days Madrid 2008 - Open Social UpdateGoodle Developer Days Madrid 2008 - Open Social Update
Goodle Developer Days Madrid 2008 - Open Social UpdatePatrick Chanezon
 
Goodle Developer Days Munich 2008 - Open Social Update
Goodle Developer Days Munich 2008 - Open Social UpdateGoodle Developer Days Munich 2008 - Open Social Update
Goodle Developer Days Munich 2008 - Open Social UpdatePatrick Chanezon
 
Goodle Developer Days London 2008 - Open Social Update
Goodle Developer Days London 2008 - Open Social UpdateGoodle Developer Days London 2008 - Open Social Update
Goodle Developer Days London 2008 - Open Social UpdatePatrick Chanezon
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009Christopher Judd
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitIMC Institute
 
Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introductionmatt-briggs
 
Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Clarence Ngoh
 

Similar to Developing for LinkedIn's Application Platform (20)

Google Devfest Singapore - OpenSocial
Google Devfest Singapore - OpenSocialGoogle Devfest Singapore - OpenSocial
Google Devfest Singapore - OpenSocial
 
Jaoo - Open Social A Standard For The Social Web
Jaoo - Open Social A Standard For The Social WebJaoo - Open Social A Standard For The Social Web
Jaoo - Open Social A Standard For The Social Web
 
OpenSocial Intro
OpenSocial IntroOpenSocial Intro
OpenSocial Intro
 
BarCamp KL H20 Open Social Hackathon
BarCamp KL H20 Open Social HackathonBarCamp KL H20 Open Social Hackathon
BarCamp KL H20 Open Social Hackathon
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Goodle Developer Days Madrid 2008 - Open Social Update
Goodle Developer Days Madrid 2008 - Open Social UpdateGoodle Developer Days Madrid 2008 - Open Social Update
Goodle Developer Days Madrid 2008 - Open Social Update
 
Opensocial
OpensocialOpensocial
Opensocial
 
Goodle Developer Days Munich 2008 - Open Social Update
Goodle Developer Days Munich 2008 - Open Social UpdateGoodle Developer Days Munich 2008 - Open Social Update
Goodle Developer Days Munich 2008 - Open Social Update
 
Open Social Summit Korea
Open Social Summit KoreaOpen Social Summit Korea
Open Social Summit Korea
 
Goodle Developer Days London 2008 - Open Social Update
Goodle Developer Days London 2008 - Open Social UpdateGoodle Developer Days London 2008 - Open Social Update
Goodle Developer Days London 2008 - Open Social Update
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
Open social
Open socialOpen social
Open social
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introduction
 
Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)Having Fun Building Web Applications (Day 1 Slides)
Having Fun Building Web Applications (Day 1 Slides)
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

Developing for LinkedIn's Application Platform

  • 1. Building OpenSocial Applications for LinkedIn’s Application Platform
  • 3. What is OpenSocial? “OpenSocial defines a common API for social applications across multiple websites. Built from standard JavaScript and HTML, developers can create apps with OpenSocial that access a social network's friends and update feeds. By using a common API, developers can extend the reach of their applications more quickly, yielding more functionality for users.”
  • 4. What can applications do? Encourage communication & collaboration between members
  • 5. What can applications do? Allow members to be more expressive in how they present their professional identities
  • 6. What can applications do? Provide novel functionality that leverages a member’s LinkedIn Network in a moment of need
  • 11. And a Gadget is really just a mask for something greater...
  • 12. OpenSocial Gadgets are just one face of an Application Website REST OpenSocial
  • 13. Meet the Actors The VIEWER Always the Member currently viewing the gadget.
  • 14. Meet the Actors The OWNER The member who owns the profile being looked at. Sometimes also the owner of a canvas page.
  • 15. Meet the Container A Container is a Social Network that provides an environment for OpenSocial Javascript and REST calls, “views” for gadgets to surface on, and underlying Social Data.
  • 16. Meet the Views Home Page • Primary point of entry for members • Owner & Viewer are always the same • Content should be focused on the Member’s interaction with the application
  • 17. Meet the Views Profile Page • Owner is the person who owns the profile • Information displayed is seen by all who visit the profile • Content should be focused on what the member does with the application
  • 18. Meet the Views Canvas Page • Serves many purposes & contexts for an application • Owner & Viewer might not be the same. Owner is determined by how it was navigated to. • Content can be anything related to the application
  • 20. Dig the new Science! • Technologies Involved • Accessible Social Data • Viral Features (Messaging, Network Updates) • Iterative Hello, World! Example
  • 21. Technologies • Javascript (for Controller,View, and Model logic) • JSON (for Social Data in gadget or using in OpenSocial REST APIs) • XML (for Gadget Spec, optional REST) • HTML (for your View layer) • REST (for interacting with your server or using OpenSocial REST APIs)
  • 22. Social Data • Person • friends (connections) • id • name ( givenName, familyName, unstructured ) • thumbnailUrl • aboutMe • currentLocation ( unstructured ) • jobs ( title, name, description, field, startDate, endDate,) • schools ( name, startDate, endDate ) • urls • linkedin-ext ( require the feature in your gadget spec ) • numConnections • distance For more detail on fields available: http://code.google.com/apis/opensocial/docs/0.8/reference/#opensocial.Person
  • 23. the Gadget Spec Defines an Application This is all ceremony.
  • 24. Virality Connection Messaging requestSendMessage() / requestShareApp() On LinkedIn, messages can be sent to 1st degree connections using this function. User will be diverted to standard message sending flow. The Javascript callback will never be called. Network Updates requestCreateActivity() Creates a Network Update on behalf of the Viewer of the application. Updates should be contextual based on a user action. Good: “Taylor is reading In Watermelon Sugar.” Bad: “Taylor just installed this lame application.”
  • 25. Let’s Begin. • Start with Hello, World! • Sprinkle some Social Data • Support some Views • Phone Home to your Server • Celebrate!
  • 26. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
  • 27. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ I’m a silly joke, Hello, world! executed poorly. Still, I’d like to help ]]> you write your gadget spec! </Content> </Module>
  • 28. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
  • 29. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> Add OpenSocial features <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> Prepare View Content <![CDATA[ Hello, world! ]]> </Content> </Module>
  • 30. Hello, world! From gadget metadata From your <Content> block
  • 31. Adding Social Data 1. Setup a new DataRequest object 2. Add a new fetchPerson request for Actors you need data for, fetchPeople requests for collections like friends, arrays of member ids... 3. Execute the request with request.send, specifying a callback that will act on the data
  • 33. Do something in your callback...
  • 34. Tell the container to execute this on load... This is like body onLoad in normal HTML
  • 35. And something like this will be your result.
  • 36. Views
  • 37. Functions to Know Get a View Object var view = new gadgets.views.View(quot;viewName”); viewName in this case would be one of our supported views: canvas, profile, home You need a view object to request navigation to it. Navigate Between Views gadgets.views.requestNavigateTo(view, optionalParameters) This initiates a transition from one view to another. • You can’t specify an Owner or Viewer in this context. It carries over from the last. • You use this function in an onClick event for a link • optionalParameters are JSON-format parameters to be passed only to a Canvas page. How to get these parameters on the next page will be detailed on the next slide
  • 38. Functions to Know Receive URL Parameters gadgets.views.getParams() Parameters sent via requestNavigateTo (or provided by other means of generating a canvas URL) are accessible through this function in JSON Hash format. Adjust View Height gadgets.window.adjustHeight() Adjusts the height of your gadget frame, while trying to auto-magically guess how much space you need, within the confines of the allowed height. Not always accurate. • You can specify an integer representing the exact pixel height to extend to.
  • 39. Add Support for Views to Your Gadget First to ModulePrefs
  • 40. Add Support for Views to Your Gadget Then Change Your Content Blocks (You set the view for the block here)
  • 41. Add Support for Views to Your Gadget Then Change Your Content Blocks (You set the view for the block here)
  • 42. Navigation Set up params to pass to canvas Inspect the params on the canvas
  • 43. Navigation Your link will carry your params... gadgets.views.requestNavigateTo And you receive them here! gadgets.views.getParams()
  • 44. How to Phone Home
  • 45. How to Phone Home Use gadgets.io.makeRequest() Inbound to your server, you’ll receive these parameters: opensocial_owner_id opensocial_viewer_id opensocial_app_id opensocial_app_url In addition, you’ll receive an OAuth signature for parameter validation. Implementation depends on your server-side language and is beyond the scope of this tutorial.
  • 46. How to Phone Home Processing the Callback • If your content type in the response is HTML, your response variable would be a string with that HTML. • If your content type in the response is JSON, it will automatically be destringified into a JSON object.
  • 48. What now?! You’ve got a lot of reading to do! http://code.google.com/apis/opensocial/docs/0.8/reference/