img

حضور و غیاب هوشمند با App Inventor 2

/
/
/

App Inventor یک زبان برنامه نویسی برای ساختِ برنامه‌های اندروید می‌باشد که در آن، برنامه از تکه‌ها، یا بلوک‌هایی از پیش ساخته شده پدید می‌آید. در طی چند ماه اخیر، ما توسعه‌ی چند برنامه‌ی ساده‌ی اندرویدی را در جریان یک سری از مقالات انجام داده‌ایم، که هر کدام از آنها جنبه‌‌ای خاص از App Inventor را پوشش دادند. برای ادامه‌ی این سلسله مقالات با ما همراه باشید.
دستگاه‌های اندرویدی در حال تبدیل شدن به بازیگران مهم‌تری در زندگی ما هستند. این دستگاه‌ها نیازهای متعددی را برای ما رفع رجوع می‌کنند، از دسترسی به سایت‌های سرگرمی گرفته تا فعالیت شبکه ای در جوامع مجازی، تماشای ویدئو از طریق اینترنت، گپ زدن با آشنایان، رزرو یا سفارش و نقل و انتفالات بانکی، اندروید جای پای محکمی دارد. مشتاقان تکنولوژی، مثل شمایی که در حال حاظر مقاله را می‌خوانید، مدام به فکر هوشمندتر ساختن اندروید، با ساخت برنامه‌هایی سودمند هستند. App Inventor، ابزاری خارق‌العاده برای این منظور می‌باشد. پس اجازه دهید سفر به سوی استاد شدن در App Inventor را با ساخت برنامه ای مفیدتر و پیچیده‌ تر، ادامه دهیم.

 

موضوع برنامه
حضور و غیاب کردن اولین وظیفه‌ی یک آموزگار می‌باشد. فهرست دانش‌آموزان و یک قلم، تنها وسایل موجود برای انجام این وظیفه می‌باشند. چه می‌شود اگر ما راه‌کاری دیجیتال، برای این کار ارائه دهیم؟ به نظر جالب می‌رسد، نه؟ پس بگذارید سیستم حضور و غیاب هوشمندی را برای کلاس خود بسازیم، تا دیگر آموزگار مجبور نباشد ابتدا جزئیات را برروی کاغذ نوشته، و سپس آنها را به کامپیوتر انتقال دهد. برنامه‌ی ما، به قدری باهوش خواهد بود که حضور و غیاب را انجام داده و موارد ثبت شده بر روی پایگاه داده را به روزرسانی کند، که تا زمانی خودمان پاکشان کنیم، بر روی حافظه، باقی خواهند ماند.
در یک راهنمای آموزشیِ پیش از این، ما چگونگی ساخت یک پایگاه داده‌ی تحت وب با استفاده از پایگاه داده‌ی Firebase، که پایگاه داده‌ای متن باز و ابری می‌باشد را بررسی کردیم. در این راهنمای آموزشی، ما تمام آنچه را که آموخته‎‌ایم، برای ساخت یک برنامه‌ی کاربردیِ واقعی به کار خواهیم برد.
برای آنان که آخرین راهنمای آموزشی را از دست داده اند، مختصری آنچه را که گفته شد، بازگویی می‌کنم. در این برنامه، ما از پایگاه داده‌ی Firebase، که پایگاه داده ای ابری از جانب گوگل می‌باشد، استفاده می‌کنیم، که متن باز و رایگان می‌باشد.

 

ویژگی‌های Firebase
۱- Firebase از مرکز داده با رابط کاربریِ گرافیکی استفاده می‌کند که به شما امکان می‌دهد تمامیِ ورودی ها را به صورت تصویری مشاهده و مدیریت کنید.
۲- قابیت ابری داشتن، دسترسی را برای هر دستگاهی فراهم می‌کند که در حال حرکت نیز قطع نمی‌گردد.
۳- اصالت سنجیِ هوشمند دسترسیِ ایمنی را فراهم می‌آورد.
۴- پایگاه داده‌ی بی درنگ، تغییرات لحظه‌ای را فوری اعمال می‌کند.
۵- با فراهم کردن امکان مشارکت، چندین نفر می‌توانند پایگاه داده را مدیریت کنند.
اینجا یک تصویر وجود دارد، تصویر صفحه‌ی اول، بدون زیر نویس
۶- نیازی به کدنویسی برای گرفتن و ذخیره‌سازی داده‌ها وجود ندارد.

 

ایجاد یک پروژه در پایگاه داده‌ی Firebase
۱- برای استفاده از Firebase، شما بایستی صاحب یک حساب گوگلِ فعال باشید، که برای اجرای App Inventor نیز بدان نیاز خواهید داشت.
۲- https://console.firebase.google.com/ را در نوار آدرس مرورگر خود تایپ کرده و Enter را بزنید.
۳- اگر از شما اطلاعات ورود درخواست شد، از اطلاعات ورود حساب گوگلِ خود استفاده کنید تا وارد شوید.
۴- از رهنمودهای بر روی صفحه پیروی کنید، که معمولا شامل پذیرفتن شرایط استفاده از محصول می‌باشند.
۵- هنگامی که همه چیز انجام شد، شما صفحه‌ی مشهود در شکل ۱ را در صفحه نمایش خود شاهد خواهید بود.
۶- بر روی ‘Create New Project’ کلیک کنید.
۷- همانند شکل، پروژه را نام گذاری کنید و کشور/منطقه جغرافیایی را مشخص کنید.
۸- زمانی که پروژه شما ایجاد شد، شما داشبورد برنامه خود را ملاحظه خواهید کرد، که مشابه آنچه که در شکل ۳ نمایش داده شده است می‌باشد.
۹- از منوی سمت چپ، Database را انتخاب کنید، و سپس از صفحه‌ی بعدی ‘Rules’ را برگزینید، که مشابه شکل ۴ را در رایانه شما پدید می‌آورد.
۱۰- در این هنگام، دلخواه ما دادن دسترسی به تمام کاربران می‌باشد، بنابراین، ما نیاز داریم که rule ها را تغییر دهیم. شما می‌توانید با تایپ کردن مقدارها همانند شکل ۵، این کار را دستی انجام دهید. هنگامی که کار تمام شد، برروی دکمه‌ی publish کلیک کنید.
بسیار عالی، شما اکنون با موفقیت فضای خالی را برای پروژه‌ی خود در پایگاه داده‌ی Firebase ایجاد کرده‌اید و اجازه‌ی خواندن و نوشتن را به تمامیِ کاربران دارای URL داده‌اید.
اگر شما در این سفر اندرویدی تازه وارد هستید، به تعدادی از مقالات گذشته مراجعه کنید، که مختص تازه‌کاران می‌باشند، تا خودتان را با App Inventor آشنا سازید.

ملزومات رابط کاربریِ گرافیکی
برای هر برنامه‌ای، ما از یک رابط کاربریِ گرافیکی یا GUI بهره می‌گیریم، که به کاربر کمک می‌کند تا از اجزای بر روی صفحه تعامل کند. چگونگیِ پاسخ گوییِ اجزا به اقدامات کاربر در قسمت block editor تعریف گشته است. در این برنامه، ما چندین صفحه خواهیم داشت و ظاهر و حس هر کدام از آنها را تعریف خواهیم نموید.
این دو، دو صفحه‌ی GUI هستند که نام‌های آنها:
۱- Screen1
۲-StudentAddScreen می‌باشد.

ملزومات GUI برای Screen1
۱- Label: label‌ ها اجزای متنیِ ثابت هستند که به منظور به نمایش درآوردنِ علامت گذاری یا عنوان به کار برده می‌شوند.
۲- Button: یک Button(دکمه) به شما امکان جرقه زدن یک رخداد(event) را می‌دهد و جزئی بسیار اساسی می‌باشد.
۳- Text Box: اینجا مکان ورودی است که کاربر می‌تواند در آن تایپ کند. مقدار وارد شده بعدا در برنامه توسط block editor مورد استفاده قرار می‌گیرد.
۴- Horizontal arrangement: اینها اجزای به خصوصی هستند که تمامی اجزای زیرمجموعه‌ی(childe) خود را به صورت افقی مرتب می‌کنند.
۵- Notifier: برای نشان دادن راهنما، یا دادن کنترل بر روی اجزای موجود به کار می‌رود. ما از این جزء در برنامه‌ی خود استفاده خواهیم کرد و در همین اثنا شما با کارآیی آن بیشتر آشنا خواهید شد.
۶- Firebase DB: همانگونه که شما از قبل می‌دانید، Firebase، پایگاه داده‌ای ابری از گوگل می‌باشد. ما از آن برای ذخیره سازیِ داده‎های کاربر بر فضای ابری(cloud) سود خواهیم جست.
۷- Tiny DB: به عنوان پایگاه داده‌ی مستقر در دستگاه شما محسوب می‌شود، و بخشی از پایگاه داده‌ی کلی می‌باشد.
۸- Barcode scanner: جزئی پیشرفته برای خواندن و تفسیر کدهای بارکد و QR می‌باشد که از دوربین یا برنامه‎‌ی بارکد خوان نصب شده بر روی دستگاه شما استفاده می‌کند.
۹- Clock: در موارد مربوط به زمان موثر می‌باشد.

جدول ۱، اجزای مورد نیاز ما برای برنامه‌ی کنونی را ارائه می‌دهد، که به درون designer از منوی سمت چپی کشیده خواهند شد.
۱- اجزای مشخص شده در جدول ۱ را در viewer کشیده و رها کنید.
۲- اجزای مرئی قابل مشاهده می‌باشند و اجزای نامرئی در زیر viewer، تحت تگی(tag) با نام ‘Non-visible’ قرار خواهند داشت.
۳- Label ها، به همراه text box، مربوطه، به منظور مرتب شدن به صورت افقی بایستی در میان ‘Horizontal arrangement’ واقع شوند.
۴- چنانچه شما همه چیز را به درستی انجام داده باشید، چیدمان چیزی شبیه آنچه که در شکل ۶ مشهود است خواهد بود.
۵- در صورت لزوم مشخصات را همانند آنچه که ما در اجزای label و button تغییر دادیم، تغییر دهید.
۶- تغییر نام اجزاء، به شناسایی بهتر آنها در block editor کمک خواهد کرد.
۷- رابط کاربریِ گرافیکیِ شما اکنون مهیا می‌باشد. شکل ۶ ظاهر برنامه بعد از نصب را نشان می‌دهد. اجزای نامرئی، مرئی نخواهند بود.
۸- شکل ۷ سلسله مراتب اجزای کشیده شده توسط ما به درون designer را نشان می‌دهد.

 

ملزومات GUI برای StudentAddScreen
با روشی مشابه، اجزای مورد نیاز برای صفحه‌ی دوم را برخواهیم شمرد(جدول ۲).
هدف صفحه‌ی دوم افزودن اسامیِ دانش آموزان می‌باشد، تا بتوان حضور آنها را تایید کرد.
۱- اجزای ذکر شده در جدول ۲ را در viewer کشیده و رها کنید.
۲- اگر شما همه چیز را به درستی انجام داده باشید، چیدمان چیزی شبیه شکل ۸ خواهد بود.
ما بایستی اجزای Firebase را پیکربندی کنیم، تا بتوانیم پروژه‌ی دمویی را که با توجه به مراحل مذکور ساخته‌ایم را متصل نماییم. برای این منظور، تنها کافی است URL پروژه‌ی خود را در مشخصه‌ی URL درون Firebase در designer بنویسید.
اکنون برای تعریف انواع گوناگونی از رفتارها، به سوی block editor خواهیم رفت، پس بگذارید درباره‌ی کارکرد واقعی که از برنامه خود انتظار داریم بحث کنیم.
۱- از همان صفحه‌ی ابتدایی، کاربر بایستی بتواند بارکد را اسکن کند.
۲- بارکد از نام دانش‌آموز و عدد roll تشکیل شده است، که با کما از یکدیگر جدا می‌باشند.
۳- اگر چنانچه نام دانش‌آموز از بارکد با آنچه که در پایگاه داده ذخیره شده همخوانی نداشته باشد، کاربر بایستی برای اضافه کردن نام این دانش‌آموز به صفحه‌ی دوم مراجعه کند
۴- هنگامی که بارکد اسکن شد، نتیجه در Firebase DB با درج تاریخ انجام اسکن، ذخیره خواهد شد.
۵- Bucket پروژه با توجه به ماه نام گذاری می‌شود، بنابراین هر ماه، یک فولدر جدید ساخته خواهد شد و آمار حضور و غیاب ها برای هر تاریخ جداگانه ثبت خواهند شد.
بسیار خوب، بگذارید ادامه دهیم و این رفتارها را با استفاده از block editor به برنامه خود اضافه کنیم. امیدوارم چگونگیِ سوئیچ کردن از designer به block editor را فراموش نکرده باشید. برای این منظور دکمه‎‌ای در بالای properties واقع شده است.

کار با Blockها با Block editor
بنده از قبل blockها را برای شما مهیا کرده‌ام. تمام آنچه که شما بایستی انجام دهید کشیدن blockهای مربوطه از صفحه‌ی کناری و رها کردن آنها در viewer می‌باشد.
همانند آنچه که در تصویر مشاهده می‌کنید، چیدمان blockها را انجام دهید. من وظیفه‌ی هر block چگونگیِ فراخوانی آن را توضیح خواهم داد.

 

توضیحی برای Block
* فهم تمامیِ خطوط block ساده می‌باشد.
* به محض اینکه دکمه Add فشرده شود، خالی بودن یا خالی نبودن text box بررسی خواهد شد. اگر که خالی باشد، به کاربر وارد کردن مقدار یادآوری می‌شود.
* اگر چنانچه text box خالی نباشد، نام وارد شده به لیست دانش‌آموزان افزوده می‌گردد و همین لیست در پایگاه داده گوشی نیز ذخیره می‌شود، تا دفعه‌ی بعد که برنامه بازشود، لیستی یکسان ارائه گردد.

 

کدهای برنامه
از آنجایی که چفت کردن(snap) همه‌ی block‌های منطقی میسر نبود، من کد کامل را به صورت بارکد قرار می‌دهم. QRCode 1 را که در زیر تصویرش را ملاحظه می‌کنید را اسکن کنید تا فایل ‘aia’ را به کسب کنید، که آن را می‌توانید در App Inventor و پروژه‌ی خود آپلود کرده و کد کامل را مشاهده کنید.
اگر شما می‌خواهید بدانید که برنامه پس از نصب چگونه به نظر خواهد رسید، QRCode 2 را اسکن کنید تا فایل .apk برنامه در اختیار شما قرار گیرد. اکنون کار شما با Block editor نیز تمام شده است. اقدام بعدی دانلود و نصب برنامه برای گوشی می‌باشد، تا ببینیم برنامه چگونه کار می‌کند. شکل ۱۲ database view را ارائه می‌دهد.

 

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

من نحوه‌ی دانلود را به شما یاد می‌دهم.
۱- در ردیف بالایی، بر روی دکمه‌ی ‘Build’ کلیک کنید. گزینه‌ی دانلود apk بر روی رایانه شما نمایان خواهد شد.
۲- پیشرفت دانلود قابل دیدن می‌باشد زمانی که به با موفقیت به اتمام برسد، برنامه در فولدر Download مسیر رایانه شما قرار خواهد گرفت، که شما می‌توانید آن را خودتان تعریف کنید.
۳- حالا زمان آن است که برنامه را به وسیله‌ی بلوتوث یا USB به گوشی خودتان انتقال دهید.
وقتی فایل apk بر روی کارت SD شما واقع شد، قدم بعد نصب آن است. ممکن است شما با پیام‌ها یا هشدارهایی چون «نصب از منابع نامطئن» مواجه شوید.
اجازه نصب را در تنظیمات برای این برنامه بگیرید و بعد از نصب موفقیت آمیز این برنامه شاهد آیکون این برنامه در منوی گوشی خود خواهید بود. چیزی که شما می‌بینید آیکون پیش فرض می‌باشد، که می‌تواند تغییر یابد، که من چگونگیِ این کار در ادامه‌ مسیر به شما خواهم گفت.
امیدوارم که برنامه‌ی شما دقیقا مطابق انتظارتان کار کند. اکنون متناسب با نیاز خود می‌توانید به تغییر چیزهایی از قبیل سفارشی سازی تصویر، صدا و رفتار، اقدام کنید.

 

رفع عیب‌های برنامه
ما نمونه‌ی اولیه برنامه را با قابلیت‌هایی ساده و ابتدایی ایجاد کردیم، اما کاربر چه چیزهای دیگری را می‌تواند مد نظر داشته باشد؟
بنابراین حالا مواردی را در نظر بیاورید که ممکن است سبب آزرده شدن کاربر گردند، و اینکه چگونه بایستی آنها را حل نمود.
برنامه‌ی شما بایستی قادر به انجام این کارها باشد:
۱- به نظرتان خوب نیست که برنامه گزینه ‌ای را برای حذف نام دانش‌آموز داشته باشد؟
۲- چطور است که بتوانیم از برنامه آمار حضور و غیاب‌ها را بیرون کشیده، و یک داشبورد ایجاد کنیم؟
۳- آیا می‌شود پروفایل دانش‌آموزان را با افزودن تصویر و سایر جزئیات جذاب‌تر نماییم؟
اینها از جمله مواردی هستند می‌توانند در نظر گرفته شوند و کاربر از وجودشان در برنامه خرسند خواهد شد. درباره‌ی تمام راه‌هایی که می‌توان این ویژگی‌ها را به برنامه افزود فکر کنید. اگر چنانچه در حل این مسائل به مشکلی برخوردید از من سوال کنید.
شما یک برنامه اندرویدی دیگر را با دستان خودتان پدید آوردید، به شما تبریک می‌گویم!

 

دانلود مقاله بصورت PDF به همراه تصاویر

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text