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枚写真を追加したら、データベースの様子。

動作画面

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 (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