#CLUS
Stève Sfartz, API Evangelist
DEVNET-3891
WebexTeamsWidgets
Technical Drill down
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
/Cisco/DevNet/SteveSfartz
• API Evangelist @CiscoDevNet
• API Design,Architecture and Operations
• WebexTeams & xAPI developer
• hosted @CiscoROI: Paris Innovation Center
• Node.js mainly, a bit of #golang
• Europe and all over the world
• github: //ObjectIsAdvantag
“vision without
execution is
hallucination”
-- Thomas Edison
mailto: stsfartz@cisco.com
twitter: @SteveSfartz
DEVNET-3891 2
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Agenda
• Meet theWidgets
• Embedding inWeb applications
• CSS customization
• Introduction to React
• Injecting access tokens dynamically
• Adding custom activities to the ‘Space’Widget
• Interacting with « Permanent guests »
• Roadmap,Contributions, Q&A
Beginner
Advanced
Intermediate
DEVNET-3891 3
Meet the
WebexTeamsWidgets
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 5
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
‘Recents’
DEVNET-3891 6
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
‘Space’
DEVNET-3891 7
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Recents
Space
DEVNET-3891 8
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
WebexTeams
Secure & Open
Complete & Simple
Webex for Developers
User Integrations, APIs/SDKs, etc.
Spark Hybrid Services
Cloud + Prem
Partner Services
Interconnect
Message Meeting Call
1:1 and Team messaging
in virtual spaces
A cloud-based phone systemAudio, Video, and web meetings
DEVNET-3891 9
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Make it easy for our developers
to add collaboration capabilities inside their apps
with Webex Teams look & feel.
EmbedWebex video &
messaging inside any
application
RetainWebexTeams
branding & user
experience
BringWebexTeams &
Devices features and user
experience to other
business apps
WhyWidgets?
Teams Widgets
– Leverage Webex Teams
User Experience
Teams SDKs
– Build your own User
Interfaces
DEVNET-3891 10
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://developer.webex.com/widgets.html
DEVNET-3891 11
SpaceWidget Demo
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://developer.webex.com/sdk-for-browsers.html
DEVNET-3891 13
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Calling
• Calling
• Call Events
Specs
iOS SDK - Swift
Android SDK
JS SDK - WebRTC
• Chrome, Firefox
CODECS
• H264, Opus
Call &
Media Controls
• Call Control
• AudioControl
• VideoControl
Other
Functions
• Persistent
registration
• Feedback
• Push
notifications
WebexTeams SDKs
DEVNET-3891 14
Embedding theWidget
into existing apps
via Global, Data and React
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://github.com/CiscoDevNet/widget-samples
16DEVNET-3891
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Learning labs
https://learninglabs.cisco.com/tracks/collab-cloud
17DEVNET-3891
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Widgets Reference Documentation –Webex for Developers
• https://developer.webex.com/widgets.html
• WebexTeamsWidget Demo
• https://code.s4d.io/widget-space/latest/demo/index.html
• Widget samples at DevNet
• https://github.com/CiscoDevNet/widget-samples
• ‘SpaceGrid’ source code
• https://github.com/harborhoffer/spark-space-grid
DEVNET-3891 18
A bit of React
https://www.kirupa.com
/react/introducing_react.htm
Traditional Web Apps
(server side Web)
SPA
(single page applications)
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
React
• Automatic UI State Management
• Lightning-fast DOM Manipulation
• In-memoryVirtual DOM
• APIs to CreateTruly Composable Uis
• Visuals Defined Entirely in JavaScript
• no framework-specific templating command
• Since it came out in 2013, found its way into
popular web sites and apps
https://github.com/facebook/react/wiki/Sites-Using-React
DEVNET-3891 21
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
React Basics
• The render method takes two arguments:
• The HTML-like elements (aka JSX) you wish to output
• The location in the DOM that React will render the JSX into
https://www.kirupa.com/react/building_your_first_react_app.htm
22DEVNET-3891
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 23
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 24
Widgets as composite React Components
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 26
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Code Editor React JSX Web App
DEVNET-3891 27
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 28
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 29
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://www.kirupa.com/react
/setting_up_react_environment.htm
DEVNET-3891 30
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
WebPack
https://github.com/webpack
• Module bundler for Javascript applications
• Takes in various assets (JS, CSS, Fonts, Images, HTML…)
• Transforms, minifies and optimizes to serve one bundle to the browser
• JS library with an extensible architecture (loaders & plugins)
• Builds a dependency graph from webpack.config.js
DEVNET-3891 31
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
> npm install -g create-react-app
> create-react-app helloworld
> cd helloworld
# for development
> npm start #
# for packaging
> npm run build
DEVNET-3891 32
Injecting OAuth granted
access tokens
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://trusting-kilby-6f8efe.netlify.com/
DEVNET-3891 34
Live demo
https://trusting-kilby-6f8efe.netlify.com
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://trusting-kilby-6f8efe.netlify.com/
https://github.com/adamweeks/spark-widget-oauth-example
DEVNET-3891 36
Customizing
the React components
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 39
Live demo
https://amazing-swirles-9518e6.netlify.com
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 41
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
https://github.com/adamweeks/spark-widget-custom-menu
DEVNET-3891 42
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Webex Teams JavaScript Styleguide
https://github.com/webex/web-styleguide
DEVNET-3891 43
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Teams Widget OAuth Example
• https://github.com/adamweeks/spark-widget-oauth-example
• Teams Widget Custom Activities Example
• https://github.com/adamweeks/spark-widget-custom-menu
• ImplicitGrant Flow example
• https://github.com/webex/spark-js-
sdk/tree/master/packages/node_modules/samples/browser-auth-implicit
• Learning lab: “EmbeddingVideo into existing applications”
• https://learninglabs.cisco.com/tracks/collab-cloud
• Web Style guide
• https://github.com/webex/web-styleguide/tree/master/javascript
44DEVNET-3891
What if your app users
don’t have aWebex
account ?
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Persistent Guests for Spark SDK
Connect consumers or non-Cisco enterprise users with Cisco Spark paid users via
calling or messaging on browser & mobile custom apps through Spark platform
Capabilities
Guest identities are managed by the developer
Call history and messages are persistent
Terms of service:
• Included in all Spark paid offers. No additional cost.
• Guest can reach only paid Spark users
• Guest to Guest is forbidden
• Guests are created by developers part of paid Org
use cases:
- for patients to tele-doctor
on healthcare mobile app.
- for consumers to support
helpline on retail website.
DEVNET-3891 46
Persistent Guest Demo
https://amazing-swirles-9518e6.netlify.com
What’s coming
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Roadmap
• Strategy: mimic the user experience ofWebexTeams apps
• MoreWeb Browsers
• Even better developer experience
• Opensource project: Contributions welcome!
DEVNET-3891 49
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Resources
• Widgets documentation
• https://developer.webex.com/widgets.html
• Widgets source code
• https://github.com/CiscoWebex/react-ciscospark
• Widgets examples
• https://github.com/CiscoDevNet/widget-samples
• React tutorials
• https://www.kirupa.com/react/introducing_react.htm
• https://reactjs.org/docs/thinking-in-react.html
• Learning lab: “EmbeddingVideo into existing applications”
• https://learninglabs.cisco.com/tracks/collab-cloud
DEVNET-3891 50
Complete your online session evaluation
© 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS
Give us your feedback to be entered into a
Daily Survey Drawing.
Complete your session surveys through the
Cisco Live mobile app or on
www.CiscoLive.com/us.
Don’t forget: Cisco Live sessions will be available for viewing on
demand after the event at www.CiscoLive.com/Online.
DEVNET-3891 51
Q&A
Thank you
#CLUS
#CLUS

Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891

  • 1.
    #CLUS Stève Sfartz, APIEvangelist DEVNET-3891 WebexTeamsWidgets Technical Drill down
  • 2.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS /Cisco/DevNet/SteveSfartz • API Evangelist @CiscoDevNet • API Design,Architecture and Operations • WebexTeams & xAPI developer • hosted @CiscoROI: Paris Innovation Center • Node.js mainly, a bit of #golang • Europe and all over the world • github: //ObjectIsAdvantag “vision without execution is hallucination” -- Thomas Edison mailto: stsfartz@cisco.com twitter: @SteveSfartz DEVNET-3891 2
  • 3.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Agenda • Meet theWidgets • Embedding inWeb applications • CSS customization • Introduction to React • Injecting access tokens dynamically • Adding custom activities to the ‘Space’Widget • Interacting with « Permanent guests » • Roadmap,Contributions, Q&A Beginner Advanced Intermediate DEVNET-3891 3
  • 4.
  • 5.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 5
  • 6.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS ‘Recents’ DEVNET-3891 6
  • 7.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS ‘Space’ DEVNET-3891 7
  • 8.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Recents Space DEVNET-3891 8
  • 9.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS WebexTeams Secure & Open Complete & Simple Webex for Developers User Integrations, APIs/SDKs, etc. Spark Hybrid Services Cloud + Prem Partner Services Interconnect Message Meeting Call 1:1 and Team messaging in virtual spaces A cloud-based phone systemAudio, Video, and web meetings DEVNET-3891 9
  • 10.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Make it easy for our developers to add collaboration capabilities inside their apps with Webex Teams look & feel. EmbedWebex video & messaging inside any application RetainWebexTeams branding & user experience BringWebexTeams & Devices features and user experience to other business apps WhyWidgets? Teams Widgets – Leverage Webex Teams User Experience Teams SDKs – Build your own User Interfaces DEVNET-3891 10
  • 11.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://developer.webex.com/widgets.html DEVNET-3891 11
  • 12.
  • 13.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://developer.webex.com/sdk-for-browsers.html DEVNET-3891 13
  • 14.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Calling • Calling • Call Events Specs iOS SDK - Swift Android SDK JS SDK - WebRTC • Chrome, Firefox CODECS • H264, Opus Call & Media Controls • Call Control • AudioControl • VideoControl Other Functions • Persistent registration • Feedback • Push notifications WebexTeams SDKs DEVNET-3891 14
  • 15.
    Embedding theWidget into existingapps via Global, Data and React
  • 16.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://github.com/CiscoDevNet/widget-samples 16DEVNET-3891
  • 17.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Learning labs https://learninglabs.cisco.com/tracks/collab-cloud 17DEVNET-3891
  • 18.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Resources • Widgets Reference Documentation –Webex for Developers • https://developer.webex.com/widgets.html • WebexTeamsWidget Demo • https://code.s4d.io/widget-space/latest/demo/index.html • Widget samples at DevNet • https://github.com/CiscoDevNet/widget-samples • ‘SpaceGrid’ source code • https://github.com/harborhoffer/spark-space-grid DEVNET-3891 18
  • 19.
    A bit ofReact https://www.kirupa.com /react/introducing_react.htm
  • 20.
    Traditional Web Apps (serverside Web) SPA (single page applications)
  • 21.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS React • Automatic UI State Management • Lightning-fast DOM Manipulation • In-memoryVirtual DOM • APIs to CreateTruly Composable Uis • Visuals Defined Entirely in JavaScript • no framework-specific templating command • Since it came out in 2013, found its way into popular web sites and apps https://github.com/facebook/react/wiki/Sites-Using-React DEVNET-3891 21
  • 22.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS React Basics • The render method takes two arguments: • The HTML-like elements (aka JSX) you wish to output • The location in the DOM that React will render the JSX into https://www.kirupa.com/react/building_your_first_react_app.htm 22DEVNET-3891
  • 23.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 23
  • 24.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 24
  • 25.
    Widgets as compositeReact Components
  • 26.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 26
  • 27.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Code Editor React JSX Web App DEVNET-3891 27
  • 28.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 28
  • 29.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 29
  • 30.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://www.kirupa.com/react /setting_up_react_environment.htm DEVNET-3891 30
  • 31.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS WebPack https://github.com/webpack • Module bundler for Javascript applications • Takes in various assets (JS, CSS, Fonts, Images, HTML…) • Transforms, minifies and optimizes to serve one bundle to the browser • JS library with an extensible architecture (loaders & plugins) • Builds a dependency graph from webpack.config.js DEVNET-3891 31
  • 32.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS > npm install -g create-react-app > create-react-app helloworld > cd helloworld # for development > npm start # # for packaging > npm run build DEVNET-3891 32
  • 33.
  • 34.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://trusting-kilby-6f8efe.netlify.com/ DEVNET-3891 34
  • 35.
  • 36.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://trusting-kilby-6f8efe.netlify.com/ https://github.com/adamweeks/spark-widget-oauth-example DEVNET-3891 36
  • 37.
  • 38.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 39
  • 39.
  • 40.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS DEVNET-3891 41
  • 41.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS https://github.com/adamweeks/spark-widget-custom-menu DEVNET-3891 42
  • 42.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Webex Teams JavaScript Styleguide https://github.com/webex/web-styleguide DEVNET-3891 43
  • 43.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Resources • Teams Widget OAuth Example • https://github.com/adamweeks/spark-widget-oauth-example • Teams Widget Custom Activities Example • https://github.com/adamweeks/spark-widget-custom-menu • ImplicitGrant Flow example • https://github.com/webex/spark-js- sdk/tree/master/packages/node_modules/samples/browser-auth-implicit • Learning lab: “EmbeddingVideo into existing applications” • https://learninglabs.cisco.com/tracks/collab-cloud • Web Style guide • https://github.com/webex/web-styleguide/tree/master/javascript 44DEVNET-3891
  • 44.
    What if yourapp users don’t have aWebex account ?
  • 45.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Persistent Guests for Spark SDK Connect consumers or non-Cisco enterprise users with Cisco Spark paid users via calling or messaging on browser & mobile custom apps through Spark platform Capabilities Guest identities are managed by the developer Call history and messages are persistent Terms of service: • Included in all Spark paid offers. No additional cost. • Guest can reach only paid Spark users • Guest to Guest is forbidden • Guests are created by developers part of paid Org use cases: - for patients to tele-doctor on healthcare mobile app. - for consumers to support helpline on retail website. DEVNET-3891 46
  • 46.
  • 47.
  • 48.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Roadmap • Strategy: mimic the user experience ofWebexTeams apps • MoreWeb Browsers • Even better developer experience • Opensource project: Contributions welcome! DEVNET-3891 49
  • 49.
    © 2018 Ciscoand/or its affiliates. All rights reserved. Cisco Public#CLUS Resources • Widgets documentation • https://developer.webex.com/widgets.html • Widgets source code • https://github.com/CiscoWebex/react-ciscospark • Widgets examples • https://github.com/CiscoDevNet/widget-samples • React tutorials • https://www.kirupa.com/react/introducing_react.htm • https://reactjs.org/docs/thinking-in-react.html • Learning lab: “EmbeddingVideo into existing applications” • https://learninglabs.cisco.com/tracks/collab-cloud DEVNET-3891 50
  • 50.
    Complete your onlinesession evaluation © 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public#CLUS Give us your feedback to be entered into a Daily Survey Drawing. Complete your session surveys through the Cisco Live mobile app or on www.CiscoLive.com/us. Don’t forget: Cisco Live sessions will be available for viewing on demand after the event at www.CiscoLive.com/Online. DEVNET-3891 51
  • 51.
  • 52.
  • 53.

Editor's Notes

  • #9 Think of the Cisco Spark client as two separate pieces. RECENTS for all of your latest interactions, and SPACE for chat and calling capabilities. We take those 2 pieces of the Spark client and turn them into the RECENTS widget and SPACE widget