万事起头难，不开始就不难 ᕕ( ﾟ ∀。)ᕗ

第一篇文章有请柴柴镇楼 （´∀`），开始挖坑！

首先让我们从认识陌生朋友开始。

正文开始

一般而言，我们都会根据具体需求设计专用韧体，烧入单晶片中，但是这次主题是 Modern Web，所以我们这次不写任何韧体，而是直接使用 Firmata。

（如果我写一篇将 MCU 当成游戏服务器，提供 SPA 网页游戏，并透过 Websocket 让大家连线对战的主题，会有人想看吗？(´,,•ω•,,)）

所以 Firmata 什麽鬼？能吃吗？别急，接下来我们来依序认识此主题中几个主要专有名词。

同时介绍我们的吉祥物兼小助教「麻糬」登场！

接下来麻...电子助教会穿插在各种图解中，协助大家理解概念。

专有名词

电压与电流

「电」的某些性质与「水」类似，为了方便理解，有时会用水来类比电。

单晶片

又称微控制器单元（microcontroller unit，MCU），一般而言就是将 CPU、RAM、ROM 和各类 I/O 介面整合成一个积体电路，可以透过烧入自订韧体达成读取、计算、输出等等功能。

其中最出名的开发平台非 Arduino 莫属，Arduino Uno 电路板就算没用过可能都有看过，如下图：

是这一个才对：

Firmata

刚才提到 MCU 可以烧入自制韧体，也就是说一开始 MCU 里面就和星期一上班的脑袋一样都是空空的，需要烧入韧体才能进行通讯或控制。

（实际上不会完全空，可能会有 bootloader 等等，不过并非此次主题，就不展开讨论。）

而 Firmata 是一个完整的控制协定，描述了如何利用通讯进行 I/O 控制，只要依照 Firmata Protocol 的内容发送命令，就可以控制 MCU 上对应的功能，正如官方文档所说的：

Firmata is a protocol for communicating with microcontrollers from software on a computer (or smartphone/tablet, etc). The protocol can be implemented in firmware on any microcontroller architecture as well as software on any computer software package (see list of client libraries below).

换个比喻，Firmata 就像一个已经设计完成的菜单，只要依照菜单规定的内容（协定），就可以简单的取得对应的餐点（资料），不用自己从头设计原料、烹调、摆盘等等细节（扩展性、强健性）。

串列通讯（Serial communication）

顾名思义就是指透过资料通道，每次传输一个位元的通讯方式。

Arduino Uno 上有内建多种通讯界面，其中最常用的是 UART。透过 USB 线将 Arduino Uno 接上电脑所使用的介面便是 Uno 的 UART。

Web Serial API

将 Arduino Uno 透过 USB 线接上电脑後，电脑的连接埠会跑出对应的 COM。

以往要呼叫 COM 进行通讯都会需要有对应权限的应用程序。如果网页要取得 COM 资料，通常都是开启一个 Web Server 作为中介，而 Web Serial API 则可以让 JavaScript 可以透过浏览器，直接存取 COM。

不过目前支援的浏览器很少，下图是目前的支援度列表（2021/08/30）：

（没想到 Opera 竟然有支援，还以为只能在 Chrome 上自嗨呢 ᕕ( ﾟ ∀。)ᕗ）

以上介绍完毕，接下来我们正式开始吧！

行前须知

由於本篇不是基础教学文（窝怕误人子弟 ( ´•̥̥̥ ω •̥̥̥` )），所以以下内容不会特别说明：

• HTML、CSS、JS 基本概念
• Pug、Sass 基本概念
• ES6 以上语法
• Vue、Vuex 基本使用
• Vue Components 封装

（所有程序码都会放在 GitLab 上让大家下载，可以慢慢研究）

计画内容

接下来预期的内容与技术：

• 介面呈现

  使用 Web 技术设计一个类 Windows 的介面

  • 可以自由开启、关闭视窗。
  • 不同视窗表示不同功能，例如：数位脚位控制、类比讯号读取等等。
  • 建立小游戏并使用真实的按钮进行控制。

• Firmata Protocol

  阅读协定并设计收发模组

• 电子零件

  • 开发板使用 Arduino Uno
  • LED、REG LED、按钮、可变电阻、摇杆

• 功能应用

  • 数位 I/O：按钮、LED
  • 类比输入：可变电阻
  • PWM：LED
  • 调色盘：RGB LED
  • 游戏「跑跑小恐龙」：按钮
  • 游戏「猫狗大战」：摇杆

那就让我们开始吧！

以下影片是最後的成果，大家可以参考看看 (๑•́ ₃ •̀๑)

希望大家会期待後续内容 (´,,•ω•,,)