Relative Content

Yearly Archives: 2017

Webd(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をクリックすると、対応色が点灯する。 範例解答:https://goo.gl/yDjjPP  

Webd(2) Update Firm

ブラウザからデバイスにアクセスする場合、画面の左下に、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点灯したら、マイクロスイッチを放す 青LED点灯して、ファームウェアのアップデート中 赤LED点滅、WiFiに接続中 全て消灯、WiFiに接続完了、利用できる状態。 これてうまく行った!緑LED点灯など、しばらくして更新終了(無論更新中電源OFF駄目)、今度ブラウザからデバイスにアクセスする場合、デバイスIDが表示され、画面の左下に、更新後のFirmwareのバージョンが表示された。 Ver 3.1.4_0802 次にWebブラウザを使ったプログラミングを行う。  

Webd(1) Setup

Webduino Smart Wi-Fi Setup このリンク先Webduino Smart Wi-Fi Setupを参考しながら進み。 まずはmicroUSBケーブルをさして電源を入れる。青LEDが点灯し、また裏面の3色LEDは赤点灯する。 この状態で、Webduino SmartはAPモードになる。 スマホなどからWiFi APを検索すると「Smart」というAPがいるので、そこに接続する。接続パスワードは「12345678」。 接続したらブラウザから「http://192.168.4.1」にアクセス。WiFi SSID/WiFI PWDは、自宅などのWiFI APを指定。また、Device IDは識別できるようなものを指定。「SUBMIT」ボタンをクリックし、変更を反映したら、電源を抜く。 電源を入れ直すと、裏面の3色LEDは、赤点灯したあと、一瞬緑点灯し、消灯する。 この状態で、自宅WiFI APに接続された状態となる。 Webdiunoに割り当てられたIPアドレスを確認するには、スマホなどでWiFi AP検索する。 上記の様に「Smart_<IPアドレス>」という形でIPアドレスが表示されるので確認する。 まずは動作確認として、パソコンから「http://<IPアドレス>」にアクセスできることを確認。 表示画面は、APモードでブラウザから「http://192.168.4.1」にアクセスする際と同じです。  

What is Mobile CSP?

Mobile CSP is an AP Computer Science Principles course that focuses on mobile computing: Build socially useful mobile apps Project-based focus Emphasis on writing & communication Fosters collaboration & creativity As of Fall 2017, Mobile CSP is being taught in 400+ schools in 42 states across the country, including over 100 schools in Connecticut and […]

AI2(12) 最終課題

最終課題要件 1-4人のクループで、自分のデザインのアプリを作成する。 この課題の得点は、Mobile Computing コース成績の50%に相当する。 どんな種類のアプリでも自由にデザインすることができる。 アプリの洗練さや複雑さの面においでは、些細なではない(non-trivial )アプリである。 例えば、アプリケーションの重要な拡張が大丈夫ではあるが、コースでやったアプリのうちの1つのマイナーな調整ではない。 最小技術要件 アプリは特定の最小技術要件を満たしている必要があります。 データ抽象化 。 アプリには少なくとも2つの変数が必要、 どちらかのリストまたはデータベースを使用する必要   。 手続き抽象化 。 アプリには少なくとも2つのプログラマー定義のプロシージャまたは関数を含める必要。 アルゴリズムと制御。 少なくとも1つのif / else構造体または1つのループを含める必要 。 評価基準 課題を評価するために、次の基準が使用されます。 各基準は、0点(評価不能)から5点(良好)までの合計5点で合計20点の価値があります。 目的 :アプリの目的が明確に記述されており、アプリ自体が目的を明確に果たしています。 技術的要件 :アプリケーションは上記の最低限の技術要件を満たしています。 機能的性能 。 アプリはダウンロードされ、テストされ、大きなパフォーマンス上の問題やバグがなければ期待どおりに機能しました。 スコープ :このアプリは重要なクリエイティブな成果を表しており、コースで行ったアプリのうちの1つの小さな変化や拡張ではありません。 最低限のプレゼンテーション要件 このコースでは、アプリケーションがレビューされるためには、wordpress.comで公開されているプレゼンテーションへのリンクを提供する必要があり、 以下の最小要件を満たしている必要がある。 タイトル。 アプリのタイトル。 エレベーターピッチ。 一言でアプリの基本的な目的を説明する。 説明。 アプリケーションの1つのパラグラフの説明。目的と範囲を説明し、基本機能を要約しています。 アプリスクリーンショット。 アプリのメイン画面またはビューのスクリーンショット。 ブロックスクリーンショット。 アプリケーションがプロジェクトの技術的プログラミング要件を満たしていることを示すブロックのスクリーンショット。 QRコードとダウンロードリンク。 機能しているQRコードと、アプリのAPKファイルへの機能するHTMLリンク、およびレビュー担当者がアプリをテストする方法の簡単な説明。 サンプルプレゼンテーション https://github.com/edu2web/PhotoBlog/blob/master/README-Jp.md アプリのAPKファイルの公開 […]

AI2(11) Final Project

Final Project Requirements For this assignment you will create an app of your own design.  You will have two weeks to complete it.  Your score on this project, is worth 50% of your course grade. You are free to design whatever type of app you want.  In terms of the sophistication or complexity of the app, it must be […]

AI2(10) Amazon API

第11章 Amazon API (Chapter 13. Amazon Bookstore) Amazon API まず、App Inventor専用のAmazon APIを見てください。 http://aiamazonapi2.appspot.com/ 試しに、1449397484入力すると、ISBN番号1449397484の本の書名、単価が返ってくる。 デザイン BarcodeScanner 図書のISBN番号の入力の代わりに、ISBNのバーコードを読み取ることもできる。 BarcodeScannerは非表示部品です。この部品を使ってバーコードを撮影します。 撮影はバーコード撮影用の別バーコードを読み取るアプリが起動します。そのためアプリを動かす端末に「ZXing」のようなバーコードを読み取るライブラリが必要です(マーケットから無料でダウンロード可能)。   Amazon API検索 このAmazon APIは、TinyWebDBのAPIを利用して、図書の検索を行う。「tag」を送信して、「value」を取得する代わりに、検索ワードを送り、検索結果を受け取り。 テスト 撮影はバーコード撮影用の別画面が起動します。明るい枠の中にある赤い線の上に乗ったバーコードを読み取ります。このプレビューではバーコードに反応して赤い線の上に黄色い丸が出現しています。バーコードのスキャンの際はシャッターを切る必要はありません。このプレビューでも明るい枠内に全てのバーコードが入るようにカメラを動かせば、自動的にスキャンします。スキャンが終わると、赤い線が緑になり、App Inventorのアプリに画面が戻ります。 ISBN番号9781491906842の本のバーコード

AI2(9) Take Quiz

第11章 Web API (WordPress TinyWebDB API) WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressに API機能を追加して、クライドとして利用する方法を試み。 WordPressとApp Inventorの連携 App InventorはAndroidのApp作りに簡単な環境である。そのTinyWebDBコンポーネントは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。 WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressをWebコンテンツを作るに最適な環境。WordPressサイトは、App InventorのTinyWebDBサービスとして利用できるか? 答えはYes. WordPress に TinyWebDB API WordPressに API機能を追加して、クライドとして利用する方法を試み。 WP-TinyWebDB-APIは、両者の長所を連携し、WordPressをAppInventorのTinyWebDBサービスとして利用するためのAPIを、WordPressのプラグインとして提供したもの。 本章は、WP-TinyWebDB-APIのインストール、Postman を使ってAPIの動作確認, そして第9章のWebデータベースに応用する検証を行う。   WP-TinyWebDB-APIのインストール 公式サイトを利用する FTPツールでtinywebdb-api ディレクトリー全体を WordPress の pluginsフォルダーにコピーして下さい(/wp-content/plugins/). FTP the entire tinywebdb-api directory to your WordPress blog’s plugins folder (/wp-content/plugins/). 管理パネルの「Plugins」タブ上のpluginを有効化してください。 Activate the plugin on the “Plugins” tab of the administration […]

AI2(8) Make Quiz

**第9章 Web データベース ** TinyWebDB (Chapter 10. MakeQuiz and TakeQuiz) Chapter 8 に、TinyDBを使って簡単なメッセージを保存する処理を作成しました。 Androidでは、ネットワーク経由でサーバーにアクセスするアプリが多数あります。Androidのシステムにネットワーク通信のための機能が備わっており、それを利用して非常に簡単にサーバーとやり取りするアプリを作れるのです。 App Inventorでも、サーバーとやり取りするアプリを作ることができます。これは「TinyWebDB」という部品として用意されています。 TinyWebDBは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。ただし、それ以上に複雑なことは、現時点ではできません。ですから、あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。 下記のテスト用サーバが用意されてる http://tinydb.edu2web.com/ ※TinyWebDBの仕様 では、TinyWebDBは、どのような形でサーバーにアクセスするのでしょうか。データの保管と取得について、その仕様をざっと整理しておきましょう。 ○データの送信 URL: アドレス/storeavalue パラメータ: tag=タグ名&value=値 データをサーバーに送信する場合、送信先となるWebサイトのアドレスの./storeavalueというURLにアクセスをします。送られるタグ名と値は、それぞれ「tag」「value」というパラメータとして送られます。 ○データの取得 URL: アドレス/getvalue パラメータ: tag=タグ名 サーバーからデータを受け取る場合、送信先となるWebサイトのアドレスの./getvalueというURLにアクセスをします。取得したい値のタグ名が「tag」パラメータで送信されます。 注意しておきたいのは、「サーバーからTinyWebDBが受け取るデータは、JSON形式でなければいけない」という点です。JSONというのは「JavaScript Object Notation」というもので、JavaScriptのオブジェクトを記述するためのフォーマットです。これを利用して、テキストやリストなどを送れるようにしています。 TinyWebDBでは、あらかじめ決められた形式でまとめられたJSONデータを受け取り、それを利用します。また送信先のURLや、送付するパラメータ名なども決まっています。それらに従って、サーバー側に処理用のプログラムを用意しなければいけないのです。 サンプルプログラム Make Quiz Design: Components: Blocks: Refer: http://www.appinventor.org/MakeQuiz10 – (English)