آموزش 19: ساخت اپلیکیشن تماس تلفنی با اپ ایونتر

مقدمه

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

 

پیش نیاز:

• توانایی ورود به سایت اپ ایونتر با اکانت گوگل
• توانایی برقراری ارتباط بین دستگاه اندرویدی و سایت اپ اینونتر
• آموختن اپلیکیشن گربه سلام و تسلط به آن
• داشتن تعدادی مخاطب در دستگاه اندرویدی

آغاز به کار:

1- آغاز کارمان مانند ساخت اپلیکیشن گربه سلام است و مانند آن به صفحه ناظر دکمه‌ای اضافه می‌کنیم.  پهنا و بلندای آن را 150 پیکسل تعیین می‌کنیم. برای دکمه تصویری انتخاب کنید. این تصویر را بعدتر هم می‌توانید دگرگون کنید. برای دکمه خود نام مناسب انتخاب کنید و نوشته روی دکمه را هم تغییر دهید مثلا: لمس برای تماس.  این نوشته هم بعدتر قابل ویرایش‌است. ( نگران نباشید)

2-   حالا دکمه تماس تلفنی( PhoneCall) را به ناظر اضافه می‌کنیم. این دکمه در جعبه طراحی و بخش اجتماعی (Social) است. کشو را بازکنید و تماس تلفنی(PhoneCall ) را روی ناظر و دکمه خود رها کنید.  دکمه تماس تلفنی در اصل خود نادیدنی است برای همین به دکمه نیاز دارد. چون دکمه ناددیدنی

 

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

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

روی دکمه‌ای که ساخته‌اید کلیک کنید و  و در قسمت انجام دادن (do)  برقراری تماس تلفنی(call TopCall.MakePhoneCall) را در دهانه وارد کنید.

  در این تصویر نام دکمه (TopButton) انتخاب شده و نام جزء تماس تلفنی (TopCall).  بنابراین نگران این تفاوت نباشید.

 توجه: امکان دارد   (MakePhoneCall) را نبینید در این صورت به جای آن از عبارت (MakePhoneCallDirect) استفاده کنید.  این دگرگونی به خاطر تغییر در برنامه‌نویسی گوگل است و هیچ تفاوتی با هم ندارند.

 

برنامه را امتحان کنید. به همین راحتی بود. امّا هنوز تمام نشده.

ادامه در بخش دوم آموزش

 

 

آموزش 18: ساخت اپلیکیشن نقاشی با اپ ایونتر (قسمت 3)

بزرگ و کوچک کردن نقطه

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

بخش طراحی

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

2. دو دکمه درون کادر ردیف کردن ایجاد کرده، نام آنها را کوچک (small) و بزرگ(big) می‌گزاریم.

3. اندازه و نام روی آنها را مانند دکمه رنگ‌ها در قسمت دوم تعیین می‌کنیم

بخش ویرایشگر

1. اگر یادتان باشد در  جلسه قبل اندازه بزرگی نقطه (radius)  را 5 تعیین کردیم، و این باعث می‌شد تا همه نقطه‌ها ما یک اندازه باشد. بلوک عدد 5 را بگیرید و در سطل آشغال بیندازید. علامت اخطاری ظاهر می‌شود. نگران نباشید.
2.  از بخش داخلی- ساخته شده (Built-In)  کشوی متغیّرها (Variables) را باز کنید. بلوک نام اولیه به (initialize global name to) را بیرون بکشید. واژه (name) را به کوچک یا (small) دگرگون کنید. نشانه تعجب زردرنگی ظاهر می‌شود که به ما می‌گوید باید در دهانه این بلوک چیزی وارد کنیم.
3.  این قسمت را با شماره پر می‌کنیم. چون مربوط به کوچ است. از بخش ریاضی بلوک صفر را وارد می‌کنیم و آن را تبدیل به دو می‌کنیم.  تا این جا به برنامه گفته‌ایم که اندازه نقطه کوچک ما دو باشد.

به صورت تصویری ببینید:

 حالا همین کار را یکبار دیگر انجام دهید. به جای کوچک بزرگ (big) بنویسید و اندازه آن را هشت تعیین کنید. حالا اندازه نقطه بزرگ هم تعیین شد. 

4-  حالا می‌خواهیم برای جای اندازه (radius)در بلوک گذاشتن نقطه اندازه تعیین کنیم. همان پنجی که آن را دور انداختیم. این همان اندازه اولیه است. گفته شده که در برنامه‌نویسی بهتر است به جای عدد از متن استفاده کنیم. بنابراین می‌خواهیم یم متغیرمتنی را در این جا قرار دهیم.

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

5- حالا از قسمت متغیرها  (Variables) را بیرون می‌کشیم و آن را وارد دهانه اندازه (radius) می‌کنیم.  اگر روی جهت نمای کوچک آن کلیک کنیم، می‌بینیم که منویی باز می‌شود که  متغیرهای کوچک و بزرگ و اندازه اولیه را در خود دارد. ما اندازه اولیه را انتخاب می‌کنیم.

5- کار زیادی باقی نمانده، فقط حالا باید رویداد را به برنامه اضافه کنیم. به برنامه بگوییم وقتی انگشت روی دکمه کوچک زده می‌شود، نقطه  کوچک بگذارد و وقتی دکمه بزرگ را می‌زنیم، نقطه بزرگ بگذارد.

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

6- از بخش متغیرها () را انتخاب می‌کنیم و وارد دهانه وقتی دکمه کلیک شود را انتخاب می‌کنیم.  جهت نما را  انتخاب می‌کنیم و   گلوبال اندازه اولیه  را انتخاب می‌کنیم. تا اینجا هر دو بلوک کوچک و بزرگ ما به جز اسم بعد از وقتی  شبیه هم هستند.  حالا از قسمت متغیرها (get) را انتخاب می‌کنیم و وارد دهانه کوچک می‌کنیم و متغیر جهت نمای آن را ( گلوبال کوچک ) انتخاب می‌کنیم.  و  برای بزرگ (گلوبال بزرگ)  را وارد دهانه می‌کنیم.

نتیجه نهایی باید چیزی شبیه به تصویر زیر باشد.

نکته: رنگ پیش فرض این برنامه سیاه است. برای تغییر رنگ باید خودتان رنگ را انتخاب کنید.

آموزش 16: ساخت اپلیکیشن نقاشی رنگی با اپ ایونتر (قسمت اول)

مقدمه: 

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

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

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

پیش نیاز:

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

شروع پروژه

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

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

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

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

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

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

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

آموزش(10) ساختن اپلیکیشن موش کور بازیگوش (4)

 

اضافه کردن تابلوی امتیاز

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

برای این کار:

1- از قسمت (Variables) را انتخاب می‌کنیم و در قسمت نام (name) خودمان می‌نویسیم امتیاز (Scire) سپس از قسمت ریاضی (math) صفر را می‌کشیم و در دهانه‌اش رها می‌کنیم.

2- از قسمت رویّه (procedure)    را انتخاب کرده در قسمت (procedure) می‌نویسیم به روز آوری امتیاز(Update Score).

3-حالا  (Score)  را انتخاب می‌کنیم.

 

4-   را انتخاب می‌کنیم.

 

اضافه کردن زمان سنج

 

زمان سنج یک کنترل کننده رویداد است.

به قسمت طراحی بازگردید و از قسمت (sensors) ساعت (clock) را انتخاب کنید و به زیر تصویر بکشید. تصویر هم مانند صدا  جزو اشیای نادیدنی است. نام آن را به (MoveMole) تغییر دهید. 

حالا به ویرایشگر بلوک بروید از قسمت (Screen ) روی ساعت کلیک کنید(when...Timer.do)  و بعد  روی قسمت رویداد(callMoveMole) و تصویر زیر را بسازید.