---
tags: App Inventor 2, Block, Kebbi air
---
# How to build an extension for App Inventor 2 with the Rush tool on Windows 10
> [name=Mr. Akashic] [time=Thu, Apr 29, 2021]
## Implementation
### Step 1. 用Rush建立App Inventor的Extension專案
選擇要在哪個目錄下建立rush的專案，請在命令提示字元輸入下列指令。
```bash=
cd 目錄路徑
```
建立rush專案，輸入下列指令。
```bash=
rush create 專案名稱
```
接著會詢問package name，通常命名的方式為<span class="dark_orange">domain.company</span>，輸入package name後，按enter。
```bash
? Organisation (package name)
```
然後詢問Author名子，輸入後按enter。
```bash
? Author
```
最後詢問Version name，輸入後按enter。
```bash
? Version name
```
看到如下訊息，表示rush專案建立完成。
```
Output
• Getting things ready...
• Success! Generated a new AI2 extension project in: C:\Users\Admin\Desktop\Projects\ttest
Next up,
- cd into ttest/, and
- run rush build to compile your extension.
```
### Step 2. 撰寫Extension的積木
使用程式開發工具(如:Visual Studio)開啟剛建立的rush專案，[專案結構參考連結](https://github.com/ShreyashSaitwal/rush-cli/wiki/Project-Structure)。選擇src目錄下的.java檔進行extension的積木開發。這一段落會簡單介紹非可視元件<a href="#s1"><sup>[1]</sup></a><a href="#s2"><sup>[2]</sup></a>的積木功能開發。
<div id="s1">1. 非可視元件: 不需要跟使用者互動的元件，純程式邏輯，如:藍牙、資料庫等元件。</div>
<div id="s2">2. 可視元件: 與使用者互動的元件，如:按鈕、Textbox、Label等元件。</div><p>
此區塊由rush自動產生，用來設定類別中的屬性初始值。
```java=
public Ttest(ComponentContainer container) {
super(container.$form());
}
```
#### Block for a setter
```java=
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.SimpleProperty;
@DesignerProperty(editorType = "choices", defaultValue = "5", editorArgs = {"1", "2", "3", "4", "5", "6", "7", "8", "9"})
@SimpleProperty(description = "String: Speech rate is on a scale of 1-9")
public void SpeechRate(String value) {
speech_rate = value.trim();
mRobot.setSpeakParameter(VoiceEventListener.SpeakType.NORMAL, "speed", speech_rate); // 1~9
}
```
<img src="https://i.imgur.com/5iAK18F.png" alt="Paris" class="center">
#### Block for a getter
```java=
import com.google.appinventor.components.annotations.SimpleProperty;
@SimpleProperty(description = "Kebbi's head")
public int Head() {
return 1;
}
```
<img src="https://i.imgur.com/YvJx4yJ.png" alt="Paris" class="center2">
#### Block for a function
```java=
import com.google.appinventor.components.annotations.SimpleFunction;
@SimpleFunction(description = "Kebbi speaks out a sentence by a giving string.")
public void Say(final String sentence) {
mRobot.startTTS(sentence);
}
```
<img src="https://i.imgur.com/AIovu5J.png" alt="Paris" class="center2">
#### Block for an event
```java=
import com.google.appinventor.components.runtime.Component;
import com.google.appinventor.components.annotations.SimpleEvent;
final Component thisComponent = this;
@SimpleEvent(description = "PIR sensor event")
public void onPIREvent(int i) {
mHandler.post(new Runnable() {
public void run() {
EventDispatcher.dispatchEvent(thisComponent, "onPIREvent", i);
}
});
}
```
<img src="https://i.imgur.com/3D2xqb5.png" alt="Paris" class="center2">
<p>
:::info
:warning: **注意:**
app inventor會統一積木的樣式，因此開發者只需專注在積木功能的開發，不需煩惱積木該長什麼樣子。
:::
## Prerequisites
### 1. 安裝JDK
由於App Inventor的extension是由java語言所開發，因此需先安裝[JDK](https://www.oracle.com/tw/java/technologies/javase-jdk11-downloads.html) (Java Development Kit) version 8 (*此版本的Rush目前只支援JDK 8的版本)。安裝完成後，開啟命令提示字元輸入指令`java -version`。
```bash=
java -version
```
若看到類似output訊息，即表示JDK安裝並且環境變數設定成功;否則檢查Windows環境變數是否有設定完成。
```
Output
java version "1.8.0_291"
Java(TM) SE Runtime Environment (build 1.8.0_291-b10)
Java HotSpot(TM) 64-Bit Server VM (build 25.291-b10, mixed mode)
```
### 2. 安裝Rush工具
下載並安裝[Rush工具](https://github.com/ShreyashSaitwal/rush-cli/releases)，然後，依照指示，如下圖，將rush執行路徑(此範例為C:\Rush\rush\bin)加入Windows環境變數。
:::info
:warning: **注意:**
rush執行路徑盡量不要有空白，否則在執行`rush build`指令時可能會無法成功產生app inventor的extension檔案(.aix)。
:::
測試環境變數是否設定完成，開啟命令提示字元輸入`rush -v`，看到如下圖示表示環境變數設定完成。
## Acknowledgements
1. [How to Add a Component](https://docs.google.com/document/u/2/d/1xk9dMfczvjbbwD-wMsr-ffqkTlE3ga0ocCE1KOb2wvw/pub#h.br6v0nejpc0i)
2. [Rush Project Structure](https://github.com/ShreyashSaitwal/rush-cli/wiki/Project-Structure)
3. [AI2 Component](https://ullisroboterseite.de/AIComponentsDoc/interfacecom_1_1google_1_1appinventor_1_1components_1_1runtime_1_1_on_destroy_listener.html)
<style>
.dark_orange {
color: #FF8C00;
background:#F6F6F6;
border-radius:4px;
padding-right:6px;
padding-left:6px;
}
.sub_title {
font-size: 25px;
}
.blockquote {
background:#F6F6F6;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
.center2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
</style>
Sign in with Wallet
Connect another wallet