回路

MIT App Inventorを使用してAndroid用の秘密のメモ帳アプリを作成する方法:11ステップ

Unicode character table

Unicode character table

目次:

Anonim

何かをメモしたいと思ったことはありますが、他の人に見たくないという人はいませんか。機密情報を書き留める必要があり、誰かがそれを見たくないのではないでしょうか。たぶんあなたは厄介な友人や家族を持っていて、あなたは彼らがあなたのメモを読むことを心配していますか?


さて、あなたはAndroid用のDIY Secret Notepad Appで簡単に休むことができます!あなたのノートを隠すことができることに伴う気楽さに加えて、あなたはいくつかの基本的なコーディングの概念を学び、あなた自身のアプリを作ったという満足感も得ます!メモ帳アプリは、必要に応じてメモとパスワードを書き留めて、それをすばやく削除して保護する機能を備えています。あなたの情報を詮索好きな目から安全に保つための使いやすく不朽の道具です。アプリは のみ Android携帯では動作しますが、残念ながらMIT App InventorはiOSアプリの作成をサポートしていません。

材料/ツール:

あなたがあなたのアプリをテストする(そしてあなたがこのInstructableを終えた後にアプリを使う)ために手持ちのAndroid携帯電話を持っているけれども、あなたがこの指示可能なものに必要とする唯一のものはWindowsまたはMacコンピュータである。便利です(それは ではない 必須)。

http://ai2.appinventor.mit.edu/:コンピュータはこのリンクでインターネット接続とMIT App Inventor 2へのアクセスを必要とします。

MIT App Inventorは、シンプルな「ドラッグアンドドロップ」アプリ作成インターフェイスです。それはコーディングのための良い出発点であり、完全に無料です。

用品:

ステップ1:プロジェクトを作成する

まず、MIT App Inventor 2にログインしてプロジェクトを作成する必要があります。これが完了すると、次のような画面が表示されます(私の作業領域には、いくつか異なる点があります。このプロジェクトに必要な部分は既に設定されています)。瞬間)。

クリックしてドラッグ

MIT App Inventorは「クリックアンドドラッグ」インターフェイスを使用します。ここでは、アプリケーションの作成に必要なものがすでに用意されているので、クリックして作業領域(中央のボックス)にドラッグします。どのようなアプリのように見えます)。

ユーザーインターフェース

プロジェクトを設定したら、左側にあるUser Interfaceタブをクリックします。 「PasswordTextBox」をクリックして、画面中央のアプリ(前述の画面中央の四角、右上隅にある時間)にドラッグします。次に「ボタン」をドラッグします。最後に、Storageタブの下からTinyDBをドラッグします(この部分は表示されませんが、後で便利になります)。右側のプロパティタブのテキストの下にあるボタンのテキストを変更することができます(この手順の2番目の図に示すとおり)。これらの作品が画面に表示されている場所は関係ありませんので、気にしない限り、心配することは避けてください。この画面は、パスワードを作成したときに1回しかパスワードをリセットしなかったときに表示されません。あなたがアプリを使用している間、それ以外にこの画面は隠されたままになります。

ステップ2:コードを見る

これで、この画面のコーディングセクションを始めます。右上の「ブロック」ボタンをクリックしてください。あなたはこのようなものを見るでしょう(中央作業域にまだブロックは全くないでしょうが、私はこれらをこのプロジェクトのために前もって準備しました)。ブロックは、左側にあるセクションによって色分けされています(緑色のブロックは緑色のLogicタブにあります)。

説明

つまり、この画面の動作は2つの部分に分かれています(2つのブロックの組み合わせが互いに分離していることに気付くでしょう。最初のブロックのセットは、作成したばかりの画面(パスワードボックスとボタンが表示されるか、「初期化」され、すでにパスワードが設定されているかどうかを確認します。設定されている場合は、次の画面に切り替わります。ボタンを押すと、パスワードボックスにあるものがすべてパスワードとして設定されます。ログインできるように、次の画面に進みます。

ステップ3:最初のブロック

これがブロックの最初のセットです。大きなブロックが他のすべてのブロックを囲む括弧のように見えます。その上のテキストは「Screen1」を初期化します。つまり、表示されているプルダウンメニューで選択されている画面( "Screen1"と表示されている部分)が起動(または初期化)されると、この大きなブロック内の他のすべてのブロックが実行されます。このブロックは、左側の茶色の「コントロール」タブにあります。メインの作業スペースにドラッグして、プルダウンメニューの画面が「Screen1」に設定されていることを確認します。

いつそしていつ

次に "if"ブロックを使います。今作成した「when」ブロックのすぐ内側にあるブロックです。何かが当てはまるかどうか( "if"セクションに接続されているもの、またはその中で開かれているもの)を確認し、次に "then"セクション/開始部分に接続されているブロックを実行します。コントロールタブにもあります。左側の青い「Math」セクションに行き、「=」記号の横にある1つの開口部のように見えるブロックを、作成したばかりの「if」ブロックの開口部にドラッグします。次に "Screen1"の下の "TinyDB1"というセクションに行きます。 「call 'TinyDB1'.GetValue」と書かれている紫色のブロックを見つけます(それは紫色で、それに付いている赤いブロックを除いて、絵の中のものとまったく同じです)。作成した「=」ブロックの左側のスロットにドラッグします。このブロックはあなたの電話のファイルか「データベース」をチェックして値がそこにあるかどうかを確かめます。このブロックを使用して、パスワードがすでに作成されているかどうかを確認します。紫色のブロックの「valueIfTagNotThere」スロットにある赤いブロックを、代わりに「tag」スロットにドラッグします。 「tag」スロットにある赤いブロックの中に「accountMade」と入力します。これは、前述の "データベース"内の値の名前です。次のステップでは、その値を設定します。今度はデータベースに値が見つからない場合と同じように値が返されることをアプリに通知する必要があります。つまり、「valueIfTagNotThere」スロットがその目的です。左側の "Math"タブに行き、 "0"を見つけてください、それはリストの一番上にあるはずです。それを「valueIfTagNotThere」スロットにドラッグします。別のものを "="ブロックの右側のスロットにドラッグし、 "0"ではなく "1"を入力します。最後に、 "コントロール"タブに行き、 "別のスクリーンを開く"ブロックをドラッグアウトしてください。青い "="ブロックのすぐ下、 "if"ブロックの内側に配置します。

説明

ここで何が起こっているのかは次の通りです。画面が起動し、 "if"ブロックが実行されます。 "if"ブロックはデータベース内の "accountMade"の値が何であるかをチェックし、それが "1"に等しい場合、アプリは "Screen2"に切り替わります。それが "1"に等しくなければ、何もしません。

ステップ4:第2ブロック

このブロックでは、「Button1」という名前のボタンが押されるのをアプリに待機させます。ブロックは茶色ですが、通常はコントロールタブからのものであることを示していますが、今回は実際には "Screen1"の下の "Button1"セクションにあります。 「when 'Button1' .Click」ブロックをドラッグします。次に、 "TinyDB1"セクションから2つの "call 'TinyDB1'.StoreValue"ブロックを取得する必要があります。これらは、この前のステップで見た前の ".GetValue"ブロックと非常によく似ています。違いは、これらのブロックは値を取得する代わりに値を格納することです。これら2つを "when"ブロックに次々に入れてください。最初のものには、テキストブロック( "tag"スロットの "赤い" text "セクションから"スペースを引用符で囲んだもの)を入れます。 "valueToStore"スロット(これは値を設定するものです。 "tag"スロットに) "'PasswordTextBox1"。 "Text"ブロックを配置します。 "Screen1"の下の "PasswordTextBox1"セクションに移動すると、パスワードボックス内のテキストが参照されます。次の ".StoreValue"ブロックは "accountMade"の値を設定しますこれはあなたが既にパスワードを設定したかどうかをアプリが知る方法です。最後に "から別のスクリーンを開く"ブロックをつかみます"tab"を制御し、最後の "call"ブロックの下に差し込みます。 "screenName"スロットにテキストブロックを差し込み、Screen2と入力します。

説明

このコードチェックブロックでは、パスワードを "TextBox"内のパスワードに設定し、パスワードが作成されたことを確認して、ボタンを押すと次の画面に移動します。

ステップ5:Screen2

2番目の画面で作業を始める前に、作成する必要があります。左上の画面を追加をクリックします。最初の画面を設定するのと同じように、1つの "PasswordTextBox"、1つの "Button"、および1つの "TinyDB"オブジェクトが必要になります。このステップには他に何もありません。ボタンのテキストを変更したい場合があります。これは右側のテキストの下のプロパティタブで変更できます(このステップの2番目の図に示すとおり)。

説明

この画面は「ログイン」画面として機能します。パスワードを作成したら、これはアプリを開いたときに表示される画面です。

ステップ6:唯一のブロック

この画面には1セットのブロックしかありません。最初に「Button1」タブから「when 'Button1'.click」ブロックをドラッグし、次にその中に「if」ブロックをドラッグします。 "if"ブロックの "if"スロットには、 "="ブロックを差し込みます。 "="ブロックの左側に "'PasswordTextBox1'。 'Text'"ブロックを置き、右側に "'TinyDB1'.GetValue"ブロックを置きます。 "tag"スロットには "password"というテキストブロックを入れ、 "valueIfTagNotThere"スロットには "n / a"と言うテキストブロックを入れます。 "="ブロックの下に "open another screen"ブロックを置き、 "screenName"スロットのために "Screen3"と言うテキストブロックを入れる。

説明

このブロックセットは、 "PasswordTextBox"内のテキストが設定されたパスワードと一致するかどうかを確認し、一致する場合は "Screen3"に移動します。そうでない場合、アプリは何もしません。

ステップ7:スクリーン3

それでは、このアプリの最大の部分、メモ帳に進みましょう。まず、新しい画面を作ります。今、私たちは一つの "Textbox"と7つの異なる "Button"が必要になるでしょう。テキストボックスの右側にあるプロパティタブには、特定の寸法が表示されます。これは、複製する必要があります(右側のタブの幅と高さの下に表示されます)。このステップの2番目の画像)テキストボックスに何も書かれていないときに表示されるテキストである「ヒント」テキストも変更する必要があります。

配置

次に、左側の「レイアウト」タブから2つの「Horizo​​ntalArrangement」オブジェクトを追加する必要があります。テキストボックスに続けて次々とそれらを置きます。次に、最初の4つが一番上の「Horizo​​ntalArrangment」にあり、次の3つが2番目の「Horizo​​ntalArrangement」にある7つの異なるボタンを作成する必要があります。さまざまなボタンを作成しているので、右側のコンポーネントバーにそれに応じた名前を付ける必要があります(このステップの3番目の図の画像)。ボタンごとに、「プロパティ」バーの表示テキストを変更し、「コンポーネント」バーの名前を似たものにして、簡単に追跡できるようにします。このステップの3番目の図で、各ボタンの名前を確認できます。ボタンの順番や "Horizo​​ntalAllignment"におけるボタンの配置は任意です。

ここに一覧表示されているボタンがあることを確認し(この手順の最初の図にもあります)、それらをプロパティタブとコンポーネントタブの両方に指定していることを確認します。

保存する

クリア

クリアを元に戻す

削除する

ログアウト

アプリを閉じる

パスワードを再設定する

最後に、別の "TinyDB"オブジェクトが必要になります。

ステップ8:初期化

この画面のコードには8つのブロックセットがありますが、落胆しないでください。それらのほとんどは、ボタンを操作するための非常に小さなコードです。

このブロックセットには、画面が初期化されるときのための "when"ブロックが必要です。そのブロックの内側には、 "TextBox1"セクションから "set 'TextBox1'。 'Text'を"ブロック "する必要があります。 "to"スロットに ".GetValue"ブロックを差し込み、 "tag"を "textBox"に、 "valueIfTagNotThere"を何も設定しないでください。

説明

これは "Textbox"(私達のメモ帳)にあるものを、画面が起動したときにデータベースに保存されているものに設定します。

ステップ9:ボタンがたくさん

クリア

これら2つのブロックのうち最初のものには、「クリア」ボタンがクリックされたときのための「when」ブロックが必要です。そのブロックの中に "TextBox1"のテキストを設定するためのブロックが必要で、その "to"スロットには何も接続しません。

説明

これは "TextBox"をクリアしますが、データベースに保存されているものはクリアしません。

クリアを元に戻す

これで、 "元に戻す"ボタンが押されたときの "when"ブロックが必要になりました。その中に "TextBox1"のテキストを設定するためのブロックが必要で、その "to"スロットに "textBox"の "tag"と何もない "valueIfTagNotThere"を持つ ".GetValue"ブロックを配置します。

説明

これにより、 "TextBox"の内容がデータベースの内容に復元されます。

ステップ10:ほんの少しのボタン

保存する

今すぐ私たちはクリックされる "Save"ボタンのための "when"ブロックとその中に "textBox"の "tag"を持つ ".StoreValue"ブロックとその "valueToStore"ブロックの中に "TextBox1"を必要とします。 "ブロック。

説明

これにより、 "TextBox"の内容はすべてデータベースに保存されます。

削除する

次に、「削除」ボタンがクリックされ、「set 'TextBox1'。 'Text'」ブロックの中に「to」が何もない「when」ブロックが必要です。その下には、 "textBox"の "tag"と何もない "valueToStore"を持つ ".StoreValue"ブロックがあります。

説明

これにより、 "TextBox"内のすべてのものが削除され、データベース内の "TextBox"から保存されているテキストも削除されます。

ログアウト

これで、「ログアウト」ボタンの「when」ブロックがクリックされ、そのブロック内に「screen2」の「screenName」を持つ「別の画面を開く」ブロックが追加されました。

説明

これでログインページに戻るので、メモ帳にアクセスするにはもう一度パスワードを入力する必要があります。

アプリを閉じる

「アプリケーションを閉じる」ボタンの「when」ブロックがクリックされ、「アプリケーションを閉じる」ブロック内に追加されました。

説明

これは一目瞭然です、それは完全にアプリを閉じます。

パスワードを再設定する

最後に、「パスワードのリセット」ボタンをクリックするための「when」ブロックが必要です。内部には、 "accountMade"の "tag"と0の "valueToStore"を持つ ".StoreValue"ブロックが必要です。その下には、 "Screen1"の "screenName"を持つ "open another screen"ブロックが必要です。

説明

これでパスワードが削除され、ログアウトしてScreen1に戻りますので、メモ帳用の新しいパスワードを作成する必要があります。

ステップ11:あなたは完了です!

それがすべてです!あなたは首尾よくあなた自身の秘密のメモ帳アプリを構築しました!これで、「MIT App Inventor Companionアプリ(http://play.google.com/store/apps/details?id = edu ….またはダウンロード)でそれをテストできます(Connectの下のAI Companionをクリック)。アプリをそのまま(ビルドの下の最初のオプションをクリックし、QRコードをスキャンしてアプリを携帯電話にダウンロードします)。

あなたが私のInstructableを楽しんで、そしてそれが有用であるとわかったと思います! MIT AI2がどのように機能するのかを理解したので、私のコードを自由に変更してください。良い課題は、異なる名前で一度に複数のメモを保存しようとすることです。