برای استفاده از یک مؤلفه در برنامه خود، باید کلیک کنید دانلود کتاب Hello App Inventor و آن را روی نمایشگر در وسط Designer بکشید. وقتی کامپوننتی را به Viewer اضافه می کنید (#1 در زیر)، در لیست اجزای سمت راست Viewer نیز ظاهر می شود.
اجزاء (شماره 2 زیر) دارای ویژگی های قابل تنظیم هستند. این ویژگی‌ها نحوه ظاهر یا رفتار مؤلفه در برنامه را تغییر می‌دهند. برای مشاهده و تغییر ویژگی های یک کامپوننت (شماره 3 زیر)، ابتدا باید کامپوننت مورد نظر را در لیست اجزای خود انتخاب کنید.اسکرین شات از پنجره طراحمراحل انتخاب کامپوننت ها و تنظیم خواصHelloCodi دارای یک جزء دکمه است که تصویر زنبوری را که قبلا دانلود کرده اید نمایش می دهد. برای انجام این کار:
مرحله 1a. از پالت رابط کاربری، مولفه Button را به Screen1 (#1) بکشید و رها کنید.
مرحله 1b. برای دادن تصویر زنبور به دکمه، در قسمت Properties، در زیر Image، روی متن "None..." کلیک کنید و روی "Upload File..." (#2) کلیک کنید. پنجره ای باز می شود که به شما امکان می دهد دانلود کتاب Hello App Inventor فایل تصویر را انتخاب کنید. روی «مرور» کلیک کنید و سپس به محل فایل codi.jpg که قبلا دانلود کرده‌اید (#3) بروید. روی فایل codi.jpg کلیک کنید، روی "Open" و سپس "OK" کلیک کنید.
اسکرین شات برای آپلود رسانهمرحله 2. ویژگی Button's Text را تغییر دهید:"Text for Button1" را حذف کنید، ویژگی متن دکمه را خالی بگذارید تا هیچ نوشته ای روی تصویر زنبور وجود نداشته باشد.اسکرین شات از ویژگی های متن
مرحله 3. از پالت رابط کاربری، مولفه Label را به Viewer (#1) بکشید و ایرانیان سایبر رها کنید و آن را در زیر تصویر زنبور قرار دهید. در زیر لیست اجزای شما به عنوان Label1 ظاهر می شود.
در قسمت Properties، آن را تغییر دهید(2) ویژگی متنی Label1 را برای خواندن "Touch the Bee" بنویسید. تغییر متن را در Designer و دستگاه خود مشاهده خواهید کرد.(3) اندازه قلم تا 30.(4) BackgroundColor از Label1 با کلیک بر روی کادر. می توانید آن را به هر رنگی که دوست دارید تغییر دهید.
(5) TextColor به هر رنگی که دوست دانلود کتاب Hello App Inventor دارید. (توجه: اگر BackgroundColor و TextColor یکسان باشند، نمی توانید متن خود را بخوانید!)در اینجا رنگ پس زمینه روی آبی و رنگ متن به رنگ آبی تنظیم می شود.اسکرین شات تنظیمات خصوصیات برای Lable1
مرحله 4. در زیر پالت، روی کشوی رسانه کلیک کنید و یک جزء Sound را بکشید و آن را در Viewer (#1) قرار دهید. هر جا که آن را رها کنید، در قسمت پایینی از Viewer با علامت Non-visible components ظاهر می شود. در قسمت Media، روی آپلود فایل کلیک کنید... (#2) به محل فایل Bee-Sound.mp3 که قبلا دانلود کرده اید مراجعه کنید و آن را در این پروژه آپلود کنید (#3). در قسمت Properties، ببینید که ویژگی Source در حال حاضر None را می‌گوید... روی کلمه None... کلیک کنید تا Source جزء Sound1 را به Bee-Sound.mp3 (#4) تغییر دهید.
اسکرین شات از ویژگی تنظیم برای مؤلفه صدابرنامه نویسی با ویرایشگر بلوک
تاکنون صفحه و اجزای برنامه خود را در Designer که در پنجره مرورگر وب قرار دارد، مرتب کرده اید. برای شروع برنامه نویسی رفتار برنامه، باید به ویرایشگر بلوک ها بروید. روی دکمه Blocks در دانلود کتاب Hello App Inventor سمت راست بالای صفحه خود کلیک کنید تا به بلوک ها بروید ویرایشگر.دکمه ویرایشگر بلوکهنگامی که ویرایشگر بلوک ها را در مقابل خود دارید، به مرحله بعدی بروید تا برنامه خود را با بلوک ها برنامه ریزی کنید.پخش صدا
مرحله 1. در سمت چپ ویرایشگر Blocks، روی کشوی Button1 کلیک کنید تا باز شود. بلوک When Button1.Click را در ناحیه کاری (ناحیه باز سمت راست) بکشید و رها کنید.
اسکرین شات بلوک button.clickآن بلوک های زرد خردلی بلوک های کنترل کننده رویداد نامیده می شوند. بلوک‌های کنترل‌کننده رویداد مشخص می‌کنند که دستگاه تلفن همراه چگونه باید به رویدادهای خاص پاسخ دهد: یک دکمه فشار داده شده است، تلفن در حال تکان دادن است، کاربر انگشت خود را روی بوم می‌کشد، و غیره وقتی Button1.Click یک کنترل‌کننده رویداد است.
مرحله 2a. کشوی Sound1 را کلیک کنید و بلوک Sound1.Play را بکشید و آن را به بخش "do" بلوک When Button1.Click متصل کنید. بلوک ها مانند قطعات پازل به هم متصل می شوند و هنگام اتصال می توانید کتاب Hello App Inventor صدای کلیک را بشنوید.