جهت اینکار یک پروژه از نوع class library ایجاد کنید. فایل class1.cs را که به طور پیش فرض ایجاد میشود، حذف کنید و رفرنسهای Microsoft.Web.Management.dll و Microsoft.Web.Administration.dll را از مسیر زیر اضافه کنید:
\Windows\system32\inetsrv
در مرحله بعدی در تب Build Events کد زیر را در بخش Post-build event command line اضافه کنید. این کد باعث میشود بعد از هر بار کامپایل پروژه، به طور خودکار در GAC ثبت شود:
call "%VS80COMNTOOLS%\vsvars32.bat" > NULL gacutil.exe /if "$(TargetPath)"
نکته:در صورتی که از VS2005 استفاده میکنید در تب Debug در قسمت Start External Program مسیر زیر را قرار بدهید. اینکار برای تست و دیباگینگ پروژه به شما کمک خواهد کرد. این تنظیم شامل نسخههای اکسپرس نمیشود.\windows\system32\inetsrv\inetmgr.exe
ساخت یک Module Provider
رابطهای کاربری IIS همانند هسته و کل سیستمش، ماژولار و قابل خصوصی سازی است. رابط کاربری، مجموعهای از ماژول هایی است که میتوان آنها را حذف یا جایگزین کرد. تگ ورودی یا معرفی برای هر UI یک module provider است. خیلی خودمانی، تگ ماژول پروایدر به معرفی یک UI در IIS میپردازد. لیستی از module providerها را میتوان در فایل زیر در تگ بخش <modules> پیدا کرد.
%windir%\system32\inetsrv\Administration.config
در اولین گام یک کلاس را به اسم imageCopyrightUIModuleProvider.cs ایجاد کرده و سپس آنرا به کد زیر، تغییر میدهیم. کد زیر با استفاده از ModuleDefinition یک نام به تگ Module Provider داده و کلاس imageCopyrightUI را که بعدا تعریف میکنیم، به عنوان مدخل entry رابط کاربری معرفی کرده:
using System; using System.Security; using Microsoft.Web.Management.Server; namespace IIS7Demos { class imageCopyrightUIProvider : ModuleProvider { public override Type ServiceType { get { return null; } } public override ModuleDefinition GetModuleDefinition(IManagementContext context) { return new ModuleDefinition(Name, typeof(imageCopyrightUI).AssemblyQualifiedName); } public override bool SupportsScope(ManagementScope scope) { return true; } } }
با ارث بری از کلاس module provider، سه متد بازنویسی میشوند که یکی از آن ها SupportsScope هست که میدان عمل پروایدر را مشخص میکند، مانند اینکه این پرواید در چه میدانی باید کار کند که میتواند سه گزینهی server,site,application باشد. در کد زیر مثلا میدان عمل application انتخاب شده است ولی در کد بالا با برگشت مستقیم true، همهی میدان را جهت پشتیبانی از این پروایدر اعلام کردیم.
public override bool SupportsScope(ManagementScope scope) { return (scope == ManagementScope.Application) ; }
حالا که پروایدر (معرف رابط کاربری به IIS) تامین شده، نیاز است قلب کار یعنی ماژول معرفی گردد. اصلیترین متدی که باید از اینترفیس ماژول پیاده سازی شود متد initialize است. این متد جایی است که تمام عملیات در آن رخ میدهد. در کلاس زیر imageCopyrightUI ما به معرفی مدخل entry رابط کاربری میپردازیم. در سازندههای این متد، پارامترهای نام، صفحه رابط کاربری وتوضیحی در مورد آن است. تصویر کوچک و بزرگ جهت آیکن سازی (در صورت عدم تعریف آیکن، چرخ دنده نمایش داده میشود) و توصیفهای بلندتر را نیز شامل میشود.
internal class imageCopyrightUI : Module { protected override void Initialize(IServiceProvider serviceProvider, ModuleInfo moduleInfo) { base.Initialize(serviceProvider, moduleInfo); IControlPanel controlPanel = (IControlPanel)GetService(typeof(IControlPanel)); ModulePageInfo modulePageInfo = new ModulePageInfo(this, typeof(imageCopyrightUIPage), "Image Copyright", "Image Copyright",Resource1.Visual_Studio_2012,Resource1.Visual_Studio_2012); controlPanel.RegisterPage(modulePageInfo); } }
شیء ControlPanel مکانی است که قرار است آیکن ماژول نمایش داده شود. شکل زیر به خوبی نام همه قسمتها را بر اساس نام کلاس و اینترفیس آنها دسته بندی کرده است:
پس با تعریف این کلاس جدید ما روی صفحهی کنترل پنل IIS، یک آیکن ساخته و صفحهی رابط کاربری را به نام imageCopyrightUIPage، در آن ریجستر میکنیم. این کلاس را پایینتر شرح دادهایم. ولی قبل از آن اجازه بدهید تا انواع کلاس هایی را که برای ساخت صفحه کاربرد دارند، بررسی نماییم. در این مثال ما با استفاده از پایهایترین کلاس، سادهترین نوع صفحه ممکن را خواهیم ساخت. 4 کلاس برای ساخت یک صفحه وجود دارند که بسته به سناریوی کاری، شما یکی را انتخاب میکنید.
ModulePage | شامل اساسیترین متدها و سورسها شده و هیچگونه رابط کاری ویژهای را در اختیار شما قرار نمیدهد. تنها یک صفحهی خام به شما میدهد که میتوانید از آن استفاده کرده یا حتی با ارث بری از آن، کلاسهای جدیدتری را برای ساخت صفحات مختلف و ویژهتر بسازید. در حال حاضر که هیچ کدام از ویژگیهای IIS فعلی از این کلاس برای ساخت رابط کاربری استفاده نکردهاند. |
ModuleDialogPage | یک صفحه شبیه به دیالوگ را ایجاد میکند و شامل دکمههای Apply و Cancel میشود به همراه یک سری متدهای اضافیتر که اجازهی override کردن آنها را دارید. همچنین یک سری از کارهایی چون refresh و از این دست عملیات خودکار را نیز انجام میدهد. از نمونه رابطهایی که از این صفحات استفاده میکنند میتوان machine key و management service را اسم برد. |
ModulePropertiesPage | این صفحه یک رابط کاربری را شبیه پنجره property که در ویژوال استادیو وجود دارد، در دسترس شما قرار میدهد. تمام عناصر آن در یک حالت گرید grid لیست میشوند. از نمونههای موجود میتوان به CGI,ASP.Net Compilation اشاره کرد. |
ModuleListPage | این کلاس برای مواقعی کاربرد دارد که شما قرار است لیستی از آیتمها را نشان دهید. در این صفحه شما یک ListView دارید که میتوانید عملیات جست و جو، گروه بندی و نحوهی نمایش لیست را روی آن اعمال کنید. |
public sealed class imageCopyrightUIPage : ModulePage { public string message; public bool featureenabled; public string color; ComboBox _colCombo = new ComboBox(); TextBox _msgTB = new TextBox(); CheckBox _enabledCB = new CheckBox(); public imageCopyrightUIPage() { this.Initialize(); } void Initialize() { Label crlabel = new Label(); crlabel.Left = 50; crlabel.Top = 100; crlabel.AutoSize = true; crlabel.Text = "Enable Image Copyright:"; _enabledCB.Text = ""; _enabledCB.Left = 200; _enabledCB.Top = 100; _enabledCB.AutoSize = true; Label msglabel = new Label(); msglabel.Left = 150; msglabel.Top = 130; msglabel.AutoSize = true; msglabel.Text = "Message:"; _msgTB.Left = 200; _msgTB.Top = 130; _msgTB.Width = 200; _msgTB.Height = 50; Label collabel = new Label(); collabel.Left = 160; collabel.Top = 160; collabel.AutoSize = true; collabel.Text = "Color:"; _colCombo.Left = 200; _colCombo.Top = 160; _colCombo.Width = 50; _colCombo.Height = 90; _colCombo.Items.Add((object)"Yellow"); _colCombo.Items.Add((object)"Blue"); _colCombo.Items.Add((object)"Red"); _colCombo.Items.Add((object)"White"); Button apply = new Button(); apply.Text = "Apply"; apply.Click += new EventHandler(this.applyClick); apply.Left = 200; apply.AutoSize = true; apply.Top = 250; Controls.Add(crlabel); Controls.Add(_enabledCB); Controls.Add(collabel); Controls.Add(_colCombo); Controls.Add(msglabel); Controls.Add(_msgTB); Controls.Add(apply); } public void ReadConfig() { try { ServerManager mgr; ConfigurationSection section; mgr = new ServerManager(); Configuration config = mgr.GetWebConfiguration( Connection.ConfigurationPath.SiteName, Connection.ConfigurationPath.ApplicationPath + Connection.ConfigurationPath.FolderPath); section = config.GetSection("system.webServer/imageCopyright"); color = (string)section.GetAttribute("color").Value; message = (string)section.GetAttribute("message").Value; featureenabled = (bool)section.GetAttribute("enabled").Value; } catch { } } void UpdateUI() { _enabledCB.Checked = featureenabled; int n = _colCombo.FindString(color, 0); _colCombo.SelectedIndex = n; _msgTB.Text = message; } protected override void OnActivated(bool initialActivation) { base.OnActivated(initialActivation); if (initialActivation) { ReadConfig(); UpdateUI(); } } private void applyClick(Object sender, EventArgs e) { try { UpdateVariables(); ServerManager mgr; ConfigurationSection section; mgr = new ServerManager(); Configuration config = mgr.GetWebConfiguration ( Connection.ConfigurationPath.SiteName, Connection.ConfigurationPath.ApplicationPath + Connection.ConfigurationPath.FolderPath ); section = config.GetSection("system.webServer/imageCopyright"); section.GetAttribute("color").Value = (object)color; section.GetAttribute("message").Value = (object)message; section.GetAttribute("enabled").Value = (object)featureenabled; mgr.CommitChanges(); } catch { } } public void UpdateVariables() { featureenabled = _enabledCB.Checked; color = _colCombo.Text; message = _msgTB.Text; } }
mgr.CommitChanges();
%vs110comntools%\vsvars32.bat
GACUTIL /l ClassLibrary1
<add name="imageCopyrightUI" type="ClassLibrary1.imageCopyrightUIProvider, ClassLibrary1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d0b3b3b2aa8ea14b"/>
%windir%\system32\inetsrv\config\administration.config
از آنجا که این مقاله طولانی شده است، باقی موارد ویرایشی روی این UI را در مقاله بعدی بررسی خواهیم کرد.
پیش از ادامهی مثال قسمت قبل، قصد داریم تمام کدهای موجود در فایل Pages\Index.razor را به یک فایل اختصاصی آنها منتقل کرده و مسیریابی و منوی آنرا تکمیل کنیم. به همین جهت در پوشهی Pages، یک پوشهی جدید را به نام LearnBlazor ایجاد کرده و درون آن، فایل خالی BindProp.razor را ایجاد میکنیم. سپس تمام محتوای فایل Pages\Index.razor را cut کرده و به درون فایل جدید Pages\LearnBlazor\BindProp.razor، منتقل و Paste میکنیم.
پس از این تغییرات، در فایل Pages\Index.razor، مهمترین سطر آن، همان اولین سطر تعریف مسیریابی آن خواهد بود و هر محتوای دلخواهی که علاقمند بودید:
@page "/" <h1>Hello, world!</h1>
@page "/bindprop"
<li class="nav-item px-3"> <NavLink class="nav-link" href="bindprop"> <span class="oi oi-list-rich" aria-hidden="true"></span> Bind Properties </NavLink> </li>
نمایش لیست اتاقهای تعریف شده، به همراه ویژگیهای آنها
در قسمت قبل، نمایش ردیفی لیست اتاقهای تعریف شده را مشاهده کردید. در این قسمت میخواهیم هر اتاق تعریف شده را در یک card جداگانه نمایش دهیم. هدف این است که در ابتدا به یک UI متداول شلوغ برسیم و بعد شروع کنیم به Refactoring این UI پیچیده، به کامپوننتهای کوچکتر تشکیل دهندهی آن، جهت مدیریت سادهتر این UI و درک بهتر آن. بنابراین در ابتدا با یک کامپوننت کلی شلوغ، شروع خواهیم کرد.
به همین جهت فایل جدید Pages\LearnBlazor\DemoHotel.razor را برای نمایش لیست اتاقهای موجود اضافه میکنیم. سپس محتوای آنرا به صورت زیر تغییر خواهیم داد:
@page "/demoHotel" <h3>Hotel Rooms</h3> <div class="border p-2 mt-2" style="background-color:azure"> <h2 class="text-info">Rooms List</h2> <div class="row container"> @foreach (var room in Rooms) { <div class="bg-light border p-2 col-5 ml-2"> <h4 class="text-secondary">Room - @room.Id</h4> @room.Name<br /> @room.Price.ToString("c")<br /> <input type="checkbox" @bind-value="room.IsActive" checked="@(room.IsActive?"checked":null)" /> Is Active<br /> <span>This room is @(room.IsActive?"Active": "InActive")</span> @if (room.IsActive) { @foreach (var roomProp in room.RoomProps) { <p>@roomProp.Name - @roomProp.Value</p> } } <input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" /> </div> } </div> </div>
- سپس مسیریابی منتهی به این کامپوننت، به آدرس demoHotel/ تنظیم شدهاست. این مسیریابی را در کامپوننت Shared\NavMenu.razor به صورت زیر مورد استفاده قرار خواهیم داد تا مدخل منوی جدیدی برای آن تهیه شود:
<li class="nav-item px-3"> <NavLink class="nav-link" href="demoHotel"> <span class="oi oi-list-rich" aria-hidden="true"></span> Demo Hotel </NavLink> </li>
تبدیل دکمههای حذف و ویرایش هر اتاق به یک کامپوننت جدید
اکنون میخواهیم کامپوننت شلوغ Pages\LearnBlazor\DemoHotel.razor را به چند زیر کامپوننت بشکنیم تا هر کدام وظایف خاص خود را انجام دهند و در نهایت به یک UI قابل درکتر برسیم. برای مثال میخواهیم دکمههای حذف و ویرایش هر اتاق را به یک کامپوننت جدید منتقل کنیم تا هم این UI خلوتتر شود و هم اگر در قسمت دیگری از برنامه نیاز به یک چنین دکمههایی بود، بتوان از آن کامپوننت اختصاصی، استفادهی مجدد کرد.
برای این منظور ابتدا پوشهی جدید Pages\LearnBlazor\LearnBlazorComponents را افزوده و سپس در داخل آن، فایل جدید کامپوننت EditDeleteButton.razor را نیز ایجاد میکنیم. در این فایل جدید در ابتدا کدهای دو دکمهی تعریف شده را از کامپوننت DemoHotel.razor انتخاب و cut کرده و سپس در این فایل جدید paste میکنیم. در این کامپوننت جدید، نیازی به تعریف page@ و مسیریابی آن نیست. به این معنا که این کامپوننت، یک کامپوننت اشتراکی است و routable نیست و قرار است در داخل یک کامپوننت دیگر مورد استفاده قرار گیرد.
بنابراین تا اینجا محتوای کامپوننت EditDeleteButton.razor فقط از دو سطر زیر تشکیل میشود:
<input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" />
<BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents.EditDeleteButton></BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents.EditDeleteButton>
@using BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents
اکنون میتوان تعریف مدخل کامپوننت را به صورت زیر خلاصه کرد:
<EditDeleteButton></EditDeleteButton>
ارسال پارامترها به یک کامپوننت
فرض کنید قصد داریم دکمههای ویرایش و حذف را تنها به کاربران ادمین نمایش دهیم. به همین جهت نیاز است بتوان پارامتری مانند IsAdmin را به کامپوننت EditDeleteButton ارسال کرد. برای اینکار کامپوننت Pages\LearnBlazor\LearnBlazorComponents\EditDeleteButton.razor را به صورت زیر ویرایش میکنیم:
@if (IsAdmin) { <input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" /> } @code { [Parameter] public bool IsAdmin { get; set; } }
پس از تعریف این پارامتر ورودی، روش استفادهی از آن در کامپوننت DemoHotel به صورت زیر است:
<EditDeleteButton IsAdmin="true"></EditDeleteButton>
انتقال هر اتاق به کامپوننت مجزای خاص خودش
در ادامه میخواهیم محتوای حلقهی foreach (var room in Rooms)@ کامپوننت DemoHotel را به طور کامل cut کرده و در یک کامپوننت جدید paste کنیم تا به حلقهای خواناتر و با مسئولیتهای کمتری برسیم. نگهداری کدهایی که قسمتهای مختلف آن از هم ایزوله شدهاند و دامنهی تغییرات آنها کاملا مشخص و محدود است، در طول زمان بسیار سادهتر از نگهداری کدهای UI ای در هم تنیدهاست.
به همین جهت ابتدا کامپوننت جدید Pages\LearnBlazor\LearnBlazorComponents\IndividualRoom.razor را ایجاد میکنیم و سپس، هر آنچه داخل حلقهی foreach یاد شده قرار دارد را انتخاب و cut کرده و درون این کامپوننت جدید paste میکنیم:
<div class="bg-light border p-2 col-5 offset-1"> <h4 class="text-secondary">Room - @Room.Id</h4> @Room.Name<br /> @Room.Price.ToString("c")<br /> <input type="checkbox" @bind-value="Room.IsActive" checked="@(Room.IsActive?"checked":null)" /> Is Active<br /> <span>This room is @(Room.IsActive?"Active": "InActive")</span> @if (Room.IsActive) { @foreach (var roomProp in Room.RoomProps) { <p>@roomProp.Name - @roomProp.Value</p> } } <EditDeleteButton IsAdmin="true"></EditDeleteButton> </div> @code { [Parameter] public BlazorRoom Room { get; set; } }
پس از این تغییر، کدهای حلقهی foreach کامپوننت DemoHotel.razor به صورت زیر خلاصه میشوند. در اینجا روش ارسال یک شیء را به پارامتر Room نیز مشاهده میکنید (البته ذکر @ در اینجا الزامی نیست و میشد از روش مقدار دهی "Room="room نیز استفاده کرد):
<div class="row container"> @foreach (var room in Rooms) { <IndividualRoom Room="@room"></IndividualRoom> } </div>
یک تمرین: نمایش لیست امکانات رفاهی هتل
پس از نمایش لیست اتاقهای یک هتل، قصد داریم لیست امکانات رفاهی آنرا نیز نمایش دهیم:
مدل این امکانات را به صورت زیر به پوشهی Models برنامه اضافه میکنیم:
namespace BlazorServerSample.Models { public class BlazorAmenity { public int Id { get; set; } public string Name { get; set; } public string Description { get; set; } } }
@code{ List<BlazorAmenity> AmenitiesList = new List<BlazorAmenity>(); // ... protected override void OnInitialized() { base.OnInitialized(); // ... AmenitiesList.Add(new BlazorAmenity { Id = 111, Name = "Gym", Description = "24x7 gym room is available." }); AmenitiesList.Add(new BlazorAmenity { Id = 222, Name = "Swimming Pool", Description = "Pool room is open from 6am to 10pm." }); AmenitiesList.Add(new BlazorAmenity { Id = 333, Name = "Free Brakfast", Description = "Enjoy free breakfast at out hotel." }); } }
اکنون برای نمایش تک تک عناصر این لیست، ابتدا یک کامپوننت منحصر به یک BlazorAmenity را به نام Pages\LearnBlazor\LearnBlazorComponents\IndividualAmenity.razor ایجاد میکنیم با این محتوا:
<div class="bg-light border p-2 col-5 offset-1 mt-2"> <h4 class="text-secondary">Amenity - @Amenity.Id</h4> @Amenity.Name<br /> @Amenity.Description<br /> </div> @code { [Parameter] public BlazorAmenity Amenity { get; set; } }
در آخر پس از تعریف کامپوننت IndividualAmenity.razor، روش استفادهی از آن در کامپوننت DemoHotel به صورت زیر است:
<div class="col-12 mt-4"> <h4 class="text-info">Hotel Amenities</h4> </div> @foreach (var amenity in AmenitiesList) { <IndividualAmenity Amenity="@amenity"></IndividualAmenity> }
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-05.zip
ثبت برنامهی خود در گوگل و انجام تنظیمات آن
اولین کاری که برای استفاده از نگارش سوم Google Analytics API باید صورت گیرد، ثبت برنامهی خود در Google Developer Console است. برای این منظور ابتدا به آدرس ذیل وارد شوید:
سپس بر روی دکمهی Create project کلیک کنید. نام دلخواهی را وارد کرده و در ادامه بر روی دکمهی Create کلیک نمائید تا پروفایل این پروژه ایجاد شود.
تنها نکتهی مهم این قسمت، بخاطر سپردن نام پروژه است. زیرا از آن جهت اتصال به API گوگل استفاده خواهد شد.
پس از ایجاد پروژه، به صفحهی آن وارد شوید و از منوی سمت چپ صفحه، گزینهی Credentials را انتخاب کنید. در ادامه در صفحهی باز شده، بر روی دکمهی Create new client id کلیک نمائید.
در صفحهی باز شده، گزینهی Service account را انتخاب کنید. اگر سایر گزینهها را انتخاب نمائید، کاربری که قرار است از API استفاده کند، باید بتواند توسط مرورگر نصب شدهی بر روی کامپیوتر اجرا کنندهی برنامه، یکبار به گوگل لاگین نماید که این مورد مطلوب برنامههای وب و همچنین سرویسها نیست.
در اینجا ابتدا یک فایل مجوز p12 را به صورت خودکار دریافت خواهید کرد و همچنین پس از ایجاد client id، نیاز است، ایمیل آنرا جایی یادداشت نمائید:
از این ایمیل و همچنین فایل p12 ارائه شده، جهت لاگین به سرور استفاده خواهد شد.
همچنین نیاز است تا به برگهی APIs پروژهی ایجاد شده رجوع کرد و گزینهی Analytics API آنرا فعال نمود:
تا اینجا کار ثبت و فعال سازی برنامهی خود در گوگل به پایان میرسد.
دادن دسترسی به Client ID ثبت شده در برنامهی Google Analytics
پس از اینکه Client ID سرویس خود را ثبت کردید، نیاز است به اکانت Google Analytics خود وارد شوید. سپس در منوی آن، گزینهی Admin را پیدا کرده و به آن قسمت، وارد شوید:
در ادامه به گزینهی User management آن وارد شده و به ایمیل Client ID ایجاد شده در قسمت قبل، دسترسی خواندن و آنالیز را اعطاء کنید:
در صورت عدم رعایت این مساله، کلاینت API، قادر به دسترسی به Google Analytics نخواهد بود.
استفاده از نگارش سوم Google Analytics API در دات نت
قسمت مهم کار، تنظیمات فوق است که در صورت عدم رعایت آنها، شاید نصف روزی را مشغول به دیباگ برنامه شوید. در ادامه نیاز است پیشنیازهای دسترسی به نگارش سوم Google Analytics API را نصب کنیم. برای این منظور، سه بستهی نیوگت ذیل را توسط کنسول پاورشل نیوگت، به برنامه اضافه کنید:
PM> Install-Package Google.Apis PM> Install-Package Google.Apis.auth PM> Install-Package Google.Apis.Analytics.v3
using System; using System.Linq; using System.Security.Cryptography.X509Certificates; using Google.Apis.Analytics.v3; using Google.Apis.Analytics.v3.Data; using Google.Apis.Auth.OAuth2; using Google.Apis.Services; namespace GoogleAnalyticsAPIv3Tests { public class AnalyticsQueryParameters { public DateTime Start { set; get; } public DateTime End { set; get; } public string Dimensions { set; get; } public string Filters { set; get; } public string Metrics { set; get; } } public class AnalyticsAuthentication { public Uri SiteUrl { set; get; } public string ApplicationName { set; get; } public string ServiceAccountEmail { set; get; } public string KeyFilePath { set; get; } public string KeyFilePassword { set; get; } public AnalyticsAuthentication() { KeyFilePassword = "notasecret"; } } public class GoogleAnalyticsApiV3 { public AnalyticsAuthentication Authentication { set; get; } public AnalyticsQueryParameters QueryParameters { set; get; } public GaData GetData() { var service = createAnalyticsService(); var profile = getProfile(service); var query = service.Data.Ga.Get("ga:" + profile.Id, QueryParameters.Start.ToString("yyyy-MM-dd"), QueryParameters.End.ToString("yyyy-MM-dd"), QueryParameters.Metrics); query.Dimensions = QueryParameters.Dimensions; query.Filters = QueryParameters.Filters; query.SamplingLevel = DataResource.GaResource.GetRequest.SamplingLevelEnum.HIGHERPRECISION; return query.Execute(); } private AnalyticsService createAnalyticsService() { var certificate = new X509Certificate2(Authentication.KeyFilePath, Authentication.KeyFilePassword, X509KeyStorageFlags.Exportable); var credential = new ServiceAccountCredential( new ServiceAccountCredential.Initializer(Authentication.ServiceAccountEmail) { Scopes = new[] { AnalyticsService.Scope.AnalyticsReadonly } }.FromCertificate(certificate)); return new AnalyticsService(new BaseClientService.Initializer { HttpClientInitializer = credential, ApplicationName = Authentication.ApplicationName }); } private Profile getProfile(AnalyticsService service) { var accountListRequest = service.Management.Accounts.List(); var accountList = accountListRequest.Execute(); var site = Authentication.SiteUrl.Host.ToLowerInvariant(); var account = accountList.Items.FirstOrDefault(x => x.Name.ToLowerInvariant().Contains(site)); var webPropertyListRequest = service.Management.Webproperties.List(account.Id); var webPropertyList = webPropertyListRequest.Execute(); var sitePropertyList = webPropertyList.Items.FirstOrDefault(a => a.Name.ToLowerInvariant().Contains(site)); var profileListRequest = service.Management.Profiles.List(account.Id, sitePropertyList.Id); var profileList = profileListRequest.Execute(); return profileList.Items.FirstOrDefault(a => a.Name.ToLowerInvariant().Contains(site)); } } }
مثالی از نحوه استفاده از کلاس GoogleAnalyticsApiV3
در ادامه یک برنامهی کنسول را ملاحظه میکنید که از کلاس GoogleAnalyticsApiV3 استفاده میکند:
using System; using System.Collections.Generic; using System.Linq; namespace GoogleAnalyticsAPIv3Tests { class Program { static void Main(string[] args) { var statistics = new GoogleAnalyticsApiV3 { Authentication = new AnalyticsAuthentication { ApplicationName = "My Project", KeyFilePath = "811e1d9976cd516b55-privatekey.p12", ServiceAccountEmail = "10152bng4j3mq@developer.gserviceaccount.com", SiteUrl = new Uri("https://www.dntips.ir/") }, QueryParameters = new AnalyticsQueryParameters { Start = DateTime.Now.AddDays(-7), End = DateTime.Now, Dimensions = "ga:date", Filters = null, Metrics = "ga:users,ga:sessions,ga:pageviews" } }.GetData(); foreach (var result in statistics.TotalsForAllResults) { Console.WriteLine(result.Key + " -> total:" + result.Value); } Console.WriteLine(); foreach (var row in statistics.ColumnHeaders) { Console.Write(row.Name + "\t"); } Console.WriteLine(); foreach (var row in statistics.Rows) { var rowItems = (List<string>)row; Console.WriteLine(rowItems.Aggregate((s1, s2) => s1 + "\t" + s2)); } Console.ReadLine(); } } }
چند نکته
ApplicationName همان نام پروژهای است که ابتدای کار، در گوگل ایجاد کردیم.
KeyFilePath مسیر فایل مجوز p12 ایی است که گوگل در حین ایجاد اکانت سرویس، در اختیار ما قرار میدهد.
ServiceAccountEmail آدرس ایمیل اکانت سرویس است که در قسمت ادمین Google Analytics به آن دسترسی دادیم.
SiteUrl آدرس سایت شما است که هم اکنون در Google Analytics دارای یک اکانت و پروفایل ثبت شدهاست.
توسط AnalyticsQueryParameters میتوان نحوهی کوئری گرفتن از Google Analytics را مشخص کرد. تاریخ شروع و پایان گزارش گیری در آن مشخص هستند. در مورد پارامترهایی مانند Dimensions و Metrics بهتر است به مرجع کامل آن در گوگل مراجعه نمائید:
Dimensions & Metrics Reference
برای نمونه در مثال فوق، تعداد کاربران، سشنهای آن و همچنین تعداد بار مشاهدهی صفحات، گزارشگیری میشود.
برای مطالعه بیشتر
Using Google APIs in Windows Store Apps
How To Use Google Analytics From C# With OAuth
Google Analytic’s API v3 with C#
.NET Library for Accessing and Querying Google Analytics V3 via Service Account
Google OAuth2 C#
لینکهای هفته دوم دی
وبلاگها ، سایتها و مقالات ایرانی (داخل و خارج از ایران)
- شیوهنامه فارسیپسند گوگلخوان، نسخه ۰.۱.۱ (کار جالبی است. آشنایی با افزونه استایلیش)
ASP. Net
طراحی و توسعه وب
PHP
اسکیوال سرور
سی شارپ
SharePoint
عمومی دات نت
ویندوز
مسایل اجتماعی و انسانی برنامه نویسی
متفرقه
- آشنایی با لولههای یاهو و همچنین نمونهای دیگر
سوال: چگونه این فایل را در Jcenter آپلود کنیم؟
فرآیندی که در این نوشتار قصد داریم دنبال شود شامل مراحل زیر است:
ابتدا کتابخانهی خودمان را روی جی سنتر قرار داده و در صورتیکه علاقه داشته باشیم، آن را به mavenCentral هم انتقال میدهیم.
ابتدا نیاز است در سایت bintray ثبت نام کنید و با حساب جدید وارد شوید و گزینهی maven را انتخاب کنید.
سپس روی گزینهی Add New Package کلیک کنید تا یک پکیج جدید را ایجاد کنیم.
در صفحهای که باز میشود، اطلاعات مربوط به این پکیج را وارد کنید که عموما شامل نام پکیج، مجوز آن، کلمات کلیدی، لینک گزارش باگ و .. میشود. در انتخاب نام پکیج، قانون اجباری یا خاصی وجود ندارد؛ ولی توصیه میشود که از حروف کوچک و - استفاده گردد. بعد از پرکردن فیلدهای الزامی، وارد صفحهی جزئیات پکیج میشوید که در آن فیلدهای اضافهتری نیز وجود دارند که میتوانید در صورت تمایل آنها را پر کنید. همچنین در بالای صفحه لینک به صفحهی اختصاصی این پکیج نیز وجود دارد که در زیر عبارت Edit Package قرار گرفته است.
پی نوشت : اگر قصد آپلود کتابخانهی خود را در این سایت ندارید، میتوانید این سوال و مرحلهی امضای خودکار را از مراحل کاری خود حذف کنید.
سوال: چگونه این فایل را در SonaType آپلود کنیم؟
گام اول: ابتدا باید در سایت ثبت نام کنید. پس به این صفحه رفته و ثبت نام کنید. سپس در یک مرحلهی غیرمنطقی باید یک issue توسط سیستم JIRA ایجاد کنید. برای همین گزینهی Creare را در بالای صفحه بزنید. اطلاعات زیر را به ترتیب پر کنید:
Project: Community Support - Open Source Project Repository Hosting Issue Type: New Project Summary: مثلا نام پروژه خودتان را بنویسید یک نام پکیج که سعی کنید کتابخانههای هم خانواده این اشتراک را داشته باشند که در یک گروه قرار بگیرند Group Id: AndroidBreadCrumb.Plus آدرس جایی که پروژه قرار دارد Project URL: https://github.com/yeganehaym/AndroidBreadCrumb //آدرس سیستم کنترل نسخه SCM url: https://github.com/yeganehaym/AndroidBreadCrumb
فعال سازی امضای خودکار در Bintray
همانطور که در ابتدای مقاله گفتیم، میخواهیم کتابخانهی خود را از طریق jcenter به maven ارسال کنیم. برای همین نیاز داریم که ابتدا کتابخانهی خود را امضا کنیم. برای اینکار باید از طریق GPG یک کلید بسازیم. ساخت کلید به این شیوه، قبلا در مقالهی «ساخت کلیدهای امنیتی با GnuPG» توضیح داده شد و از تکرار آن خودداری میکنیم. تنها به ذکر این نکته بسنده میکنیم که شما باید یک کلید ساخته و آن را به سرور کلیدها ارسال کنید و سپس کلید متنی عمومی و خصوصی آن را در پروفایل bintray برگهی GPG Signing درج کنید.
این تنظیم از این پس بر روی تمامی کتابخانهها اعمال میشود.
سوال : چگونه پروژهی اندرویدی خودم را کامپایل کنم؟
فایل build.gradle پروژه را باز کنید و پلاگین bintray را به آن معرفی کنید:
dependencies { classpath 'com.android.tools.build:gradle:1.2.2' classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.2' classpath 'com.github.dcendents:android-maven-plugin:1.2' }
bintray.user=YOUR_BINTRAY_USERNAME bintray.apikey=YOUR_BINTRAY_API_KEY bintray.gpg.password=YOUR_GPG_PASSWORD
در مرحلهی بعدی خطوط زیر را بعد از 'Apply Plugin 'com.android.library اضافه کنید و اطلاعاتی که در bintray وارد کردهاید را در اینجا وارد کنید:
apply plugin: 'com.android.library' ext { bintrayRepo = 'maven' bintrayName = 'AndroidBreadCrumb' publishedGroupId = 'com.plus' libraryName = 'AndroidBreadCrumb' artifact = 'AndroidBreadCrumb' libraryDescription = 'create breadcrumb on android to show a path to user and let user to jump on them' siteUrl = 'https://github.com/yeganehaym/AndroidBreadCrumb' gitUrl = 'https://github.com/yeganehaym/AndroidBreadCrumb' libraryVersion = '1.0' developerId = 'yeganehaym' developerName = 'ali yeganeh.m' developerEmail = 'yeganehaym@gmail.com' licenseName = 'The Apache Software License, Version 2.0' licenseUrl = 'http://www.apache.org/licenses/LICENSE-2.0.txt' allLicenses = ["Apache-2.0"] }
apply from: 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle' apply from: 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/bintrayv1.gradle'
compile 'com.plus:AndroidBreadCrumb:1.0'
آپلود فایلها به مخزن
برای آپلود فایلهای ماژول به مخزن، ابتدا ترمینال اندروید استودیو را باز کنید و گامهای زیر را به ترتیب انجام بدهید:
گام اول: با ارسال دستور زیر از صحت کدها و منابع مطمئن میشویم:
gradlew install
BUILD SUCCESSFUL
gradlew bintrayUpload
SUCCESSFUL
حال صفحهی اختصاصی پکیجتان را چک کنید. میبینید که قسمتهایی از آن تغییر کردهاست و قسمت نسخه، به روز شده است:
و قسمت فایلها هم دیگر خالی نیست:
با اینکه کتابخانهی ما روی maven قرار گرفت، ولی هنوز نمیتوان آن را توسط jcenter استفاده کرد و باید bintray maven را با jcenter هماهنگ نماییم. در حال حاضر استفاده از این کتابخانه بدون سینک به شکل زیر است:
گریدل پروژه maven{ url 'https://dl.bintray.com/yeganehaym/maven' } گریدل ماژول dependencies { compile 'com.plus:AndroidbreadCrumb:1.0' }
برای افزودن کتابخانهی خود به سیستم jcenter با کلیک بر روی گزینهی Add to jcenter میتوانید به تیم jcenter درخواست دهید که آن را تایید کنند که بعد از درخواست حدود سه ساعت طول میکشد تا پاسخ شما را بدهند.
به این ترتیب دیگر نیازی به تعریف یک url به maven نخواهد بود.
برای دیدن این کتابخانه در صفحه jcenter به ترتیب شناسههای Group_ID.Artifact.version را دنبال کنید، یعنی برای ما میشود:
com/plus/androidbreadcrumb/1.0
نکته دوم: در صورتی که پکیج خودتان را حذف کنید، چیزی از روی jcenter حذف نمیشود. فقط به یاد داشته باشید که برای حذف آن باید ابتدا نسخههای مختلف آپلود شده را حذف کنید تا پکیج از جی سنتر هم حذف شود.
در این مرحله قصد داریم که این کتابخانه را بر روی mavenCentral هم داشته باشیم. اگر قصدش را ندارید از اینجا به بعد را نیازی نیست انجام بدهید و برای اینکار لازم است همهی مراحل بالا انجام گرفته باشد.
قبل از اینکه این عمل ارسال انجام گیرد، باید دو عمل زیر از قبل صورت گرفته باشند:
- پکیج شما در jcenter تایید شده باشد.
- با مخزن شما در sonatype موافقت شده باشد.
در صورتیکه دو مرحلهی بالا صورت گرفته باشند، در صفحهی پکیج اختصاصی، بر روی گزینهی mavenCentral کلیک کنید:
پس از آن باید نام کاربری و کلمهی عبورتان را در SonaType، وارد کنید و گزینهی sync را بفشارید:
در صورتیکه پیام موفقیت در سینک را بدهد، پکیج شما منتقل شدهاست. در غیر این صورت خطای آن را اعلام میکند و باید برای رفع آن تلاش کنید تا خطاها از بین بروند. برای اینکه بتوانید این پکیج را در لیست mavenCentral ببینید، مثل همان چیزی که در بالاتر گفته شد، شناسهی گریدل را دنبال کنید.
var ss = require("sdk/simple-storage"); ss.storage.myArray = [1, 1, 2, 3, 5, 8, 13]; ss.storage.myBoolean = true; ss.storage.myNull = null; ss.storage.myNumber = 3.1337; ss.storage.myObject = { a: "foo", b: { c: true }, d: null }; ss.storage.myString = "O frabjous day!";
delete ss.storage.value;
if (!ss.storage.Variables) { ss.storage.Variables=[]; ss.storage.Variables.push(true); ss.storage.Variables.push(false); ss.storage.Variables.push(false); ss.storage.Variables.push(false); } if (!ss.storage.interval) ss.storage.interval=1; if (!ss.storage.DateVariables) { var now=String(new Date()); ss.storage.DateVariables=[]; ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); ss.storage.DateVariables.push(now); }
contentScriptFile: self.data.url("jquery.min.js") contentScriptFile: [self.data.url("jquery.min.js"),self.data.url("const.js"),self.data.url("popup.js")]
از شیء port به صورت عملی استفاده میکنیم. کد main.js را به صورت زیر تغییر دادیم:
function handleChange(state) { if (state.checked) { panel.show({ position: button }); var v1=[],v2; if (ss.storage.Variables) v1=ss.storage.Variables; if (ss.storage.interval) v2=ss.storage.interval; panel.port.emit("vars",v1,v2); } } panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; });
$(document).ready(function () { addon.port.on("vars", function(vars,interval) { if (vars) { $("#chkarticles").attr("checked", vars[0]); $("#chkarticlescomments").attr("checked", vars[1]); $("#chkshares").attr("checked", vars[2]); $("#chksharescomments").attr("checked", vars[3]); } $("#interval").val(interval); }); $("#btnsave").click(function() { var Vposts = $("#chkarticles").is(':checked'); var VpostsComments = $("#chkarticlescomments").is(':checked'); var Vshares = $("#chkshares").is(':checked'); var VsharesComments = $("#chksharescomments").is(':checked'); var Vinterval = $("#interval").val() ; var Variables=[]; Variables[0]=Vposts; Variables[1]=VpostsComments; Variables[2]=Vshares; Variables[3]=VsharesComments; interval=Vinterval; addon.port.emit("vars", Variables,Vinterval); $("#messageboard").text( Messages.SettingsSaved); }); });
نکته بسیار مهم: در کد بالا ما فایل جاوااسکریت را از طریق فایل popup.html معرفی کردیم، نه از طریق خصوصیت contentscriptfile. این نکته را همیشه به خاطر داشته باشید. فایلهای js خود را تنها در دو حالت استفاده کنید:
- از طریق دادن رشته به خصوصیت contentScript و استفاده از self به جای addon
- معرفی فایل js داخل خود فایل html با تگ script که به درد اسکریپتهای با کد زیاد میخورد.
اگر فایل شما شامل استفاده از کلمهی کلیدی addon نمیشود، میتوانید فایل js خود را از طریق contentScriptFile هم اعمال کنید.
فایل popup.html
<script src="jquery.min.js"></script> <!-- Including jQuery --> <script type="text/javascript" src="const.js"></script> <script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="const.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="rssreader.js"></script>
pageWorker = require("sdk/page-worker"); page= pageWorker.Page({ contentScriptWhen: "ready", contentURL: self.data.url("./background.htm") }); page.port.emit("vars",ss.storage.Variables,ss.storage.DateVariables,ss.storage.interval);
var variables=[]; var datevariables=[]; var period_time=60000; var timer; google.load("feeds", "1"); $(document).ready(function () { addon.port.on("vars", function(vars,datevars,interval) { if (vars) { Variables=vars; } if (datevars) { datevariables=datevars; } if(interval) period_time=interval*60000; alarmManager(); }); }); function alarmManager() { timer = setInterval(Run,period_time); } function Run() { if(Variables[0]){RssReader(Links.postUrl,0, Messages.PostsUpdated);} if(Variables[1]){RssReader(Links.posts_commentsUrl,1,Messages.CommentsUpdated); } if(Variables[2]){RssReader(Links.sharesUrl,2,Messages.SharesUpdated);} if(Variables[3]){RssReader(Links.shares_CommentsUrl,3,Messages.SharesCommentsUpdated);} } function RssReader(URL,index,Message) { var feed = new google.feeds.Feed(URL); feed.setResultFormat(google.feeds.Feed.XML_FORMAT); feed.load(function (result) { if(result!=null) { var strRssUpdate = result.xmlDocument.firstChild.firstChild.childNodes[5].textContent; var RssUpdate=new Date(strRssUpdate); var lastupdate=new Date(datevariables[index]); if(RssUpdate>lastupdate) { datevariables[index]=strRssUpdate; addon.port.emit("notification",datevariables,Message); } } }); }
- چه بخشهایی از سایت باید بررسی شوند.
- آخرین تاریخ تغییر هر کدام که در زمان نصب افزونه، تاریخ نصب افزونه میشود و با اولین به روز رسانی، تاریخ جدیدی جای آن را میگیرد.
- دورهی سیکل زمانی یا همان interval بر اساس دقیقه
Run
RSSReader
page.port.on("notification",function(lastupdate,Message) { ss.storage.DateVariables=lastupdate; Make_a_Notification(Message); }) function Make_a_Notification(Message) { var notifications = require("sdk/notifications"); notifications.notify({ title: "سایت به روز شد", text: Message, iconURL:self.data.url("./icon-64.png"), data:"https://www.dntips.ir", onClick: function (data) { tabs.open(data); } }); }
البته این نکته قابل ذکر است که اگر کاربر طلاعات پنل را به روزرسانی کند، تا وقتی که مرورگر بسته نشده و دوباره باز نشود تغییری نمیکند؛ چرا که ما تنها در ابتدای امر مقادیر ذخیره شده را به RSSReader فرستاده و اگر کاربر آنها را به روز کند، ارسال پیام دیگری توسط page worker صورت نمیگیرد. پس کد موجود در main.js را به صورت زیر ویرایش میکنیم:
pageWorker = require("sdk/page-worker"); page= pageWorker.Page({ contentScriptWhen: "ready", contentURL: self.data.url("./background.htm") }); function SendData() { page.port.emit("vars",ss.storage.Variables,ss.storage.DateVariables,ss.storage.interval); } SendData(); panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; SendData(); });
var timer; function alarmManager() { timer = setInterval(Run,period_time); } addon.port.on("vars", function(vars,datevars,interval) { if (vars) { Variables=vars; } if (datevars) { datevariables=datevars; } if(interval) period_time=interval*60000; if(timer!=null) { clearInterval(timer); } alarmManager(); });
Page Mod
var pageMod = require("sdk/page-mod"); pageMod.PageMod({ include: "*.mozilla.org", contentScript: 'window.alert("Page matches ruleset");' });
var data = require("sdk/self").data; var pageMod = require("sdk/page-mod"); pageMod.PageMod({ include: "*.mozilla.org", contentScriptFile: [data.url("jquery-1.7.min.js"), data.url("my-script.js")] });
پنل تنظیمات
"preferences": [{ "description": "مطالب سایت", "type": "bool", "name": "post", "value": true, "title": "مطالب سایت" }, { "description": "نظرات مطالب سایت", "type": "bool", "name": "postcomments", "value": false, "title": "نظرات مطالب سایت" }, { "description": "اشتراک ها", "type": "bool", "name": "shares", "value": false, "title": "اشتراک ها" }, { "description": "نظرات اشتراک ها", "type": "bool", "name": "sharescomments", "value": false, "title": "نظرات اشتراک ها" }, { "description": "دوره زمان برای بررسی سایت", "name": "interval", "type": "integer", "value": 10, "title": "دوره زمانی" }]
از آنجا که مقادیر بالا تنها مقادیر پیش فرض خودمان هست و اگر کاربر آنها را تغییر دهد، در این صفحه هم باید اطلاعات تصحیح شوند، برای همین از کد زیر برای دسترسی به پنل تنظیمات و کنترلهای موجود آن استفاده میکنیم. همانطور که میبینید کد مورد نظر را در یک تابع به نام Perf_Default_Value قرار دادیم و آن را در بدو اجرا صدا زدیم. پس کاربر اگر به پنل تنظمیات رجوع کند، میتواند تغییراتی را که قبلا داده است، ببیند. بنابراین اگر الان تغییری را ایجاد کند، تا باز شدن مجدد مرورگر چیزی نمایش داده نمیشود. برای همین دقیقا مانند تابع SendData این تابع را هم در کد شنود پنل panel اضافه میکنیم؛ تا اگر کاربر اطلاعات را از طریق روش قبلی تغییر داد، اطلاعات هم اینک به روز شوند.
function Perf_Default_Value() { var preferences = require("sdk/simple-prefs").prefs; preferences.post = ss.storage.Variables[0]; preferences.postcomments = ss.storage.Variables[1]; preferences.shares = ss.storage.Variables[2]; preferences.sharescomments = ss.storage.Variables[3]; preferences["myinterval"] =parseInt(ss.storage.interval); } Perf_Default_Value(); panel.port.on("vars", function (vars,interval) { ss.storage.Variables=vars; ss.storage.interval=interval; SendData(); Perf_Default_Value(); });
perf=require("sdk/simple-prefs"); var preferences = perf.prefs; function onPrefChange(prefName) { switch(prefName) { case "post": ss.storage.Variables[0]=preferences[prefName]; break; case "postcomments": ss.storage.Variables[1]=preferences[prefName]; break; case "shares": ss.storage.Variables[2]=preferences[prefName]; break; case "sharescomments": ss.storage.Variables[3]=preferences[prefName]; break; case "myinterval": ss.storage.interval=preferences[prefName]; break; } } //perf.on("post", onPrefChange); //perf.on("postcomments", onPrefChange); perf.on("", onPrefChange);
اشکال زدایی Debug
معرفی DevDocs
- برای انتخاب مستندات خود Select documentation را در گوشه سمت چپ کلیک کنید
- لازم نیست حتما از ماوس خود استفاده کنید. به لیست کلیدهای میانبر مراجعه شود
- جستجوی سایت از fuzzy searching پشتیبانی میکند. مثلا جستجوی عبارت "bgcp" مطالب "background-clip" را جستجو میکند
- برای اینکه در مستندات خاصی جستجو کنید، نام یا مخفف آن را وارد کرده سپس Tab را فشار دهید
- برای جستجو از مرورگر خود هم میتوانید استفاده کنید. پروتکل Open Search پشتیبانی میشود
- از طریق موبایل هم میتوانید به این سایت دسترسی داشته باشید. افزونه ای هم برای کروم وجود دارد
- برای دریافت خبرنامهها یا عضو شوید یا @DevDocs را در توییتر دنبال کنید
- DevDocs رایگان و متن باز است
- CSS
- DOM
- DOM Events
- HTML
- HTTP
- JavaScript