DevNetCreate Workshop - build a react app - React crash course
Download as pptx, pdf2 likes260 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.
1 of 38
Download to read offline
Ad
Recommended
Introduction to Facebook React
Introduction to Facebook ReactMitch Chen The document provides biographical information about Mitch Chen, an expert in front-end engineering with 8 years of experience. It notes that he is a JavaScript expert and React/Flux enthusiast who has worked as a senior frontend manager and software engineer at several companies. The document also lists Mitch Chen's blog and Facebook group on React and provides a brief introduction to React, highlighting how it renders user interfaces, is battle-tested on large sites, uses components instead of templates, and employs a virtual DOM.
React/Redux
React/ReduxDurgesh Vaishnav This document provides an overview of React.js and key concepts like components, props, state, and JSX syntax. It also discusses performance techniques like virtual DOM and how React efficiently re-renders. Additionally, it covers related topics like Redux for state management and separating concerns with a component architecture.
Thinking in react
Thinking in reactaashimadudeja This document provides a step-by-step guide for building a React app. It outlines 5 steps: 1) Break the UI into a component hierarchy, 2) Build a static version with components, 3) Identify the minimal state needed, 4) Determine where state should live, 5) Add inverse data flow to support updating state from user input. The guide walks through applying these steps to build a product filtering table app, identifying the key components and how state would flow from parent to child and back again upon user interaction.
React js
React jsAlireza Akbari React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or function based. Props and state allow passing data to components and re-rendering components on state changes.
React web development
React web developmentRully Ramanda This document provides an overview of React including what it is, who uses it, its core concepts, and why one should use React. React is a library for building user interfaces that uses a component-based approach and virtual DOM for declarative programming. It allows components to be written once and used on the web, mobile, and beyond. Core concepts include components, virtual DOM, and unidirectional data flow. Benefits of React include the ability to write code once and deploy anywhere, fast rendering with virtual DOM, and the growing demand for React skills.
React + Redux Introduction
React + Redux IntroductionNikolaus Graf The document provides a comprehensive introduction to React and Redux, covering key concepts such as the virtual DOM, JSX syntax, and component rendering. It details the creation and management of state through Redux, including actions and reducers, while emphasizing the benefits of predictable and reusable components. Additionally, it highlights real-world usage and the popularity of these technologies among major companies.
Introduction to Redux
Introduction to ReduxIgnacio Martín The document is a presentation about Redux, delivered by Nacho Martín at a React Native meetup in Munich in January 2017. It covers the basics of Redux, its purpose as a state management solution, and provides practical examples of how to implement Redux in React applications. Key concepts discussed include actions, reducers, the store, and connecting components using the Redux library.
React
React 중운 박 The document describes React, a JavaScript library for building user interfaces. It introduces some key concepts of React including components, props, state, and the virtual DOM. Components are the building blocks of React apps and can be composed together. Props provide immutable data to components, while state provides mutable data. The virtual DOM allows React to efficiently update the real DOM by only changing what needs to be changed. Data flows unidirectionally in React from parent to child components via props, and state updates within a component are handled via setState().
Introduction to react_js
Introduction to react_jsMicroPyramid . React is a JavaScript library for building user interfaces. It was created by Facebook and is best for building dynamic websites like chat applications. React uses a virtual DOM for efficiently updating the view after data changes. Components are the building blocks of React and can contain state and props. The document provides an example of a simple component class and demonstrates how to add state and props. It also includes links to example code and MicroPyramid's social media profiles.
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
React JS and Redux
React JS and ReduxGlib Kechyn React is a JavaScript library focused on building reusable, encapsulated components for user interfaces, promoting a declarative programming style and efficient data flow through features like the virtual DOM and JSX. It supports component-oriented architecture which extends to mobile platforms such as iOS and Android via React Native. While it offers numerous advantages like simplified UI structure and component reusability, it is not a complete framework and can be verbose, making component writing less straightforward compared to pure HTML and JavaScript.
React-JS.pptx
React-JS.pptxAnmolPandita7 React js is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It allows creating reusable UI components that can be nested to build complex applications. A React component may maintain internal state and re-render when data changes. React uses a declarative paradigm that makes code more predictable and easier to debug.
To use React, install Node packages and create a new project using create-react-app. Components let you break up the UI into reusable pieces responsible for rendering HTML. Components can be stateful class components or stateless function components. Components can be created using ES6 class syntax or function syntax and can be nested. Choosing between class and function depends on requirements like using
Redux training
Redux trainingdasersoft The document provides a comprehensive overview of Redux, detailing its core concepts such as actions, action creators, and reducers. It explains the process of dispatching actions to update the application's state, emphasizing the importance of pure functions and unidirectional data flow. Additionally, it covers how to create a store, combine reducers, and manage state effectively.
ReactJS presentation
ReactJS presentationThanh Tuong ReactJS emerged from Facebook's need to address issues with dynamic web application development, transitioning from XHP to a JavaScript-based solution. It introduces essential concepts like JSX, virtual DOM, and state management for creating efficient user interfaces. The architecture emphasizes a unidirectional data flow using Flux, enhancing the organization and management of application state.
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin This document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.
React js programming concept
React js programming conceptTariqul islam React JS is a JavaScript library for building user interfaces, focusing on component-based and declarative programming. It uses a virtual DOM to optimize updates and offers state management through Redux, which implements a predictable state container pattern. The document also covers key topics like React Router for handling navigation and various middlewares for Redux, such as Redux Thunk and Redux Promise.
Introduction to React
Introduction to ReactRob Quick This document provides an overview of React, detailing its history from its creation at Facebook in 2011 to its open sourcing in 2013, and emphasizes its guiding principles of being declarative and component-based. It explains how React uses a virtual DOM for efficient updates by comparing representations of the application states and batching changes for rendering. Additionally, it clarifies what React is not, indicating that it functions as a library rather than a framework and does not manage data fetching or routing.
React hooks
React hooksAssaf Gannon This document discusses React hooks and how they enhance functional components. It explains that hooks allow functional components to maintain state and lifecycle methods like class components. The key hooks discussed are useState for managing state, useEffect for side effects like data fetching, and useCallback and useMemo for optimization. Custom hooks are also covered as a way to extract reusable logic. Overall, hooks improve on class components by making code more modular, reusable and easier to test.
React lecture
React lectureChristoffer Noring This document provides an overview of React and Redux concepts including:
- React basics like components, props, state, and lifecycle methods
- Flux architecture and how data flows through actions, dispatcher, and stores
- Redux as an alternative to Flux that uses a single store updated by reducers in response to actions
- Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.
React js
React jsRajesh Kolla This document provides an overview of React including:
- React is a JavaScript library created by Facebook for building user interfaces
- It uses virtual DOM to efficiently re-render components on updates rather than entire page
- React supports ES6 features and uses classes, arrow functions, and other syntax
- Popular tools for React include Create React App for setting up projects and React Dev Tools for debugging
React js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani The document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.
Intro to React
Intro to ReactJustin Reock The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.
Reasons to use React Query
Reasons to use React Queryjavaria javaid React Query is a powerful data synchronization tool for React and React Native that simplifies data fetching, caching, and state management without using global state. It includes features like automatic refetching, optimistic updates, and support for server-side rendering, improving performance and user experience. Additionally, it provides easy management of network requests, error handling, and allows for techniques like infinite scrolling.
React js use contexts and useContext hook
React js use contexts and useContext hookPiyush Jamwal The document discusses the useContext hook in React. It explains that hooks are special functions that start with "use" and are analogous to class component methods. The useContext hook allows components to access data from their parent context without having to pass props down through each level. Without useContext, data would need to be passed through props from the parent component to child components. With useContext, a Context Provider wraps components and provides a value that can be accessed using useContext in any child component without passing props.
React Hooks
React HooksJoao Marins React Hooks are functions that allow you to "hook into" React state and lifecycle features from function components. Some key hooks include useState, useContext, and useEffect. Hooks make it easier to reuse stateful logic between components and simplify component logic. However, hooks should only be called from React functions and not in loops, conditions, or nested functions. Overall, hooks provide more powerful features to function components and opportunities to write code in a more functional style.
React js
React jsOswald Campesato ReactJS for Beginners provides an overview of ReactJS including what it is, advantages, disadvantages, typical setup tools, and examples of basic React code. Key points covered include:
- ReactJS is a JavaScript library for building user interfaces and is component-based.
- Advantages include high efficiency, easier JavaScript via JSX, good developer tools and SEO, and easy testing.
- Disadvantages include React only handling the view layer and requiring other libraries for full MVC functionality.
- Examples demonstrate basic components, properties, events, conditional rendering, and lists in ReactJS.
React redux-tutoriel-1
React redux-tutoriel-1Sem Koto Ce tutoriel aborde la compréhension de React et Redux, en détaillant leur architecture, en particulier le concept de flux de données unidirectionnel et l'utilisation de reducers. Il propose également un projet pratique pour créer une liste de fruits, avec des instructions sur la configuration du projet et l'installation des dépendances. Enfin, il guide les utilisateurs à travers l'implémentation progressive des différents composants de l'application.
Introduction to React JS for beginners
Introduction to React JS for beginners Varun Raj - React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes.
- Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements.
- Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes.
- The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
Javascript Essentials - Cisco Live Barcelona 2019
Javascript Essentials - Cisco Live Barcelona 2019Cisco DevNet The document provides an overview of JavaScript, its versions, and its applications, highlighting the significance of Node.js as a server-side runtime built on Google's V8 engine. It discusses the evolution of JavaScript from its inception in 1995 to contemporary use cases across web and mobile applications, emphasizing its ubiquity and capabilities in modern development. The content also touches on frameworks, tools, and best practices for leveraging JavaScript in various development contexts.
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891Cisco DevNet The document outlines a presentation on Webex Teams widgets, focusing on their embedding in applications, CSS customization, and integration with technologies like React and Node.js. It provides resources for developers, including documentation, demos, and tutorials, while emphasizing the importance of creating a seamless user experience. The roadmap highlights future improvements and encourages contributions to the open-source project.
More Related Content
What's hot (20)
Introduction to react_js
Introduction to react_jsMicroPyramid . React is a JavaScript library for building user interfaces. It was created by Facebook and is best for building dynamic websites like chat applications. React uses a virtual DOM for efficiently updating the view after data changes. Components are the building blocks of React and can contain state and props. The document provides an example of a simple component class and demonstrates how to add state and props. It also includes links to example code and MicroPyramid's social media profiles.
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi The document discusses Redux Toolkit, a framework for building Redux applications. It introduces key Redux concepts like actions, reducers, and middleware. It explains how Redux Toolkit simplifies Redux setup with utilities like thunk and Immer.js. It demonstrates Redux Toolkit APIs like configureStore, createAction, createReducer, and createSlice that generate action creators and reducer logic to update state in response to actions.
React JS and Redux
React JS and ReduxGlib Kechyn React is a JavaScript library focused on building reusable, encapsulated components for user interfaces, promoting a declarative programming style and efficient data flow through features like the virtual DOM and JSX. It supports component-oriented architecture which extends to mobile platforms such as iOS and Android via React Native. While it offers numerous advantages like simplified UI structure and component reusability, it is not a complete framework and can be verbose, making component writing less straightforward compared to pure HTML and JavaScript.
React-JS.pptx
React-JS.pptxAnmolPandita7 React js is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It allows creating reusable UI components that can be nested to build complex applications. A React component may maintain internal state and re-render when data changes. React uses a declarative paradigm that makes code more predictable and easier to debug.
To use React, install Node packages and create a new project using create-react-app. Components let you break up the UI into reusable pieces responsible for rendering HTML. Components can be stateful class components or stateless function components. Components can be created using ES6 class syntax or function syntax and can be nested. Choosing between class and function depends on requirements like using
Redux training
Redux trainingdasersoft The document provides a comprehensive overview of Redux, detailing its core concepts such as actions, action creators, and reducers. It explains the process of dispatching actions to update the application's state, emphasizing the importance of pure functions and unidirectional data flow. Additionally, it covers how to create a store, combine reducers, and manage state effectively.
ReactJS presentation
ReactJS presentationThanh Tuong ReactJS emerged from Facebook's need to address issues with dynamic web application development, transitioning from XHP to a JavaScript-based solution. It introduces essential concepts like JSX, virtual DOM, and state management for creating efficient user interfaces. The architecture emphasizes a unidirectional data flow using Flux, enhancing the organization and management of application state.
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin This document provides an overview and introduction to React JS. It discusses that React JS is a JavaScript library developed by Facebook for building user interfaces and reusable UI components. It encourages creation of reusable components that present data that changes over time. The document also covers React JS features, architecture, components, best practices, pros and cons, and provides useful links for examples and environment setup.
React js programming concept
React js programming conceptTariqul islam React JS is a JavaScript library for building user interfaces, focusing on component-based and declarative programming. It uses a virtual DOM to optimize updates and offers state management through Redux, which implements a predictable state container pattern. The document also covers key topics like React Router for handling navigation and various middlewares for Redux, such as Redux Thunk and Redux Promise.
Introduction to React
Introduction to ReactRob Quick This document provides an overview of React, detailing its history from its creation at Facebook in 2011 to its open sourcing in 2013, and emphasizes its guiding principles of being declarative and component-based. It explains how React uses a virtual DOM for efficient updates by comparing representations of the application states and batching changes for rendering. Additionally, it clarifies what React is not, indicating that it functions as a library rather than a framework and does not manage data fetching or routing.
React hooks
React hooksAssaf Gannon This document discusses React hooks and how they enhance functional components. It explains that hooks allow functional components to maintain state and lifecycle methods like class components. The key hooks discussed are useState for managing state, useEffect for side effects like data fetching, and useCallback and useMemo for optimization. Custom hooks are also covered as a way to extract reusable logic. Overall, hooks improve on class components by making code more modular, reusable and easier to test.
React lecture
React lectureChristoffer Noring This document provides an overview of React and Redux concepts including:
- React basics like components, props, state, and lifecycle methods
- Flux architecture and how data flows through actions, dispatcher, and stores
- Redux as an alternative to Flux that uses a single store updated by reducers in response to actions
- Additional React topics like JSX, propTypes, and using React with ES6 classes are also covered.
React js
React jsRajesh Kolla This document provides an overview of React including:
- React is a JavaScript library created by Facebook for building user interfaces
- It uses virtual DOM to efficiently re-render components on updates rather than entire page
- React supports ES6 features and uses classes, arrow functions, and other syntax
- Popular tools for React include Create React App for setting up projects and React Dev Tools for debugging
React js - The Core Concepts
React js - The Core ConceptsDivyang Bhambhani The document discusses React's virtual DOM and how it allows for more efficient DOM updates compared to directly manipulating the real DOM. It explains that the virtual DOM is an in-memory representation of the real DOM that allows React to calculate efficient DOM changes before applying them to the real DOM. This avoids unnecessary re-renders and improves performance. It also describes how React uses a diff algorithm and DOM traversal with breadth-first search to determine the minimal number of operations needed to transform the virtual DOM before updating the real DOM in a batched way.
Intro to React
Intro to ReactJustin Reock The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.
Reasons to use React Query
Reasons to use React Queryjavaria javaid React Query is a powerful data synchronization tool for React and React Native that simplifies data fetching, caching, and state management without using global state. It includes features like automatic refetching, optimistic updates, and support for server-side rendering, improving performance and user experience. Additionally, it provides easy management of network requests, error handling, and allows for techniques like infinite scrolling.
React js use contexts and useContext hook
React js use contexts and useContext hookPiyush Jamwal The document discusses the useContext hook in React. It explains that hooks are special functions that start with "use" and are analogous to class component methods. The useContext hook allows components to access data from their parent context without having to pass props down through each level. Without useContext, data would need to be passed through props from the parent component to child components. With useContext, a Context Provider wraps components and provides a value that can be accessed using useContext in any child component without passing props.
React Hooks
React HooksJoao Marins React Hooks are functions that allow you to "hook into" React state and lifecycle features from function components. Some key hooks include useState, useContext, and useEffect. Hooks make it easier to reuse stateful logic between components and simplify component logic. However, hooks should only be called from React functions and not in loops, conditions, or nested functions. Overall, hooks provide more powerful features to function components and opportunities to write code in a more functional style.
React js
React jsOswald Campesato ReactJS for Beginners provides an overview of ReactJS including what it is, advantages, disadvantages, typical setup tools, and examples of basic React code. Key points covered include:
- ReactJS is a JavaScript library for building user interfaces and is component-based.
- Advantages include high efficiency, easier JavaScript via JSX, good developer tools and SEO, and easy testing.
- Disadvantages include React only handling the view layer and requiring other libraries for full MVC functionality.
- Examples demonstrate basic components, properties, events, conditional rendering, and lists in ReactJS.
React redux-tutoriel-1
React redux-tutoriel-1Sem Koto Ce tutoriel aborde la compréhension de React et Redux, en détaillant leur architecture, en particulier le concept de flux de données unidirectionnel et l'utilisation de reducers. Il propose également un projet pratique pour créer une liste de fruits, avec des instructions sur la configuration du projet et l'installation des dépendances. Enfin, il guide les utilisateurs à travers l'implémentation progressive des différents composants de l'application.
Introduction to React JS for beginners
Introduction to React JS for beginners Varun Raj - React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes.
- Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements.
- Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes.
- The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
Similar to DevNetCreate Workshop - build a react app - React crash course (20)
Javascript Essentials - Cisco Live Barcelona 2019
Javascript Essentials - Cisco Live Barcelona 2019Cisco DevNet The document provides an overview of JavaScript, its versions, and its applications, highlighting the significance of Node.js as a server-side runtime built on Google's V8 engine. It discusses the evolution of JavaScript from its inception in 1995 to contemporary use cases across web and mobile applications, emphasizing its ubiquity and capabilities in modern development. The content also touches on frameworks, tools, and best practices for leveraging JavaScript in various development contexts.
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891Cisco DevNet The document outlines a presentation on Webex Teams widgets, focusing on their embedding in applications, CSS customization, and integration with technologies like React and Node.js. It provides resources for developers, including documentation, demos, and tutorials, while emphasizing the importance of creating a seamless user experience. The roadmap highlights future improvements and encourages contributions to the open-source project.
DevNet 1056 WIT Spark API and Chat Bot Workshop
DevNet 1056 WIT Spark API and Chat Bot WorkshopTessa Mero This document provides an agenda for a workshop on introducing REST APIs and creating Spark bots. The agenda covers REST API basics, an overview of the Cisco Spark API, and how to build a bot for Cisco Spark. It includes demonstrations of listing rooms using the Spark API and creating a room. The second half of the workshop discusses what chat bots are, their benefits, and the difference between integrations and bots. It provides steps for getting started with a collaboration API and creating a Spark bot, including using Cloud9 for development and creating webhook events to test the bot.
Meeting rooms are talking! are you listening?
Meeting rooms are talking! are you listening?Cisco DevNet The document presents an overview of Stève Sfartz's role at Cisco DevNet, highlighting his expertise in developer experiences and API design. It covers the capabilities of Webex Room Kits and provides links to resources for developers, including code samples and tools for building applications. Additionally, the document emphasizes the integration of programmability and analytics for enhancing meeting room experiences.
Coding 102 REST API Basics Using Spark
Coding 102 REST API Basics Using SparkCisco DevNet This document provides an overview and agenda for a workshop on REST API basics using the Cisco Spark API. The agenda includes an introduction to REST APIs and what makes them useful, a tour of the Cisco Spark API and its endpoints, and hands-on exercises for interacting with the Cisco Spark API using Postman and JavaScript examples. Attendees will learn how to retrieve room and membership data, add messages to rooms, and call API functions from JavaScript code. The workshop aims to help developers get started using the Cisco Spark API and provides resources for continuing their education on API design and development.
Stève Sfartz - Meeting rooms are talking! Are you listening? - Codemotion Ber...
Stève Sfartz - Meeting rooms are talking! Are you listening? - Codemotion Ber...Codemotion The document discusses Cisco's Webex Room Kit and its programmability features, focusing on various ways to pull data and interact with meeting room technologies via APIs. It provides examples of utilizing Node.js, SSH, and XAPI for room analytics and custom controls, along with links to resources and code samples. Additionally, it emphasizes enhancing developer experiences and integrating IoT and collaboration tools within meeting spaces.
Stève Sfartz - Meeting rooms are talking! Are you listening? - Codemotion Ber...
Stève Sfartz - Meeting rooms are talking! Are you listening? - Codemotion Ber...Codemotion The document discusses the capabilities and programmability of the Cisco Webex Room Kit, emphasizing its integration with APIs and developer tools for enhancing meeting experiences. It includes information on data collection, in-room controls, and links to repositories for sample code and resources. Additionally, it highlights community support and resources available on the Cisco DevNet platform.
Meeting rooms are talking. Are you listening
Meeting rooms are talking. Are you listeningCisco DevNet The document outlines Cisco's presentation on enhancing developer experiences with their API and tools for application development related to IoT, collaboration, and cloud solutions. It details functionalities of the Webex Room Kit, including data analytics and event listening, as well as links to various open-source resources and projects. The focus is on creating enriched user experiences and custom in-room controls using XAPI and Node.js.
Integrated, Automated Video Room Systems - Webex Devices - Cisco Live Orlando...
Integrated, Automated Video Room Systems - Webex Devices - Cisco Live Orlando...Cisco DevNet The document outlines an API-focused workshop conducted by Steve Sfartz, centered on enhancing meeting room experiences through Cisco's collaboration devices using XAPI and macros. It delves into topics such as automating room controls, customizing interfaces, and analyzing room data through device connections. Various coding resources, tools, and examples are provided to facilitate understanding and implementation of these technologies.
Docs as Code: Publishing Processes for API Experiences
Docs as Code: Publishing Processes for API ExperiencesAnne Gentle The document outlines Cisco's approach to managing documentation as code, detailing the processes and tools used for authoring, reviewing, and publishing API documentation and developer tutorials. It emphasizes the role of GitHub as a content management system, the use of various technical documentation formats, and the importance of continuous integration and deployment in the documentation workflow. Additionally, the document highlights the challenges faced in API documentation and the need for effective onboarding and feedback mechanisms for authors and contributors.
DevNet Express - Spark & Tropo API - Lisbon May 2016
DevNet Express - Spark & Tropo API - Lisbon May 2016Cisco DevNet The document presents an overview of Cisco's developer platforms, emphasizing the use of APIs to enhance collaboration and communication across various industries, including banking, healthcare, and retail. It highlights the capabilities and integrations of Cisco Spark and Tropo, showcasing real-world use cases and innovations that improve customer experiences and operational efficiency. Additionally, it encourages developers to join Cisco DevNet for resources, learning opportunities, and community support.
Chatbots 101: design, code, deploy - Cisco Live Orlando 2018 - DEVNET-2896
Chatbots 101: design, code, deploy - Cisco Live Orlando 2018 - DEVNET-2896Cisco DevNet The document outlines an agenda for a Cisco DevNet session on chatbots, covering topics such as Webex Teams architecture, REST API usage, bot account creation, and the use of various SDKs. It includes practical examples, resources, and links to demos and starter kits to help developers integrate and create chatbots within the Webex Teams environment. Key features of the Webex Teams REST API, authentication methods, and bot deployment strategies are also discussed.
Customizing Cisco Collaboration Devices - CL20B - DEVNET-2071
Customizing Cisco Collaboration Devices - CL20B - DEVNET-2071Cisco DevNet The document is a presentation by Stève Sfartz, an API architect at Cisco DevNet, focused on customizing Cisco collaboration devices through programmability and various API integrations. It covers features such as UI extensions, interactions with IoT devices, using macros in JavaScript, and the latest Cisco Collaboration APIs developments. Additionally, it provides demos and resources for developers to enhance user experiences in meeting rooms and manage devices effectively.
Advanced coding & deployment for Cisco Video Devices - CL20B - DEVNET-3244
Advanced coding & deployment for Cisco Video Devices - CL20B - DEVNET-3244Cisco DevNet The document discusses Cisco's API architecture for enhancing user experiences with Webex devices through various programmability features. It covers creating UI extensions and macros, along with tips for deploying and managing these tools for automation and customization in network environments. Additionally, it provides resources for developers and examples of using JavaScript and JSON for integration and functionality enhancements.
Webex Devices xAPI - DEVNET_2071 - Cisco Live - San Diego 2019
Webex Devices xAPI - DEVNET_2071 - Cisco Live - San Diego 2019Cisco DevNet The document discusses Cisco's collaboration devices and their programmability using APIs, specifically focusing on XAPI and JavaScript macros for creating custom in-room controls. It outlines a session agenda led by API architect Steve Sfartz at Cisco DevNet, covering topics such as embedding code, latest features, and future roadmap. The content emphasizes enhancing developer experience and providing resources like code samples and workshops for developers to build applications with Cisco's technologies.
Building a WiFi Hotspot with NodeJS: Cisco Meraki - ExCap API
Building a WiFi Hotspot with NodeJS: Cisco Meraki - ExCap APICisco DevNet This document discusses building a WiFi hotspot using Node.js and the Cisco Meraki ExCap API. It describes using Node.js and Express to create web services that handle click-through, sign-on, and social login splash pages. Sessions are stored in MongoDB. Templates are rendered using Handlebars. The API provides parameters like login URLs and splash page URLs. Code examples show routing and passport authentication strategies for social logins.
Build advanced chat bots - Steve Sfartz - Codemotion Amsterdam 2017
Build advanced chat bots - Steve Sfartz - Codemotion Amsterdam 2017Codemotion The document outlines the development of advanced chatbots using Cisco's Spark APIs, detailing various bot architectures, coding frameworks, and best practices for bot creation. It emphasizes the integration of Cisco Spark services and highlights community frameworks such as botkit and flint. Additionally, it discusses considerations like hosting options, natural language processing, and encourages developers to engage with bot challenges and educational resources.
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...Codemotion This document provides an overview of how to embed messaging and video capabilities into apps using Cisco Spark APIs and SDKs. It discusses the Cisco Spark platform and how developers can build bots, use the REST API and OAuth for authentication, and leverage SDKs for browsers, iOS, and Android. It also covers how guests can access Cisco Spark capabilities without being a registered user through guest mode and JWT tokens. Code samples and demos are provided to illustrate integrating messaging, video calling, and other real-time collaboration features into third party applications and business processes.
Embedding Messages and Video Calls in your apps
Embedding Messages and Video Calls in your appsCisco DevNet The document provides an overview of how to integrate Cisco Spark's messaging and video functionalities into applications, highlighting the use of APIs and SDKs for developers. It covers various engagement modes like real-time messaging and scheduled meetings, and presents demonstrations on coding bots and utilizing OAuth for secure access. Additionally, it emphasizes features like secure collaboration, user management in guest mode, and offers resources for further learning.
Advanced Postman for Better APIs - Web Summit 2018 - Cisco DevNet
Advanced Postman for Better APIs - Web Summit 2018 - Cisco DevNetCisco DevNet Stève Sfartz, a Developer Experience Manager at Cisco, discusses API design and developer tools, highlighting Postman as a powerful tool for API requests and testing. The document also promotes various Postman collections for Cisco's Webex and Meraki, encourages engagement with DevNet at the Web Summit, and offers resources for learning and collaborating in API development. Additionally, it emphasizes Cisco's innovation centers and workshops available for customers and partners.
Ad
More from Cisco DevNet (19)
DEVNET-2138 - Managing OpenAPI Documents at Scale - clus24.pdf
DEVNET-2138 - Managing OpenAPI Documents at Scale - clus24.pdfCisco DevNet The document discusses managing OpenAPI documents at scale, emphasizing the importance of API contracts as technical agreements between organizations and developers. It outlines the lifecycle of OpenAPI documents, including versioning, documentation, and compliance processes, while highlighting challenges associated with scalability and maintaining consistency across numerous APIs. The need for robust API contracts is also emphasized to ensure control over APIs and support automated development processes.
18 facets of the OpenAPI specification - Cisco Live US 2023
18 facets of the OpenAPI specification - Cisco Live US 2023Cisco DevNet The document discusses the OpenAPI Specification, emphasizing its role in defining technical contracts for APIs, enabling developers to describe API contracts, author documents, publish documentation, and generate code. It highlights the importance of OpenAPI in achieving a consistent developer experience and maintaining API lifecycle management. Additional topics include version compatibility, tooling, workflows, and best practices for API documentation and development.
The 12 facets of the OpenAPI standard.pdf
The 12 facets of the OpenAPI standard.pdfCisco DevNet The document presents an overview of the OpenAPI standard, detailing its utility in describing API contracts and facilitating various processes like authoring, documenting, and testing APIs. It emphasizes the importance of OpenAPI documents in ensuring clear communication between API providers and consumers, alongside offering insights into best practices for maintaining API lifecycles. Additionally, the document outlines the benefits for developers and compliance officers in utilizing OpenAPI for effective API management.
the 12 facets of OpenAPI
the 12 facets of OpenAPICisco DevNet The document discusses the 12 facets of OpenAPI as presented by Stève Sfartz, a principal architect at Cisco, highlighting its role in describing API contracts, authoring OAS documents, and generating client code. It emphasizes the importance of maintaining accurate documentation, managing API lifecycle, and ensuring compliance through OpenAPI Specifications. Key practices include automating design reviews and utilizing tools to analyze API quality and security.
Webex APIs for Administrators - CL20B - DEVNET-2610
Webex APIs for Administrators - CL20B - DEVNET-2610Cisco DevNet The document outlines the Webex APIs for administrators, highlighting the capabilities and functionalities available for managing Webex environments. It includes details on authorization with OAuth, API endpoints for user and device management, and how to leverage Postman for efficient API interaction. Additionally, it provides links to resources for deeper learning and community engagement.
Webex APIs for Administrators - DEVNET_2610 - Cisco Live 2019
Webex APIs for Administrators - DEVNET_2610 - Cisco Live 2019Cisco DevNet The document outlines various features of the Webex APIs for administrative tasks including user, role, and license management, as well as OAuth implementation for accessing Webex services. It also discusses the use of collaboration devices, personalization of interfaces, and integration capabilities for developers. Additionally, it provides resources and guidelines for setting up developer accounts and using Postman for API requests.
when Apps meet Infrastructure - CodeMotionMilan2018 Keynote - Cisco DevNet - ...
when Apps meet Infrastructure - CodeMotionMilan2018 Keynote - Cisco DevNet - ...Cisco DevNet The document promotes the Cisco DevNet event held on November 29-30, 2018, in Milan, focusing on the integration of applications with infrastructure. It highlights various themes such as API design, programmable infrastructure, and IoT controls, aiming to inspire developers to innovate and leverage technology. Attendees were encouraged to explore opportunities, collaborate, and enhance their skills in app and infrastructure development.
Emulators as an Emerging Best Practice for API Providers
Emulators as an Emerging Best Practice for API ProvidersCisco DevNet The document discusses API emulators as an emerging best practice for API providers. It describes Stève Sfartz's background and role at Cisco developing tools for developers. It then discusses how emulators can enhance the developer experience by allowing local testing and debugging of APIs without access to production services. Specific examples of emulators created for Cisco's Tropo and Webex APIs are presented, along with lessons learned around their development and use cases. The presentation concludes by advocating for API providers to consider adding emulators to better support their developer communities.
Microservices & Serverless Architecture Principles Applied - Cisco Live Orlan...
Microservices & Serverless Architecture Principles Applied - Cisco Live Orlan...Cisco DevNet The document provides an overview of applying microservice and serverless architecture principles, including the twelve-factor methodology for web services and applications. It covers key concepts such as componentization via services, adaptive routing, health checks, and API gateways, alongside practical examples and best practices. The content addresses the need for organizations to embrace these principles for improved scalability, modularity, and efficient deployment of applications.
Webex APIs for Admins - Cisco Live Orlando 2018 - DEVNET-3610
Webex APIs for Admins - Cisco Live Orlando 2018 - DEVNET-3610Cisco DevNet The document provides an overview of the Webex Teams API for administrators, detailing how to manage users, roles, licenses, and compliance through coding. It outlines the various API endpoints available, compliance capabilities, and best practices for secure implementation. Additionally, it includes instructions for using a Postman tool to facilitate API interaction and customization of Webex devices.
Golang 101 for IT-Pros - Cisco Live Orlando 2018 - DEVNET-1808
Golang 101 for IT-Pros - Cisco Live Orlando 2018 - DEVNET-1808Cisco DevNet The document covers an introduction to the Go programming language, explaining its features such as simplicity, composability, and built-in support for concurrency. It includes practical guidance on setting up a development environment, building and packaging applications using Docker, and creating command-line interfaces. Additionally, it highlights the growth of Go in various industries and offers resources for further learning and community contributions.
BotCommons: Metadata for Bots - Devoxx 2017
BotCommons: Metadata for Bots - Devoxx 2017Cisco DevNet The document outlines the development and specifications of the BotCommons framework, aimed at enhancing bot interactions and user experience. It covers various aspects such as health checks, metadata registration, and implementation examples across platforms like Cisco Spark, Slack, and Messenger. Future steps include publishing specifications and developing additional implementations for different messaging platforms.
Breizhcamp: Créer un bot, pas si simple. Faisons le point.
Breizhcamp: Créer un bot, pas si simple. Faisons le point.Cisco DevNet The document discusses the development of bots using Cisco's Tropo platform and Cisco Spark APIs, focusing on voice machines and chatbots. It covers setting up an IVR system, utilizing Tropo's cloud APIs, and best practices for building and hosting bots, along with security and analytics considerations. Additionally, it highlights the importance of coding best practices and frameworks for effective bot development.
Phone Communications in Javascript with Tropo Serverless
Phone Communications in Javascript with Tropo ServerlessCisco DevNet The document discusses advances in bot technology using Cisco's Tropo APIs, focusing on how to enhance chatbots and voice machines. It covers hosting options, serverless functions, and metadata management for bots, emphasizing the importance of health checks and user privacy. Additionally, it introduces Tropo's capabilities for integrating communication features into applications and provides setup instructions for custom IVR and voice machines.
Hackathon Poste Mobile 2016 Cisco Roma @TAG TalentGardenIT
Hackathon Poste Mobile 2016 Cisco Roma @TAG TalentGardenIT Cisco DevNet The document outlines various Cisco APIs and their applications for digital business, including IoT, big data, and cloud services. It highlights capabilities like voice and SMS communication, integration with Cisco Spark, and access to RESTful APIs for developers. Additionally, it mentions resources such as learning labs, forums, and community support for API users.
From ZERO to REST in an hour
From ZERO to REST in an hour Cisco DevNet The document provides an overview of RESTful web APIs, focusing on the use of HTTP methods and Postman for API interactions without requiring coding experience. It covers essential concepts such as request/response protocols, authentication methods, and hands-on examples for using APIs, specifically with GitHub. Additionally, it encourages participation in Cisco's developer community for further learning and resources.
building microservices
building microservicesCisco DevNet The document provides a comprehensive overview of microservices architecture, highlighting its advantages over monolithic applications and discussing cloud-native patterns, resilience, service discovery, and organizational changes required for successful implementation. It explores case studies from industry pioneers like Netflix and Amazon, elaborating on best practices for microservices development, deployment, and management tools. Additionally, it emphasizes the importance of team ownership and flexibility within an organization to adapt to the evolving demands of microservices-based applications.
An introduction to Microservices
An introduction to MicroservicesCisco DevNet This document provides an introduction to microservices architecture. It discusses why companies adopt the microservices style, how to design microservices, common patterns, and examples from Netflix.
The key points are:
1) Microservices architecture breaks applications into small, independent services that communicate over well-defined interfaces. This improves modularity, scalability, and allows independent deployments.
2) When designing microservices, services should be organized around business capabilities, have decentralized governance and data, and be designed to fail independently through patterns like circuit breakers.
3) Netflix is a leader in microservices and has open sourced many tools like Hystrix for latency handling and Eureka for service discovery that
RESTful web APIs (build, document, manage)
RESTful web APIs (build, document, manage)Cisco DevNet - RESTful Web APIs are the fuel of the web. The class will cover building, documenting, and managing RESTful web APIs.
- There are different approaches to designing web APIs, from a basic design with no distinction between app and backend, to more advanced "API-centric" designs that move business logic and security to the API.
- Web APIs can be built using frameworks like Sails.js or platforms like APISpark. They also need to be documented, monitored, and managed over their lifecycle. Tools like Swagger, Runscope, and API management platforms can help with these tasks.
Ad
Recently uploaded (20)
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash Oh, the Possibilities - Balancing Innovation and Risk with Generative AI
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata The community meetup was held Wednesday June 18, 2025 @ 9:00 AM PST.
Catch the next OpenMetadata Community Meetup @ https://www.meetup.com/openmetadata-meetup-group/
In this month's OpenMetadata Community Meetup, "Enforcing Quality & SLAs with OpenMetadata Data Contracts," we covered data contracts, why they matter, and how to implement them in OpenMetadata to increase the quality of your data assets!
Agenda Highlights:
👋 Introducing Data Contracts: An agreement between data producers and consumers
📝 Data Contracts key components: Understanding a contract and its purpose
🧑🎨 Writing your first contract: How to create your own contracts in OpenMetadata
🦾 An OpenMetadata MCP Server update!
➕ And More!
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdfPriyanka Aash Cracking the Code - Unveiling Synergies Between Open Source Security and AI
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed.
In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdfAmirStern2 מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד..
מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdfSaikat Basu A peek into the next 100 years of technology. From Generative AI to Global AI networks to Martian Colonisation to Interstellar exploration to Industrial Nanotechnology to Artificial Consciousness, this is a journey you don't want to miss. Which ones excite you the most? Which ones are you apprehensive about? Feel free to comment! Let the conversation begin!
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdfAlyona Owens Hi, I’m Aly Owens, I have a special pleasure to stand here as over a decade ago I graduated from CityU as an international student with an MBA program. I enjoyed the diversity of the school, ability to work and study, the network that came with being here, and of course the price tag for students here has always been more affordable than most around.
Since then I have worked for major corporations like T-Mobile and Microsoft and many more, and I have founded a startup. I've also been teaching product management to ensure my students save time and money to get to the same level as me faster avoiding popular mistakes. Today as I’ve transitioned to teaching and focusing on the startup, I hear everybody being concerned about Ai stealing their jobs… We’ll talk about it shortly.
But before that, I want to take you back to 1997. One of my favorite movies is “Fifth Element”. It wowed me with futuristic predictions when I was a kid and I’m impressed by the number of these predictions that have already come true. Self-driving cars, video calls and smart TV, personalized ads and identity scanning. Sci-fi movies and books gave us many ideas and some are being implemented as we speak. But we often get ahead of ourselves:
Flying cars,Colonized planets, Human-like AI: not yet, Time travel, Mind-machine neural interfaces for everyone: Only in experimental stages (e.g. Neuralink).
Cyberpunk dystopias: Some vibes (neon signs + inequality + surveillance), but not total dystopia (thankfully).
On the bright side, we predict that the working hours should drop as Ai becomes our helper and there shouldn’t be a need to work 8 hours/day. Nobody knows for sure but we can require that from legislation. Instead of waiting to see what the government and billionaires come up with, I say we should design our own future.
So, we as humans, when we don’t know something - fear takes over. The same thing happened during the industrial revolution. In the Industrial Era, machines didn’t steal jobs—they transformed them but people were scared about their jobs. The AI era is making similar changes except it feels like robots will take the center stage instead of a human. First off, even when it comes to the hottest space in the military - drones, Ai does a fraction of work. AI algorithms enable real-time decision-making, obstacle avoidance, and mission optimization making drones far more autonomous and capable than traditional remote-controlled aircraft. Key technologies include computer vision for object detection, GPS-enhanced navigation, and neural networks for learning and adaptation. But guess what? There are only 2 companies right now that utilize Ai in drones to make autonomous decisions - Skydio and DJI.
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalogshyamraj55 This presentation dives into how MuleSoft empowers AgentForce with organized API discovery and streamlined integration using Topic Center and the API Catalog. Learn how these tools help structure APIs around business needs, improve reusability, and simplify collaboration across teams. Ideal for developers, architects, and business stakeholders looking to build a connected and scalable API ecosystem within AgentForce.
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025
CapCut Pro Crack For PC Latest Version {Fully Unlocked} 2025pcprocore 👉𝗡𝗼𝘁𝗲:𝗖𝗼𝗽𝘆 𝗹𝗶𝗻𝗸 & 𝗽𝗮𝘀𝘁𝗲 𝗶𝗻𝘁𝗼 𝗚𝗼𝗼𝗴𝗹𝗲 𝗻𝗲𝘄 𝘁𝗮𝗯> https://pcprocore.com/ 👈◀
CapCut Pro Crack is a powerful tool that has taken the digital world by storm, offering users a fully unlocked experience that unleashes their creativity. With its user-friendly interface and advanced features, it’s no wonder why aspiring videographers are turning to this software for their projects.
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software In this presentation, we want to explore powerful data integration and preparation for Machine Learning. FME is known for its ability to manipulate and transform geospatial data, connecting diverse data sources into efficient and automated workflows. By integrating FME with Machine Learning techniques, it is possible to transform raw data into valuable insights faster and more accurately, enabling intelligent analysis and data-driven decision making.
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft developmentshyamraj55 CurieTech AI in Action – Accelerate MuleSoft Development
Overview:
This presentation demonstrates how CurieTech AI’s purpose-built agents empower MuleSoft developers to create integration workflows faster, more accurately, and with less manual effort
linkedin.com
+12
curietech.ai
+12
meetups.mulesoft.com
+12
.
Key Highlights:
Dedicated AI agents for every stage: Coding, Testing (MUnit), Documentation, Code Review, and Migration
curietech.ai
+7
curietech.ai
+7
medium.com
+7
DataWeave automation: Generate mappings from tables or samples—95%+ complete within minutes
linkedin.com
+7
curietech.ai
+7
medium.com
+7
Integration flow generation: Auto-create Mule flows based on specifications—speeds up boilerplate development
curietech.ai
+1
medium.com
+1
Efficient code reviews: Gain intelligent feedback on flows, patterns, and error handling
youtube.com
+8
curietech.ai
+8
curietech.ai
+8
Test & documentation automation: Auto-generate MUnit test cases, sample data, and detailed docs from code
curietech.ai
+5
curietech.ai
+5
medium.com
+5
Why Now?
Achieve 10× productivity gains, slashing development time from hours to minutes
curietech.ai
+3
curietech.ai
+3
medium.com
+3
Maintain high accuracy with code quality matching or exceeding manual efforts
curietech.ai
+2
curietech.ai
+2
curietech.ai
+2
Ideal for developers, architects, and teams wanting to scale MuleSoft projects with AI efficiency
Conclusion:
CurieTech AI transforms MuleSoft development into an AI-accelerated workflow—letting you focus on innovation, not repetition.
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.
10 Key Challenges for AI within the EU Data Protection Framework.pdf
10 Key Challenges for AI within the EU Data Protection Framework.pdfPriyanka Aash 10 Key Challenges for AI within the EU Data Protection Framework
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automationdigitaljignect In today’s dynamic digital landscape, ensuring the quality and dependability of web applications is essential. While Selenium has been a longstanding solution for automating browser tasks, the integration of WebdriverIO (WDIO) with Selenium and JavaScript marks a significant advancement in automation testing. WDIO enhances the testing process by offering a robust interface that improves test creation, execution, and management. This amalgamation capitalizes on the strengths of both tools, leveraging Selenium’s broad browser support and WDIO’s modern, efficient approach to test automation. As automation testing becomes increasingly vital for faster development cycles and superior software releases, WDIO emerges as a versatile framework, particularly potent when paired with JavaScript, making it a preferred choice for contemporary testing teams.
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019 A presentation at Internetware 2025.
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash Techniques for Automatic Device Identification and Network Assignment
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes ProbableSaikat Basu Imagine combining the "brains" of Artificial Intelligence (AI) with the "super muscles" of Quantum Computing. That's Quantum AI!
It's a new field that uses the mind-bending rules of quantum physics to make AI even more powerful.
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, [email protected] 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” [email protected] @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 [email protected] 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