tutorials/app/tutorials.html at master · webduinoio/tutorials

This repository was archived by the owner on Feb 12, 2023. It is now read-only.
709 lines (680 loc) · 30 KB
<!DOCTYPE html>
<html lang="zh-TW">
	<meta charset="UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="webduino.io">
  <meta name="copyright" content="webduino.io">
  <meta itemprop="name" content="webduino.io">
  <link rel="icon" href="../img/layout/favicon.ico" type="image/x-icon">
  <link rel="icon" href="img/layout/favicon.ico" type="image/x-icon">
	<title>Webduino 教學範例 ::: Webduino = Web × Arduino</title>
  <meta name="description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。">
  <meta itemprop="description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。">
  <meta property="og:description" content="Webduino 的網站提供了非常豐富的教學範例，透過詳細的操作解說，這些範例將由淺入深的帶領開發者進入 Web 控制 Arduino 的領域，從電子電路的接線，一直到 Javascript 的撰寫都有非常完整詳盡的說明。">
  <meta property="og:title" content="Webduino = Web × Arduino" >
  <meta property="og:url" content="https://webduino.io/tutorials.html">
  <meta property="og:image" content="https://webduino.io/img/tutorials/tutorials-s.jpg">
  <meta itemprop="image" content="https://webduino.io/img/tutorials/tutorials-s.jpg">
	<script src="js/lib/jquery.min.js"></script>
	<script src="js/lib/jquery.lazyload.min.js"></script>
	<script src="js/layout.js"></script>
	<link rel="stylesheet" href="style/css/layout.css">
	<link rel="stylesheet" href="style/css/sub-header.css">
  <script src="js/tutorials-filter.js"></script>
	<link rel="stylesheet" href="style/css/tutorials.css">
	<link rel="stylesheet" href="style/css/lib/font-awesome.css">
	<header class="path-0">
		<a class="logo" href="index.html" data-name="layout-header-logo"></a>
		<div class="mobile-menu"></div>
		<div class="menu">
			<a href="index.html" class="index" data-name="layout-mobile-menu">首頁</a>
			<a href="tutorials.html" class="tutorials" data-name="layout-mobile-menu">教學範例</a>
			<a href="buy.html" class="buy" data-name="layout-mobile-menu">產品總覽</a>
			<a href="activity.html" class="activity" data-name="layout-mobile-menu">課程活動</a>
			<a href="about.html" class="about" data-name="layout-mobile-men">關於我們</a>
			<a href="en/index.html" class="english" data-name="layout-mobile-men">English</a>
	<header class="path-1">
		<a class="logo" href="../index.html"></a>
		<div class="mobile-menu"></div>
		<div class="menu">
			<a href="../index.html" class="index" data-name="layout-menu">首頁</a>
			<a href="../tutorials.html" class="tutorials" data-name="layout-menu">教學範例</a>
			<a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a>
			<a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a>
			<a href="../about.html" class="about" data-name="layout-menu">關於我們</a>
			<a href="../en/index.html" class="english" data-name="layout-menu">English</a>
	<div class="filter">
		<a class="btn-new click" href="#new">最新文章</a>
		<a class="btn-all" href="#all">所有文章</a>
		<a class="btn-info" href="#info">設定介紹</a>
		<a class="btn-component" href="#component">元件模組</a>
		<a class="btn-sensor" href="#sensor">傳感器</a>
		<a class="btn-example" href="#example">綜合應用</a>
		<a class="btn-smart" href="#smart">Smart</a>
		<a class="btn-cloud" href="#cloud">雲端平台</a>
	<div class="content"> 
		<!--  info -->
			<div class="filter-info">
				<a href="tutorials/info-01-introduction.html">
						<img class="lazy" data-original="img/tutorials/info-01-01s-new2.jpg" />
					</div>
					<h2>基本介紹</h2>
					<span>Webduino 讓使用者只需要撰寫簡單的網頁程式，就可以串接 Arduino，大幅降低開發的門檻。</span>
			<div class="filter-info ">
				<a href="tutorials/info-02-setup.html">
						<img class="lazy" data-original="img/tutorials/info-02-01s.jpg" />
					</div>
					<h2>初始化設定 ( 初次使用必讀 )</h2>
					<span>實作 Webduino 之前，最重要的就是進行初始化設定，初始化設定的目的在於讓 Webduino 開發板可以自動上網</span>
			<div class="filter-info">
				<a href="tutorials/info-03-faq.html">
						<img class="lazy" data-original="img/tutorials/info-03-01s.jpg" />
					</div>
					<h2>常見問題處理</h2>
					<span>常見問題處理頁面裡頭會列出許多常見的問題，以及各種問題對應的解決方法。</span>
			<div class="filter-info">
				<a href="tutorials/info-04-uno-setup.html">
						<img class="lazy" 	data-original="img/tutorials/info-04-01s.jpg" />
					</div>
					<h2>Webduino Fly 初始化設定 ( 初次使用必讀 )</h2>
					<span>透過 Webduino Fly ( UNO 雲端擴充板 ) 的設定，讓您的 Arduino UNO 化身為 Webduino。</span>
			<div class="filter-info">
				<a href="tutorials/info-07-arduino-ino.html">
						<img class="lazy" data-original="img/tutorials/info-07-01s.jpg" />
					</div>
					<h2>Arduino 韌體下載與燒錄</h2>
					<span>下載與燒錄客製化的韌體，讓你的 Arduino 更具多樣性，讓你的 Arduino 長出翅膀，躍上雲端。</span>
			<div class="filter-info">
				<a href="tutorials/info-05-chrome-api-proxy.html">
						<img class="lazy" data-original="img/tutorials/info-05-01s.jpg" />
					</div>
					<h2>Chrome API Proxy 安裝設定</h2>
					<span>安裝 Chrome API Proxy，讓 Arduino UNO 可以透過藍芽或序列埠的方式，感受方便美好的 Webduino 開發體驗。</span>
			<div class="filter-info">
				<a href="tutorials/info-08-blockly-tutorial.html">
						<img class="lazy" data-original="img/tutorials/info-08-01s.jpg" />
					</div>
					<h2>Webduino Blockly 基礎教學</h2>
					<span>Webduino Blockly 線上編輯工具是 Webduino 所研發出來的圖像化編輯工具。</span>
			<div class="filter-info">
				<a href="https://blockly.webduino.io/index-tutorials.html" target="_blank">
						<img class="lazy" data-original="img/tutorials/info-06-01s.jpg" />
					</div>
					<h2>Webduino Blockly 實作範例</h2>
					<span>體驗最方便的 Webduino Blockly 線上編輯工具，感受從來沒有過如此輕鬆的物聯網開發體驗。</span>
			<div class="filter-info">
				<a href="tutorials/info-09-multi-webduino-board.html">
						<img class="lazy" data-original="img/tutorials/info-09-01s.jpg" />
					</div>
					<h2>連動多塊 Webduino 開發板</h2>
					<span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span>
			<div class="filter-info">
				<a href="tutorials/info-10-pin.html">
						<img class="lazy" data-original="img/tutorials/info-10-01s.jpg" />
					</div>
					<h2>Webduino 腳位偵測與設定</h2>
					<span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span>
			<div class="filter-info">
				<a href="tutorials/info-11-feature.html">
						<img class="lazy" data-original="img/tutorials/info-11-01s.jpg" />
					</div>
					<h2>Webduino Blockly 的十一個操作密技</h2>
					<span>我們就可以透過很簡單的判斷與控制，進一步讓各個開發板與電子零組件彼此連動。</span>
			<div class="filter-info">
				<i class="new"></i>
				<a href="tutorials/info-12-bluetooth.html">
						<img class="lazy" data-original="img/tutorials/info-12-01s.jpg" />
					</div>
					<h2>Webduino 使用藍芽操控</h2>
					<span>這篇文章將會介紹如何連接藍芽模組 ( HC05、HC06 )，以及相對應的設定、操控方式。</span>
			<div class="filter-info filter-smart">
				<i class="new"></i>
				<a href="tutorials/smart-01-information.html">
						<img class="lazy" data-original="img/tutorials/smart-01-information-s.jpg" />
					</div>
					<h2>認識 Webduino Smart</h2>
					<span>Smart 是 2016 年推出的物聯網開發板，更能有效地應用在物聯網的開發和各種創意上。 </span>
			<div class="filter-info filter-smart">
				<i class="new"></i>
				<a href="tutorials/smart-02-setup.html">
						<img class="lazy" data-original="img/tutorials/smart-02-setup-s.jpg" />
					</div>
					<h2>Webduino Smart 初始化設定 ( 初次使用必讀 )</h2>
					<span>初始化設定的目的在於讓開發板可以自動上網，或是在區域網路透過 WebSocket 連線。 </span>
			<div class="filter-smart">
				<i class="new"></i>
				<a href="tutorials/smart-03-rgbled.html">
						<img class="lazy" data-original="img/tutorials/smart-03-rgbled-s.jpg" />
					</div>
					<h2>Smart 三色燈初體驗</h2>
					<span>Smart 內建一個微型三色 LED 燈，這表示我們可以直接透過 Smart 發出各種顏色。</span>
			<div class="filter-smart">
				<i class="new"></i>
				<a href="tutorials/smart-04-rgbled.html">
						<img class="lazy" data-original="img/tutorials/smart-04-rgbled-s.jpg" />
					</div>
					<h2>躍動的 Smart 三色燈</h2>
					<span>上一篇已經了解基本的三色燈操控，這篇將透過「等待」與「迴圈」積木，實作出一個躍動的三色燈。</span>
			<div class="filter-smart">
				<i class="new"></i>
				<a href="tutorials/smart-05-photocell.html">
						<img class="lazy" data-original="img/tutorials/smart-05-photocell-s.jpg" />
					</div>
					<h2>Smart 的光敏電阻</h2>
					<span>Webduino Smart 開發板的右上角內建了一顆光敏電阻，由這個光敏電阻我們就可以偵測環境的光線，做出許多簡單的光線偵測效果。</span>
			<div class="filter-smart filter-new">
				<i class="new"></i>
				<a href="tutorials/smart-06-button.html">
						<img class="lazy" data-original="img/tutorials/smart-06-button-s.jpg" />
					</div>
					<h2>Smart 的按鈕開關</h2>
					<span>我們可以透過 Smart 內建的微型按鈕開關，執行「按下」、「放開」或「長按」等動作。</span>
			<div class="filter-smart filter-new">
				<i class="new"></i>
				<a href="tutorials/smart-07-button-youtube.html">
						<img class="lazy" data-original="img/tutorials/smart-07-button-youtube-s.jpg" />
					</div>
					<h2>Smart 按鈕開關控制 Youtube</h2>
					<span>透過 Smart 開關的行為，操控 Youtube 的影片播放，如此一來只要動動手指，就可以控制影片。</span>
			<div class="filter-info filter-cloud filter-new">
				<i class="new"></i>
				<a href="tutorials/cloud-01-introduction.html">
						<img class="lazy" data-original="img/tutorials/cloud-01-01s.jpg" />
					</div>
					<h2>Webduino 雲端平台</h2>
					<span>「Webduino 雲端平台」是 Webduino 所研發的全方位的物聯網開發工具，實現「從硬體到軟體、從軟體到雲端、從雲端到行動裝置」的完整應用。</span>
			<div class="filter-info filter-cloud filter-new">
				<i class="new"></i>
				<a href="tutorials/cloud-02-register.html">
						<img class="lazy" data-original="img/tutorials/cloud-02-01s.jpg" />
					</div>
					<h2>雲端平台 - 註冊與登入</h2>
					<span>使用 Webduino 雲端平台的第一步就是註冊，註冊後便能儲存開發中的專案，並且進行物聯網裝置與個人帳號的綁定。</span>
			<div class="filter-info filter-cloud filter-new">
				<i class="new"></i>
				<a href="tutorials/cloud-03-webduino-blockly.html">
						<img class="lazy" data-original="img/tutorials/cloud-03-01s.jpg" />
					</div>
					<h2>Blockly 程式積木</h2>
					<span>雲端平台的 Webduino Blockly 具備存檔與共享檔案的功能，並提供豐富的電子元件與傳感器模組。</span>
			<div class="filter-info filter-cloud filter-new">
				<i class="new"></i>
				<a href="tutorials/cloud-04-webduino-device.html">
						<img class="lazy" data-original="img/tutorials/cloud-04-01s.jpg" />
					</div>
					<h2>Device 裝置管理 ( 裝置認證 )</h2>
					<span>不論手邊有多少物聯網的開發裝置，都可以在雲端平台上掌握裝置的上下線狀態、韌體版本以及安全性設定。</span>
			<div class="filter-info filter-cloud filter-new">
				<i class="new"></i>
				<a href="tutorials/cloud-05-webduino-device-update.html">
						<img class="lazy" data-original="img/tutorials/cloud-05-01s.jpg" />
					</div>
					<h2>Device 裝置管理 ( 雲端更新 )</h2>
					<span>只要裝置處於上線狀態，就能透過雲端更新的方式也可輕鬆進行遠端更新，甚至多台裝置可以同時更新、同時設定。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-01-led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-01-01s.jpg" />
					</div>
					<h2>單顆 LED 燈</h2>
					<span>進入了 Webduino 的世界之後，使用 LED 來作為第一個範例，而撰寫的程式也更為簡單，就像控制一張網頁圖片切換一樣的容易。</span>
			<!-- <div class="filter-component">
				<a href="tutorials/tutorial-02-2led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-02-01s.jpg" />
					</div>
					<h2>兩顆 LED 燈交互閃爍</h2>
					<span>在這個範例裡頭，將會利用按鈕的方式，同時操控兩顆 LED 燈，做出兩顆 LED 燈交互閃動的效果。</span>
			</div> -->
			<div class="filter-component">
				<a href="tutorials/tutorial-03-rgbled.html">
						<img class="lazy" data-original="img/tutorials/tutorial-03-01s.jpg" />
					</div>
					<h2>三色 LED 燈</h2>
					<span>三色 LED 是由紅綠藍三種不同顏色的 LED 所組成，可以發出最少三種顏色的光，我們也可以分別控制顏色的強弱，達到混合顏色的效果。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-04-rgbled-palette.html">
						<img class="lazy" data-original="img/tutorials/tutorial-04-01s.jpg" />
					</div>
					<h2>三色 LED 燈調色盤</h2>
					<span>利用 Web 裡頭常見的 slider range，來控制三色 LED 燈的顏色強弱，同時在網頁裡頭對應相同的色彩。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-05-ultrasonic.html">
						<img class="lazy" data-original="img/tutorials/tutorial-05-01s.jpg" />
					</div>
					<h2>超音波傳感器</h2>
					<span>透過超音波碰撞到物體之後反射回來的時間差，就可以計算超音波傳感器與相對應物體之間的距離。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-06-ultrasonic-imagesize.html">
						<img class="lazy" data-original="img/tutorials/tutorial-06-01s.jpg" />
					</div>
					<h2>超音波傳感器改變圖片大小</h2>
					<span>藉由超音波傳感器回傳的公分數值，對應到網頁裡頭圖片的寬度，就輕鬆地利用超音波傳感器控制圖片大小。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-07-ultrasonic-led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-07-01s.jpg" />
					</div>
					<h2>超音波傳感器 + LED 燈</h2>
					<span>透過 Web 的方式，用超音波傳感器控制 LED 燈，當行為觸發時，網頁端同時也可以收到動作的發生</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-08-ultrasonic-rgbled.html">
						<img class="lazy" data-original="img/tutorials/tutorial-08-01s.jpg" />
					</div>
					<h2>超音波傳感器 + 三色 LED 燈</h2>
					<span>這個範例最主要是希望能藉由三色 LED 燈顏色上的變化，對應距離的改變，如此一來我們就可以藉由燈號來判斷距離。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-09-button-led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-09-01s.jpg" />
					</div>
					<h2>按鈕開關</h2>
					<span>開關是日常生活中很常見的電子零件，藉由開和關的訊號，可以控制各種不同的家電，這個範例將會展示。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-10-temperature-humidity-sensor.html">
					<div >
						<img class="lazy" data-original="img/tutorials/tutorial-10-01s.jpg" />
					</div>
					<h2>溫濕度傳感器</h2>
					<span>透過溫濕度傳感器，可以準確的偵測溫度與溼度的即時變化，搭配一些圖表工具或後端資料庫，整合成為非常有用的數據收集應用。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-11-shock-button.html">
						<img class="lazy" data-original="img/tutorials/tutorial-11-01s.jpg" />
					</div>
					<h2>震動開關改變網頁數值</h2>
					<span>震動開關在晃動的時候，內部互相接觸進而短路導電，利用震動的方式，控制電路的開或關，將結果回傳到網頁上。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-12-sound-sensor.html">
						<img class="lazy" data-original="img/tutorials/tutorial-12-01s.jpg" />
					</div>
					<h2>聲音偵測點亮 LED 與網頁燈泡</h2>
					<span>這個範例將會利用聲音偵測傳感器，當偵測到有聲音，就自動點亮 LED 燈，同時也會點亮網頁裡頭的燈泡。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-13-buzzer.html">
						<img class="lazy" data-original="img/tutorials/tutorial-13-01s.jpg" />
					</div>
					<h2>蜂鳴器播放自製音樂</h2>
					<span>藉由 HTML5 Attribute 來填入音符代碼，編輯 HTML5 或 javascript 就可以編輯音樂，透過蜂鳴器發聲。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-14-relay.html">
						<img class="lazy" data-original="img/tutorials/tutorial-14-01s.jpg" />
					</div>
					<h2>繼電器控制風扇旋轉</h2>
					<span>繼電器通常應用於自動控制電路中，當我們開始用 Webduino 控制繼電器，就可以非常簡單的做出利用網頁控制的智慧插座或自動開關。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-15-pir-led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-15-01s.jpg" />
					</div>
					<h2>人體紅外線偵測控制 LED</h2>
					<span>利用 Webduino，在人體紅外線傳感器接收到訊號時，觸發網頁的燈泡亮起，同時也讓 LED 燈發光。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-16-servo.html">
						<img class="lazy" data-original="img/tutorials/tutorial-16-01s.jpg" />
					</div>
					<h2>控制伺服馬達轉動角度</h2>
					<span>使用 HTML 的 range，透過 Webduino控制伺服馬達的旋轉角度，range 調整多少，馬達就會跟著旋轉多少角度。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-17-photocell.html">
						<img class="lazy" data-original="img/tutorials/tutorial-17-01s.jpg" />
					</div>
					<h2>光敏電阻獲取光源數值</h2>
					<span>光敏電阻主要是利用光電導效應的一種特殊的電阻，透過會變化的電阻值，進一步產生輸出強弱訊號。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-18-max7219.html">
						<img class="lazy" data-original="img/tutorials/tutorial-18-01s.jpg" />
					</div>
					<h2>LED 點矩陣顯示圖形</h2>
					<span>LED 點矩陣顧名思義，就是用許多 LED 燈所組成的元件，最常見到的就是在火車、公車等大眾運輸裡常見的文字跑馬燈。</span>
			<div class="filter-sensor">
				<a href="tutorials/tutorial-19-rfid.html">
						<img class="lazy" data-original="img/tutorials/tutorial-19-01s.jpg" />
					</div>
					<h2>RFID</h2>
					<span>RFID 中文翻譯為「無線射頻辨識」，是一種常見的無線通訊技術，常見於庫存、資產、人員等的追蹤與管理。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-20-rfid-youtube.html">
						<img class="lazy" data-original="img/tutorials/tutorial-20-01s.jpg" />
					</div>
					<h2>RFID 控制 Youtube</h2>
					<span>這一篇範例要來實作更進階的 RFID：控制 Youtube，利用不同的磁卡或磁扣，來切換不同的 Youtube 影片。</span>
			<div class="filter-component filter-example">
				<a href="tutorials/tutorial-21-toycar.html">
						<img class="lazy" data-original="img/tutorials/tutorial-21-01s.jpg" />
					</div>
					<h2>鍵盤操控自走車</h2>
					<span>Webduino 公仔自走車是 Webduino 自主研發的產品，使用 Webduino 馬克 1 號開發板控制。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-22-speech-led.html">
						<img class="lazy" data-original="img/tutorials/tutorial-22-01s.jpg" />
					</div>
					<h2>語音聲控 LED 燈 </h2>
					<span>在這個範例裡面我們將會透過 Google 的語音辨識功能，輕鬆實現語音聲控 LED 燈的效果。</span>
			<div class="filter-sensor">
				<i class="new"></i>
				<a href="tutorials/tutorial-23-adxl345.html">
						<img class="lazy" data-original="img/tutorials/tutorial-23-01s.jpg" />
					</div>
					<h2>三軸加速度計 </h2>
					<span>在這個篇教學將使用 Webduino 來控制 ADXL345 這個型號的三軸加速度感應器。</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-24-ir.html">
						<img class="lazy" data-original="img/tutorials/tutorial-24-01s.jpg" />
					</div>
					<h2>紅外線發射與接收 </h2>
					<span>紅外線發射與接收，常見於我們日常生活的電器用品，舉凡電視機、冷氣機、遙控電風扇、玩具...等</span>
			<div class="filter-component">
				<a href="tutorials/tutorial-25-joypad.html">
						<img class="lazy" data-original="img/tutorials/tutorial-25-01s.jpg" />
					</div>
					<h2>偵測搖桿行為 </h2>
					<span>透過 Webduino 來偵測搖桿的訊號，進一步就可以用搖桿控制車子、機器人或一些實體裝置。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-26-google-sheet.html">
						<img class="lazy" data-original="img/tutorials/tutorial-26-01s.jpg" />
					</div>
					<h2>使用 Google 試算表控制 LED </h2>
					<span>我們將會填寫 Google 問卷，接著把問卷的統計數字平均並四捨五入成整數，再讓平均的分數透過 LED 的數量顯示出來。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-27-tracking-face.html">
						<img class="lazy" data-original="img/tutorials/tutorial-27-01s.jpg" />
					</div>
					<h2>人臉追蹤點亮 LED 燈</h2>
					<span>在這個範例中，將會使用網路攝影機，進行人臉追蹤，根據人臉的位置，來點亮 LED 燈。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-28-dancing-leds.html">
						<img class="lazy" data-original="img/tutorials/tutorial-28-01s.jpg" />
					</div>
					<h2>霹靂燈 ( 12 顆 LED + 迴圈 )</h2>
					<span>我們將會用迴圈的方式，讓 12 顆 LED 燈交互閃爍，同時也可以控制交互閃爍的速度，實際做出一個超酷的霹靂燈效果。</span>
			<div class="filter-example">
				<a href="tutorials/tutorial-29-firebase-dht.html">
						<img class="lazy" data-original="img/tutorials/tutorial-29-01s.jpg" />
					</div>
					<h2>使用 Firebase 資料庫記錄溫濕度</h2>
					<span>我們會使用溫濕度傳感器獲取環境溫濕度之後，下一步一定是想要把溫濕度的數值儲存起來。</span>
			<div class="filter-example">
				<i class="new"></i>
				<a href="tutorials/tutorial-30-motor-ic.html">
						<img class="lazy" data-original="img/tutorials/tutorial-30-01s.jpg" />
					</div>
					<h2>雙馬達控制晶片改造玩具車</h2>
					<span>透過 Webduino 和「雙馬達驅動晶片」的輔助，我們可以讓一般家用玩具車使用 Wi-Fi 來操控。</span>
			<div class="filter-sensor">
				<i class="new"></i>
				<a href="tutorials/tutorial-31-soil-max7219.html">
						<img class="lazy" data-original="img/tutorials/tutorial-31-01s.jpg" />
					</div>
					<h2>偵測土壤濕度並由 LED 點矩陣顯示</h2>
					<span>我們可以利用土壤濕度計插入土中偵測土壤濕度，同時用 LED 點矩陣來顯示偵測到的濕度數值。</span>
			<div class="filter-example">
				<i class="new"></i>
				<a href="tutorials/tutorial-32-smart-socket.html">
						<img class="lazy" data-original="img/tutorials/tutorial-32-01s.jpg" />
					</div>
					<h2>智慧插座 DIY</h2>
					<span>透過 Webduino 和繼電器的應用，將平凡無奇的插座升級成為可以光感、聲控、遠端遙控的智慧插座！</span>
			<div class="filter-example">
				<i class="new"></i>
				<a href="tutorials/tutorial-33-clock.html">
						<img class="lazy" data-original="img/tutorials/tutorial-33-01s.jpg" />
					</div>
					<h2>會說話的鬧鐘 ( 貪睡、蜂鳴器 )</h2>
					<span>這個範例將利用按鈕開關和蜂鳴器做出一個鬧鐘，具備貪睡、蜂鳴器音樂以及語音報時的功能。</span>
			<div class="filter-example">
				<i class="new"></i>
				<a href="tutorials/tutorial-34-vr-image.html">
						<img class="lazy" data-original="img/tutorials/tutorial-34-01s.jpg" />
					</div>
					<h2>可變電阻改變圖片位置</h2>
					<span>我們將使用可變電阻的旋鈕，透過旋轉旋鈕改變數值，就可以讓圖片的位置發生變化！ </span>
			<div class="filter-example">
				<i class="new"></i>
				<a href="tutorials/tutorial-35-vr-youtube.html">
						<img class="lazy" data-original="img/tutorials/tutorial-35-01s.jpg" />
					</div>
					<h2>可變電阻改變 Youtube 音量大小</h2>
					<span>我們將使用可變電阻的旋鈕，透過旋轉旋鈕改變數值，就可以改變 Youtube 音量大小。 </span>
			<div class="filter-component filter-new">
				<i class="new"></i>
				<a href="tutorials/tutorial-36-pump.html">
						<img class="lazy" data-original="img/tutorials/tutorial-36-01s.jpg" />
					</div>
					<h2>網頁操控水泵</h2>
					<span>水泵亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作。 </span>
			<div class="filter-example filter-new">
				<i class="new"></i>
				<a href="tutorials/tutorial-37-line-following-robot.html">
						<img class="lazy" data-original="img/tutorials/tutorial-37-01s.jpg" />
					</div>
					<h2>循跡自走車</h2>
					<span>透過「循跡控制板」，輕鬆跟隨地上的軌跡移動，最後甚至可藉由雲端資料庫的輔助，實現紀錄路徑軌跡並重複播放的功能。</span>
	<div class="tutorials-content">
		<div class="banner">
  <div class="disqus">
  	<div id="disqus_thread"></div>
  	<div class="logo">
			<a href="index.html" data-name="layout-footer-logo"><i></i></a>
			<a href="../index.html" data-name="layout-footer-logo"><i></i></a>
  	<h4>Copyright 2017 | All Rights Reserved. Powered by Webduino</h4>
  	<h4>80661 高雄市前鎮區復興四路 12 號 2 樓之 6 / 886-7-3388511</h4>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-62202920-1', 'auto');
  ga('send', 'pageview');
<!-- Facebook Pixel Code -->
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '463217813871245'); // Insert your pixel ID here.
fbq('init', '1817385685257238');
fbq('track', 'PageView');
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1817385685257238&ev=PageView&noscript=1"
/></noscript>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=463217813871245&ev=PageView&noscript=1"
/></noscript>
FilesExpand file tree

tutorials.html

Latest commit

History

tutorials.html

File metadata and controls
