Embedding Messages and Video Calls in your apps

Editor's Notes

• #2: BEFORE YOU START : run the CiscoDevNet and roomId bots
• #3: Who has already heard of Spark ? Who has already heard of Cisco ? Cisco is 90% market share in networking WW and major actor in collaboration software (> 50% WW) Today, it will be about collaboration and building the next gen app. We have opened our secrete sauce to application developers, and continue to open it. I have 30 minutes to show you the use cases it opens to you, and the dirty details Demoes flow: - experiences -- Desktop -- Mobile -- Web -- Device => our goal: bring it to your app - message - audio & video calls - meetings - Widget: -- space-grid: he just went crazy with ChatOps -- customizable => what if I only wanted to chat -- and what if I wanted anybody to chat with my bot, invite non Spark users to the discussion => gest mode Then we have a pretty powerful platform that can do messaging, audio/video call, extensible and scalable, Web, Desktop and Mobile, and you can start for free: - Spark Free account - Spark Developer Portal - Create your 'guest' developer organisation (coming) What's next ? what's the vision for the future Now what is I could invite an Professional assistant to the game - RoomFinder - Spark assistant => Spark is an extensible, scalable and secure Cloud platform to build your new gen app or business
• #4: I am a technical evangelist at DevNet – Cisco Developer Program It means Cisco pays me to create developer resources (labs & samples), explain and teach technology at conferences and enterprise workshops, and sometimes support hackathons. I am based in France, and report to the best manager in the world named Mandy, sitting a the back of the room, And I love Italy, my wife’s family living in Sardegna, I spend most of my vacations in Sardaigna / en Bosa Marina, perto de Alghero.
• #6: This intensity various from occasional messaging, where I just send a few messages here and there, to something I call furious chat, where everyone is sending messages at once. In fact, if they had just spoken those messages it would have been a meeting. And in fact the next level of intensity is an ad-hoc meeting, and perhaps the most intense is a scheduled, more formal meeting. The line for real-time is around here – at furious chat – when things are happening at that very moment together.
• #7: All of the pain points are on the transitions. First pain point – escalating from furious chat into the meeting itself. Requires all of this coordination to figure out how to do that – whose bridge to use? Are you in a video room and how do we get you in? Second pain point – sharing information during a meeting- the chat in the meeting isn’t the same chat. You can email it after the meeting… Third paint point- how do I know when to switch meetings when I have all of these back to back meetings? Forth pain point- work doesn’t stop when the meeting ends, if anything that’s when it starts and tracking actions requires connecting with people
• #8: Cisco Spark addresses all of these pain points and all of these points of “work”. We want Spark to be the platform that all people use to meet, collaborate, chat and call so that all interactions can be continuous and agile.
• #9: Conversations (messages, audio, video, all of them) At work, on the way, home office, family & friends It’s not one app, it’s all apps It’s not one personal device, it’s all devices It also comes from everywhere = connected world Spark platform => Bring this power to the developer via a set of APIs and SDK we’ll demo
• #10: Conversations (messages, audio, video, all of them) At work, on the way, home office, family & friends It’s not one app, it’s all apps It’s not one personal device, it’s all devices It also comes from everywhere = connected world Spark platform => Bring this power to the developer via a set of APIs and SDK we’ll demo
• #11: Cisco supports third-party endpoints across a wide range of operating systems. We offer three client applications integrated to help mobile professionals work at optimal productivity, wherever they are and whatever device they use. Cisco Jabber is our all-in-one UC application. Cisco WebEx is the industry-leading web conferencing application. Cisco Spark instantly creates a place for teams to work together, where their work can live, and provides a way to stay connected to it all. These applications are tightly integrated with each other and can be accessed across a range of devices including laptops, tablets, mobile phones, and Cisco collaboration endpoints. This range of endpoints from room systems to software running on mobile devices is tailored to support the various ways in which people work – all the way from your pocket to the boardroom. And they all work *together* to deliver a consistent, delightful, no-compromise collaboration experience. <presenter note>: Depending on the opportunity, you may want to drill down on one client or another and field questions, perhaps pull additional slides from other EBC “Chapters.” It is strongly recommended that you encourage the account team to create a Spark room for the participants in this EBC as a way to follow up/stay in touch/share the slides from the day. If AM creates this now, you can circle back and do a live demo later during the session.
• #12: Create a space « CodeMotion Cisco Spark API »: hey Anna, where is this happening already ? Calling you: answer on Phone Calling you: answer via Desk
• #15: We’ll leverage Spark APIs to implement this use case Spark APIs are accessible at https://developer.ciscospark.com/ This is where you get your API token and run thru the interactive documentation
• #18: developer.ciscospark.com Create a new space: « API demo » Post a message => people use it to do ChatOps (later) Drop a document Interact with a bot: CiscoDevNet
• #20: Create a Bot Account Run an existing bot on Glitch: pick https://github.com/CiscoDevNet/botkit-template
• #23: Create an Integration redirecting to Requestbin
• #24: Getting an Access Token If the user granted permission to your app, Spark will redirect the user's web browser to the redirect_uri you specified when entering the grant flow. The request to the Redirect URL will contain a code parameter in the query string like so: http://your-server.com/auth?code=YjAzYzgyNDYtZxx3YS00OWZkLTg2YTgtNDc3Zjg4YzFiZDlkNxxlN2FhMjMtYzUz Your app will then need to exchange this Authorization Code for an Access Token that can be used to invoke the APIs. To do this your app will need to perform an HTTP POST to the following URL with a standard set of OAuth parameters. This endpoint will only accept an x-www-form-urlencoded body. https://api.ciscospark.com/v1/access_token The required parameters are: grant_type This should be set to "authorization_code" client_id Issued when creating your app client_secret Remember this guy? You kept it safe somewhere when creating your app code The Authorization Code from the previous step redirect_uri Must match the one used in the previous step NOTE: in THIS occasion the redirect_uri does NOT have to be encoded and can be send ‘as is’ [email protected]
• #25: (DJ) Q: Is this access token stored on myserver.com/app or in a user cookie? Do you have to go through this procedure every day? How do you check if a user has a valid access token? Stored where? Spark will then respond with JSON containing an Access Token that's good for 14 days and a Refresh Token that expires in 90 days. The Refresh Token can be used to generate a new Access Token when the current one expires: [email protected]
• #27: CALLING •Dial by PersonEmail •Dial by SIP Address CALL EVENTS •Call progress events (ringing, connected, rejected) •Incoming call event •Remote push notification (closed app) (developer responsibility) •Local push notification (backgrounded app)  (developer responsibility) CALL CONTROL •Accept / Reject •Hangup AUDIO CONTROL Audio output select (handset / headset / speakerphone) (iOS + JS) Mute/unmute local audio Mute/unmute remote audio VIDEO CONTROL •Mute/unmute local video •Mute/unmute remote video •Camera select •Keep the aspect ratio (iOS only) •Rate call quality (iOS+JS) Incoming call notification for iOS
• #28: Envision a mobile application for a clothing store, that lists items for sale and has an automated ordering system. Perhaps you go to a shirt and some jeans and when you go to the checkout, there was a problem processing your payment. When that happens, from right inside the app, you are prompted with an option to join a video call with a customer service rep. When that option is selected, the video call natively starts right in the same clothing store application– no need to open or install any other applications. This feature can make the user experience much more efficient and friendly, and made possible by using Spark Video SDK for iOS (Android will be coming very soon!)
• #29: Go to the SDK doc https://developer.ciscospark.com/sdk-for-browsers.html Show the documentation: https://ciscospark.github.io/spark-js-sdk/api/
• #31: Web Dialer: https://webdialer.chhab.rocks/login with [email protected] - spark: [email protected] - sip: [email protected]
• #34: 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
• #35: Super Easy Integration Responsive UI built with HTML5 and React.js New features automatically gets pushed via public CDN Open source libraries WebRTC A/V Calling & Messaging
• #36: Widget demo with [email protected] and space Hackathon demo with hackvivatech-paris/widgets/widget-space-global-events.html
• #42: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJVU0VSSUQiLCJuYW1lIjoiVVNFUk5BTUUiLCJpc3MiOiJERVZFTE9QRVJfT1JHIn0.swoT9rodEYx-K4f-PpFhOc7du1-KKLScrO9qUerpB_U
• #43: Generate a token for ‘Ilaria’
• #45: Space widget in hackathon-resources, put the access-token of the guest Contact someone
• #46: JWT HS256 Both choices refer to what algorithm the identity provider uses to sign the JWT. Signing is a cryptographic operation that generates a "signature" (part of the JWT) that the recipient of the token can validate to ensure that the token has not been tampered with. RS256 (RSA Signature with SHA-256) is an asymmetric algorithm, and it uses a public/private key pair: the identity provider has a private (secret) key used to generate the signature, and the consumer of the JWT gets a public key to validate the signature. Since the public key, as opposed to the private key, doesn't need to be kept secured, most identity providers make it easily available for consumers to obtain and use (usually through a metadata URL). HS256 (HMAC with SHA-256), on the other hand, is a symmetric algorithm, with only one (secret) key that is shared between the two parties. Since the same key is used both to generate the signature and to validate it, care must be taken to ensure that the key is not compromised.