DevNetCreate Workshop - build a react app - React crash course
Download as PPTX, PDF2 likes262 views
This document outlines a workshop for building a React app that utilizes Cisco collaboration APIs, specifically aimed at analyzing meeting room analytics and visualizing developer attendance. It includes technical prerequisites, resources for React development, and instructions for setting up the environment. Participants are encouraged to have a working knowledge of JavaScript and Node.js to fulfill the workshop requirements.
DevNetCreate Workshop - build a react app - React crash course
- 1. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Build a React App #devnetcreate workshop API Evangelist @CiscoDevNet @SteveSfartz, stsfartz@cisco.com Stève Sfartz
- 2. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • API Evangelist @CiscoDevNet - Europe • REST & Microservices Architecture • Cisco Spark API & Collaboration Endpoints xAPI • hosted @CiscoROI: Paris Innovation Center • node.js mainly, a bit of #golang • France and all around Europe • github: //ObjectIsAdvantag /Cisco/DevNet/SteveSfartz “vision without execution is hallucination” stsfartz@cisco.com @SteveSfartz
- 3. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Discover React development and Cisco Collaboration Endpoints (CE9.2.1+) programmability. • Throughout the workshop, you'll first learn to compute Meeting Room Analytics from real-time events sent by Meeting Room Device’s Camera. • We'll then go through the code of a React App that shows a map of DevNet Create 2018 location, and update it to display how many developers are attending each workshop. • Pre-requisites: you have 1 to 3 years of professional development experienceand a laptop with a pre-configured Node.js v6+ development environment. Build a React app … that shows live activity at DevNet Create
- 4. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • React • RoomKits • xAPI • Node.js https://github.com/ObjectIsAdvantag/roomkit-react-map
- 5. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Pre-requisites • Interacting with Room Series from code • Creating a React Map • static HTML • static React • injecting Data • Live Map Agenda
- 6. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Pre-requisites
- 7. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • https://github.com/CiscoDevNet/Create2018 - Stève Sfartz • Check you have node v6+ installed on your laptop via node -v command, OR install latest version of node on your machine from https://nodejs.org • Extra command line tools: git client, npm, Firefox, postman • Sign at https://developer.ciscospark.com with your Cisco Spark account credentials • Join the Space attached to the Workshop https://eurl.io/#BJC1Z--jM Technical Requirements
- 8. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • node –v (nodejs.org), v6+, v8 preferred • npm –v • git -–version • a code editor (Visual Studio Code, Atom...) • Cisco Spark support space: https://eurl.io/#BJC1Z--jM Pre-requites
- 9. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Interacting with Room Series from code
- 10. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • http://cs.co/roomdevices • Connect to RoomKitsWifi • http://192.168.2.4/web/signin • ssh with integrator role > xstatus RoomAnalytics PeopleCount • listen to events > xfeedback register /Status/RoomAnalytics/PeopleCount Meet a Room Kit
- 11. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • REST API (xml over http) • https://github.com/CiscoDevNet/postman-xapi • jsxapi • https://github.com/ObjectIsAdvantag/xapi-samples/blob/master/jsxapi/7- feedback-peoplecount.js > JSXAPI_DEVICE_URL="ssh://192.168.2.4" JSXAPI_USERNAME='integrator' JSXAPI_PASSWORD='integrator' node 7- feedback-peoplecount.js Run from code
- 12. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • https://github.com/ObjectIsAdvantag/roomkit-collector • edit device.json • Run collector > DEBUG=api*,collector* node server.js • Run mock version > cd api > node mock.js RoomKit Collector
- 13. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Connect to the RoomKit Sandbox Sandbox
- 14. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential A bit of React Crash course
- 15. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential About React https://www.kirupa.com/react/introducing_react.htm
- 16. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Since it came out in 2013, React has also steadily found its way into popular web sites and apps that you probably use. • Besides Facebook and Instagram, some of the notable ones include the BBC, Khan Academy, PayPal, Reddit, The New York Times, Yahoo, and many more. • https://github.com/facebook/react/wiki/Sites-Using-React Facts
- 17. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Traditional Web Apps (server side Web) SPA (Single Page Apps)
- 18. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential SPA • 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
- 19. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • 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 React
- 20. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Developing for React
- 21. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Dealing with JS • Babel JavaScript compiler • Converting JSX • Node.JS CI/CD toolchain • Conversion at runtime React Toolchain
- 22. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Conversion at Runtime
- 23. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Static conversation: CI/CD ToolChain https://www.kirupa.com/react/setting_up_react_environment.htm
- 24. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Utility: create-react-app > npm install -g create-react-app > create-react-app helloworld > cd helloworld # for development > npm start # # for packaging > npm run build
- 25. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • 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 WebPack https://github.com/webpack
- 26. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Your First App https://www.kirupa.com/react/building_your_first_react_app.htm
- 27. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • 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 React Basics
- 28. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential React Components
- 29. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Component LifeCycle Methods
- 30. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Synthetic Events Generic properties MouseEvent properties KeyBoardEvent properties https://reactjs.org/docs/events.html
- 31. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Working with Redux https://www.kirupa.com/react/using_redux_with_react.htm
- 32. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Share state with Redux store
- 33. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Learn React by Kirupa • https://www.kirupa.com/react/using_redux_with_react.htm • Fetching Data in React • https://www.robinwieruch.de/react-fetching-data/ • Higher order components • https://www.robinwieruch.de/gentle-introduction-higher-order-components/ Resources
- 34. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Creating a React Map
- 35. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential React Map Starter Kit https://github.com/ObjectIsAdvantag/roomkit-react-map
- 36. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Live Map
- 37. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential • Postman collections for xAPI • https://github.com/CiscoDevNet/postman-xapi • Code samples, React tutos, RoomKit Map and Collector • https://github.com/ObjectIsAdvantag • Dev Center • http://cs.co/roomdevices • Twitter • @SteveSfartz Resources
- 38. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Confidential Thank you stsfartz@cisco.com twitter: @SteveSfartz github: @ObjectIsAdvantag
Editor's Notes
- #6: 0. Postman tour - Create workspace "Develop@Cisco" - Create request https://developer.ciscospark.com/endpoint-people-me-get.html - Generating code run node.js script 1. Creating a collection - Add to collection "Postman Tour" - Add environment variables spark_token - Add another request https://developer.ciscospark.com/endpoint-rooms-post.html 2. Documentation your collection - Add description to the existing REST requests - Select your collection and click "View in Web" - Pick an environment - Publish => there is more 3. Running your collection - Select your collection and click "Run" - Pick 3 iterations, 500ms delay, Run => let's add tests (passed 0/0) 4. Add scripting - Add a test for Get Person Details - Run the REST request (2/2) - Add a test for Create a room - Run the REST request (2/2) - Add a DELETE room request => run the collection again (Passed 5/5) 5. Test automation - Create a monitor => need a paying plan - Install newman - Export your collection and run newman newman run "Postman Tour .postman_collection.json" --global-var "spark_token=XXXXXXXXXXXX" 6. Load other postman collections - Spark collection => ordered list - xAPI collection => XML sample 7. Free time - Analyse Meraki collection - Create your own 8. Wrap up, and To go further - Run in postman button - Swagger import
- #11: Count people GREATER THAN