モバイルアプリ

モバイルアプリは、まず携帯電話のために作られます。画面下のタブバー、携帯電話いっぱいに広がる画面、親指が届くボタンがあります。ブラウザーからそのままホーム画面に追加でき、Google PlayとApp Storeに公開することもできます。

どんなときに選ぶか

ダッシュボードのボックスの上にある携帯電話のアイコン、Mobile Appを選ぶか、指示の中で「モバイルアプリ」と書きます。

Setherionが作るアプリは、どれも携帯電話で動きます。Mobile Appは、携帯電話に収まるウェブサイトではなく、携帯電話のアプリのように感じられるものがほしいときに選びます。

頼まなくても得られるもの

• 画面下のタブバー。3つから5つのタブがあり、それぞれにアイコンと短い名前が付きます。各画面の上部には、タイトルを表示するバーがあります。
• 最初に表示されるのはアプリそのもの。最初のタブで開き、サンプルの内容がすでに入っています。ようこそページやログイン画面では開きません。
• 主な操作は1タップで。専用のタブか、丸い + ボタンに置かれます。
• 親指のために作られています。大きなボタン、カード、リスト、画面下からスライドして出るパネルがあります。
• ノッチとホームバーの余白。iPhoneで、何も隠れません。
• Profileタブ。アプリがデータを保存する場合、ユーザーはここで、Googleか、メールとパスワードで本当にログインでき、追加した内容はSetherionのデータベースに保存されます。

パソコンでは、アプリは携帯電話の幅の列に表示されるので、携帯電話で見るときと同じ見え方で確認できます。

頼み方

ほしいタブの名前か、アプリでユーザーがすることと、いちばんよくすることを1つ書きます。

A mobile app for a gym: today's classes, booking a place,
my bookings, and a profile with the membership

A mobile app to track expenses: add an expense in two taps,
categories, a monthly chart and a budget for each category

A mobile app for a bakery: the menu with photos, ordering
for pickup, and a loyalty card that counts the coffees

A mobile app for dog walkers: the day's walks in a list, each dog
with its owner's phone and notes, and a button to check in

Mobile Appを選んでボックスを空のままにすると、その下にアイデアが表示されます。1つ押すと、変更できる状態でボックスに入ります。横にある矢印のOther ideasで、ほかのアイデアも表示されます。

携帯電話で使う

• 作っている間は、プレビューの上の画面アイコンで、アプリを携帯電話のサイズで表示できます。作るたび、変更するたびに、アプリは携帯電話の幅でも測定されます。はみ出しているものがあると、バーにWider than a phone screenと表示され、Fix with AIが付きます。
• 自分の携帯電話では、公開して、そのアドレスを開きます。ChromeにはInstall app、iPhoneのSafariにはAdd to Home Screenが表示されます。そのあとは、独自のアイコンを持つ、インストールしたアプリのように、全画面で開きます。
• ストアでは、Google PlayとApp Storeからダウンロードする携帯電話のアプリとして公開されます。アプリストアへの公開を参照してください。

自分らしくする

知っておくと便利なこと

• ここで作ったモバイルアプリは、携帯電話のアプリの形をして、ブラウザーで動きます。ストア向けには、それを包んで1つのアプリにするか、携帯電話の完全なプロジェクトに変えます。この2つの方法はアプリストアへの公開で説明しています。
• 広告とアプリ内課金は、ゲーム向けに作られています。ゲームを参照してください。ゲームではない携帯電話のアプリは、代わりにStripeで支払いを受け付けます。
• 携帯電話のアプリの中では、メールとパスワードでログインします。Googleボタンと、メールで送るログインリンクは、そこでは表示されません。
• Appleは、ユーザーが新規登録できるアプリには、アカウントを削除できることも求めています。「Profileタブに、Delete accountボタンを付けて」と頼んでください。
• Power Sethでは、頼まなくても、モバイルアプリに、保存される設定画面、リストの検索と絞り込み、すべての画面の空の状態、読み込み中の状態、エラーの状態が付きます。ビルドモードを参照してください。