برنامه نویسی /برنامه نویسی وب
برگردان :رامین علیخانی
حضور و غیاب هوشمند با
App Inventor 2
سپس آنها را به کامپیوتر انتقال دهد .برنامهی ما، تکنولوژی ،مثل شمایی که در حال حاظر مقاله App Inventorیک زبان برنامه نویسی ب رای
به قدری باهوش خ واهد بود که حضور و غیاب را را م یخ وانید ،مدام به فکر هوشمندتر ساختن ساخت برنامههای اندروید م یباشد که در آن،ِ
انجام داده و موارد ثبت شده بر روی پایگاه داده را اندروید ،با ساخت برنامههایی سودمند هستند. برنامه از تکهها ،یا بلوکهایی از پیش ساخته
به روزرسانی کند ،که تا زمانی خودمان پاکشان ،App Inventorابزاری خارقالعاده ب رای این شده پدید م یآید .در طی چند ماه اخی ر ،ما
کنیم ،بر روی حافظه ،باقی خ واهند ماند. منظور م یباشد .پس اجازه دهید سفر به سوی توسعهی چند برنامهی سادهی اندرویدی را در
ی پیش از این ،ما چگونگی در یک راهنمای آموزش ِ استاد شدن در App Inventorرا با ساخت جریان یک سری از مقاالت انجام دادهایم ،که هر
ساخت یک پایگاه دادهی تحت وب با استفاده از برنامه ای مفیدتر و پیچیده ت ر ،ادامه دهیم. کدام از آنها جنبهای خاص از App Inventorرا
پایگاه دادهی ،Firebaseکه پایگاه دادهای متن پوشش دادند .ب رای ادامهی این سلسله مقاالت با
باز و ابری م یباشد را بررسی کردیم .در این موضوع برنامه ما هم راه باشید.
راهنمای آموزشی ،ما تمام آنچه را که آموختهایم، حضور و غیاب کردن اولین وظیفهی یک آموزگار دستگاههای اندرویدی در حال تبدیل شدن به
ب رای ساخت یک برنامهی کاربردیِ واقعی به کار م یباشد .فهرست دانشآموزان و یک قلم ،تنها بازیگ ران مهمتری در زندگی ما هستند .این
خ واهیم برد. وسایل موجود ب رای انجام این وظیفه م یباشند. دستگاهها نیازهای متعددی را ب رای ما رفع رجوع
ب رای آنان که آخرین راهنمای آموزشی را از چه م یشود اگر ما راهکاری دیجیتال ،ب رای این م یکنند ،از دسترسی به سایتهای سرگرمی
دست داده اند ،مختصری آنچه را که گفته شد، کار ارائه دهیم؟ به نظر جالب م یرسد ،نه؟ پس گرفته تا فعالیت شبکه ای در ج وامع مجازی،
بازگویی م یکنم .در این برنامه ،ما از پایگاه دادهی بگذارید سیستم حضور و غیاب هوشمندی را تماشای ویدئو از طریق اینترنت ،گپ زدن با
،Firebaseکه پایگاه داده ای ابری از جانب گوگل ب رای کالس خود بسازیم ،تا دیگر آموزگار مجبور آشنایان ،رزرو یا سفارش و نقل و انتفاالت
م یباشد ،استفاده م یکنیم ،که متن باز و رایگان نباشد ابتدا جزئیات را برروی کاغذ نوشته ،و بانکی ،اندروید جای پای محکمی دارد .مشتاقان
برنامه نویسی /برنامه نویسی وب
م یباشد.
ویژگ یهای Firebase
Firebase -1از مرکز داده با رابط کاربریِ
گ رافیکی استفاده م یکند که به شما امکان
ی ورودی ها را به صورت تصویری م یدهد تمام ِ
مشاهده و مدیریت کنید.
-2قابیت ابری داشتن ،دسترسی را ب رای هر
دستگاهی ف راهم م یکند که در حال حرکت نیز
قطع نم یگردد.
ی ایمنی رای هوشمند دسترس ِ -3اصالت سنج ِ
(شکل :1داشبوردِ )Firebase
ف راهم م یآورد.
(شکل :2پروژهی نمایشی(دمو) در داشبورد )Firebase -4پایگاه دادهی بی درنگ ،تغیی رات لحظهای را
فوری اعمال م یکند.
-5با ف راهم کردن امکان مشارکت ،چندین نفر
م یت وانند پایگاه داده را مدیریت کنند.
اینجا یک تصویر وجود دارد ،تصویر صفحهی
اول ،بدون زیر نویس
-6نیازی به کدنویسی ب رای گرفتن و ذخیرهسازی
دادهها وجود ندارد.
ایجاد یک پروژه در پایگاه دادهی Firebase
-1ب رای استفاده از ،Firebaseشما بایستی
صاحب یک حساب گوگ ِل فعال باشید ،که ب رای
اج رای App Inventorنیز بدان نیاز خ واهید داشت.
https://console.firebase.google.com/ -2
را در ن وار آدرس مرورگر خود تایپ کرده و Enter
را بزنید.
-3اگر از شما اطالعات ورود درخ واست شد ،از
اطالعات ورود حساب گوگ ِل خود استفاده کنید تا
شکل :3فرمانهای( )rulesخ واندن و نوشتن هم راه با اصالت سنجی وارد شوید.
شکل :4فرمانهای( )rulesواج دِ مجوز خ واندن و نوشتن
-4از رهنمودهای بر روی صفحه پیروی کنید،
که معموال شامل پذیرفتن ش رایط استفاده از
محصول م یباشند.
-5هنگامی که همه چیز انجام شد ،شما
صفحهی مشهود در شکل 1را در صفحه نمایش
خود شاهد خ واهید بود.
-6بر روی ‘ ’Create New Projectکلیک کنید.
-7همانند شکل ،پروژه را نام گذاری کنید و کشور/
ملزومات رابط کاربریِ گ رافیکی کردن مقدارها همانند شکل ،5این کار را دستی منطقه جغ رافیایی را مشخص کنید.
ب رای هر برنامهای ،ما از یک رابط کاربریِ گ رافیکی انجام دهید .هنگامی که کار تمام شد ،برروی -8زمانی که پروژه شما ایجاد شد ،شما داشبورد
یا GUIبهره م یگیریم ،که به کاربر کمک م یکند دکمهی publishکلیک کنید. برنامه خود را مالحظه خ واهید کرد ،که مشابه
یتا از اج زای بر روی صفحه تعامل کند .چگونگ ِ بسیار عالی ،شما اکنون با موفقیت فضای خالی آنچه که در شکل 3نمایش داده شده است
ی اج زا به اقدامات کاربر در قسمت پاسخ گوی ِ را ب رای پروژهی خود در پایگاه دادهی Firebase م یباشد.
block editorتعریف گشته است .در این برنامه، ایجاد کردهاید و اجازهی خ واندن و نوشتن را به -9از منوی سمت چپ Database ،را انتخاب کنید،
ما چندین صفحه خ واهیم داشت و ظاهر و حس ی کارب ران دارای URLدادهاید.
تمام ِ و سپس از صفحهی بعدی ‘ ’Rulesرا برگزینید ،که
هر کدام از آنها را تعریف خ واهیم نموید. اگر شما در این سفر اندرویدی تازه وارد هستید، مشابه شکل 4را در رایانه شما پدید م یآورد.
این دو ،دو صفحهی GUIهستند که نامهای آنها: به تعدادی از مقاالت گذشته م راجعه کنید ،که -10در این هنگام ،دلخ واه ما دادن دسترسی به
Screen1 -1 مختص تازهکاران م یباشند ،تا خودتان را با App تمام کارب ران م یباشد ،بناب راین ،ما نیاز داریم که
StudentAddScreen -2م یباشد. Inventorآشنا سازید. ruleها را تغییر دهیم .شما م یت وانید با تایپ
برنامه نویسی /برنامه نویسی وب
تغییر دهید. جدول ،1اج زای مورد نیاز ما ب رای برنامهی کنونی ملزومات GUIب رای Screen1
-6تغییر نام اج زاء ،به شناسایی بهتر آنها در را ارائه م یدهد ،که به درون designerاز منوی ی ثابت هستند Label: label -1ها اج زای متن ِ
block editorکمک خ واهد کرد. سمت چپی کشیده خ واهند شد. که به منظور به نمایش درآورد ِن عالمت گذاری یا
ی شما اکنون مهیا -7رابط کاربریِ گ رافیک ِ -1اج زای مشخص شده در جدول 1را در عن وان به کار برده م یشوند.
م یباشد .شکل 6ظاهر برنامه بعد از نصب را viewerکشیده و رها کنید. :Button -2یک (Buttonدکمه) به شما امکان
نشان م یدهد .اج زای نامرئی ،مرئی نخ واهند بود. -2اج زای مرئی قابل مشاهده م یباشند و اج زای جرقه زدن یک رخداد( )eventرا م یدهد و جزئی
-8شکل 7سلسله م راتب اج زای کشیده شده نامرئی در زیر ،viewerتحت تگی( )tagبا نام بسیار اساسی م یباشد.
توسط ما به درون designerرا نشان م یدهد. ‘ ’Non-visibleق رار خ واهند داشت. :Text Box -3اینجا مکان ورودی است که کاربر
صفحه سوم شامل دو شکل و یک جدول Label -3ها ،به هم راه ،text boxمربوطه ،به م یت واند در آن تایپ کند .مقدار وارد شده بعدا در
م یباشد ،که یکجا ،اینجا آنها را گنجانیده ام. منظور مرتب شدن به صورت افقی بایستی در برنامه توسط block editorمورد استفاده ق رار
میان ‘ ’Horizontal arrangementواقع شوند. م یگیرد.
ملزومات GUIب رای StudentAddScreen -4چنانچه شما همه چیز را به درستی انجام :Horizontal arrangement -4اینها
با روشی مشابه ،اج زای مورد نیاز ب رای صفحهی داده باشید ،چیدمان چیزی شبیه آنچه که در اج زای به خصوصی هستند که تمامی اج زای
دوم را برخ واهیم شمرد(جدول .)2 شکل 6مشهود است خ واهد بود. زیرمجموع هی( )childeخود را به صورت افقی
ی دانش آموزان هدف صفحهی دوم افزودن اسام ِ -5در صورت لزوم مشخصات را همانند آنچه مرتب م یکنند.
م یباشد ،تا بت وان حضور آنها را تایید کرد. که ما در اج زای labelو buttonتغییر دادیم، :Notifier -5ب رای نشان دادن راهنما ،یا دادن
-1اج زای ذکر شده در جدول 2را در viewer کنترل بر روی اج زای موجود به کار م یرود .ما
شکل Designer screen :5
کشیده و رها کنید. از این جزء در برنامهی خود استفاده خ واهیم کرد
-2اگر شما همه چیز را به درستی انجام داده و در همین اثنا شما با کارآیی آن بیشتر آشنا
خ واهید شد.
شکل Components view :6
:Firebase DB -6همانگونه که شما از قبل
م یدانید ،Firebase ،پایگاه دادهای ابری از گوگل
م یباشد .ما از آن ب رای ذخیره سازیِ دادههای
کاربر بر فضای ابری( )cloudسود خ واهیم
جست.
:Tiny DB -7به عن وان پایگاه دادهی مستقر
در دستگاه شما محسوب م یشود ،و بخشی از
پایگاه دادهی کلی م یباشد.
:Barcode scanner -8جزئی پیشرفته ب رای
خ واندن و تفسیر کدهای بارکد و QRم یباشد
که از دوربین یا برنامهی بارکد خ وان نصب شده
بر روی دستگاه شما استفاده م یکند.
:Clock -9در موارد مربوط به زمان موثر
م یباشد.
برنامه نویسی /برنامه نویسی وب
شکل URL :8پروژه
دانشآموز به صفحهی دوم م راجعه کند
-4هنگامی که بارکد اسکن شد ،نتیجه در
Firebase DBبا درج تاریخ انجام اسکن ،ذخیره
خ واهد شد.
Bucket -5پروژه با توجه به ماه نام گذاری
م یشود ،بناب راین هر ماه ،یک فولدر جدید ساخته
خ واهد شد و آمار حضور و غیاب ها ب رای هر
شکل :9نوشتن URLدر مشخص هی Firebase تاریخ جداگانه ثبت خ واهند شد. شکل :7صفح هی designer
بسیار خوب ،بگذارید ادامه دهیم و این رفتارها
* به محض اینکه دکمه Addفشرده شود ،خالی باشید ،چیدمان چیزی شبیه شکل 8خ واهد بود.
را با استفاده از block editorبه برنامه خود
بودن یا خالی نبودن text boxبررسی خ واهد ما بایستی اج زای Firebaseرا پیکربندی کنیم،
ی سوئیچ کردن اضافه کنیم .امیدوارم چگونگ ِ
شد .اگر که خالی باشد ،به کاربر وارد کردن مقدار تا بت وانیم پروژهی دمویی را که با توجه به
از designerبه block editorرا ف راموش
یادآوری م یشود. م راحل مذکور ساختهایم را متصل نماییم .ب رای
نکرده باشید .ب رای این منظور دکمهای در باالی
* اگر چنانچه text boxخالی نباشد ،نام وارد شده این منظور ،تنها کافی است URLپروژهی خود
propertiesواقع شده است.
به لیست دانشآموزان افزوده م یگردد و همین لیست را در مشخصهی URLدرون Firebaseدر
در پایگاه داده گوشی نیز ذخیره م یشود ،تا دفعهی کار با Blockها با Block editor
designerبنویسید.
بنده از قبل blockها را ب رای شما مهیا کردهام.
بعد که برنامه بازشود ،لیستی یکسان ارائه گردد. اکنون ب رای تعریف ان واع گوناگونی از رفتارها ،به
تمام آنچه که شما بایستی انجام دهید کشیدن
سوی block editorخ واهیم رفت ،پس بگذارید
blockهای مربوطه از صفحهی کناری و رها
کدهای برنامه دربارهی کارکرد واقعی که از برنامه خود انتظار
کردن آنها در viewerم یباشد.
از آنجایی که چفت کردن( )snapهمهی داریم بحث کنیم.
همانند آنچه که در تصویر مشاهده م یکنید،
blockهای منطقی میسر نبود ،من کد کامل را به -1از همان صفحهی ابتدایی ،کاربر بایستی
چیدمان blockها را انجام دهید .من وظیفهی
صورت بارکد ق رار م یدهم QRCode 1 .را که در بت واند بارکد را اسکن کند.
ی ف راخوانی آن را توضیح هر blockچگونگ ِ
زیر تصویرش را مالحظه م یکنید را اسکن کنید -2بارکد از نام دانشآموز و عدد rollتشکیل
خواهم داد.
تا فایل ‘ ’aiaرا به کسب کنید ،که آن را م یت وانید شده است ،که با کما از یکدیگر جدا م یباشند.
-3اگر چنانچه نام دانشآموز از بارکد با آنچه
در App Inventorو پروژهی خود آپلود کرده و توضیحی ب رای Block
که در پایگاه داده ذخیره شده همخ وانی نداشته
کد کامل را مشاهده کنید. ی خطوط blockساده م یباشد.* فهم تمام ِ
باشد ،کاربر بایستی ب رای اضافه کردن نام این
برنامه نویسی /برنامه نویسی وب
اگر شما م یخ واهید بدانید که برنامه پس از
نصب چگونه به نظر خ واهد رسیدQRCode ،
2را اسکن کنید تا فایل apk.برنامه در اختیار
شما ق رار گیرد .اکنون کار شما با Block editor
نیز تمام شده است .اقدام بعدی دانلود و نصب
برنامه ب رای گوشی م یباشد ،تا ببینیم برنامه
چگونه کار م یکند .شکل database view 12
را ارائه م یدهد.
شکل :10تصویر Block editor 1 بسته بندی و آزمایش
شکل Database view :11 ب رای آزمایش برنامه ،شما بایستی آن را بر روی
گوشی خود داشته باشید .اول ،شما باید برنامه
با رایانه خود دانلود کنید و سپس آن را توسط
بلوتوث یا کابل USBبه گوشی خود انتقال دهید.
من نحوهی دانلود را به شما یاد م یدهم.
-1در ردیف باالیی ،بر روی دکمهی ‘’Build
کلیک کنید .گزینهی دانلود apkبر روی رایانه
شما نمایان خ واهد شد.
-2پیشرفت دانلود قابل دیدن م یباشد زمانی که
به با موفقیت به اتمام برسد ،برنامه در فولدر
Downloadمسیر رایانه شما ق رار خ واهد گرفت،
که شما م یت وانید آن را خودتان تعریف کنید.
-3حاال زمان آن است که برنامه را به وسیلهی
بلوتوث یا USBبه گوشی خودتان انتقال دهید.
وقتی فایل apkبر روی کارت SDشما واقع
شد ،قدم بعد نصب آن است .ممکن است شما
با پیامها یا هشدارهایی چون «نصب از منابع
نامطئن» مواجه شوید.
چگونه بایستی آنها را حل نمود. اجازه نصب را در تنظیمات ب رای این برنامه
برنامهی شما بایستی قادر به انجام این کارها بگیرید و بعد از نصب موفقیت آمیز این برنامه
باشد: شاهد آیکون این برنامه در منوی گوشی خود
-1به نظرتان خوب نیست که برنامه گزینهای را خواهید بود .چیزی که شما م یبینید آیکون
ب رای حذف نام دانشآموز داشته باشد؟ پیش فرض م یباشد ،که م یتواند تغییر یابد،
-2چطور است که بت وانیم از برنامه آمار حضور ی این کار در ادامه مسیر به
که من چگونگ ِ
و غیابها را بیرون کشیده ،و یک داشبورد ایجاد شما خواهم گفت.
کنیم؟ امیدوارم که برنامهی شما دقیقا مطابق انتظارتان
:1 QRCodeفایل منبع کدِ پروژه ()aia. -3آیا م یشود پروفایل دانشآموزان را با افزودن کار کند .اکنون متناسب با نیاز خود م یت وانید به
:2 QRCodeفایل نصب برنامه ()apk. تصویر و سایر جزئیات جذابتر نماییم؟ تغییر چیزهایی از قبیل سفارشی سازی تصوی ر،
اینها از جمله مواردی هستند م یت وانند در نظر صدا و رفتار ،اقدام کنید.
گرفته شوند و کاربر از وجودشان در برنامه
خرسند خ واهد شد .دربارهی تمام راههایی که رفع عی بهای برنامه
م یت وان این ویژگ یها را به برنامه افزود فکر ما نمونهی اولیه برنامه را با قابلیتهایی ساده و
کنید .اگر چنانچه در حل این مسائل به مشکلی ابتدایی ایجاد کردیم ،اما کاربر چه چیزهای دیگری
برخوردید از من س وال کنید. را م یت واند مد نظر داشته باشد؟
شما یک برنامه اندرویدی دیگر را با دستان خودتان بناب راین حاال مواردی را در نظر بیاورید که ممکن
پدید آوردید ،به شما تبریک م یگویم! است سبب آزرده شدن کاربر گردند ،و اینکه