اشتراکها
اشتراکها
نمایش تصاویر google street view
این تنظیم بر روی import کتابخانهها تاثیری ندارد و نباید داشته باشد. باید به یک کتابخانه همانند بستههای npm نگاه کنید که import آنها وابسته به مسیرهای پروژهی استفاده کنندهی از آن نیست و کاملا مستقل از آن است. در اینجا جهت سهولت کار « .... قسمت paths آن نیز به صورت خودکار ویرایش شدهاست ...» تا مسیر کتابخانه را بتوانید همانند سطر سوم تصویری که ارسال شد، تعیین کنید (این مسیر نسبی نیست) و اگر شناسایی نمیشود، تنظیم compilerOptions مربوط به paths را که در متن جاری ذکر شده، بررسی کنید:
در این مطلب قصد داریم نحوهی یکپارچه سازی افزونهی انتخاب تاریخ و زمان MD.BootstrapPersianDateTimePicker را با گریدهای Kendo UI، در دو حالت ویرایش به صورت popup و یا inline، بررسی کنیم:
پیشنیازها
برای این مطلب از دو کتابخانهی moment-jalaali، برای تبدیل تاریخ، از میلادی به شمسی و برعکس، استفاده خواهیم کرد. همچنین کنترل انتخاب تاریخ نیز از کتابخانهی MD.BootstrapPersianDateTimePicker تامین میشود.
moment-jalaali را میتوانید به صورت ذیل از طریق npm نصب کنید:
سپس دو مدخل ذیل را باید به مجموعهی مداخل اسکریپتهای صفحهی خود اضافه کنید:
MD.BootstrapPersianDateTimePicker را یا از طریق نیوگت نصب کنید و یا مخزن کد آنرا به صورت کامل دریافت کنید:
پس از دریافت این بسته، فایل jquery.Bootstrap-PersianDateTimePicker.css آنرا به مداخل cssهای خود اضافه کنید.
همچنین فایلهای jalaali.js و jquery.Bootstrap-PersianDateTimePicker.js آنرا نیز به مداخل اسکریپتهای صفحهی خود اضافه نمائید.
در کل اگر از ASP.NET Core استفاده میکنید، فایل bundleconfig.json یک چنین شکلی را پیدا خواهد کرد. در این حالت فایل layout برنامه تنها این دو مدخل نهایی را نیاز خواهد داشت:
فعالسازی کنترل انتخاب تاریخ شمسی بجای کامپوننت پیش فرض انتخاب تاریخ Kendo UI
پس از افزودن ارجاعات مورد نیاز، اکنون فرض ما بر این است که ستون تاریخ، دقیقا با فرمت میلادی از سمت سرور دریافت میشود و addDate نام دارد.
پس از آن، مرحلهی اول کار، نمایش این تاریخ میلادی به صورت شمسی است:
اینکار را با تعریف یک template و سپس ارسال مقدار addDate که همان نام خاصیت ستون جاری است به کتابخانهی moment-jalaali، انجام میدهیم. در این حالت همواره تاریخهای میلادی تنظیم شدهی در این ستون، در حالت نمایش معمولی با فرمت شمسی ظاهر میشوند.
در ادامهی تکمیل خواص ستون جاری، خاصیت editor را اضافه خواهیم کرد:
توسط پارامتر اول آن میتوان کار سفارشی سازی کنترل ویرایش این ستون را انجام داد و خاصیت دوم آن، نام فیلد جاری و همچنین مقادیر مدل آنرا در اختیار ما قرار میدهد.
در ادامه نیاز است یک input field سفارشی را در اینجا درج کنیم تا کار نمایش کنترل انتخاب تاریخ شمسی را انجام دهد:
کاری که در اینجا انجام شده، افزودن یک input مزین شده با ویژگیهای مخصوص MD.BootstrapPersianDateTimePicker است تا توسط آن شناسایی شود. همچنین چون مقدار options.model.addDate در اصل میلادی است، توسط کتابخانهی moment-jalaali به شمسی تبدیل و بجای value این کنترل ارائه میشود تا زمانیکه این ستون در حالت ویرایش قرار گرفت، این تاریخ شمسی توسط کنترل انتخاب تاریخ، به درستی پردازش شده و نمایش داده شود.
متد input.appendTo، کار افزودن این input جدید را به container یا همان محل نمایش ستون جاری، انجام میدهد.
در این حالت اگر برنامه را اجرا کنید، هرچند ظاهر Input جدید تغییر کردهاست، اما سبب نمایش کنترل انتخاب تاریخ نمیشود؛ چون این فیلد ویرایشی، پس از رندر صفحه، به صفحه اضافه شدهاست. به همین جهت نیاز است متد EnableMdDateTimePickers نیز فراخوانی شود. این متد کار فعالسازی input جدید را انجام خواهد داد:
تا اینجا موفق شدیم بجای کنترل انتخاب تاریخ میلادی، کنترل انتخاب تاریخ شمسی را نمایش دهیم. اما تاریخی که انتخاب میشود نیز شمسی است و تاریخی که به سمت سرور ارسال خواهد شد، میلادی میباشد. به همین جهت تغییرات این کنترل را تحت نظر قرار داده و هر زمانیکه کاربر تاریخی را انتخاب کرد، آنرا به میلادی تبدیل کرده و بجای فیلد addDate اصلی تنظیم میکنیم:
تنها مرحلهی باقیمانده، مخفی کردن این کنترل نمایش تاریخ، با از دست رفتن فوکوس است:
اگر این کار را انجام ندهیم، در حالت popup با بسته شدن آن، هنوز کنترل نمایش تاریخ نمایان خواهد بود و بسته نمیشود یا در حالت ویرایش inline، با کلیک بر روی دکمهی لغو ویرایش ردیف، باز هم شاهد باقی ماندن این کنترل در صفحه خواهیم بود که تجربهی کاربری مطلوبی به شمار نمیرود.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید: با این کنترلر و این View
پیشنیازها
برای این مطلب از دو کتابخانهی moment-jalaali، برای تبدیل تاریخ، از میلادی به شمسی و برعکس، استفاده خواهیم کرد. همچنین کنترل انتخاب تاریخ نیز از کتابخانهی MD.BootstrapPersianDateTimePicker تامین میشود.
moment-jalaali را میتوانید به صورت ذیل از طریق npm نصب کنید:
npm install moment-jalaali --save
node_modules/moment/min/moment.min.js node_modules/moment-jalaali/build/moment-jalaali.js
MD.BootstrapPersianDateTimePicker را یا از طریق نیوگت نصب کنید و یا مخزن کد آنرا به صورت کامل دریافت کنید:
Install-Package MD.BootstrapPersianDateTimePicker
همچنین فایلهای jalaali.js و jquery.Bootstrap-PersianDateTimePicker.js آنرا نیز به مداخل اسکریپتهای صفحهی خود اضافه نمائید.
در کل اگر از ASP.NET Core استفاده میکنید، فایل bundleconfig.json یک چنین شکلی را پیدا خواهد کرد. در این حالت فایل layout برنامه تنها این دو مدخل نهایی را نیاز خواهد داشت:
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" /> <script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
فعالسازی کنترل انتخاب تاریخ شمسی بجای کامپوننت پیش فرض انتخاب تاریخ Kendo UI
پس از افزودن ارجاعات مورد نیاز، اکنون فرض ما بر این است که ستون تاریخ، دقیقا با فرمت میلادی از سمت سرور دریافت میشود و addDate نام دارد.
پس از آن، مرحلهی اول کار، نمایش این تاریخ میلادی به صورت شمسی است:
{ field: "addDate", title: "تاریخ ثبت", template: "#=moment(addDate).format('jYYYY/jMM/jDD')#",
در ادامهی تکمیل خواص ستون جاری، خاصیت editor را اضافه خواهیم کرد:
editor: function(container, options) { }
در ادامه نیاز است یک input field سفارشی را در اینجا درج کنیم تا کار نمایش کنترل انتخاب تاریخ شمسی را انجام دهد:
// دریافت تاریخ میلادی و تبدیل آن به شمسی جهت نمایش در تکست باکس var persianAddDate = moment(options.model.addDate).format('jYYYY/jMM/jDD'); // ایجاد کنترل انتخاب تاریخ سفارشی با مقدار تاریخ شمسی دریف جاری var input = $('<div dir="ltr" class="input-group">'+ '<div class="input-group-addon" data-name="datepicker1" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#' + options.field + '" data-fromdate="false" data-enabletimepicker="false" data-englishnumber="true" data-placement="left">'+ '<span class="glyphicon glyphicon-calendar"></span>'+ '</div>'+ '<input type="text" value="'+ persianAddDate +'" class="form-control" id="' + options.field + '" placeholder="از تاریخ" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#' + options.field + '" data-englishnumber="true" data-fromdate="true" data-enabletimepicker="false" data-placement="right" />'+ '</div>'); // افزودن کنترل جدید به صفحه input.appendTo(container);
متد input.appendTo، کار افزودن این input جدید را به container یا همان محل نمایش ستون جاری، انجام میدهد.
در این حالت اگر برنامه را اجرا کنید، هرچند ظاهر Input جدید تغییر کردهاست، اما سبب نمایش کنترل انتخاب تاریخ نمیشود؛ چون این فیلد ویرایشی، پس از رندر صفحه، به صفحه اضافه شدهاست. به همین جهت نیاز است متد EnableMdDateTimePickers نیز فراخوانی شود. این متد کار فعالسازی input جدید را انجام خواهد داد:
// با خبر سازی کتابخانه انتخاب تاریخ از تکست باکس جدید EnableMdDateTimePickers();
تا اینجا موفق شدیم بجای کنترل انتخاب تاریخ میلادی، کنترل انتخاب تاریخ شمسی را نمایش دهیم. اما تاریخی که انتخاب میشود نیز شمسی است و تاریخی که به سمت سرور ارسال خواهد شد، میلادی میباشد. به همین جهت تغییرات این کنترل را تحت نظر قرار داده و هر زمانیکه کاربر تاریخی را انتخاب کرد، آنرا به میلادی تبدیل کرده و بجای فیلد addDate اصلی تنظیم میکنیم:
// هر زمانیکه کاربر تاریخ جدیدی را وارد کرد، آنرا به میلادی تبدیل کرده و در مدل ردیف جاری ثبت میکنیم // در نهایت این مقدار میلادی است که به سمت سرور ارسال خواهد شد $('#' + options.field).change(function(){ var selectedPersianDate = $(this)[0].value; var gregorianAddDate = moment(selectedPersianDate, 'jYYYY/jMM/jDD').format('YYYY-MM-DD'); options.model.set('addDate', gregorianAddDate); });
تنها مرحلهی باقیمانده، مخفی کردن این کنترل نمایش تاریخ، با از دست رفتن فوکوس است:
// با از دست رفتن فوکوس نیاز است این کنترل مخفی شود $('#' + options.field).blur(function(){ $('[data-name="datepicker1"]').MdPersianDateTimePicker('hide'); });
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید: با این کنترلر و این View
مطالب
آموزش QUnit #1
مقدمه:
تست و آزمایش کد برنامهها و وب سایتهایمان، بهترین راه کاهش خطا و مشکلات آنها بعد از انتشار است. از جمله روشهای موجود، تست واحد است که ویژوال استادیو نیز از آن برای پروژههای دات نت پشتیبانی میکند. با افزایش روز افزون کتابخانههای جاوا اسکریپتی و جی کوئری، نیاز به تست کدهای جاواسکریپتی نیز بیشتر به نظر میرسد و بهتر است تست واحد و آزمایش شوند. اما برخلاف کدهای #C و ASP.NET تست کدهای جاوا اسکریپت، مخصوصا زمانی که به دستکاری عناصر DOM میپردازیم و یا رویدادهای درون صفحه وب را با استفاده از جی کوئری مینویسیم، حتی اگر در فایل جداگانهای نوشته شود، این بدان معنی نیست که آماده تست واحد است و ممکن است امکان نوشتن تست وجود نداشته باشد.بنابراین چه چیزی یک تست واحد است؟ در بهترین حالت توابعی که مقداری را برمی گردادنند، بهترین حالت برای تست واحد است. اما در بیشتر موارد شما نیاز دارید تا تاثیر کد را بر روی عناصر صفحه نیز مشاهد نمایید.
ساخت تست واحد
برای تست پذیری بهتر، توابع جاوا اسکریپت و هر کد دیگری، آن را میبایست طوری بنویسید که مقادیر تاثیر گذار در اجرای تابع به عنوان ورودی تابع در نظر گرفته شده باشند و همیشه نتیجه به عنوان خروجی تابع برگردانده شود؛ قطعه کد زیر را در نظر بگیرید:
function prettyDate(time){ var date = new Date(time || ""), diff = (((new Date()).getTime() - date.getTime()) / 1000), day_diff = Math.floor(diff / 86400); if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) return; return day_diff == 0 && ( diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago"; }
تابع pertyDate اختلاف زمان حال را نسبت به زمان ورودی، بصورت یک رشته برمی گرداند. اما در اینجا مقدار زمان حال، در خط سوم، در خود تابع ایجاد شده است و در صورتی که بخواهیم برای چندین مقدار آن را تست کنیم زمان حال متفاوتی در نظر گرفته میشود و حداکثر، زمان 31 روز قبل را نمایش داده و در بقیه تاریخ ها undefined را بر میگرداند. برای تست واحد، چند تغییر میدهیم.
بهینه سازی، مرحله اول:
پارامتری به عنوان مقدار زمان جاری برای تابع در نظر میگیریم و تابع را جدا کرده و در یک فایل جداگانه قرار میدهیم. فایل prettydate.js بصورت زیر خواهد شد.
function prettyDate(now, time){ var date = new Date(time || ""), diff = (((new Date(now)).getTime() - date.getTime()) / 1000), day_diff = Math.floor(diff / 86400); if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) return; return day_diff == 0 && ( diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago"; }
حال یک تابع برای تست داریم، چند تست واحد واقعی مینویسیم
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Refactored date examples</title> <script src="prettydate.js"></script> <script> function test(then, expected) { results.total++; var result = prettyDate("2013/01/28 22:25:00", then); if (result !== expected) { results.bad++; console.log("Expected " + expected + ", but was " + result); } } var results = { total: 0, bad: 0 }; test("2013/01/28 22:24:30", "just now"); test("2013/01/28 22:23:30", "1 minute ago"); test("2013/01/28 21:23:30", "1 hour ago"); test("2013/01/27 22:23:30", "Yesterday"); test("2013/01/26 22:23:30", "2 days ago"); test("2012/01/26 22:23:30", undefined); console.log("Of " + results.total + " tests, " + results.bad + " failed, " + (results.total - results.bad) + " passed."); </script> </head> <body> </body> </html>
در کد بالا یک تابع بدون استفاده از Qunit برای تست واحد نوشته ایم که با آن تابع prettyDate را تست میکند. تابع test مقدار زمان حال و رشته خروجی را گرفته و آن را با تابع اصلی تست میکند در آخر تعداد تست ها، تستهای شکست خورده و تست های پاس شده گزارش داده میشود.
خروجی میتواند مانند زیر باشد:
Of 6 tests, 0 failed, 6 passed.Expected 2 day ago, but was 2 days ago. f 6 tests, 1 failed, 5 passed.
مطالب
EF Code First #15
EF Code first و بانکهای اطلاعاتی متفاوت
در آخرین قسمت از سری EF Code first بد نیست نحوه استفاده از بانکهای اطلاعاتی دیگری را بجز SQL Server نیز بررسی کنیم. در اینجا کلاسهای مدل و کدهای مورد استفاده نیز همانند قسمت 14 است و تنها به ذکر تفاوتها و نکات مرتبط اکتفاء خواهد شد.
حالت کلی پشتیبانی از بانکهای اطلاعاتی مختلف توسط EF Code first
EF Code first با کلیه پروایدرهای تهیه شده برای ADO.NET 3.5 که پشتیبانی از EF را لحاظ کرده باشند، به خوبی کار میکند. پروایدرهای مخصوص ADO.NET 4.0، تنها سه گزینه DeleteDatabase/CreateDatabase/DatabaseExists را نسبت به نگارش قبلی بیشتر دارند و EF Code first ویژگیهای بیشتری را طلب نمیکند.
بنابراین اگر حین استفاده از پروایدر ADO.NET مخصوص بانک اطلاعاتی خاصی با پیغام «CreateDatabase is not supported by the provider» مواجه شدید، به این معنا است که این پروایدر برای دات نت 4 به روز نشده است. اما به این معنا نیست که با EF Code first کار نمیکند. فقط باید یک دیتابیس خالی از پیش تهیه شده را به برنامه معرفی کنید تا مباحث Database Migrations به خوبی کار کنند؛ یا اینکه کلا میتوانید Database Migrations را خاموش کرده (متد Database.SetInitializer را با پارامتر نال فراخوانی کنید) و فیلدها و جداول را دستی ایجاد کنید.
استفاده از EF Code first با SQLite
برای استفاده از SQLite در دات نت ابتدا نیاز به پروایدر ADO.NET آن است: «مکان دریافت درایورهای جدید SQLite مخصوص دات نت»
ضمن اینکه به نکته «استفاده از اسمبلیهای دات نت 2 در یک پروژه دات نت 4» نیز باید دقت داشت.
و یکی از بهترین management studio هایی که برای آن تهیه شده: «SQLite Manager»
پس از دریافت پروایدر آن، ارجاعی را به اسمبلی System.Data.SQLite.dll به برنامه اضافه کنید.
سپس فایل کانفیگ برنامه را به نحو زیر تغییر دهید:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<configSections>
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.3.1.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
</configSections>
<startup useLegacyV2RuntimeActivationPolicy="true">
<supportedRuntime version="v4.0"/>
</startup>
<connectionStrings>
<clear/>
<add name="Sample09Context"
connectionString="Data Source=CodeFirst.db"
providerName="System.Data.SQLite"/>
</connectionStrings>
</configuration>
همانطور که ملاحظه میکنید، تفاوت آن با قبل، تغییر connectionString و providerName است.
اکنون اگر همان برنامه قسمت قبل را اجرا کنیم به خطای زیر برخواهیم خورد:
«The given key was not present in the dictionary»
در این مورد هم توضیح داده شد. سه گزینه DeleteDatabase/CreateDatabase/DatabaseExists در پروایدر جاری SQLite برای دات نت وجود ندارد. به همین جهت نیاز است فایل «CodeFirst.db» ذکر شده در کانکشن استرینگ را ابتدا دستی درست کرد.
برای مثال از افزونه SQLite Manager استفاده کنید. ابتدا یک بانک اطلاعاتی خالی را درست کرده و سپس دستورات زیر را بر روی بانک اطلاعاتی اجرا کنید تا دو جدول خالی را ایجاد کند (در برگه Execute sql افزونه SQLite Manager):
CREATE TABLE [Payees](
[Id] [integer] PRIMARY KEY AUTOINCREMENT NOT NULL,
[Name] [text] NULL,
[CreatedOn] [datetime] NOT NULL,
[CreatedBy] [text] NULL,
[ModifiedOn] [datetime] NOT NULL,
[ModifiedBy] [text] NULL
);
CREATE TABLE [Bills](
[Id] [integer] PRIMARY KEY AUTOINCREMENT NOT NULL,
[Amount] [float](18, 2) NOT NULL,
[Description] [text] NULL,
[CreatedOn] [datetime] NOT NULL,
[CreatedBy] [text] NULL,
[ModifiedOn] [datetime] NOT NULL,
[ModifiedBy] [text] NULL,
[Payee_Id] [integer] NULL
);
سپس سطر زیر را نیز به ابتدای برنامه اضافه کنید:
Database.SetInitializer<Sample09Context>(null);
به این ترتیب database migrations خاموش میشود و اکنون برنامه بدون مشکل کار خواهد کرد.
فقط باید به یک سری نکات مانند نوع دادهها در بانکهای اطلاعاتی مختلف دقت داشت. برای مثال integer در اینجا از نوع Int64 است؛ بنابراین در برنامه نیز باید به همین ترتیب تعریف شود تا نگاشتها به درستی انجام شوند.
در کل تنها مشکل پروایدر فعلی SQLite عدم پشتیبانی از مباحث database migrations است. این مورد را خاموش کرده و تغییرات ساختار بانک اطلاعاتی را به صورت دستی به بانک اطلاعاتی اعمال کنید. بدون مشکل کار خواهد کرد.
البته اگر به دنبال پروایدری تجاری با پشتیبانی از آخرین نگارش EF Code first هستید، گزینه زیر نیز مهیا است:
http://devart.com/dotconnect/sqlite/
برای مثال اگر علاقمند به استفاده از حالت تشکیل بانک اطلاعاتی SQLite در حافظه هستید (با رشته اتصالی ویژه Data Source=:memory:;Version=3;New=True;)، فعلا تنها گزینه مهیا استفاده از پروایدر تجاری فوق است؛ زیرا مبحث Database Migrations را به خوبی پشتیبانی میکند.
استفاده از EF Code first با SQL Server CE
قبلا در مورد «استفاده از SQL-CE به کمک NHibernate» مطلبی را در این سایت مطالعه کردهاید. سه مورد اول آن با EF Code first یکی است و تفاوتی نمیکند (یک سری بحث عمومی مشترک است). البته با یک تفاوت؛ در اینجا EF Code first قادر است یک بانک اطلاعاتی خالی SQL Server CE را به صورت خودکار ایجاد کند و نیازی نیست تا آنرا دستی ایجاد کرد. مباحث database migrations و به روز رسانی خودکار ساختار بانک اطلاعاتی نیز در اینجا پشتیبانی میشود.
برای استفاده از آن ابتدا ارجاعی را به اسمبلی System.Data.SqlServerCe.dll قرار گرفته در مسیر Program Files\Microsoft SQL Server Compact Edition\v4.0\Desktop اضافه کنید.
سپس رشته اتصالی به بانک اطلاعاتی و providerName را به نحو زیر تغییر دهید:
<connectionStrings>
<clear/>
<add name="Sample09Context"
connectionString="Data Source=mydb.sdf;Password=1234;Encrypt Database=True"
providerName="System.Data.SqlServerCE.4.0"/>
</connectionStrings>
بدون نیاز به هیچگونه تغییری در کدهای برنامه، همین مقدار تغییر در تنظیمات ابتدایی برنامه برای کار با SQL Server CE کافی است.
ضمنا مشکلی هم با فیلد Identity در آخرین نگارش EF Code first وجود ندارد؛ برخلاف حالت database first آن که پیشتر این اجازه را نمیداد و خطای «Server-generated keys and server-generated values are not supported by SQL Server Compact» را ظاهر میکرد.
استفاده از EF Code first با MySQL
برای استفاده از EF Code first با MySQL (نگارش 5 به بعد البته) ابتدا نیاز است پروایدر مخصوص ADO.NET آنرا دریافت کرد: (^)
که از EF نیز پشتیبانی میکند. پس از نصب آن، ارجاعی را به اسمبلی MySql.Data.dll قرار گرفته در مسیر Program Files\MySQL\MySQL Connector Net 6.5.4\Assemblies\v4.0 به پروژه اضافه نمائید.
سپس رشته اتصالی و providerName را به نحو زیر تغییر دهید:
<connectionStrings>
<clear/>
<add name="Sample09Context"
connectionString="Datasource=localhost; Database=testdb2; Uid=root; Pwd=123;"
providerName="MySql.Data.MySqlClient"/>
</connectionStrings>
<system.data>
<DbProviderFactories>
<remove invariant="MySql.Data.MySqlClient"/>
<add name="MySQL Data Provider"
invariant="MySql.Data.MySqlClient"
description=".Net Framework Data Provider for MySQL"
type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data, Version=6.5.4.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />
</DbProviderFactories>
</system.data>
همانطور که مشاهده میکنید در اینجا شماره نگارش دقیق پروایدر مورد استفاده نیز ذکر شده است. برای مثال اگر چندین پروایدر روی سیستم نصب است، با مقدار دهی DbProviderFactories میتوان از نگارش مخصوصی استفاده کرد.
با این تغییرات پس از اجرای برنامه قسمت قبل، به خطای زیر برخواهیم خورد:
The given key was not present in the dictionary
توضیحات این مورد با قسمت SQLite یکی است؛ به عبارتی نیاز است بانک اطلاعاتی testdb را دستی درست کرد. همچنین جداول و فیلدها را نیز باید دستی ایجاد کرد و database migrations را نیز باید خاموش کرد (پارامتر Database.SetInitializer را به نال مقدار دهی کنید).
برای این منظور یک دیتابیس خالی را ایجاد کرده و سپس دو جدول زیر را به آن اضافه کنید:
CREATE TABLE IF NOT EXISTS `bills` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`Amount` float DEFAULT NULL,
`Description` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
`CreatedOn` datetime NOT NULL,
`CreatedBy` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
`ModifiedOn` datetime NOT NULL,
`ModifiedBy` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
`Payee_Id` int(11) NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_persian_ci AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `payees` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`Name` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
`CreatedOn` datetime NOT NULL,
`CreatedBy` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
`ModifiedOn` datetime NOT NULL,
`ModifiedBy` varchar(400) CHARACTER SET utf8 COLLATE utf8_persian_ci NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_persian_ci AUTO_INCREMENT=1 ;
پس از این تغییرات، برنامه بدون مشکل اجرا خواهد شد (ایجاد بانک اطلاعاتی خالی به همراه ایجاد ساختار جداول و خاموش کردن database migrations که توسط این پروایدر پشتیبانی نمیشود).
به علاوه پروایدر تجاری دیگری هم در سایت devart.com برای MySQL و EF Code first مهیا است که مباحث database migrations را به خوبی مدیریت میکند.
مشکل!
اگر به همین نحو برنامه را اجرا کنیم، فیلدهای یونیکد فارسی ثبت شده در MySQL با «??????? ?? ????» مقدار دهی خواهند شد و تنظیم CHARACTER SET utf8 COLLATE utf8_persian_ci نیز کافی نبوده است (این مورد با SQLite یا نگارشهای مختلف SQL Server بدون مشکل کار میکند و نیاز به تنظیم اضافهتری ندارد):
ALTER TABLE `bills` DEFAULT CHARACTER SET utf8 COLLATE utf8_persian_ci
برای رفع این مشکل توصیه شده است که CharSet=UTF8 را به رشته اتصالی به بانک اطلاعاتی اضافه کنیم. اما در این حالت خطای زیر ظاهر میشود:
The provider did not return a ProviderManifestToken string
این مورد فقط به اشتباه بودن تعاریف رشته اتصالی بر میگردد؛ یا عدم پشتیبانی از تنظیم اضافهای که در رشته اتصالی ذکر شده است.
مقدار صحیح آن دقیقا مساوی CHARSET=utf8 است (با همین نگارش و رعایت کوچکی و بزرگی حروف؛ مهم!):
<connectionStrings>
<clear/>
<add name="Sample09Context"
connectionString="Datasource=localhost; Database=testdb; Uid=root; Pwd=123;CHARSET=utf8"
providerName="MySql.Data.MySqlClient"/>
</connectionStrings>
به این ترتیب، مشکل ثبت عبارات یونیکد فارسی برطرف میشود (البته جدول هم بهتر است به DEFAULT CHARACTER SET utf8 COLLATE utf8_persian_ci تغییر پیدا کند؛ مطابق دستور Alter ایی که در بالا ذکر شد).
مطالب دورهها
الگوریتم HiLo در RavenDB چیست؟
یکی از مشکلاتی که با اکثر سیستمهای رابطهای وجود دارد، نیاز به تکمیل یک تراکنش برای دریافت Id رکورد ثبت شده است. همین مساله علاوه بر خاتمه یک تراکنش و شروع تراکنشی دیگر، به معنای رفت و برگشت اضافهای به بانک اطلاعاتی نیز میباشد. به همین جهت در RavenDB برای ارائه راه حلی برای اینگونه مشکلات از الگوریتم HiLo برای تولید کلیدهای اسناد استفاده میگردد.
HiLo چیست؟
HiLo روشی است برای ارائه idهای عددی افزایش یابنده، جهت استفاده در محیطهای چندکاربری. در این حالت، هنوز هم سرور تولید idها را کنترل میکند، اما هربار بازهای از Idها را در اختیار کلاینتها قرار میدهد. به این ترتیب کلاینت، بدون نیاز به رفت و برگشت اضافهای به سرور، میتواند Id مورد نیاز خود را از بازه ارائه شده تامین کرده و هر زمانیکه این بازه به پایان رسید، سری دیگری را درخواست کند.
بدیهی است در این حالت، ارائه کلیه Idهای یک بازه از طرف سرور ممکن است کاری سنگین باشد. به همین جهت سرور در درخواست ابتدایی کلاینت، یک تک id را به نام «Hi» جهت مشخص سازی ابتدای بازه تولید idها، در اختیار او قرار میدهد. قسمت «Lo» توسط خود کلاینت مدیریت میشود و در این بین به هر کلاینت یک capacity یا تعداد مجاز idهایی را که میتواند تولید کند، از پیش اختصاص داده شده است:
بنابراین فرمول تولید idهای جدید در سمت کلاینت به نحو فوق خواهد بود. currentLo تا جایی افزایش مییابد که capacity آن کلاینت تنظیم شده است. سپس Hi جدیدی درخواست شده و Lo صفر میشود.
حالت پیش فرض کار کلاینتهای RavenDB نیز به همین نحو است و الگوریتم HiLo در DocumentConvention آن، از قبل تنظیم شده است و مزیت مهم روش HiLo این است که با هربار فراخوانی متد Store یک سشن، بدون رفت و برگشت اضافهتری به سرور، Idهای لازم در اختیار شما قرار خواهد گرفت و نیازی نیست تا زمان SaveChanges صبر کرد. به این ترتیب batch operations در RavenDB کارآیی بسیار بالایی خواهند یافت.
HiLo چیست؟
HiLo روشی است برای ارائه idهای عددی افزایش یابنده، جهت استفاده در محیطهای چندکاربری. در این حالت، هنوز هم سرور تولید idها را کنترل میکند، اما هربار بازهای از Idها را در اختیار کلاینتها قرار میدهد. به این ترتیب کلاینت، بدون نیاز به رفت و برگشت اضافهای به سرور، میتواند Id مورد نیاز خود را از بازه ارائه شده تامین کرده و هر زمانیکه این بازه به پایان رسید، سری دیگری را درخواست کند.
بدیهی است در این حالت، ارائه کلیه Idهای یک بازه از طرف سرور ممکن است کاری سنگین باشد. به همین جهت سرور در درخواست ابتدایی کلاینت، یک تک id را به نام «Hi» جهت مشخص سازی ابتدای بازه تولید idها، در اختیار او قرار میدهد. قسمت «Lo» توسط خود کلاینت مدیریت میشود و در این بین به هر کلاینت یک capacity یا تعداد مجاز idهایی را که میتواند تولید کند، از پیش اختصاص داده شده است:
(currentHi - 1)*capacity + (++currentLo)
حالت پیش فرض کار کلاینتهای RavenDB نیز به همین نحو است و الگوریتم HiLo در DocumentConvention آن، از قبل تنظیم شده است و مزیت مهم روش HiLo این است که با هربار فراخوانی متد Store یک سشن، بدون رفت و برگشت اضافهتری به سرور، Idهای لازم در اختیار شما قرار خواهد گرفت و نیازی نیست تا زمان SaveChanges صبر کرد. به این ترتیب batch operations در RavenDB کارآیی بسیار بالایی خواهند یافت.
قسمت اول این مطلب را در اینجا میتوانید مطالعه کنید. از سه سال قبل تا به این تاریخ، فرمت زیرنویسهای این سایت به صورت JSON تغییر پیدا کردهاست و یک چنین ساختار جدیدی را دارد:
که اگر بخواهیم کلاسهای معادل آنرا تشکیل دهیم، به ساختار زیر خواهیم رسید:
و بعد از تشکیل این ساختار که توسط منوی edit و گزینهی paste special ویژوال استودیو تشکیل شدهاست:
بارگذاری آن توسط کتابخانهی JSON.NET به صورت ذیل خواهد بود:
و پس از آن اگر حلقهای را بر روی ماژولها و سپس آیتمهای هر ماژول تشکیل دهیم، میتوان فرمت آنرا به فرمت استاندارد srt که قابلیت پخش در اکثر برنامههای video player را دارد (مانند kmplayer)، تبدیل کرد.
کدهای کامل این برنامه را از اینجا میتوانید دریافت کنید:
PluralsightJsonTranscripts.V1.0.7z
{ "userIsAuthorizedForCourseTranscripts": false, "modules": [ { "title": "Course Overview", "clips": [ { "title": "Course Overview", "playerParameters": "author=scott-allen&name=aspdotnet-core-1-0-fundamentals-m0&mode=live&clip=0&course=aspdotnet-core-1-0-fundamentals", "transcripts": [ ] } ] }, { "title": "Building Your First ASP.NET Core Application", "clips": [ { "title": "Introduction", "playerParameters": "author=scott-allen&name=aspdotnet-core-1-0-fundamentals-m1&mode=live&clip=0&course=aspdotnet-core-1-0-fundamentals", "transcripts": [ { "displayTime": 0.0, "text": "Hi! This is Scott, and this course will help you build your first application with ASP.NET Core." }, { "displayTime": 7.0, "text": "In this course, we'll be using Visual Studio and the new ASP.NET Framework to build a web application that" } ] } ] } ] }
public class PluralsightCourse { public bool UserIsAuthorizedForCourseTranscripts { get; set; } public PluralsightCourseItems[] Modules { get; set; } } public class PluralsightCourseItems { public string Title { get; set; } public PluralsightCourseClip[] Clips { get; set; } } public class PluralsightCourseClip { public string Title { get; set; } public string PlayerParameters { get; set; } public PluralsightCourseClipTranscript[] Transcripts { get; set; } } public class PluralsightCourseClipTranscript { public float DisplayTime { get; set; } public string Text { get; set; } }
بارگذاری آن توسط کتابخانهی JSON.NET به صورت ذیل خواهد بود:
public static PluralsightCourse ProcessJsonFile(string jsonData) { return JsonConvert.DeserializeObject<PluralsightCourse>(jsonData); }
کدهای کامل این برنامه را از اینجا میتوانید دریافت کنید:
PluralsightJsonTranscripts.V1.0.7z
امروزه استفاده از صفحات وب، در همه امور به خوبی به
چشم میخورد و تاثیر این فناوری را میتوان در تمام عرصههای تولید و
استفاده از نرم افزار دید. web worker یکی از فناوریهای تحت وب بوده که
توسط W3C ارائه شده است. وب ورکر به شما اجازه میدهد تا بتوانید عملیاتی را
که نیاز به زمان زیادی برای پردازش دارد، در پشت صحنه انجام دهید؛ بدون
اینکه وقفهای در پردازش UI ایجاد شود. وب ورکر حتی به شما اجازه میدهد
چند thread را همزمان اجرا کنید و پردازشهایی موازی یکدیگر داشته باشید. از
آنجا که وب ورکرها یک ترد پردازشی جدا از UI به حساب میآیند، شما دسترسی
به DOM ندارید؛ ولی میتوانید از طریق ارسال پیام، با صفحه وب تعامل داشته
باشد.
قبل از استفاده از وب ورکر، بهتر هست مرورگر را بررسی کنیم که آیا از این قابلیت پشتیبانی میکند یا خیر؟ روش بررسی کردن این قابلیت، شیوههای مختلفی دارد که به تعدادی از آنها اشاره میکنیم:
هر کدام از عبارات بالا را اگر در شرطی بگذارید و جواب true بازگردانند به معنی پشتیبانی مرورگر این ویژگی است. modernizr فریمورکی جهت بررسی قابلیتهای موجود در مرورگر است.
نحوه پشتیبانی وب ورکرها در مروگرهای مختلف به شرح زیر است:
سپس در فایل HTML به شکل زیر وب ورکر را مورد استفاده قرار میدهیم. در سازنده Worker، ما آدرس فایل js را وارد میکنیم و برای توقف آن نیز از متد terminate استفاده میکنیم:
در صورتی که خطایی در ورکر رخ بدهد، میتوانید از طریق متد onerror آن را دریافت کنید:
مقدار برگشتی event شامل اطلاعات زیادی در مورد خطاست که شامل نام و مسیر
فایل خطا، شماره خط و شماره ستون خطا، پیام خطا و ... میشود.
همچنین برای ورکر هم میتوانید پیامی را ارسال کنید، برای همین کد زیر را به کد ورکر اضافه میکنیم:
و در صفحه HTML هم کد دریافت پیام از ورکر را به شکل زیر تغییر میدهیم:
در این حالت اگر عدد به هشت برسد، ما به ورکر میگوییم که عدد را به صد تغییر بده.
روشهای ارسال پیام
به این نوع ارسال پیام، Structure Cloning گویند و با استفاده از این شیوه، امکان ارسال نوعهای مختلفی امکان پذیر شده است؛ مثل فایلها، Blobها، آرایهها و کلاسها و ... ولی باید دقت داشته باشید که این ارسال پیامها به صورت کپی بوده و آدرسی ارجاع داده نمیشود و باید مدنظر داشته باشید که ارسال یک فایل، به فرض پنجاه مگابایتی، به خوبی قابل تشخیص است. طبق نظر گوگل، از حجم 32 مگابایت به بعد، این گفته به خوبی مشهود بوده و زمانبر میشود. به همین علت فناوری با نام Transferable Objects ایجاد شده است که "کپی صفر" Zero-Copy را پیاده سازی میکند و باعث بهبود عملگر کپی میشود:
پارامتر اول آن، آرایه بافر شده است و دومی هم لیست آیتمهایی است که قرار است انتقال یابند:
یا ارسال اطلاعات بیشتر:
در صورتیکه بتواند انتقال را انجام بدهد، byteLength حجم اطلاعات ارسالی را
بر میگرداند؛ در غیر اینصورت عدد 0 را به عنوان خروجی بر میگرداند. در این پرسش و پاسخ میتوانید نمونه یک انتقال و دریافت را در این روش، ببینید.
نمودار زیر مقایسهای بین Structure Cloning و Transferable Objects است که توسط گوگل منتشر شده است:
که البته به طور خلاصهتری نیز میتوان نوشت:
Inline Worker
اگر بخواهید در همان صفحه اصلی یک ورکر را ایجاد کنید و فایل جاوا اسکریپتی خارجی نداشته باشید، میتوانید از inline worker استفاده کنید. در این روش باید یک نوع blob را ایجاد کنید:
کاری که متد حیرت
انگیز createObjectURL انجام میدهد این است که از دادههای ذخیره شده در یک
blob یا نوع فایل، یک آدرس ارجاعی شبیه آدرس زیر را ایجاد میکند:
آدرسهایی که این متد تولید میکند، یکتا بوده و تا پایان عمر صفحه، اعتبار
دارند. به همین دلیل هر موقع به آنها نیاز نداشتید، از دست آنها خلاص شوید،
تا حافظه به هدر نرود. برای آزادسازی حافظه میتوان دستور زیر را به کار
برد:
مرورگر کروم با دستور زیر به شما اجازه میدهد همه آدرسهای blobها را ببینید:
قبل از استفاده از وب ورکر، بهتر هست مرورگر را بررسی کنیم که آیا از این قابلیت پشتیبانی میکند یا خیر؟ روش بررسی کردن این قابلیت، شیوههای مختلفی دارد که به تعدادی از آنها اشاره میکنیم:
typeof(Worker) !== "undefined"
<script src="/js/modernizr-1.5.min.js"></script> Modernizr.webworkers
نحوه پشتیبانی وب ورکرها در مروگرهای مختلف به شرح زیر است:
برای ایجاد یک وب ورکر ابتدا لازم است تا کدهای پردازشی را داخل یک فایل js جداگانه بنویسیم. در این مثال ما قصد داریم که شمارندهای را بنویسیم:
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()", 500); } timedCount();
سپس در فایل HTML به شکل زیر وب ورکر را مورد استفاده قرار میدهیم. در سازنده Worker، ما آدرس فایل js را وارد میکنیم و برای توقف آن نیز از متد terminate استفاده میکنیم:
<!DOCTYPE html> <html> <head> <script> var worker; function Start() { worker=new Worker("webwroker-even-numbers.js"); worker.onmessage=(event)=> { document.getElementById("output").value=event.data; } } function Stop() { worker.terminate(); } </script> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="output"/> <button onclick="Start();">Start Worker</button> <button onclick="Stop();">Stop Worker</button> </body> </html>
worker.onerror = function (event) { console.log(event.message, event); };
همچنین برای ورکر هم میتوانید پیامی را ارسال کنید، برای همین کد زیر را به کد ورکر اضافه میکنیم:
self.onmessage=(event)=>{ i=event.data; };
worker.onmessage=(event)=> { document.getElementById("output").value=event.data; if(event.data==8) worker.postMessage(100); }
روشهای ارسال پیام
به این نوع ارسال پیام، Structure Cloning گویند و با استفاده از این شیوه، امکان ارسال نوعهای مختلفی امکان پذیر شده است؛ مثل فایلها، Blobها، آرایهها و کلاسها و ... ولی باید دقت داشته باشید که این ارسال پیامها به صورت کپی بوده و آدرسی ارجاع داده نمیشود و باید مدنظر داشته باشید که ارسال یک فایل، به فرض پنجاه مگابایتی، به خوبی قابل تشخیص است. طبق نظر گوگل، از حجم 32 مگابایت به بعد، این گفته به خوبی مشهود بوده و زمانبر میشود. به همین علت فناوری با نام Transferable Objects ایجاد شده است که "کپی صفر" Zero-Copy را پیاده سازی میکند و باعث بهبود عملگر کپی میشود:
worker.postMessage(arrayBuffer, [arrayBuffer]);
var ab = new ArrayBuffer(1); worker.postMessage(ab, [ab]); if (ab.byteLength) { alert('Transferables are not supported in your browser!'); } else { // Transferables are supported. }
worker.postMessage({data: ab1, moreData: ab2}, [ab1, ab2]);
نمودار زیر مقایسهای بین Structure Cloning و Transferable Objects است که توسط گوگل منتشر شده است:
RTT=Round Trip Time
نمودار
بالا برای یک فایل 32 مگابایتی است که زمان رفت به ورکر و پاسخ (برگشت از ورکر)
را اندازه گرفتهاند. در ستونهای اول، این موضوع برای فایرفاکس به روش
Structure Cloning به مدت 302 میلی ثانیه زمان برد که همین موضوع برای
Transferables حدود 6.6 میلی ثانیه زمان برد.
آقای اریک بایدلمن در بخش مهندسی کروم گوگل میگوید: همین سرعت به ما در انتقال تکسچرها و مشها در WebGL کمک میکند.
استفاده از اسکریپت خارجی
در صورتیکه قصد دارید از یک اسکرپیت خارجی، در ورکر استفاده کنید، تابع importScripts برای اینکار ایجاد شده است:
importScripts('script1.js'); importScripts('script2.js');
importScripts('script1.js', 'script2.js');
Inline Worker
اگر بخواهید در همان صفحه اصلی یک ورکر را ایجاد کنید و فایل جاوا اسکریپتی خارجی نداشته باشید، میتوانید از inline worker استفاده کنید. در این روش باید یک نوع blob را ایجاد کنید:
var blob = new Blob([ "onmessage = function(e) { postMessage('msg from worker'); }"]); // یک آدرس همانند آدرس ارجاع به فایل درست میکند var blobURL = window.URL.createObjectURL(blob); var worker = new Worker(blobURL); worker.onmessage = function(e) { // e.data... }; worker.postMessage(); // ورکر آغاز میشود
blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1
window.URL.revokeObjectURL(blobURL);
chrome://blob-internals