isfahan-app-reading-feature

گنبدهای اصفهان: ساخت یک اَپ با کیوی

دوست داری برنامه‌هات رو همه دنیا ببینن و استفاده کنن یا اونها را با دوستانت به اشتراک بگذاری؟  مثل نمایش دیدنی‌های شهرت یا بازی‌های دونفره.

ساخت اَپ یکی از راه‌های رسیدن به این هدف هست.

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

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

آشنایی با ماژول کیوی

در دوره‌های پایلی با ماژول‌های turtle، random، math و … آشنا شدی. برای برنامه‌نویسی و ساخت اَپ موبایل از ماژول Kivy استفاده می‌کنیم.

  • Kivy یک کتابخانه رایگان و متن‌باز هست.
  • Kivy یک محیط گرافیکی برای ساخت اپلیکیشن موبایل فراهم می‌کنه.
  • با Kivy میتونی برنامه‌هایی بنویسی که دارای فرمان‌های چند لمسی هستن.
  • با Kivy میتونی برنامه‌هایی برای موبایل بنویسی که هم روی اندروید و هم روی iOS  اجرا بشه.
  • Kivy رو میشه روی ویندوز، لینوکس، مک و Raspberry Pi هم اجرا کرد.

آماده‌سازی محیط توسعه

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

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

حالا این فایل زیپ‌شده را دانلود، unzip، و سپس با پایچارم باز کن:

isfahan-kivy-app-1

ساختار برنامه کیوی

برای آشنایی با ساختار کلی برنامه کیوی، کد زیر رو در main.py بنویس:

با خط اول، App از ماژول کیوی را وارد و با خط دوم، کلاس اصلی برنامه را تعریف می کنیم. Isfahan نام برنامه هست.

خط آخر کد هم برای اجرای برنامه هست. برنامه با روش ()run فراخوانی و اجرا میشه.

از منوی Run گزینه Run  رو بزن تا اجرای برنامه رو ببینی.

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

اینجا چند کلاس دیگه هم که در ادامه لازمشون داریم را وارد می‌کنیم:

کار با ویجت‌ها

می‌خواهیم روی صفحه تصویر، دکمه و … قرار بدیم. اینها همون ویجت‌ها هستن.

کلاس uix قسمتی هست که عناصر رابط کاربر مثل طرح‌بندی و ویجت‌ها رو نگه میداره و برای هر ویجت باید نوشته بشه.

یک روش به نام build در کلاس IsfahanApp تعریف می‌کنیم تا در اون ویجت‌ها را تعریف و اضافه کنیم.

ابتدا نوع قرارگیری ویجت‌ها را با روش BoxLayout به حالت افقی تنظیم می‌کنیم و با نمونه‌ای با نام root ذخیره‌ می‌کنیم:

حالا بیا یکی از تصاویر را برای نمایش در اَپ اضافه کنیم. برای این کار از کلاس Image استفاده می‌کنیم. یک نمونه با نام image و ورودی تصویر 6 ازش می‌سازیم و به طرح root اضافه می‌کنیم:

حالا دوباره برنامه را اجرا کن.

isfahan-kivy-app-2

نکته: اگر فایل یک تصویر در مسیری که برنامه‌ات را ذخیره کردی نیست، باید مسیر کامل فایل را برای source ورودی داد.

افزودن دکمه

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

قبل اینکه به دکمه‌ها بپردازیم، نحوه دادن نام فایل عکس به کلاس Image را ویرایش می‌کنیم تا قابل تنظیم باشد:

دکمه را می‌توانیم در کیوی با استفاده از کلاس Button تعریف کنیم. یک نمونه از این کلاس را با فونت و اندازه دلخواه می‌سازیم و قبل از نمونه image قرار می‌دهیم:

دوباره برنامه را اجرا کن. حالا دکمه‌ اضافه شده‌. اما کلیک بر روی آن هیچ کاری را انجام نمی‌دهد چون عملی برای آن تعریف و تخصیص داده نشده.

ابتدا عمل عقب‌رفتن را با یک تابع جدید با نام lastcallback تعریف می‌کنیم. این تابع با کم‌کردن عدد تصویر فعلی، آن را به تصویر قبلی تغییر می‌دهد.

کلاس Button دارای روشی به نام bind هست که با آن این تابع جدید را به دکمه نسبت می‌دهیم:

برنامه نهایی

دکمه رفتن به عکس بعد را هم تعریف و اضافه می‌کنیم.

این میشه همه برنامه ما:

isfahan-kivy-app-3

تبدیل به فایل اندروید

فایل‌های برنامه را به پایلی‌باکس کپی کن. سپس با استفاده از دستورالعمل خواندنی اَپ پانیمال اونرا به فایل apk تبدیل کن.

این فایل الان بر روی هر موبایل اندرویدی قابل نصب و استفاده هست. 🙂

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

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

یا اینکه برای هر عکس یک سوال بذار که کاربر حدس بزنه اون عکس کجا هست و بعد جواب را بهش نشون بده. شبیه یک بازی اطلاعات عمومی. برای اینکار نیاز به تعریف چند دکمه جدید داری.

برای ادامه یادگیری، یکی از منابع خوب ویدیوهای آموزشی Derek Banas در یوتیوب هست که میتونی از اینجا هم دانلود کنی (۲۲۰ مگابایت و به زبان انگلیسی). این چند مثال متنوع از سایت کیوی هم جالب هستند. و این هم یک لیست طولانی از پروژه‌هایی هست که با کیوی انجام شدند.

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

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

 

نظرات