Thunkable (5) Translation app

デザイン

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

image

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

image

プログラミング

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

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

image

アプリ画面

参考Youtubeビデオ

Thunkable (2) Swiping Screens

Swiping Screensアプリは、二つ画面の切り替え方法を学習する。

デザイン

画面1は、キリンの写真

画面2は、キリンの帽子をかぶる写真

両方は、TAB NAVIGATORの階層の下に移動

プログラミング

特にプログラミングはなし。

ダウンロードして実行してみてください。

参考

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 Massachusetts with teacher professional development (PD) in the summer and academic year support.

See: https://www.mobile-csp.org/

 

Mobile Computing (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ファイルの公開

  1. アプリのAPKファイルを生成する
  2. Google Driveに保存して下さい。

    Google Drive:

    https://drive.google.com/

  3. ファイルアクセス権限は、「Webで一般公開」にする。
  4. 保存したファイルを右クリックして、「共有可能なリンクを取得」を選ぶ。
  5. このURLを利用してQRコードの生成する。

QRコードの生成サイト例:

https://www.cman.jp/QRcode/

 

Mobile Computing (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 a non-trivial app.  For example, it cannot simply be a minor tweak to one of the app’s we’ve done in the course, although a significant extension of one of our apps would be okay.

Minimum Technical Requirements  

The app must meet certain minimum technical requirements.

  • Data Abstraction.  The app must include at least two variables and must make use of either a list or a database.
  • Procedural Abstraction.  The app must include at least two programmer-defined procedures or functions.
  • Algorithms and Control.  The must include at least one if/else structure or one loop.

Evaluation Rubric

The following criteria will be used to evaluate your project.  Each criterion will be worth 5 points, ranging from 0 (unable to assess) to 5 (good),  for a total of 20 points.

  • Purpose:  The app’s purpose is clearly described and the app itself clearly achieves its purpose.
  • Technical Requirements:  The app meets or exceeds the minimum technical requirements as described above.
  • Functional Performance. The app was downloaded and tested and it worked as expected without major performance issues or bugs.
  • Scope:  The app represents a significant creative accomplishment and is not just a minor variation or extension of one of the apps we did in the course.

Minimum Presentation Requirements 

In order for you app to be reviewed by your peers in this course, you will be required to provide a link to a publicly accessible presentation  of your app that meets the following minimum requirements.  

  • Title. The app’s title.
  • Elevator Pitch. A one sentence description of your app that captures its essential purpose.
  • Description. A one paragraph description of your app that describes its purpose and scope and summarizes its basic functions.
  • App Screenshot.  A screenshot of one of the app’s main screens or views.
  • Blocks Screenshot.  A screenshot of the blocks that demonstrates that the app meets the technical programming requirements of the project.
  • QR code and Download Link. A functioning QR code and a functioning HTML link to your app’s APK file and a brief description of how the reviewer should test the app.

Sample Presentation

https://github.com/edu2web/PhotoBlog/blob/master/README.md

Mobile Computing (9) Web API

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のインストール

公式サイトを利用する

  1. FTPツールでtinywebdb-api ディレクトリー全体を WordPress の pluginsフォルダーにコピーして下さい(/wp-content/plugins/).

  2. FTP the entire tinywebdb-api directory to your WordPress blog’s plugins folder (/wp-content/plugins/).

  3. 管理パネルの「Plugins」タブ上のpluginを有効化してください。

  4. Activate the plugin on the “Plugins” tab of the administration panel.

Postman を使ってAPIの動作確認

サイトをブラウザーで開くと、普通のWordPressのサイトに見える

http://tinywebdb.ai2.work/

追加したAPI機能をみる。(これをTinyWebDBのServiceURLにセットする)

http://tinywebdb.ai2.work/api

http://tinywebdb.ai2.work/api/getvalue/?tag=questionsChenLab

image

ブラウザから取得したデータは、少々見にくい。PostmanというChrome の拡張を使うと、便利。認証、パラメタ引き渡しもできる。

image

データの送信

http://tinywebdb.ai2.work/api/storeavalue/

Webデータベースのアプリで検証

第9章のアプリから、上記のAPIへアクセスして見た。

問題なく、問題が保存できる。

image

ブラウザーからも、保存したデータの確認できる。

image

 

Mobile Computing (8) TinyWebDB

**第9章 Web データベース **

TinyWebDB

(Chapter 10. MakeQuiz and TakeQuiz)

Chapter 8 に、TinyDBを使って簡単なメッセージを保存する処理を作成しました。

Androidでは、ネットワーク経由でサーバーにアクセスするアプリが多数あります。Androidのシステムにネットワーク通信のための機能が備わっており、それを利用して非常に簡単にサーバーとやり取りするアプリを作れるのです。

App Inventorでも、サーバーとやり取りするアプリを作ることができます。これは「TinyWebDB」という部品として用意されています。

image

image

TinyWebDBは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。ただし、それ以上に複雑なことは、現時点ではできません。ですから、あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。

※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
Make Quiz Interface
Take Quiz
Take Quiz Interface
Components:
Make Quiz:
Make Quiz Components
Take Quiz:
Take Quiz Comps
Blocks:
Make Quiz:
image
Take Quiz:
image

Refer:

  • http://www.appinventor.org/MakeQuiz10 – (English)
  • https://edu2web.github.io/ai2bookcn/chapter10.html – (Chinese)