دانشاپ

آموزش قدم به قدم ساخت اپلیکشن اندروید با اپ اینورتور/ اپ اینونتر

دانشاپ

آموزش قدم به قدم ساخت اپلیکشن اندروید با اپ اینورتور/ اپ اینونتر

در این وبلاگ سعی خواهم کرد تا ساخت اپپلیکشن‌های کوچک را با اپ اینورتور/ اپ اینونتر به شما آموزش دهم. این سایت به ویژه برای کودکان و نوجوانان مفیدی است که می‌خواهند خودشان اپ بسازند .

۳ مطلب با کلمه‌ی کلیدی «آموزش گام به گام اپ اینورتر» ثبت شده است

۱۹
ارديبهشت

مقدمه

در ادامه آموزش قبل  می‌خواهیم این اپ ساده را کمی پیشرفته‌تر می‌کنیم. می‌خواهیم کاری کنیم تا اطلاعات تماس را نیز نشان دهد.

 

شروع به کار

  • از قسمت طراحی و از بخش اجتماعی (Social)  انتخاب شماره تلفن (PhoneNumberPicker) را می‌کشیم و زیر دکمه تماس در ناظر رها می‌کنیم. این دکمه برای این است که با لمس آن مخاطبان شما نمایش داده شود و هر کدام را که بخواهید انتخاب می‌کنید. نام آن را به هر چه می‌خواهید تغییر دهید. ما نام (TopPick) را پیشنهاد می‌کنیم. و نوشته روی آن را نیز تغییر دهید به ( لمس برای انتخاب مخاطب)(Press to pick a number to call) تغییر دهید. هم الان آن را امتحان کنید. دکمه را روی دستگاه اندرویدتان فشار دهید. دکمه کار می@کند و مخاطبان شما پیدا می‌شوند. امّا بیش از این کاری نمی‌کند. چرا؟ چون هنوز به اپلیکیشن نگفته‌ایم که چه کاری انجام دهد.
  • به پنجره ویرایشگر بروید، دکمه خودتان (TopPick) را انتخاب کنید. از کشوی باز شده ( وقتی دکمه تاپ پیک انتخاب شد) (when TopPick.AfterPicking) را بکشید و در ویرایشگر رها کنید. 
  • دوباره دکمه (TopCall) را انتخاب کنید و این بار از کشو (set TopCall.PhoneNumber to) را بکشید و وارد دهانه قبلی کنید.
  • مرتضی نجاتی جزه
۲۷
فروردين

بخش دوم برنامه نویسی

پس از آن که وارد ویرایشگر شدید.

1- بر روی دکمه سرخ که خودتان نام گزاری کردید، کلیک کنید تا کشوی آن باز شود. از آن وقتی سرخ کلیک شود (when ButtonRed.Click) را انتخاب کنید.

2- بر  روی بوم کلیک کنید. در کشوی باز شده پایین بروید  و بلوک قرار دادن رنگ بر بوم (set DrawingCanvas.PaintColor) را انتخاب کنید.

3- از منوی ساخته شده،کشوی رنگ(Colors) را باز کنید و در میان رنگها بگرید و رنگ سرخ را پیدا کنید. حالا آن را انتخاب کنید و در دهانه قرار دادن رنگ بر بوم بگذارید.

4- برای باقی رنگ‌ها نیز همین کار را انجام دهید.

5- برای دکمه پاک کن: پس از آن که وقتی پاک کن  کلیک شود (when wipe.Click) را انتخاب کردید.بوم را انتخاب کنید و "پاک کردن بوم(call DrawingCanvas.Clear)" را  دهانه آن بگذارید.

اگر برنامه را امتحان کنید می‌بینید که هیچ اتفاقی در صفحه نمی‌افتد. 

می‌خواهیم کاری کنیم که اگر انگشت صفحه را لمس کرد، یک نقطه گذاشته شود  و اگر روی صفحه کشیده شد، خط کشیده شود. به این حالت رویداد لمس می‌گویند.

6-  روی بوم کلیک کنید و از انتخاب‌هایتان وقتی بوم لمس شد(when DrawingCanvas.Touched)  را انتخاب کنید. می بینید که سه نقطه در آن روشن است. xy, و touchedSprite.  

می‌توانیم دو حالت (get) و (set) را انتخاب کنیم.

7- برای این که بتوانیم در جای دلخواه نقطه بگذاریم.  از کشوی بوم، "صدا زدن بوم برای کشیدن دایره  (call DrawingCanvas.DrawCircle)" را انتخاب می‌کنیم و داخل دهانه "وقتی بوم لمس شد "می‌گذاریم. می‌بینید که این بلوک جدید چهار دهانه دارد، که یکی از قبل پرشده است.  از سه دهانه دو تا مربوط به محور مختصات نقطه است. روی (x) و (y) که می‌رویم (get x) و (get y) را انتخاب می‌کنیم و در جای خودشان می‌گذاریم. دهانه بعدی اندازه نقطه را مشخص می‌کند.  از قسمت ریاضی (math) صفر را انتخاب می‌کنیم و داخل (radius) می‌گذاریم و اندازه آن را  به 5 یا 4  دگرگونه می‌کنیم.

توجه کنید که تغییر ضخامت خط را بعدتر می‌آموزیم. در حال حاضر فقط یک اندازه را یاد می‌گیریم.

اگر اپلیکیشن خود را انتخاب کنید می‌بینید که وقتی صفحه را لمس می‌کنیم.  روی صفحه نقطه گذاشته می‌شود. 

این نکته‌ای است که تازه آموختیم.

 

8- حالا در ادامه مثل آموزش قبل رویداد کشیدن خط را انتخاب می‌کنیم و همان موارد را انجام می‌دهیم. اگر یادتان رفته لینک زیر را دوباره مطالعه کنید.

آموزش 15: ساخت اپلیکیشن صفحه نقاشی با اپ ایونتر

 

 

در آموزش بعدی می‌آموزیم که اندازه نقطه را چطور تغییر بدهیم.

آموزش بعد

  • مرتضی نجاتی جزه
۲۲
فروردين

با سومین آموزش‌ تصویری و گام به گام  اپ اینونتر در خدمت شماییم با ما همراه باشید.

آموزش ساخت اپلیکیشن توپ جهنده.

  • سطح آموزش: مقدماتی
  • پیش نیاز: توانایی ورود به سایت http://ai2.appinventor.mit.edu/ با استفاده از کاربری گوگل

در این آموزش توپی خواهیم ساخت که در صفحه دستگاه اندرویدی شما بالا و پایین می‌پرد.

 مقدمه:

ابتدا رایانه خود را برای راه اندازی  اپ لیکیشن آماده کنید. یا این که دستگاه اندرویدی خود را با کابل یا بی سیم متصل کرده باشید.

اگر نمی‌دانید چگونه این کار را انجام دهید. نگران نباشید. در بخش‌های قبلی این آموزش‌ها داده شده است. شما کافی است که آن‌ها را مطالعه کنید.

کافی است تا به برگه آموزش‌ها بروید و آموزش‌های یک تا چهار را مطالعه کنید.

 یک

در محیط اپ اینونتر دو قسمت (component) اصلی به چشم می خورد.  طراح(Designer)  و ویرایشگر بلوک ( Block Editor).

طراح همان قسمتی است که اجزای مختلف دیداری در آن وجود دارد و  در آن همان شکلی را طراحی می‌کنید که می‌خواهید آن را در صفحه دستگاه اندرویدی خود ببینید.

قسمت طراح اپ اینونترقسمت طراحی اپ اینونتر

ویرایشگر بلوک نیز همان قسمتی است که کدهای خود را در آن می‌نویسید.

قسمت ویرایشگر اپ اینونترقسمت ویرایشگر بلوک اپ اینونتر

 

برای جا‌به‌جا شدن بین این دو بخش کافی است که دکمه مربوط به هر کدام را در گوشه سمت راست اپ اینونتر فشار دهید.

روش انتخاب دو قسمت اصلی اپ اینونتر

انتخاب پنجره در اپ اینونرتر

بخش طراحی

در بخش طراحی پنج قسمت می‌بینیم:  جعبه طراحی(palette)، ناظر (viewer)، اجزا(Components)، رسانه(Media)، و ویژگی‌ها(Properties)

  • جعبه طراحی: جایی است که اجزا در آن قرار دارند. ما اجزا را از این قسمت می‌گیریم و داخل قسمت ناظر  رها می‌کنیم.

بخش جعبه طراحی

  • ناظر: جایی است که اجزا را در آن رها می‌کنیم. بخش اصلی آن از پیش به صورت یک صفحه دستگاه اندرویدی طراحی شده‌است.

بخش ناظر در اپ اینونتر

  • اجزا: هر گاه از بخش جعبه طراحی چیزی را به قسمت ناظر می‌کشیم آن جز در این قسمت اضافه می‌شود و نشان می‌دهد که به ناظر اضافه شده‌است.  در این قسمت می‌توانیم نام آن را به دلخواه دگرگونه سازیم.

بخش اجزا در اپ اینونتر

 

  • رسانه: در این بخش رسانه‌های بارگزاری شده همچون تصویر و صدا را می‌بینید. 

توجه: بعضی رسانه‌ها همچون صدا. نادیدنی هستند و به قسمت اصلی ناظر اضافه نمی‌شوند، بلکه در زیر مشاهده‌گر دستگاه اندرویدی اضافه می‌شوند. 

بخش رسانه در اپ اینونتر

 

ویژگی‌ها: در این قسمت می‌توانیم ویژگی‌های اجزا را دگرگون کنیم. یا برایشان نام بگذاریم.  توجه کنیم که برای دگرگون سازی باید جزء را انتخاب کرده‌باشیم.

بخش ویژگی‌های اپ اینونتر

ادامه در نوشته دوم

  • مرتضی نجاتی جزه