Tag Archives: featured

Thunkable (10) Firebase Sign Up Login

Published by:

Thunkable Xサインインコンポーネントを利用するについて詳しく説明します。

サインイン機能を組み込むために必要な設計コンポーネントについて説明します。 メール認証用のFirebaseアカウントの作成と構成について説明します。 次に、ブロックを調べて、アカウントの作成(またはサインアップ)、ログイン(またはサインイン)、ログアウト(またはサインアウト)を行います。

独自のFirebaseアカウントを作成し、アカウント設定で独自のAPIキーとデータベースURLを追加する必要があります。

Firebaseアカウント

「Firebase」は、2011年にシリコンバレー発のスタートアップ・Firebase社がサービスを開始したMobile Backend as a Service(MBaas)です。その後、2014年にGoogleが買収し、Googleの持つクラウドプラットフォームに統合されました。

MBaasはBaaS(Backend as a Service)とも呼ばれており、Webアプリケーションやモバイルアプリケーションのバックエンドで行う機能を提供するクラウドサービスです。「Firebase」はアプリ開発者向けのサービスで、バックエンドの処理を代行することで開発にかかる時間・手間の省略が可能で、コスト節約にもつながります。
Create your free Firebase project and account
無料 Firebase アカウント作成

1)使ってみるをクリック

image

2)プロジェクト追加をクリック

 

 

3)プロジェクト名と国を選択

4)データベース作成中

5)作成するアプリ種類の選択

 

スクリーンショット 2018-06-20 22.46.48.png

「ウェブアプリに Firebase を追加」を選択すると。

    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",     authDomain: "chen420.firebaseapp.com",     databaseURL: "https://chen420.firebaseio.com",

上記のapiKeyが表示される。

6)メール認証の許可

初期のメール認証は無効になっている。アプリからメールとパスワードでログインは拒否される。

データベースの設定から、メール認証項目を探す。
2018-06-21 00.15.39

メール認証を許可する

2018-06-21 00.16.05

 

これてアプリは認証、写真のアップロードはできるようになった。

アプリの制作

ログイン画面デザイン

ログイン画面ブロック

アプリ画面デザイン

アプリ画面ブロック

アプリ画面

参考ビデオ

Timecodes / Shortcuts
————-
02:36 – Chapter 1: The Design Components You’ll Need
04:55 – Chapter 2: Creating Your Firebase Account
09:07 – Chapter 3: Connecting Firebase & Thunkable X
10:57 – Chapter 4: Sign Up Block // Create an Account
14:30 – Chapter 5: Signing In & Signing Out

Thunkable (6) Image Recongnizer

Published by:

Thunkableのアプリ制作第二弾、「人工知能による画像認識アプリ」である。

Thunkableでは、いち早く、「人工知能」というメニューを設置し、MicrosoftのEmotion RecognizerとImage Recognizerを使うためのブロックを提供している。ディープラーニングに基づく画像認識。これを利用すれば、以下のようなアプリを、Thunkableのみですぐに作れる。

このアプリのユーザインタフェースの画面

ir2

ブロック図

ir1

できたアプリは、iPhoneにダウンロードしてインストールしてください。

「撮影する」ボタンで撮影してから、「画像認識する」をクリックする。下図の画像認識結果として英文説明が返ってきますが、自動的に日本語に翻訳することも可能。この自動翻訳ブロックも上記メニューから利用できる。

参考

  • http://sparse-dense.blogspot.jp/2017/11/iphoneapp-inventor.html

Thunkable (2) Swiping Screens

Published by:

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

デザイン

画面1は、キリンの写真

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

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

プログラミング

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

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

参考

Thunkable (1) My First iOS App

Published by:

App InventorのiOS版は、来年4月リリースする予定の話があり、ちょっと待ち遠しいところだが。

ThunkableのニュースレターからiOS版の話はでき、意外にも、10月に、iOS版もリリースした。

早速調べながら、作って見る。

プロジェクト作成

まず https://thunkable.com/ を開いて、gmailのアカウントでログイン。

新規App作成。アプリ名は「My First iOS App」とする。

Projectsに、「My First iOS App」が現れる。

アプリデザイナー

デザインしながら、実機で見るのは、Apple StoreからThunkable Liveというアプリをインストールしてください。

Projectsに「My First iOS App」をクリックして、アプリデザイナーが見え、ボタンを追加して、テキストは「Click Me」にする。

「Live Test」をクリックして、バーコードをアプリ「Thunkable Live」に読ませて、実機でデザインの様子をみてください。

アプリのロジック

アプリのBlocks画面に切り替え、ボタンクリックのブロックに、ボタンのテキストは「I just built my first iOS app」にするように組み立てる。

Thunkable Liveで動かす

実機で動かす

Thunkable画面から「Download」をクリックして、メールにできたアプリのリンクを送る。

iPhoneのメールで開き、リンクをクリックして、ダンロードする。

 

 

ダウンロードしたら、インストールする。

プロファイルとデバイス管理のところ、Rappidly incを探し、開いてください。

Rappidly incを信頼を選択する

これて、Thunkableの他に、アプリの名前アイコンが見れる。

 

そのアイコンをクリックして、動作を確認して、Thunkable Liveと同じ動作でしょう。

TinyWebDB API – IoTtest program

Published by:

TinyWebDB APIは、WordPressでTinyWebDBサービスを提供するプラグイン。

TinyWebDB API

IoT test programができたので、紹介する。

システム構成

IoTデバイスから、TinyWebDB API を通して、クラウドに温度と気圧のデータが送信、そしてLEDのOn/Offデータを受信する。

このアプリは、クラウドの温度と気圧のデータが受信、そしてLEDのOn/Offデータを送信する機能を持つ。

デザイナー画面

デザイナー画面では、LEDのOn/Offボタンと、温度と気圧のデータが表示する領域がある。

プログラムのブロック

プログラムのブロックは次のようになる。

実機画面

このアプリにより、IoTデバイスの温度、気圧のデータ表示ができ、そしてIoTデバイスに備えたLEDのOn/Offもできた。