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#. Install `NVM`_. You'll need to close and re-open your terminal 16 to get ``nvm`` on your command line path. 17 18 .. note:: 19 20 You can skip the NVM steps if you've already got NPM installed 21 on your machine. Also, you can install NPM however you want; 22 NVM is just one fast option. 23 24#. Use NVM to install the long-term support (LTS) release of Node.js: 25 26 .. code-block:: console 27 28 nvm install --lts 29 30#. Set your working directory to ``web_app``: 31 32 .. code-block:: console 33 34 cd <path>/<to>/sense/web_app 35 36#. Install the web app's dependencies: 37 38 .. code-block:: console 39 40 npm install 41 42#. Run the web app: 43 44 .. code-block:: console 45 46 npm run dev 47 48 In the output, note the line that looks like 49 ``> Local: http://127.0.0.1:8000/`` (your actual URL may be different). 50 This is the URL you'll need in the next step. 51 52#. Open the web app in Google Chrome or Microsoft Edge. **This application does 53 not work in other browsers like Apple Safari or Mozilla Firefox** because 54 `those browsers don't support`_ the Web Serial API. 55 56 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_splash.png 57 58#. Click **Connect** and select the **Pico** option (or the 59 **Debug Probe (CMSIS-DAP)** option if you're using a Debug Probe). 60 61 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_connect.png 62 63 .. note:: 64 65 The Pico is not running a web server. The web app spins up its own local 66 server and then communicates with the Pico by sending RPCs over the 67 Web Serial API. 68 69 You should see a chart of the Pico's onboard temperature getting updated 70 every second. 71 72 .. figure:: https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_home.png 73 74 .. note:: 75 76 We recently updated this web app to support the Pico application 77 described in :ref:`showcase-sense-tutorial-prod`. Check back next 78 week for updates. 79 80#. Close the browser tab running the web app. 81 82#. In the terminal where you launched the web app, press 83 :kbd:`Control+C` to stop the web server. 84 85.. _showcase-sense-tutorial-webapp-summary: 86 87------- 88Summary 89------- 90Projects built on top of Pigweed often build themselves custom web apps 91to make development, support, and manufacturing processes faster. Other 92teams create web apps that let their end customers manage their own 93devices. 94 95Next, head over to :ref:`showcase-sense-tutorial-factory` to get 96familiar with how Pigweed can make it easier to test newly 97manufactured devices. 98
