如何使用osep scratch telegram擴充模組
安裝telegram app
建立telegrambot機器人
1. 新增聯絡人 BotFather，https://t.me/botfather
2. 輸入/newbot
3. 輸入 Bot 名稱
4.輸入 Bot 使用者名稱，必須為 bot 結尾
5.成功建立後取得 Telegram API token，這個token後面會用到
6.在聯絡人功能中輸入 Bot 使用者名稱
7.新增 Bot 為聯絡人
8.在群組中加入Bot機器人
9.取得 Chat ID：在瀏覽器中輸入下列網址(紅字部分改為你的token)：
https://api.telegram.org/bot"YOUR_BOT_TOKEN"/getUpdates
1.安裝git 和node js
2.在家目錄下指令
git clone https://github.com/estea8968/osep_web_serial.git
cd osep_web_serial
npm install
npm run copy
npm start
如果是win系統
git clone https://github.com/estea8968/osep_web_serial.git
cd osep_web_serial
npm install
npm run copy:win
npm run start:win
打包npm run build
https://github.com/doggy8088/Learn-Git-in-30-days
//require基本架構
const ArgumentType = require('../../extension-support/argument-type');
const BlockType = require('../../extension-support/block-type');
const formatMessage = require('format-message');
const msg = require('./translation');
物件
class 物件名稱 {
//物件架構
constructor(runtime) {
the_locale = this._setLocale();
this.runtime = runtime;
}
//物件資料
getInfo() {
the_locale = this._setLocale();
return {
id: 'mqtt',
color1: '#003D79', //'#0C5986',
color2: '#34B0F7',
name: 'MQTT',
blockIconURI: 'data:image/png;base64,',
blocks: [
{
}
}
function(){
}
module.exports = 物件名稱;
在index.js中有
const msg = require('./translation');
物件中要有function定義語系
_setLocale() {
let now_locale = '';
switch (formatMessage.setup().locale) {
case 'zh-tw':
now_locale = 'zh-tw';
break;
default:
now_locale = 'en';
break;
}
return now_locale;
}
物件架構是呼叫function定義語系
constructor(runtime) {
the_locale = this._setLocale();
this.runtime = runtime;
}
使用方法：
msg.disconnect[the_locale];
在資料夾下，要有translation.js
檔案內容：
export const disconnect = {
'en': 'disconnected',
'zh-tw': '未連線',
};
在index.js中加入語系物件
const formatMessage = require('format-message');
const FormLcdShow = {
'en': 'LCD show text [VALUE] at [ROW] row',
'zh-tw': 'LCD顯示文字[VALUE]在第[ROW]列',
};
在物件中加入架構
constructor(runtime,util) {
the_locale = this._setLocale();
this.runtime = runtime;
}
需要有function _setLocale()
_setLocale () {
let now_locale = '';
switch (formatMessage.setup().locale){
case 'en':
now_locale='en';
break;
case 'zh-tw':
now_locale= 'zh-tw';
break;
default:
now_locale='en';
break;
}
return now_locale;
}
使用方法
FormLcdShow [the_locale]
積木表示
在物件中使用陣列blocks: [ ]包括所有積木。
每個積木為一物件{}。內容為
opcode: 'digital_write',
blockType: BlockType.COMMAND,
text: FormDigitalWrite[the_locale],
arguments: {
PIN: {
type: ArgumentType.NUMBER,
defaultValue: 'D2',
menu: "digital_pins"
},
}
/src/lib/libraries/extensions/index.jsx的
翻譯檔案在/node_modules/scratch-l10n/locales/editor-msgs.js
中文語系在最後面。
格式範例：
"gui.extension.microbitMore.description":"玩轉 micro:bit 的所有功能。(v2-0.2.4)",
網址：https://github.com/LLK/scratch-gui
linux 下可以用git下載，win可以下載zip後解壓縮
git clone https://github.com/LLK/scratch-gui.git
註：linux下如果缺少git套件請自行安裝(sudo apt install git)
打開下載或解壓縮資料夾
下載https://nodejs.org/en/download/
安裝64 bit msi
下載:http://git-scm.com/download/win
安裝git
在win下編輯器個人使用nopad++
https://notepad-plus-plus.org/downloads/
安裝visualstudio code
https://code.visualstudio.com/
git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm installnpm install也可以一個指令解決npm install https://github.com/LLK/scratch-gui.git
在scratch-gui資料夾下執行
npm start
在瀏覽器的網址列中輸入http://0.0.0.0:8601/就可以看到畫面
如果沒有成功可以嘗試輸入http://127.0.0.1:8601/
增加擴充積木
擴充積木的位置在scratch-gui目錄下的node_modules/scratch-vm資料夾中
原始檔要放在src/extensions資料夾中
1.copy scratch3_microbit 成為scratch3_mybit
2.編輯node_modules/scratch-vm/src/extension-support/extension-manager.js
找到gdxfor: () => require('../extensions/scratch3_gdx_for')在行尾加上,和mybit: () => require('../extensions/scratch3_mybit')3.編輯src/lib/libraries/extensions/index.jsx
複製
import microbitIconURL from './microbit/microbit.png';
import microbitInsetIconURL from './microbit/microbit-small.svg';
import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';
修改為
import mybitIconURL from './mybit/microbit.png';
import mybitInsetIconURL from './mybit/microbit-small.svg';
import mybitConnectionIconURL from './mybit/microbit-illustration.svg';
import mybitConnectionSmallIconURL from './mybit/microbit-small.svg';
往下找，找到
{ ame: 'micro:bit',
extensionId: 'microbit',
把整段大括號複製起來，在下面貼上並修改
4.複製microbit資料夾為mybit資料夾
5.回到瀏覽器中輸入網址http://0.0.0.0:8601，再按左下角的+號，就可以看到修改完的擴充積木
npm run package:mac
會産生一個scratch3-darwin-x64的資料夾
blocks: []
opcode:是每個積木執行時要執行的副程式，後面的文字都對應一個function
blockType: BlockType.COMMAND,是積木型態，可以參考
https://medium.com/@hiroyuki.osaki/scratch-3-block-types-you-can-develop-and-samples-191b0d769b91
text:是描述內容，裡面用formatMessage()來表述時可以做多國語言id default和description，當然可以不寫，直接接一串文字
menus:是選單，每個選單也都是用陣列表示
touchPins: {
acceptReporters: true,
items: ['0', '1', '2']
} 教學影片清單
osep github：https://github.com/ys-fang/OSEP
預載的內容在：scratch-gui/src/lib/default-project資料夾內。
index.js和project-data.js
把要加入的svg檔案拷貝到資料夾內，並使用 md5sum 檔案，算出編碼後的數字，例如：
md5sum osep.svg
48b6771e8ddcb19a37584bf4ce4df834 osep.svg
把osep.svg重新命名為48b6771e8ddcb19a37584bf4ce4df834.svg
編輯index.js
在前面import中加入
import osep from '!raw-loader!./48b6771e8ddcb19a37584bf4ce4df834.svg';
在最後面加入
{
id: '48b6771e8ddcb19a37584bf4ce4df834',
assetType: 'ImageVector',
dataFormat: 'SVG',
data: encoder.encode(osep)
},
編輯project-data.js
新增角色加入
{
isStage: false,
name: translator(messages.sprite, {index: 1}),
variables: {},
lists: {},
broadcasts: {},
blocks: {},
currentCostume: 0,
costumes: [
{
assetId: '48b6771e8ddcb19a37584bf4ce4df834',
name: translator(messages.costume, {index: 1}),
bitmapResolution: 1,
md5ext: '48b6771e8ddcb19a37584bf4ce4df834.svg',
dataFormat: 'svg',
rotationCenterX: 46,
rotationCenterY: 50
}
],
sounds: [
{
assetId: '83c36d806dc92327b9e7049a565c6bff',
name: translator(messages.meow),
dataFormat: 'wav',
format: '',
rate: 22050,
sampleCount: 18688,
md5ext: '83c36d806dc92327b9e7049a565c6bff.wav'
}
],
volume: 100,
visible: true,
x: 200,//角色座標
y: -150,
size: 50,//角色大小%
direction: 90,
draggable: false,
rotationStyle: 'all around'
}
存檔，重新編譯程式。
src/lib/libraries/sprites.json記錄選取角色的資料， costumes.json圖檔資料
storage.js
左上角超連結在src/playground/render-gui.jsx
找到const onClickLogo =
github：https://github.com/CodeLabClub/scratch3_knn
參考文章：https://github.com/CodeLabClub/scratch3_knn_install
cd scratch-gui/node_modules/scratch-vm/src/exteions
git clone https://github.com/CodeLabClub/scratch3_knn.git
cd scratch3_knn
cp -r knn ../../../../../static
vim mobilenet.js
約1083行
註解//var BASE_PATH = 'http://storage.codelab.club/tfjs-models/tfjs/'
改成var BASE_PATH = '../static/knn/';
vim index.js
把這三行註解
//import * as tf from '@tensorflow/tfjs';
//import * as mobilenetModule from './mobilenet.js';
//import * as knnClassifier from '@tensorflow-models/knn-classifier';
加入
const tf = require('@tensorflow/tfjs');const mobilenetModule = require('./mobilenet.js');const knnClassifier = require('@tensorflow-models/knn-classifier');
vim ../../extension-support/extension-manager.js
在const builtinExtensions = {
中的最後面加上,，按下enter，再貼上cxknn:() =>require('../extensions/scratch3_knn')
cd ../../../../../src/lib/libraries/extensions/
mkdir knnAlgorithm
加入圖片knnAlgorithm.png 和 knnAlgorithm-small.svg
vim index.jsx
在import的最後面加入二行
import knnalgorithmImage from './knnAlgorithm/knnAlgorithm.png';import knnalgorithmInsetImage from './knnAlgorithm/knnAlgorithm-small.svg';
在export default [的最後面加入
{
name: (
<FormattedMessage
defaultMessage="knn algorithm"
description="Name for the 'knn algorithm' extension"
id="gui.extension.knnalgorithm.name"
/>
),
extensionId: 'cxknn',
iconURL: knnalgorithmImage,
insetIconURL: knnalgorithmInsetImage,
description: (
<FormattedMessage
defaultMessage="knn algorithm."
description="Description for the 'knn algorithm' extension"
id="gui.extension.knnalgorithm.description"
/>
),
featured: true, helpLink: 'https://github.com/CodeLabClub/scratch3_knn'},
查看目前npm 安裝套件的版本
npm -l 套件名稱
例如：
npm ls @tensorflow-models/knn-classifier
scratch-gui@0.1.0 /home/teacher/音樂/osep_scratch-gui
└── @tensorflow-models/knn-classifier@1.2.2
大致上需要
"@tensorflow-models/knn-classifier": "^1.2.2",
"@tensorflow/tfjs": "^0.13.5",
"@tensorflow/tfjs-converter": "^1.2.1",
"@tensorflow/tfjs-core": "^1.2.1",
"@tensorflow/tfjs-layers": "^0.8.5",
安裝特定版本
npm install @tensorflow/tfjs@0.10.0
npm install
@tensorflow-models/knn-classifier @tensorflow/tfjs @tensorflow/tfjs-converter @tensorflow/tfjs-core @tensorflow/tfjs-layers
0.你的line，先把notify加入好友。
1.先登入ifttt網站（https://ifttt.com/），第一次點選右上角sign up按鈕，可以使用各大網站的openID。
2.按下建立creat，出現如下圖，按下+號。用法是如果什麼事就如何
3.選擇服務，搜尋webhooks
4.替事件取個名字，按下左邊藍色圖框。
5.輸入你要的事件名稱，這裡是"溫度警告"，按下Create trigger。
6.再按下下一個+號
7.輸入動作的服務，輸入line。
8.按下send message（送出訊息）
9.選擇透過1對1聊天或是群組，按下create action
10.完成設定。
11.取得webhooks的key。按下右上角人的圖形，My services.
12.點選右上角的setting，複製你的ke(use/後的文字)。
14回到scratch3中，按下ifttt擴充套件。
15.拉出積木，填入key和事件名稱和要送出值（最多三個）。
16.line上收到的訊息：
sudo npm install -g webpack
sudo npm install -g webpack-dev-server
