دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۹
  • فروردین

جلسه ۱۶ : آموزش کار با پلاگین File System در کوردوا

  • دسته‌بندی‌ها :
جلسه ۱۶ : آموزش کار با پلاگین File System در کوردوا
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته شما را با پلاگین Dialogs و نحوه نصب و کاربرد آن آشنا کردیم. در این جلسه آموزش کار با پلاگین File System در کوردوا را ارائه خواهیم کرد.

      آموزش کار با پلاگین File System در کوردوا

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

      مرحله ۱ – نصب پلاگین File

      برای نصب این پلاگین باید دستور زیر را در پنجره command prompt اجرا کنید.

      مثال : 

      مرحله ۲ – اضافه کردن دکمه ها

      سعی می کنیم در مثال ارائه شده زیر نحوه ایجاد فایل، نوشتن فایل و خواندن و در نهایت حذف آن را نشان دهیم. به همین دلیل چهار دکمه در  index.html ایجاد خواهیم کرد.
      علاوه بر این textarea را اضافه می کنیم که محتوای پرونده ما را نمایش می دهد.

      مثال : 

       

      مرحله ۳ – اضافه کردن Event Listener

      event listeners را در index.js در تابع onDeviceReady اضافه خواهیم کرد تا اطمینان حاصل کنیم که همه چیز قبل از استفاده از پلاگین آغاز شده است.

      مثال : 

      مرحله ۴A – ایجاد تابع File

      file در پوشه ریشه برنامه ها درdevice ایجاد می شود.
      برای دسترسی به ریشه پوشه نیاز است که دسترسی superuser به پوشه هایتان را در اختیار داشته باشید.
      در موردی که ما آن را به کار می بریم مسیر ریشه پوشه \data\data\com.example.hello\cache است.
      در حال حاضر این پوشه خالی است.

      آموزش کار با پلاگین File System در کوردوا

      cordova file root em

      حالا یک تابع که فایل log.txt را ایجاد می کنیم.
      این کد را در index.js نوشته و یک درخواست به سیستم فایل (file system) ارسال می نماییم.
      این روش از WINDOW.TEMPORARY یا WINDOW.PERSISTENT استفاده می نماید.
      در این مثال اندازه ای که برای ذخیره سازی تعیین می کنیم ۵ مگابایت است.

      مثال : 

      حالا می توانیم بر روی دکمه CREATE FILE کلیک نماییم.
      پیغام هشداری که ظاهر خواهد شد تصدیق می کند که فایل با موفقیت ساخته شده است.

      آموزش کار با پلاگین File System در کوردوا

      cordova file create

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

      آموزش کار با پلاگین File System در کوردوا

      cordova file root log

      مرحله ۴B – نوشتن تابع File

      در این مرحله متنی را در فایلمان می نویسیم.
      مجدداً درخواستی به سیستم فایلمان ارسال (file system) می کنیم سپس file writer را می سازیم تا بتوانیم متن Lorem Ipsum را که به متغیر blob اختصاص داده ایم بنویسیم.

      مثال : 

      همان طور که در تصویر زیر می بینید بعد از فشردن دکمه  WRITE FILE؛ پیغام هشدار اطلاع می دهد که کار writing  با موفقیت صورت گرفته است.

      آموزش کار با پلاگین File System در کوردوا

      cordova file write

      حالا  log.txt را باز می کنیم و  Lorem Ipsum را که در کنار written قرار دارد تنظیم می نماییم.

      آموزش کار با پلاگین File System در کوردوا

      cordova file root log text

      مرحله ۴C – خواندن تابع File

      در این مرحله فایل log.txt می خوانیم و آن را در عنصر textarea نمایش می دهیم.
      یک درخواست به سیستم فایل ارسال می کنیم و file object دریافت می نماییم و سپس reader را می سازیم.
      وقتی که reader بارگذاری شد؛ مقدار بازگشتی را به textarea اختصاص می دهیم.

      مثال : 

      وقتی روی دکمه READ FILE کلیک می کنیم؛ متنی که از فایل آمده است در درون textarea نوشته خواهد شد.

      آموزش کار با پلاگین File System در کوردوا

      cordova file read

      مرحله ۴D  – حذف تابع File

      و سرانجام یک تابع برای حذف فایل log.txt می سازیم.

      مثال : 

      حالا می توانیم بر روی دکمه DELETE FILE کلیک کنیم تا فایل برنامه را از ریشه پوشه حذف نماییم.
      پیغام هشدار یادآوری خواهد کرد که حذف فایل با موفقیت انجام شده است.

      آموزش کار با پلاگین File System در کوردوا

      cordova file delete

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

      cordova file root empty

      کلام آخر

      در این جلسه شما را با پلاگین File System آشنا کردیم.
      در جلسه بعدی آموزش کار با پلاگین File Transfer را ارائه خواهیم کرد.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۱۶ : آموزش کار با پلاگین File System در کوردوا
      به اشتراک بگذارید