Thunkable (11) Final Project

最終課題要件

1-4人のクループで、自分のデザインのアプリを作成する。 この課題の得点は、Mobile Computing コース成績の50%に相当する。

どんな種類のアプリでも自由にデザインすることができる。 アプリの洗練さや複雑さの面においでは、些細なではない(non-trivial )アプリである。 例えば、アプリケーションの重要な拡張が大丈夫ではあるが、コースでやったアプリのうちの1つのマイナーな調整ではない。

最小技術要件

アプリは特定の最小技術要件を満たしている必要があります。

  • データ抽象化 。 アプリには少なくとも2つの変数が必要 どちらかのリストまたはデータベースを使用する必要   。
  • 手続き抽象化 。 アプリには少なくとも2つのプログラマー定義のプロシージャまたは関数を含める必要
  • アルゴリズムと制御。 少なくとも1つのif / else構造体または1つのループを含める必要 。

評価基準

課題を評価するために、次の基準が使用されます。 各基準は、0点(評価不能)から5点(良好)までの合計5点で合計20点の価値があります。

  • 目的 :アプリの目的が明確に記述されており、アプリ自体が目的を明確に果たしています。
  • 技術的要件 :アプリケーションは上記の最低限の技術要件を満たしています。
  • 機能的性能 。 アプリはダウンロードされ、テストされ、大きなパフォーマンス上の問題やバグがなければ期待どおりに機能しました。
  • スコープ :このアプリは重要なクリエイティブな成果を表しており、コースで行ったアプリのうちの1つの小さな変化や拡張ではありません。

最低限のプレゼンテーション要件

このコースでは、アプリケーションがレビューされるためには、wordpress.comで公開されているプレゼンテーションへのリンクを提供する必要があり、 以下の最小要件を満たしている必要がある。

  • タイトル。 アプリのタイトル。
  • エレベーターピッチ。 一言でアプリの基本的な目的を説明する。
  • 説明。 アプリケーションの1つのパラグラフの説明。目的と範囲を説明し、基本機能を要約しています。
  • アプリスクリーンショット。 アプリのメイン画面またはビューのスクリーンショット。
  • ブロックスクリーンショット。 アプリケーションがプロジェクトの技術的プログラミング要件を満たしていることを示すブロックのスクリーンショット。
  • QRコードとダウンロードリンク。 アプリ共有(share)するためのQRコードとリンク、およびレビュー担当者がアプリをテストする方法、(APIキーあればその取得方法)の簡単な説明。

サンプルプレゼンテーション

アプリ共有(share)する方法

  1. APIキーなどは含まれないようにアプリを整理
  2. アプリの共有(share)メニューで共有リンクをを生成
  3. このURLを利用してQRコードの生成

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

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

Thunkable (9) Sign In component

ユーザ登録とユーザログイン画面を作る

Local Storage: アプリを終了させても残るデ-タを持つことができる部品。デ-タはキ-とバリュ-の対で記憶される.

今回のアプリは、キーemailとpasswordで、ユーザのログイン情報を保存する。

画面デザイン

4つ画面で構成する

  1. 初期画面
  2. ユーザ登録画面
  3. ログイン画面
  4. 写真共有画面

初期画面デザイン

image

ユーザ登録画面デザイン

image

ログイン画面デザイン

image

ブロック

4つ画面でそれぞれブロックがある

  1. 初期画面ブロック
  2. ユーザ登録画面ブロック
  3. ログイン画面ブロック
  4. 写真共有画面ブロック

初期画面ブロック

image

ユーザ登録画面ブロック

image

ログイン画面ブロック

image

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画面に切り替え、ボタンクリックのブロックに、「ニャー」と猫の鳴き声がするように組み立てる。

 

参考

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/