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

مقدمه

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

 

پیش نیاز:

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

آغاز به کار:

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

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

 

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

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

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

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

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

 

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

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

 

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

آموزش بعد

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

مقدمه: 

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

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

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

پیش نیاز:

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

شروع پروژه

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

 

 

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

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

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

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

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

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

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

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

• پیش نیاز: توانایی ورود به سایت http://ai2.appinventor.mit.edu با استفاده از کاربری گوگل.
•              شناخت دو بخش اصلی سایت بالا. ( اگر بلد نیستید، به این آموزش رجوع کنید)آموزش 12: ساخت اپلیکیشن توپ جهنده با اپ اینونتر(1)

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

 

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

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

​​​​​​

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آسان بود؟

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

 

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

 

آموزش (11): ساخت اپلیکیشن موش کور با اپ اینورتور (5)

افزودن رویداد لمس به موش کور

می‌گوییم وقتی که موش کور لمس شد.

1- امتیاز جدید نشان داده شود.

2- برای صد میلی ثانیه دستگاه بلرزد.

3- موش کور بدون صبر حرکت کند.

بلوک‌های نهایی شما باید همچون شکل زیر باشد.

 

صفر کردن امتیازات

برای صفر کردن امتیاز

وارد قسمت طراحی شده و  از (User Interface)  یک دکمه را زیر امتیاز می‌گذاریم. در قسمت اجزا (Components) نام دلخواهی برایش می‌گذاریم.  اندازه آن را در قسمت طول و عرض به دلخواه تغییر دهید، تا مناسب به نظر برسد.

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

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

2- قسمت () را وارد دهانه‌اش کنید، روی دهانه‌اش کلیک  کنید و () را انتخاب کرده، بعد صفر را از قسمت ریاضی بکشید و در آن جا بگذارید.

3- از قسمت () بخش () را زیر قسمت قبلی بگذارید.

 

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

 حالا بازی را امتحان کنید و از دومین اپلیکیشن ساخت خود لذت ببرید.