دانشاپ

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

دانشاپ

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

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

۳ مطلب با کلمه‌ی کلیدی «app inventor» ثبت شده است

۱۹
ارديبهشت

مقدمه

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

 

شروع به کار

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

مقدمه: 

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

آنچه خواهیم آموخت:

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

پیش نیاز:

شروع پروژه

به سایت اپ اینونتر وارد شده، نام مناسبی برای پروژه خود انتخاب کنید. ( نام پیشنهادی ( PaintPot)).

1- از منوی جعبه طراحیسه دکمه سبز، آبی، سرخ را وارد ناظر کنید و یک دکمه هم برای پاک کردن.زیر نام دکمه‌ها. تغییر نام (Rename)را انتخاب کنید و نامشان را به سبز، آبی و سرخ دگرگون کنید. می‌توانید فارسی بنویسید

تغییر نام اجزا در اپ ایونتر

2-حالا از قسمت ویژگی‌ها هم رنگ دکمه را تغییر دهید و هم نام آن را.

 

 

تغییر رنگ اشیا در اپ ایونتر

تغییر نام اشیا در اپ ایونتر

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

حالا می‌خواهیم آن‌ها را ردیف کنیم.

2-  الف) از قسمت جعبه طراحی و از بخش لایه بندی ، ردیف کردن افقی را انتخاب کنید و داخل جعبه ناظر بکشید. بالای سر چهار دکمه رها کنید.  ب) در قسمت نام اجزا نام آن را به چهار دکمه تغییر بدهید. ج) اندازه آن را پرکردن پهنا قرار بدهید. د) چهار دکمه را بکشید و داخل کادر ردیف کردن رها کنید. می‌بینید که دکمه‌ها خودشان ردیف قرار میگیرند.

ردیف کردن اشیا در اپ ایونتر

 

ردیف شدن اشیا در اپ ایونتر

 

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

3- الف) بوم را به ناظر اضافه کنید. مثل آموزش‌های قبلی آن را بکشید و زیر دکمه‌ها رها کنید.  ابتدا نام دلخواهی روی آن بگذارید و سپس اندازه آن را تغییر دهید. پهنا و ارتفاع را روی پر کردن بگذارید.

ب) می‌خواهیم برای بوم خود پس زمینه انتخاب کنیم. در بخش ویژگی‌ها  روی پس زمینه (Backgrand) کلیک کنید و تصویری را اضافه کنید. پیشنهاد ما تصویر گربه اپلیکیشن گربه سلام است.  اگر تصویر بزرگ انتخاب کنید ممکن است با کمبود حافظه روبه‌رو شوید.

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

حالا می‌خواهیم برنامه نویسی کنیم.

ادامه در  نوشته بعدی.

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

سطح: پایه، مقدماتی، مبتدی.

آنچه خواهیم اموخت این است که چگونه با انگشت خود روی صفحه نقاشی بکشیم.

 

شروع پروژه جدید

بعد از این‌که وارد سایت اپ ایونتر شدید، از قسمت پروژه (Project) روی جدید (New) کلیک کنید، تا پروژه‌ای تازه ساخته شود.

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

نام گزاری پروژه

 

در پنجره‌ای که باز می‌شود نامی برای پروژه خود انتخاب کنید. به دو چیز دقت کنید:

  1.  نام انتخابی شما باید - متاسفانه- لاتین ( به حروف انگلیسی) باشد. با حروف فارسی مورد قبول پروژه نیست.
  2. در بین حروف انتخابی نباید فاصله باشد. 

من نام ( DigitalDoodle) را پیشنهاد می‌کنم که به معنای صفحه نقاشی دیجیتال است. سپس بر روی (ok) کلیک کنید.

اضافه کردن بوم به پروژه

 اکنون از بخش جعبه طراحی (Palette) از قسمت  نقاشی و پویا نمایی (Drawing and Animation )، بوم (Canvas) را انتخاب کنید. آن را بکشید و در قسمت ناظر (viewer) رها کنید.

کشیدن و رها کردن بوم در اپ ایونتر

تنظیم  بلندا و پهنای بوم برای پرکردن صفحه

این بار بوم را انتخاب می‌کنیم.(#1) و از بخش ویژگی‌ها (#2) ارتفاع و پهنا را در حالت پرکردن صفحه(Fill Parent) قرار می‌دهیم. 

حالا وقت برنامه‌نویسی است:

آستین‌هایتان را بالا بزنید و کمربندتان را سفت کنید. اپ اینونتر(App Inventor) واقعا جذاب است. خودش همچون  بازی است.

برای برنامه‌نویسی وارد ویرایشگر می‌شویم.

ورود  به ویرایشگر

ورد به ویرایشگر اپ اینونتر

انتخاب رویداد مربوط به بوم

از کشوی مربوط به بوم وقتی بوم کشیده شد (when Canvas1.Dragged ) را انتخاب کنید.  

رویداد کشیدن انگشت روی بوم در اپ ایونتر

انتخاب بلوک کشیدن خط

از کشوی مربوط به بوم، بلوک کشیدن خط را انتخاب، و آن را داخل دهانه انتخاب قبلی کنید.

کشیدن خط در اپ ایونتر

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

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

دستگاه اندرویدی خود را متّصل کنید و نتیجه را ببینید. (اگر بلد نیستید به برگه آموزش مراجعه کنید)

آسان بود؟

 باور کنید اپلیکیشن خود را ساختید. 

 

برای آموزش‌های بیشتر به برگه آموزش‌ مراجعه کنید.

 

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