Cisco Spark Widgets Technical drill down

Transcription

1

2 DEVNET-1891 Cisco Spark Widgets Technical drill down Adam Weeks, Stève Sfartz, API

3 Cisco Spark How Questions? Use Cisco Spark to communicate with the speaker after the session 1. Find this session in the Cisco Live Mobile App 2. Click Join the Discussion 3. Install Spark or go directly to the space 4. Enter messages/questions in the space cs.co/ciscolivebot#devnet Cisco and/or its affiliates. All rights reserved. Cisco Public

4 Cisco Spark Widgets Technical drill down Introduction to Cisco Spark Widgets Embed into existing Web apps Injecting access tokens dynamically Customizing the React components CSS Customization Adding custom activities to the Space Widget Initializing the Recents Widget with custom Spaces Roadmap, Contributions

5 /Cisco/DevNet/SteveSfartz Cisco Spark API & Collaboration Endpoints xapi Paris Innovation Center node.js mainly, a bit of #golang France and all around Europe github://objectisadvantag vision without execution is hallucination -- Thomas Edison 2018 Cisco and/or its affiliates. All rights reserved. Cisco Public

6 Introduction to Cisco Spark Widgets

7 Easily embed Spark messaging, video and calling into your workflow Spark Widgets Leverage Spark UI/UX Spark SDKs Build your own UI DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 7

8 Benefits for the Developer Frictionless Embed video into your app in minutes Includes powerful libraries (Fast Lane, STUN) Render inside your mobile app No need for browser plugins - Efficiency Embedding collaboration increases the likelihood that the user will stay in the app Contextual communication DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 8

9 Spark SDK - Features Calling Call & Media Controls Other Functions Specs Calling Call Events Call Control Audio Control Video Control Persistent registration Feedback Push notifications ios SDK - Swift Android SDK JS SDK - WebRTC Chrome - current Firefox - current CODECS H264 Opus DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 9

10 JavaScript SDK DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 10

11 Why Cisco Spark Widgets? Make it easy for our Strategic Partners to add collaboration capabilities inside their workflows with Cisco Spark look & feel. Embed Cisco Spark video & messaging inside any application Retain Cisco Spark branding & user experience Bring Cisco Spark clients & room system user experience to other business apps DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 11

12 Cisco Spark Client to Widget Recents Space DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 12

13 Widgets DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 13

14 Space Widget Audio & video 1:1 calling Space & 1:1 messaging Markdown support File sharing Message flags and ability to delete messages Read receipts Persistent chat DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 14

15 Demo: Space Widget

16 Recents Widget Recent Spark conversation list (spaces & people) Hooks to open a conversation with the Space Widget Unread space highlighting Event hooks for messages, calls, and memberships Incoming call notifications DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 16

17 DevNet Discover Learning Tracks CC Embedding Video Experiment Audio/Video Calling & Messaging with Cisco Spark Widgets 10 minutes DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 17

18 Embedding the Widget into existing apps via Global, Data and React

19 Experiment the Cisco Spark Widget DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 19

20 Demo: Listening to events

21 Injecting access tokens

22 Cisco Spark Implicit Grant Flow DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 22

23 Cisco Spark Widget OAuth Example Oauth flow initiated from a React application Try it live at DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 23

24 Demo: Injecting Oauth granted tokens

25 A bit of React

26 Traditional Web Apps (server side Web) SPA (single page applications) DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 26

27 Single Page Applications In a single page application, the bulk of your time will be spent keeping your data in-sync with your UI Manipulating the DOM is really REALLY slow. Working with HTML templates can be a pain DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 27

28 React Automatic UI State Management Lightning-fast DOM Manipulation In-memory Virtual DOM APIs to Create Truly 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 DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 28

29 React Toolchain 1) Dealing with Javascript Babel JS compiler 2) Converting JSX Node.JS CI/CD toolchain Conversion at runtime DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 29

30 Conversion at Runtime DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 30

31 Static conversation: CI/CD ToolChain DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 31

32 Tooling: create-react-app > npm install -g create-react-app > create-react-app helloworld > cd helloworld # for development > npm start # # for packaging > npm run build DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 32

33 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 Cisco and/or its affiliates. All rights reserved. Cisco Public 33

34 Demo: Your first React App

35 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 DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 35

36 React Components DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 36

37 Component LifeCycle Methods DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 37

38 Customizing the React components

39 Demo: CSS Customization

40 Demo: Adding custom activities to the Space Widget

41 Demo: Initializing the Recents Widget with custom Spaces

42 What s coming

43 Roadmap Mimic the experience of Cisco Spark clients Guest mode support Web Browsers Opensource project: Contributions welcome! DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 43

44 Cisco Spark How Questions? Use Cisco Spark to communicate with the speaker after the session 1. Find this session in the Cisco Live Mobile App 2. Click Join the Discussion 3. Install Spark or go directly to the space 4. Enter messages/questions in the space cs.co/ciscolivebot#devnet Cisco and/or its affiliates. All rights reserved. Cisco Public

45 Please complete your Online Session Evaluations after each session Complete 4 Session Evaluations & the Overall Conference Evaluation (available from Thursday) to receive your Cisco Live T-shirt All surveys can be completed via the Cisco Live Mobile App or the Communication Stations Complete Your Online Session Evaluation Don t forget: Cisco Live sessions will be available for viewing on-demand after the event at Cisco and/or its affiliates. All rights reserved. Cisco Public

46 Continue Your Education Demos in the Cisco campus Walk-in Self-Paced Labs Tech Circle Meet the Engineer 1:1 meetings Related sessions DEVNET Cisco and/or its affiliates. All rights reserved. Cisco Public 46

47 Thank you

48