Thunkable (10) Firebase Photo Share

Gramとは

A private version of Instagram.

Gram is what photo sharing should be — ad-free, auto-captioning and secure. This app features the Sign In component with Realtime DB both powered by Firebase, Image Recognizer by Microsoft and a way to “heart” photos. Thunkers must create their own Firebase account and add their own API keys and database url in their account settings.

自家製Instagram。

グラムは広告なし、自動キャプション、安全な写真共有アプリ。このアプリは、FirebaseをベースにしたサインインコンポーネントとRealtime DBを備えて、MicrosoftのImage Recognizer、および写真にハートつける機能を備えています。 Thunkersは独自の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が表示される。

メール認証の許可

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

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

メール認証を許可する

2018-06-21 00.16.05

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

写真共有画面デザイン

最大3枚写真の表示ができるように画面上3個imageを配置する。

スクリーンショット 2018-06-21 23.05.35.png

写真共有ブロック

主に6個ブロックで構成する。

スクリーンショット 2018-06-21 23.07.58.png

かなり複雑なブロック構成になるので、下記のURLから、Click to remix​」を開き、ソースコードを導入してください。

https://docs.thunkable.com/thunkable-cross-platform/get-started/sample-apps#gram

データベース確認

2018-06-21 00.39.46

3枚写真を追加したら、データベースの様子。

動作画面

Leave a Reply

Your email address will not be published. Required fields are marked *