مولفه‌ها و رویدادها

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

رویه دنباله رویدادهایی است که در پروژه یکبار تنظیم می‌شود و در همه موارد مشابه به آن استناد می‌گردد، تا لازم نباشد آن رفتار تکراری را بارها  و بارها بنویسیم.

تعریف رویّه( Procedures)

در این بازی دو رویه داریم:

1- حرکت موش کور: که به صورت تصادفی در جایی از بوم خود را نشان می‌دهد.

2- تازه شدن امتیاز: که نوشته امتیاز را در برچسب امتیاز تازه‌سازی می‌کند.

با حرکت موش کور شروع می‌کنیم.

در قسمت ویرایشگر بلوک از قسمت (Built-In)، کشوی رویدادها ( Procedures) را باز می‌کنیم. ساخت روِیّه (to procedure) را بیرون می‌کشیم و نام آن را به حرکت موش کور(MoveMole) تغییر می‌دهیم.

 بلوک حرکت موش کور (MoveMole) برچسب انجام دادن (do) دارد، که شرح رویّه را در آنجا می‌گذاریم. اینجا دو شرح دهیم:  جای قرارگیری موش در روی بوم  از نظر ارتفاع و عرض. برای هر کدام مقداری بین 0 و 1 قرار می‌دهیم. اینکار را با استفاده از ( بخش بندی تصادفی: random fraction )  و بلوک ضرب (multiplication) و منها (subtraction) انجام می‌دهیم. اینها را در کشوی ریاضی (Math) پیدا می‌کنید.

نتیجه کارتان باید شبیه به تصویر زیر باشد:

بقیه در قسمت چهار

اجزای اولیه

• بوم(Canvas) که نامش را (MyCanvas) می‌گذاریم. بوم جایی است که جریان بازی در آن اتفاق می‌افتد.
• برچسب (Label) که نامش را برچسب امتیاز(ScoreLabel) می‌گذاریم.برای نشان دادن امتیاز.

یک دکمه(tButton) برای شروع دوباره(ResetButton).

این موارد را به داخل نمایشگر بکشید و بعد نامشان را تغییر دهید. اندازه طول و عرض بوم را 300 پیکسل تعیین کنید. متن برچسب امتیاز را به ("--:Score") تغییر دهید. و متن شروع دوباره به (Reset). یک صدا هم وارد کنید و نامش را (Noise) بگذارید.  از این صدا وقتی استفاده می‌شود که موش کور بازیگوش را لمس می‌کنید و تلفن می‌لرزد. مثل وقتی که گربه را لمس می‌کردید. در بازی سلام گربه

اجزای زمان سنج

برای این بازی احتیاج به تعیین زمان برای بیرون پریدن موش کور است. با زمان سنج و ساعت کارهای مختلف می‌توان انجام داد مثل این که مثلا امروز چندم برج است. زمان‌های جهش به وسیله زمان سنج داخلی(TimerInterval) تعیین می‌شود. اکنون  ساعت ( Clock ) را بکشید و در قسمت نامرئی زیر بوم رها کنید و نامش را (MoleTimer) بگذارید. زمان سنج را روی 500 میلی ثانیه تعیین کنید. حواستان باشد که (TimerEnabled) تیک خورده باشد.

اضافه کردن تصویر اسپرایت

اسپرایت تصویری ست که در بوم حرکت می‌کند. هر اسپرایت چند ویژگی دارد.

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

خوب، تصویر  اسپرایت خود را وارد صفحه کنید. چه جوری؟

به قسمت (نقاشی و پویا نمایی)( Drawing and Animation) در قسمت جعبه ابزار(Palette) مراجعه کنید. آن را در بوم قرار داده و تنظیمات زیر را برای آن انجام دهید:

• تصویر(Picture): از تصویر موش کور استفاده کنید که دانلود کردید.
• گزینه قابل اجرا(Enabled) را تیک بزنید.
• مدّت وقفه(Interval) را 500 قرار بدهید. 
• محدوده(Heading) را 0 قرار بدهید.
• سرعت (Speed) : صفر
• عرض(Width): خودکار(Automatic)
• ارتفاع(Height): خودکار(Automatic)
• دیدنی(Visible) را هم تیک بزنید.

 شماباید ببینید که خصوصیات x و y قبلا پر شده باشد. این اتّفاق زمانی افتاد که شما تصویر را وارد صفحه کردید. تصویر را در بوم جابه جا کنید می‌بینید که مقدار(x) و (y) تفاوت می‌کند. شما باید همان زمان موش کور را در دستگاه متصل شده خود ببینید و هر وقت آن را در برنامه جا به جا می‌کند در تلفن شما هم حرکت می‌کند. اکنون همه ویژگی‌ها را مشخص کرده‌اید. نمایشگر برنامه شما باید مانند تصویر زیر باشد. حواستان به فهرست اسامی اجزا باشد. نام موش کور باید زیر مجموعه بوم باشد.

ادامه در قسمت سوم

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

بیایید شروع کنیم.

به سایت اپ اینورتور متّصل شوید.

اگر نمی‌دانید چطور؟ لطفاً درس قبلی را مرور کنید.

آموزش اتّصال به سایت اپ اینورتور و شروع به کار

نام پروژه جدید را (MoleMash) بگذارید. وارد سایت شوید و تلفن خود را متصل کنید یا شبیه ساز را نصب کنید.

اکنون  تصویر "موش کور" را دانلود کنید.

مقدمه

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

آنچه در این بازی می‌آموزیم:

• تصویر اسپرایت(sprit) ( اسپرایت در اصل به معنی روح، جن و شبح است و در این جا تصویر بی‌جانی است که حرکت می‌کند و زنده به نظر می‌رسد).
• ساخت زمان سنج
• انتخاب عددی تصادفی بین صفر و یک
• بلوک‌های نوشتنی
• بلاک کردن
• مرحله سازی

ادامه را در درس دوم ببینید.

مرحله انتخاب  اجزا و تغییر ویژگی‌ها

گربه سلام. یک دکمه است در زیر عکسی که قبلا دانلود کردید.  برای این کار:

 الف)  از قسمت پالت ( button)  را بگیرید و در قسمت میانی، روی تصویر موبایل رها کنید.(۱ زیر)

 ب)    حالا برای آن‌که دکمه ما با گربه عمل کند در قسمت ویژگی‌ها (Properties) زیر  قسمت تصویر (Image) روی کلمه (None) کلیک کنید، سپس (  Upload File) را کلیک کنید. (۲ زیر) پنجره‌ای باز می‌شود که از شما می‌خواهد تصویرتان را انتخاب کنید. (Choose File) انتخاب تصویر را کلیک نمایید، سپس تصویر گربه  دانلود شده، را انتخاب کنید(۳ زیر)

پ) از قسمت انتخاب اجزا (Lable)  ( لیبل) را انتخاب کنید و به زیر تصویر گربه بکشید. (۱ زیر) حالا در قسمت (Properties) نام الیبل را به  ( Pet the Kitty) تغییر دهید.( ۲ زیر) شم تغییر نام را در نمایشگر برنامه و در دستگاه اندرویدی متصلتان می‌بینید. در همین قسمت فونت را ۳۰ تغییر دهید(۳ زیر) پس زمینه نوشته را هم به آبی یا رنگ دلخواهتان تغییر دهید(۴ زیر) رنگ نوشته را هم به رنگ دلخواهتان تغییر دهید(۵ زیر) رنگ دلخواه ما آبی و زرد است! رنگ دلخواه شما چیست؟

ت) از قسمت جعبه (Palette) روی  کشوی صدا (Media) کلیک کنید تا باز شود، صدا(Sound) را بگیرید و در قسمت نمایشگر زیر تصویر تلفن همراه رها کنید (۱ زیر).  ایجایی که شما رها کردید  نامرئی است و می‌بینید که بالای صدا نوشته (Non-visible components) در قسمت جعبه صدا  بارگزاری صدا ( Upload File) را کلیک کنید(۲ زیر).  صدای گربه‌ای را دانلود کرده بودید انتخاب کنید ( ۳ زیر). حالا در قسمت ویژگی‌ها (Properties) می‌بینید که در قسمت منبع (Source) نوشته شده چیزی نیست. (None…. ) برروی این کلمه کلیک کنید و  آن را به صدای گربه تغییر دهید.( ۴ زیر).

برنامه نویسی با ویرایشگر

برای برنامه نویسی باید به ویرایشگر بلوک برویم، پس روی ویرایشگر کلیک کنید.

برنامه نویسی برای صداگذاری

الف)

در قسمت چپ ویرایشگر بروی دکمه ۱ (Button1) کلیک کنید تا کشوی آن باز شود. ” وقتی دکمه۱ کلیک شود را انتخاب کنید و به قسمت سمت راست بکشید و رها کنید.

به بلوک‌های زرد خردلی کنترل کننده رویداد می‌گوییم. این بلوک‌ها چگونگی پاسخگویی یه رویدادی ویژه را مشخّص می‌کنند.  مثلاً دکمه‌ای که فشرده می‌شود، تلفن می‌لرزد.  یک رویداد است. در این برنامه رنگ کنترل کننده رویداد زرد خردلی است و با وقتی (when) آغاز می‌شوند مثل همین دکمه‌ای که اکنون به کار بردیم.

حالا برای پروژه خود نام مناسب انتخاب کنید.

پیشنهاد ما (HelloPurr) است.  در این پروژه می‌خواهیم به گربه دست بزنیم و گربه میو میو کند.

سلام گربه: گربه را لمس کنید تا به شما سلام کند.

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

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

• دانلود تصویر گربه  ( توجه:  روی تصویر راست کلیک کنید و گزینه ذخیره را بزنید تا تصویر دانلود شود)
• دانلود صدای گربه

انتخاب اجزا و طراحی پروژه

اجزای سازنده  اپ اینورتور در سمت چپ در قسمت پالت قرار دارند. این قسمت اجزای پایه‌ای ساخت اپ را به همراه دارد که شما در دستگاه اندرویدی خود استفاده می‌کنید. بعضی‌ها خیلی ساده هستند مثل لیبل (label)  که فقط حروف را نشان می‌دهند یا مثل دکمه (Button) (#1) که قرار است فقط لمس شوند.

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

برای استفاده از این اجزا شما آن را می‌گیرید و در قسمت میانی نمایشگر رها می‌کنید. وقتی شما چیزی را در قسمت نمایشگر( 1 زیر ) رها می‌کنید.  مشخصات آن در قسمت راست نشان داده می‌شود.

نام جزء انتخابی در قسمت  (2 زیر)  نشان داده می شود که ویژگیش را می‌توان در قسمت (3 زیر) تغییر داد.  برای تغییر باید در قسمت دو نام جزء مورد نظر را تغییر داد.

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

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

برای این کار:

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

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

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

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

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

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

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

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

 دو:  شروع پروژه

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

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

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

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

من نام (BallBounce) را پیشنهاد می‌کنم که به معنای توپ جهنده است. سپس بر روی اک کلیک کنید.

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

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

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

تنظیمات اولیّه اپ اینونتر بدین گونه است که صفحه بالا و پایین و چپ و راست می‌رود(scrollable). اکنون که بوم را اضافه کرده‌ایم به اپ اینونتر می‌گوییم که صفحه حرکت نداشته باشد. برای این از بخش اجزا (Componentd)، صفحه (Screen) را انتخاب می‌کنیم. حالا در بخش ویژگی‌ها تیک حرکت صفحه را بر می‌داریم. 

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

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

اضافه کردن توپ

تا اینجا بومی داریم که صفحه را پر کرده‌است.  حالا وقت اضافه کردن توپ است. توپ در همان قسمت نقاشی و پویانمایی قرار دارد. آن را می‌کشیم و روی بوم در بخش ناظر رها می‌کنیم.(#1) اگر دوست دارید توپتان گردتر به نظر برسد، ویژگی گردی (Radius) آن را در بخش ویژگی‌ها دگرگون کنید. هر چه مقدار بیشتر باشد، توپ گردتر به چشم می‌آید.

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

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

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

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

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

 مقدمه:

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

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

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

 یک

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

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

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

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

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

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

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

بخش طراحی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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: ساخت اپلیکیشن صفحه نقاشی با اپ ایونتر

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

مقدمه: 

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

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

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

پیش نیاز:

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

شروع پروژه

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

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

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

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

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

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

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

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

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

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

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

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

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

• پیش نیاز: توانایی ورود به سایت 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 ) را انتخاب کنید.  

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

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

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

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

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

آسان بود؟

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

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

ادامه آموزش

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

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

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

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

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

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

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

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

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

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

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

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

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

بخش طراحی

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) را انتخاب می‌کنیم و وارد دهانه کوچک می‌کنیم و متغیر جهت نمای آن را ( گلوبال کوچک ) انتخاب می‌کنیم.  و  برای بزرگ (گلوبال بزرگ)  را وارد دهانه می‌کنیم.

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

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

مقدمه

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

شروع به کار

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