チュートリアル：最初のアプリを作る

このチュートリアルでは、次のことを行います：-ステップにメッセージを表示する - カスタムメッセージを入力する - メッセージのカウントを作成する - 最新のメッセージ表示の日付と時刻を記録する

このチュートリアルでは、複数の機能的なアプリコンポーネントを作成することで、アプリの基本を学びます。

演習の最後には、次のようなHello Worldアプリが完成します：

{height="" width=""}」のようになります。

エクササイズ1：Hello Worldアプリの作成

このエクササイズでは、ボタントリガーからメッセージを表示するシンプルなアプリを作成します。

アプリの作成

1. {height=""width=""}。
2. 右上の**+ Create App**をクリックします。
3. アプリ名を「Hello World - Example」とします。{height="" width=""}「作成」をクリックします。
4. アプリの詳細ページから、右上のEditをクリックするか、Untitled Stepの名前をクリックしてApp Editorに入ります。何かを作る前に、ベースレイアウトに基本的なデザイン要素を追加しましょう。

ベースレイアウトをデザインする

1. 左側のStepsタブからBase Layoutを選択します。
2. Iconsをクリックし、長方形を選択します。長方形の幅をアプリの画面全体に広がるように調整し、クリックして画面上部にドラッグします。長方形の色を変更するには、**「ウィジェット」**タブの「**塗りつぶし」**四角をクリックし、「淡いグレー」を選択します。{height="" width="" }.
3. 図形を選択し、CTRL/CMD + Cキーを押してコピーします。2番目の長方形を画面の下にドラッグします。
4. 入力」をクリックし、「変数」を選択する。**Widget］**タブで、［Select a data source］フィールドをクリックします。App Info］の横にある矢印をクリックし、［App name］を選択します。
5. {height="" width=""} 変数を左上隅、長方形の上にドラッグする。
6. さらに2つの変数を追加する：
7. アプリ情報データソースリストからステップ名を選択する。この変数を右上に配置する。
8. アプリ情報データソースリストからLogged-in userを選択する。この変数を左下に配置する。
9. 最後に、Buttonsをクリックし、Menuを選択します。ボタンをクリックし、画面の下にドラッグします。

基本レイアウトは次のようになります：{height="" width=""}.

次に、ステップに機能を追加します。

hello worldボタンを追加する

1. StepsタブでUntitled Stepを選択します。ダブルクリックして名前を変更し、"Display message "と入力する。
2. Buttonsをクリックし、Buttonを選択します。ボタンの周りの四角を使って、ボタンのサイズを大きく変更します。{height="" width=""} ボタンを画面の中央に配置する。
3. ボタンに以下のスタイルを追加します：
4. テキスト - "Hello World"
5. ボタンの色 - 緑
6. アイコン - パン・ツール

ボタンは次のようになります：{height="" width=""} 次に、トリガーを追加します。

次に、このボタンにトリガーを追加して機能させる。

ボタンのトリガーを追加する

1. Hello Worldボタンを選択し、WidgetタブのTriggersセクションに移動する。をクリックして、新しいトリガーを追加します。{height="" width=""} トリガーの名前を "Hello world "とします。
2. トリガー名を "Hello world "とする。
3. Then ステートメントに、以下のロジックを追加する： Show Message→Static Value→Text→ "Hello World"

{height="" width=""}。

1. Save をクリックする。

アプリをテストすると、次のように動作します：{height="" width=""}.

練習2：入力データを保存する

このエクササイズでは、入力テキストを変数に格納するロジックを構築します。

1. 新しいステップを追加し、名前を "Store message "とします。
2. **入力]**をクリックし、[テキスト]を選択します。
3. **Widget]**タブで、[**datasource]**ボックスをクリックします。**Add variable]**を選択します。
4. 変数名を "message "とし、+ Createをクリックする。{height="" width=""}。

アプリをテストすると、テキスト入力が変数 "message "に保存されます。保存された値は、Developer Modeウィンドウの左側にあるVariablesパネルで見ることができます。

エクササイズ 3: ハローの数を数える

このエクササイズでは、Hello worldボタンが押された回数をカウントする分析を作成します。

1. **メッセージの表示]**ステップで、[埋め込み]をクリックし、[**分析]**を選択します。ウィジェットをクリックし、Hello worldボタンの左側にドラッグします。
2. Select an Analysis] をクリックし、[Create Analysis] をクリックします。
3. 表示タイプ］ドロップダウンをクリックし、［単一の値］を選択します。{height="" width=""}。
4. **Operations］**タブをクリックし、［Add a new operation］をクリックします。
5. {height="" width=""} [集計関数]、[レコード数]の順に選択します。
6. エディターの右側にある横矢印をクリックして、可視化ペインを展開する。Value]の下にある[+ Add field]をクリックして、[**Count of Records]**を選択する。{height="" width=""}。
7. 分析タイトルをクリックして、"Count of hellos" に名前を変更し、保存をクリックします。
8. 右上の**「保存して閉じる**」をクリックする。

Developerモードでは完了は保存されないので、RunをクリックしてTulip Playerでこの分析をテストしてください。

練習4：式を使って最後のhelloを計算する

この演習では、アプリが最後に hello と言った時間を表示するために、変数に格納する式をトリガーに記述します。

1. サイドペインで、App タブに移動します。
2. **変数]**の横にある[X]を選択します。
3. **変数の作成]**をクリックする。
4. {height="" width=""}.
5. メッセージ表示ステップで、Hello worldボタンをクリックし、新しいトリガーを追加する。
6. データ操作→保存→式：'The last time you said hello was at' + ' + App Info.Current Date and Time.Current Time →変数→ Last time you said hello

{高さ="" 幅=""}。

1. Count of hellosステップで、[Text]をクリックし、[**Variable]**を選択する。
2. サイド・ペインの データ・オプションで、空白の**データ・ソース・**フィールドをクリックし、Last time you said hello変数を選択します。

アプリをテストすると、式が変数Last time you said helloに保存され、タイムスタンプとして表示されます。{height="" width=""}。

次のステップ

最初のアプリをビルドしたので、ここで公開と実行の方法を学びましょう。

アプリ構築についてもっと知る：*アプリ構築の基本* Tulipアプリエディタ入門* 効果的なベースレイアウトの設計方法

Tulip公認アプリビルダーになるには：アプリビルダー認定基礎講座

お探しのものは見つかりましたか？

community.tulip.coで質問を投稿したり、他の人が同じような質問に直面していないか確認することもできます！