---
# System prepended metadata

title: 'Web:bit 基礎課程教學'

---

# Web:bit 基礎課程教學
> 官方網站
> 
http://webuino.io/
> 程式編輯器
> 
https://webbit.webduino.io/blockly/?demo=default

## 🔰教學 : 如何查看自己Web:bit板子的Device ID 
首先請先開啟上方的程式編輯器，開啟後把我們的板子跟電腦接上，然後點選右上角的 (更多)，再來點選 (開發版)，點選 (下一步)，左上角會跳出選擇Port的框框，選擇 Web:bit(自己的板子)，點一下之後點下方的 (連線)，最後就會跳出板子的資訊面板，可以看到自己板子的Device ID 以及可以設定網路。 **❗下方會有圖解釋❗**

![](https://i.imgur.com/yn7mZJx.png)
```
首先先打開我們的程式編輯器。(圖一)
```
![](https://i.imgur.com/XX1v3ym.png)
```
點選右上角的更多，還有下方的開發版。(圖二)
```
![](https://i.imgur.com/fJ8r4oz.png)
```
點開開發板之後，點選剛跳出來框框裡面的下一步。(圖三)
```
![](https://i.imgur.com/lMa77kv.png)
```
左上角會跳出這個框框，這裡面會顯示板子的Port，圖中因沒有接，所以用文字來代替，選好之後點下方的連線。(圖四)
```

## ❗先點我來複製貼上自己的Device ID
**⭐快來點我，紀錄妳的Device ID⭐**

## ※ 單點LED
使用最基礎的方式，來使LED燈亮起。

[✔點我下載程式碼](https://download850.mediafire.com/dg7ww04fypbg2_QjAQ-9446g4oKDXOsLbKG-_pYOAMPkt-9p3DbUnZp81Rvep7fB2erEOZ_LiHX85gRcMUOdeCd84Dk9/63e2ntvn5wchtuz/%E7%9F%A9%E9%99%A3led.json)
> 程式代碼

![](https://i.imgur.com/zeYpc80.png)

> **成品如下方圖示**

![](https://i.imgur.com/HVIbLgJ.png)

## ※ 迴圈LED
新增迴圈的方式，讓程式變簡單化，並且能讓LED燈亮起。

[✔點我下載程式碼](https://download1582.mediafire.com/qjuebfuzkzggSmLXoYTg4YI8_jJRw8u6PgR0NGslTC2GjK-a537jfT6Q8APR3PAnvkQBa7d2RGFUuK_3s8DUZFEo0Ysg/vnq62drs499kf94/%E8%BF%B4%E5%9C%88led.json)
> 程式代碼
>
![](https://i.imgur.com/Wihgp75.png)

> **成品如下方圖示**

![](https://i.imgur.com/CkKOzpj.png)

## ※ 矩陣LED
這個是更簡單的方式，可以讓LED亮起。

[✔點我下載程式碼](https://download1507.mediafire.com/xeop2kwxoszgNxYXkLlilIAXqdKdELdR55oyFWqowIRyY94IG6LlA_T8dDaT_9cOhkhbQQ8VDEej3SZhcwQW05EMcTI1/5ckodudhzycj0ac/%E5%96%AE%E9%BB%9Eled.json)
> 程式代碼

![](https://i.imgur.com/aeMow01.png)

> 成品如下方圖示

![](https://i.imgur.com/SMjEX5u.png)

## ※ 使用控制器操控循跡車
使用編輯器右下角的小恐龍，來控制小車的方向。

[✔點我下載程式碼](https://download1585.mediafire.com/vewo5exm6mfgOvjer8sSztf4kQmM8fSmRu_XIWye3P8Qu_IUA4wji7IlIoYaYgvLAtdMKGYcGKLXwMljhqSFoV_TCgUr/qimk4vf0oihk453/%E5%BE%AA%E6%A9%9F%E8%BB%8A%E9%81%99%E6%8E%A7%E5%99%A8.json)
> 程式代碼

![](https://i.imgur.com/lR9DYu5.png)

> 成品如下方圖示
```
點擊頁面右下方的四位小恐龍，可設定點選哪隻小恐龍為前進後退。
```
![](https://i.imgur.com/WE4E0tE.png)

## ※ 循跡小車製作
使用官方提供的套件，來讓循跡小車，在指定的跑道上可以跟著軌道跑。

[✔點我下載程式碼](https://download1531.mediafire.com/ybzcf9efrpegVmX4dyPwej2D5LY3SHqHcsO78Klh_fqAqX-03nrX50tRrmymgmfnkvjY-j-a04OFOqPJ2TDjIdRXwGx4/ml9nhby5b84xlac/%E5%BE%AA%E6%A9%9F%E8%BB%8A%E8%87%AA%E8%B5%B0.json)
> 程式代碼

![](https://i.imgur.com/U5LPVEc.png)

> 成品如下方圖示
[[ **點我看結果** ](https://youtu.be/ixV5RnBAKHI)]

