دانشاپ

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

دانشاپ

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

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

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

۰۲
ارديبهشت

مقدمه

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

 

پیش نیاز:

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

آغاز به کار:

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

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

 

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

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

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

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

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

 

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

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

 

 

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

آسان بود؟

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

 

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

 

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

ادامه آموزش

تا این‌جا بوم  و توپ را به ناظر بازی اضافه کرده‌ایم و ویژگی‌های آن را تعیین کرده‌ایم.

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

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

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

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

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

 

 

 

 

 

 

 

 

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

برای ورود به بخش کنترل و برنامه‌نویسی توپ مانند تصویر زیر عمل کنید. بر روی توپ (ball) کلیک کنید تا بلوک‌های آن آشکار شود.

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

بیرون کشیدن رویداد فلنگ ایونت ( Flung Event )

بلوک ( when Ball1.Flung ) را بکشید و داخل کارفضا  رها کنید. می‌خواهیم توضیح بدهیم و به برنامه بگوییم که هنگامی انگشت روی صفحه برخورد کرد چه اتفاقی بیفتد. در این رویداد فقط یک ضربه زده می‌شود.

 

کشوی توپ را بازکنید و آن را پایین بکشید تا به ( set Ball1.Speed ) و (set Ball1.Heading ) برسید و آنها داخل دهانه رویداد فلانگ کنید. مثل یک بازی چورچین.

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

 اکنون می‌خواهیم سرعت را تعیین کنیم. پس:

همین کار را برای قسمت آشکار شدن نیز انجام می‌دهیم:

امتحان کردن اپ

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

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

آنچه تا این جا می‌بینم به این صورت است.

چرا توپمان یک گوشه گیر کرده؟

می‌بینید هر کاری می‌کنیم، توپمان می‌رود و گوشه صفحه گیر می‌کند.  به این خاطر است که مکان آشکار شدن ( heading ) را تنظیم نکرده‌ایم و به صورت پیش فرض توپمان گوشه‌گیر است. برای این که توپمان در صفحه بجهد باید کاری دیگر را انجام دهیم.

پس دوباره به ویرایشگر بر می‌گردیم بر توپ کلیک می‌کنیم تا کشوی آن باز شود. این بار از کشوی آن ( when Ball1.EdgeReached do ) را انتخاب می‌کنیم و به داخل کارفضا می‌کشیم.

تا این جا گفتیم که وقتی توپ به گوشه رسید، این کار را انجام بده. چه کاری؟ هنوز نگفته‌ایم. 

الان

دوباره به کشوی توپ برگردید و جهش توپ( Ball.Bounce ) را انتخاب می‌کنیم و داخل دهانه رویداد قبلی می‌کنیم.

باید تعیین کنیم که گوشه چیست و چه کاری انجام دهیم. موشواره را  روی کلمه گوشه (edge) ببرید، اما آن را کلیک نکنید تا موارد اجزای آن آشکار شود. 

(get edge)  را انتخاب کنید و داخل قسمت بنفش کنید.  شکل نهایی به صورت زیر است. 

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

خیلی ساده بود؟

می‌دانم!

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

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

تمرین کنید:

  • رنگ توپ را دگرگون کنید
  • اندازه توپ را تغییر دهید

 

آموزش بعدی: صفحه نقاشی دیجیتال.

 

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

 

 

  • مرتضی نجاتی جزه
۲۹
اسفند

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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