Thunkable (8) DIT UENO Campus Tour

作ったSWIPING SCREENSアプリにGoogle Map表示機能を追加する。

SWIPING SCREENSで、順次DIT UENOの一号館、2号館、3号館の写真とGoogle Mapを表示する。

一号館

一号館のGPS座標は、Google Mapで検索してください。

Mapの拡張設定に、ShowsUserLocationを「On」にして、自分の位置を地図に表示する。

image

二号館

image

三号館

image

Thunkable (7) New Market Goods

About New Market Goods

New Market Goods is a simple website app with a branding screen and a social media bar that opens a deep link to a user’s installed apps that works across platforms.

New Market Goodsは、ブランディング画面とソーシャルメディアバーを備えたシンプルなウェブサイトアプリです。

ユーザーのインストール済み(ここではFacebook、Instagram)アプリへの内部リンクを開きます。

If you have a mobile optimized website for your business or organization, this is a simple way to turn what you already have into an app.

ビジネスや組織にモバイルに最適化されたウェブサイトをお持ちの場合は、既に持っているものをアプリに変える簡単な方法です。

Design

Screen1

image

Screen2

image

Blocks

Screen1

image

Screen2

image

参考:

Sample-apps

Thunkable (5) Translation app

デザイン

まず参考Youtubeビデオのままデザインします。

image

ちょっとものが足りないから、音声認識も組み込む。

image

プログラミング

参考Youtubeビデオのままではbotton1のブロックだけでよい。

音声認識も組み込むには、botton2のブロックも組み立ててください。(ただし今現在この組み合わせでは、音声認識ができて、同時にText to speechの発声ができない。

image

アプリ画面

参考Youtubeビデオ

Thunkable (3) Adding sounds

チュートリアル

画像をクリックすると、「ニャー」と猫の鳴き声がするアプリを作る

素材の準備

  1. Kitty picture:
  2. Meow sound: mp3

プロジェクト作成

まず https://thunkable.com/ を開いて、gmailのアカウントでログイン。

新規App作成。アプリ名は「Hellopurr」とする。

Projectsに、「Hellopurr」が現れる。

アプリデザイナー

デザインしながら、実機で見るのは、Apple StoreからThunkable Liveというアプリをインストールしてください。

「Live Test」をクリックして、バーコードをアプリ「Thunkable Live」に読ませて、実機でデザインの様子をみてください。

素材の2個ファイルをアップロードしてください。

 

アプリのロジック

アプリのBlocks画面に切り替え、ボタンクリックのブロックに、「ニャー」と猫の鳴き声がするように組み立てる。

 

参考

Webduino (5) Smart+DHT+OLED

Webduino Cloud Platformは、スケッチ保存できるクラウド環境。

(それまで、作ったスケッチは、保存できない!)

開始使用:https://cloud.webduino.io

Gmailのアカウントで簡単にログイン可能。

早速公開しているのスケッチ(Public Files から検索)を試す。意外に簡単。

Smart+OLED(圖片)

まずOLEDを増設、スケッチの通り結線しただけで表示ができた。

OLEDの接続と表示。漢字も可能?

Smart+DHT+OLED

さらにDHT11を追加し、スケッチの通り結線しただけ、すごく気楽にできた。

DHT11を接続して、温度と湿度も簡単に表示できた。

Webduino (3) RGB LED

Webduino Smartに接続

Webduino Smartに接続方法は2つある

WiFi接続

WiFi接続はデバイスIDを利用して接続する。

この場合はWebduino Blockly ( https://blockly.webduino.io )を開いてプログラミングする。

WebSocket接続

WebSocket接続は、デバイスのローカルIPで接続する。

この場合、http://blockly.webduino.io/ を開いてプログラミングする。

ボタンでRGB LED点灯

Webduino Smartには、RGB LED内蔵なので、まず点灯してみる。

http://blockly.webduino.io/ を開いて、下記の通り、プログラミングする。

右上の “Run Blocks”をクリックして、Web Demo エリアのボタン1..5をクリックすると、対応色が点灯する。

Webduino (2) Update Firmware

ブラウザからデバイスにアクセスする場合、画面の左下に、Firmwareのバージョンが表示され(Ver 3.0.07)

セットアップが終わり、ファームウェアのアップデートを行うと勧められて、しかしどうしてもうまくいかないて、二日悩み中。

英語と中国語のtutorialsは、ここでマイクロスイッチを押し続け、ファームウェアのアップデートが自動的に行う。

  • https://webduino.io/en/tutorials/smart-02-setup.html
  • https://tutorials.webduino.io/zh-tw/docs/basic/board/smart-setup.html

しかし、いくら押し続けでも、LEDの反応がない、だがなぜかファームウェアのアップデートできない。ファームウェアのアップデートため、デバイスIDが取得できない。そして、Webduinoクラウドにも繋げられない。

悩んだ末、たまたまtutorialsのyoutubuを見てわかった。電源を再投入して、赤いLED点滅してる間に、マイクロスイッチを押し続ける

これてうまく行った!緑LED点灯など、しばらくして更新終了(無論更新中電源OFF駄目)、今度ブラウザからデバイスにアクセスする場合、デバイスIDが表示され、画面の左下に、更新後のFirmwareのバージョンが表示された。

Ver 3.1.4_0802

次にWebブラウザを使ったプログラミングを行う。