1.. _showcase-sense-tutorial-webapp: 2 3====================================================== 411. Communicate with your Pico over the Web Serial API 5====================================================== 6.. _Web Serial API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API 7 8:ref:`module-pw_web` makes it possible to create custom web apps that 9communicate with embedded devices over the `Web Serial API`_. Try 10monitoring and controlling your Pico over the web now. 11 12.. _NVM: https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating 13.. _those browsers don't support: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility 14 15#. Open a terminal. 16 17#. Install `NVM`_. You'll need to close and re-open your terminal 18 to get ``nvm`` on your command line path. 19 20 .. note:: 21 22 You can skip the NVM steps if you've already got NPM installed 23 on your machine. Also, you can install NPM however you want; 24 NVM is just one fast option. 25 26#. Use NVM to install the long-term support (LTS) release of Node.js: 27 28 .. code-block:: console 29 30 nvm install --lts 31 32#. Set your working directory to ``web_app``: 33 34 .. code-block:: console 35 36 cd <path>/<to>/sense/web_app 37 38#. Install the web app's dependencies: 39 40 .. code-block:: console 41 42 npm install 43 44#. Run the web app: 45 46 .. code-block:: console 47 48 npm run dev 49 50 In the output, note the line that looks like 51 ``> Local: http://127.0.0.1:8000/`` (your actual URL may be different). 52 This is the URL you'll need in the next step. 53 54#. Open the web app in Google Chrome or Microsoft Edge. 55 56 .. warning:: 57 58 **This application does not work in other browsers like Apple Safari 59 or Mozilla Firefox** because `those browsers don't support`_ the Web 60 Serial API. 61 62 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_splash.png 63 64#. Click **Connect** and select the **Pico** option. 65 66 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_connect.png 67 68 .. note:: 69 70 The Pico is not running a web server. The web app spins up its own local 71 server and then communicates with the Pico by sending RPCs over the 72 Web Serial API. 73 74 You should see a chart of the Pico's onboard temperature getting updated 75 every second. 76 77 The **No Enviro+ Board Found!** warning is expected. Your Pico is currently 78 running the ``blinky`` bringup app. In :ref:`showcase-sense-tutorial-prod` you will 79 revisit this web app when your Pico is running the ``production`` app and you 80 will see more information on the web app. 81 82 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_home.png 83 84#. Close the browser tab running the web app. 85 86#. In the terminal where you launched the web app, press 87 :kbd:`Control+C` to stop the web server. 88 89#. Set your working directory back to the root directory of your Sense repository: 90 91 .. code-block:: console 92 93 cd .. 94 95.. _showcase-sense-tutorial-webapp-summary: 96 97------- 98Summary 99------- 100Projects built on top of Pigweed often build themselves custom web apps 101to make development, support, and manufacturing processes faster. Other 102teams create web apps that let their end customers manage their own 103devices. 104 105Next, head over to :ref:`showcase-sense-tutorial-factory` to get 106familiar with how Pigweed can make it easier to test newly 107manufactured devices. 108
