با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته شما را با پلاگین Dialogs و نحوه نصب و کاربرد آن آشنا کردیم. در این جلسه آموزش کار با پلاگین File System در کوردوا را ارائه خواهیم کرد.
از پلاگین File System برای دستکاری سیستم فایل محلی در دستگاه کاربر استفاده می شود.
در آموزش کار با پلاگین File System در کوردوا ابتدا نصب این پلاگین و سپس کار با آن را آموزش خواهیم داد.
برای نصب این پلاگین باید دستور زیر را در پنجره command prompt اجرا کنید.
1 | C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file |
سعی می کنیم در مثال ارائه شده زیر نحوه ایجاد فایل، نوشتن فایل و خواندن و در نهایت حذف آن را نشان دهیم. به همین دلیل چهار دکمه در index.html ایجاد خواهیم کرد.
علاوه بر این textarea را اضافه می کنیم که محتوای پرونده ما را نمایش می دهد.
1 2 3 4 5 | <button id = "createFile">CREATE FILE</button> <button id = "writeFile">WRITE FILE</button> <button id = "readFile">READ FILE</button> <button id = "removeFile">DELETE FILE</button> <textarea id = "textarea"></textarea> |
event listeners را در index.js در تابع onDeviceReady اضافه خواهیم کرد تا اطمینان حاصل کنیم که همه چیز قبل از استفاده از پلاگین آغاز شده است.
1 2 3 4 | document.getElementById("createFile").addEventListener("click", createFile); document.getElementById("writeFile").addEventListener("click", writeFile); document.getElementById("readFile").addEventListener("click", readFile); document.getElementById("removeFile").addEventListener("click", removeFile); |
file در پوشه ریشه برنامه ها درdevice ایجاد می شود.
برای دسترسی به ریشه پوشه نیاز است که دسترسی superuser به پوشه هایتان را در اختیار داشته باشید.
در موردی که ما آن را به کار می بریم مسیر ریشه پوشه \data\data\com.example.hello\cache است.
در حال حاضر این پوشه خالی است.
حالا یک تابع که فایل log.txt را ایجاد می کنیم.
این کد را در index.js نوشته و یک درخواست به سیستم فایل (file system) ارسال می نماییم.
این روش از WINDOW.TEMPORARY یا WINDOW.PERSISTENT استفاده می نماید.
در این مثال اندازه ای که برای ذخیره سازی تعیین می کنیم ۵ مگابایت است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function createFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) { alert('File creation successfull!') }, errorCallback); } function errorCallback(error) { alert("ERROR: " + error.code) } } |
حالا می توانیم بر روی دکمه CREATE FILE کلیک نماییم.
پیغام هشداری که ظاهر خواهد شد تصدیق می کند که فایل با موفقیت ساخته شده است.
حالا دوباره ریشه پوشه خود را چک می کنیم و می توانیم ببینیم که فایل جدید در آن ساخته شده است.
در این مرحله متنی را در فایلمان می نویسیم.
مجدداً درخواستی به سیستم فایلمان ارسال (file system) می کنیم سپس file writer را می سازیم تا بتوانیم متن Lorem Ipsum را که به متغیر blob اختصاص داده ایم بنویسیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function writeFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile('log.txt', {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { alert('Write completed.'); }; fileWriter.onerror = function(e) { alert('Write failed: ' + e.toString()); }; var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'}); fileWriter.write(blob); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert("ERROR: " + error.code) } } |
همان طور که در تصویر زیر می بینید بعد از فشردن دکمه WRITE FILE؛ پیغام هشدار اطلاع می دهد که کار writing با موفقیت صورت گرفته است.
حالا log.txt را باز می کنیم و Lorem Ipsum را که در کنار written قرار دارد تنظیم می نماییم.
در این مرحله فایل log.txt می خوانیم و آن را در عنصر textarea نمایش می دهیم.
یک درخواست به سیستم فایل ارسال می کنیم و file object دریافت می نماییم و سپس reader را می سازیم.
وقتی که reader بارگذاری شد؛ مقدار بازگشتی را به textarea اختصاص می دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function readFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile('log.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.getElementById('textarea'); txtArea.value = this.result; }; reader.readAsText(file); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert("ERROR: " + error.code) } } |
وقتی روی دکمه READ FILE کلیک می کنیم؛ متنی که از فایل آمده است در درون textarea نوشته خواهد شد.
و سرانجام یک تابع برای حذف فایل log.txt می سازیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function removeFile() { var type = window.TEMPORARY; var size = 5*1024*1024; window.requestFileSystem(type, size, successCallback, errorCallback) function successCallback(fs) { fs.root.getFile('log.txt', {create: false}, function(fileEntry) { fileEntry.remove(function() { alert('File removed.'); }, errorCallback); }, errorCallback); } function errorCallback(error) { alert("ERROR: " + error.code) } } |
حالا می توانیم بر روی دکمه DELETE FILE کلیک کنیم تا فایل برنامه را از ریشه پوشه حذف نماییم.
پیغام هشدار یادآوری خواهد کرد که حذف فایل با موفقیت انجام شده است.
اگر پوشه ریشه برنامه را بررسی کنیم می بینیم که خالی است.
در این جلسه شما را با پلاگین File System آشنا کردیم.
در جلسه بعدی آموزش کار با پلاگین File Transfer را ارائه خواهیم کرد.
با پی وی لرن همراه باشید.