ユーザ登録とユーザログイン画面を作る
Local Storage: アプリを終了させても残るデ-タを持つことができる部品。デ-タはキ-とバリュ-の対で記憶される.
今回のアプリは、キーemailとpasswordで、ユーザのログイン情報をローカルに保存する。
画面デザイン
4つ画面で構成する
初期画面
ユーザ登録画面
ログイン画面
写真共有画面
初期画面デザイン
ユーザ登録画面デザイン
ログイン画面デザイン
ブロック
4つ画面でそれぞれブロックがある
初期画面ブロック
ユーザ登録画面ブロック
ログイン画面ブロック
写真共有画面ブロック
初期画面ブロック
ユーザ登録画面ブロック
ログイン画面ブロック
参考ビデオ
VIDEO
作ったSWIPING SCREENSアプリにGoogle Map表示機能を追加する。
SWIPING SCREENSで、順次DIT UENOの一号館、2号館、3号館の写真とGoogle Mapを表示する。
一号館
一号館のGPS座標は、Google Mapで検索してください。
Mapの拡張設定に、ShowsUserLocationを「On」にして、自分の位置を地図に表示する。
二号館
三号館
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
Screen2
Blocks
Screen1
Screen2
参考:
Sample-apps
デザイン
まず参考Youtubeビデオのままデザインします。
ちょっとものが足りないから、音声認識も組み込む。
プログラミング
参考Youtubeビデオのままではbotton1のブロックだけでよい。
音声認識も組み込むには、botton2のブロックも組み立ててください。(ただし今現在この組み合わせでは、音声認識ができて、同時にText to speech の発声ができない。
アプリ画面
参考Youtubeビデオ
VIDEO
デザイン
プログラミング
参考
VIDEO
チュートリアル
画像をクリックすると、「ニャー」と猫の鳴き声がするアプリを作る
素材の準備
Kitty picture:
Meow sound: mp3
プロジェクト作成
まず https://thunkable.com/ を開いて、gmailのアカウントでログイン。
新規App作成。アプリ名は「Hellopurr」とする。
Projectsに、「Hellopurr」が現れる。
アプリデザイナー
デザインしながら、実機で見るのは、Apple StoreからThunkable Liveというアプリをインストールしてください。
「Live Test」をクリックして、バーコードをアプリ「Thunkable Live」に読ませて、実機でデザインの様子をみてください。
素材の2個ファイルをアップロードしてください。
アプリのロジック
アプリのBlocks画面に切り替え、ボタンクリックのブロックに、「ニャー」と猫の鳴き声がするように組み立てる。
参考
VIDEO
超音波で距離を測定
模範解答を使うだけ
(範例解答:https://goo.gl/eYnBnq )
解答通りに結線、それだけでうまくできた。
Webduino Cloud Platformは、スケッチ保存できるクラウド環境。
(それまで、作ったスケッチは、保存できない!)
開始使用:https://cloud.webduino.io
Gmailのアカウントで簡単にログイン可能。
早速公開しているのスケッチ(Public Files から検索)を試す。意外に簡単。
Smart+OLED(圖片)
まずOLEDを増設、スケッチの通り結線しただけで表示ができた。
OLEDの接続と表示。漢字も可能?
Smart+DHT+OLED
さらにDHT11を追加し、スケッチの通り結線しただけ、すごく気楽にできた。
DHT11を接続して、温度と湿度も簡単に表示できた。
Webduino Smartには、「明度センサー」内蔵なので、それを利用してみる。
ソースコードは、範例解答:https://goo.gl/vWKS41 を利用する。
特に問題なく、明度が表示された。
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をクリックすると、対応色が点灯する。
Posts navigation
Create Mobile App with Blocks