一時的なユーザーアバターを作成する方法

ユーザーのプロフィール写真にプレースホルダー画像を使用する代わりに、ユーザーがサインアップするとすぐに個人用のアバターを生成してください。

スキルレベル: 中級

開始前に

、、、およびの基本を知っていること
この実装では、Adaloデータベースの画像プロパティではなく、画像URLを参照する必要があります。プレースホルダーを表示したい場所では、データベースの画像プロパティではなくURLをソースとして使用する必要があります。
アプリにサインアップ画面、ログイン画面、ホーム画面、およびプロフィール画面があることを確認してください
この機能を実装するためには、有料のAdaloプランは必要ありません

手順

この手順では、ユーザーごとに一意でパーソナライズされた一時的なアバターを設定します。高度なことのように聞こえますが、思っているよりも簡単にできます！

1.) まず、ユーザーコレクションに**"Profile Pic URL"というText**プロパティを追加しましょう。これを行う方法については、まずガイドを参照することをお勧めします。

2.) 次に、ユーザーコレクションに**"Profile Pic"というImage**プロパティを追加します。これにより、ユーザーが一時的なアバター画像を置き換えるために自分の写真をアップロードできるようになります。

3.) これで、画像情報を保持するためのプロパティがデータベースに追加されたので、ホーム画面にアクションを追加します。画面のワイヤーフレームの左上にある画面のラベルをクリックし、次にアクションセクションのドロップダウンをクリックします。

4.) クリックアクションセクションの下にある**+ アクションを追加をクリックし、次にUpdate > ログインユーザー**を選択します。

5.) 一時的なアバター画像を生成するために、という無料のサービスを使用して、作成した**"Profile Pic URL"フィールドに保存するリンクを生成します。生成するアバターの種類にはいくつかのオプションがあります（詳細は以下のセクションを参照）。ここではinitialsオプションを使用します。これを行うには、以下のURLを"Profile Pic URL"**フィールドにコピーして貼り付けるだけです。

https://avatars.dicebear.com/api/initials/

6.) このリンクだけではまだ必要な画像を作成しません。この場合に使用するパーソナライズされたフレーズ、つまりユーザーのフルネームをリンクの末尾にLogged In User's > Full Nameと**.svg**と一緒に追加します。更新アクションは以下のようになります：

7.) 次に、このアクションがユーザーにプロフィール画像URLがまだない場合にのみ実行されるようにする必要があります。これを行うには、更新アクションでShow Advancedをクリックし、When does this happen?ドロップダウンをSometimesに設定します。 8.) 「これは、...の場合のみ発生します」 ドロップダウンで 「その他 > ログインユーザー > プロフィール写真のURL」 を選択してください。次に表示されるドロップダウンは 「等しい」 に設定し、最後のドロップダウンは 「空」 のままにしてください。これにより、ユーザーがプロフィール写真を持っていない場合にのみ一時的なプロフィール写真を提供することができます。

10.) 新しいフォームの設定で、フォームセクションのドロップダウンを選択していない場合は、「どのデータコレクション」 ドロップダウンを 「Users」 に設定してください。

11.) 次に、「フォームが行う操作」 ドロップダウンで 「ログインユーザーを更新」 を選択してください。

12.) フィールドセクションのドロップダウンで、「可視フィールド」 セクションから 「Email」、「Password」、「Profile Pic URL」 をそれぞれのプロパティの横にあるゴミ箱アイコンをクリックして削除してください。

13.) 送信ボタンセクションのドロップダウンをクリックし、「+ 別のアクションを追加」 をクリックして、送信ボタンに 「更新 > ログインユーザー」 をもう一度行うアクションを追加してください。

14.) アクションの設定で、マジックテキストを使用して 「プロフィール写真のURL」 を 「ログインユーザー」 > 「プロフィール写真」 > 「URL」 に設定しましょう。

15.) これで、ユーザーのプロフィール写真を表示したい場所では、ドロップダウンで 「画像ソース」 を 「URL」 に設定し、値には 「ログインユーザーの」 > 「プロフィール写真のURL」 と入力してください。 4.) Click Actions セクションの下で、+ Add Action をクリックし、次に Update > Logged In User を選択します。

https://avatars.dicebear.com/api/initials/

6.) このリンクだけではまだ必要な画像を作成しません。ここには、この場合はユーザーのフルネームを使用するための個人用フレーズを追加する必要があります。リンクの末尾に Logged In User's > Full Name と .svg を追加しましょう。あなたの更新アクションは以下のようになります：

7.) 次に、このアクションがユーザーが既にプロフィール画像の URL を持っていない場合にのみ実行されるようにする必要があります。これを行うには、Update アクションで Show Advanced をクリックし、When does this happen? ドロップダウンを Sometimes に設定します。

8.) This action will only happen if... ドロップダウンで More > Logged In User > Profile Pic URL を選択します。次に表示されるドロップダウンが Equal to に設定されていることを確認し、最後のドロップダウンが Empty に設定されていることを確認します。これにより、ユーザーがプロフィール画像を持っていない場合にのみ、ユーザーに一時的なプロフィール画像を提供することができます。

10.) 新しいフォームの設定で、Form セクションのドロップダウンを選択し、Which Data Collection ドロップダウンを Users に設定します。次に、What do you want the form to do? ドロップダウンで Update Logged in User を選択します。

11.) Fields セクションのドロップダウンで、Visible Fields セクションから Email、Password、および Profile Pic URL をそれぞれのプロパティの横にあるゴミ箱アイコンをクリックして削除します。