var browser = Request.Browser.Browser + " " + Request.Browser.Version;
برای مثال با فایرفاکس، چنین خروجی را دارد:
اما ... با مرورگر جدید Edge مایکروسافت، خروجی کروم را مشاهده خواهیم کرد:
از این جهت که user agent این مرورگر، چنین شکلی را دارد و ختم به edge است:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240
برای رفع این مشکل، نیاز است فایل جدیدی را به مجموعهی «browser definition files» دات نت اضافه کنیم. این فایلها عموما در مسیر زیر یافت میشوند:
<windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers
C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers
با این محتویات:
<browsers> <browser id="Edge" parentID="Chrome"> <identification> <userAgent match="Edge/(?'version'(?'major'\d+)(?'minor'\.\d+))" /> </identification> <capabilities> <capability name="browser" value="Edge" /> <capability name="version" value="${version}" /> <capability name="majorversion" value="${major}" /> <capability name="minorversion" value="${minor}" /> </capabilities> </browser> </browsers>
اکنون پس از این تنظیمات، برنامه (تفاوتی نمیکند که وب فرم باشد یا MVC) اطلاعات صحیحی را نمایش میدهد:
اگر به گوگل ریدر دقت کرده باشید، دو گزینهی به اشتراک گذاری دارد: share و share with note .
اگر گزینهی share with note را انتخاب کرده و توضیحی را ارسال یا اضافه کنیم، این توضیحات، به فید از نوع Atom اشتراکها هم اضافه میشود. مثلا:
<?xml version="1.0"?>
<feed xmlns:media="http://search.yahoo.com/mrss/"
xmlns:gr="http://www.google.com/schemas/reader/atom/"
xmlns:idx="urn:atom-extension:indexing"
xmlns="http://www.w3.org/2005/Atom"
idx:index="no"
gr:dir="ltr">
...
<entry gr:crawl-timestamp-msec="1316627782108">
...
<gr:annotation>
<content type="html">text-text-text</content>
<author>
<name>Vahid</name>
</author>
</gr:annotation>
...
</entry>
...
</feed>
این افزونه استاندارد نیست و همانطور که در قسمت xmlns:gr اطلاعات فوق مشخص است، در فضای نام http://www.google.com/schemas/reader/atom/ معنا پیدا میکند. از دات نت سه و نیم به بعد هم کلاسی جهت خواندن فیدهای استاندارد وجود دارد (تعریف شده در فضای نام System.ServiceModel.Syndication). اما چگونه میتوان این افزونهی غیر استاندارد را با کمک امکانات توکار دات نت خواند؟
روش کار با استفاده از ElementExtensions هر آیتم یک فید است؛ به صورت زیر :
using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Syndication;
using System.Xml;
using System.Xml.Linq;
namespace Linq2Rss
{
public class RssEntry
{
public string Title { set; get; }
public string Description { set; get; }
public string Link { set; get; }
public DateTime PublicationDate { set; get; }
public string Author { set; get; }
public string BlogName { set; get; }
public string BlogAddress { set; get; }
public string Annotation { set; get; }
}
public static class AtomReader
{
private static string getAtomAnnotation(this SyndicationElementExtensionCollection items)
{
if (!items.Any()) return string.Empty;
var item = items.Where(x => x.OuterName.ToLowerInvariant() == "annotation").FirstOrDefault();
if (item == null) return string.Empty;
var element = item.GetObject<XElement>();
var content = element.Element("{http://www.w3.org/2005/Atom}content");
return content == null ? string.Empty : content.Value;
}
public static IList<RssEntry> GetEntries(string feedUrl)
{
using (var reader = XmlReader.Create(feedUrl))
{
var feed = SyndicationFeed.Load(reader);
if (feed == null) return null;
return feed.Items.Select(x =>
new RssEntry
{
Title = x.Title.Text,
Author = x.Authors.Any() ? x.Authors.First().Name : string.Empty,
Description = x.Content == null ? string.Empty : ((TextSyndicationContent)x.Content).Text,
Link = x.Links.Any() ? x.Links.First().Uri.AbsoluteUri : string.Empty,
PublicationDate = x.PublishDate.UtcDateTime,
BlogName = x.SourceFeed.Title.Text,
BlogAddress = x.SourceFeed.Links.Any() ? x.SourceFeed.Links.First().Uri.AbsoluteUri : string.Empty,
Annotation = x.ElementExtensions.getAtomAnnotation()
}).ToList();
}
}
}
}
در این مثال به کمک متد الحاقی getAtomAnnotation، مجموعهی SyndicationElementExtensionCollection هر آیتم یک فید بررسی شده، در بین اینها، موردی که از نوع annotation باشد انتخاب و سپس content آن استخراج میگردد.
نکتهای دیگر:
اکثر کلاسهای موجود در فضاهای نام مرتبط با XML در دات نت امکان خواندن اطلاعات را از یک Uri هم دارند؛ مانند مثال فوق و متد XmlReader.Create بکارگرفته شده در آن. اما اگر بخواهیم حین خواندن اطلاعات، یک پروکسی را نیز به پروسه جاری اضافه کنیم، به نظر خاصیت یا متدی جهت انجام اینکار وجود ندارد. برای رفع این مشکل میتوان یک پروکسی سراسری را تعریف کرد. تنها کافی است خاصیت System.Net.WebRequest.DefaultWebProxy مقدار دهی شود. پس از آن به صورت خودکار بر روی کل برنامه تاثیر خواهد گذاشت.
یکی از API های کاربردی و جدید در دنیای وب، BroadcastChannel است که امکان ارسال اطلاعات بین windowها ، Tabها و iframeهای مختلف را که در یک دامنه هستند، فراهم میکند. برای
مثال اگر شما در مرورگری در پنجرههای مختلف یک سایت را باز کرده باشید،
با تغییر در یکی از این پنجرهها، قادر خواهید بود سایر پنجرها را هم مطلع کنید تا در
صورت نیاز، مجددا بارگذاری شوند.
چرا از این API استفاده کنیم؟
یکی از
وب سایتهای مورد علاقهی خود را در مرورگر باز کنید. مثلا یوتیوب و لاگین کنید. حالا در
پنجرهی جدیدی، همین وب سایت را مجددا باز کرده و لاگین کنید. حالا در یکی از پنجرهها، از یوتیوب Logout کنید. خب شما حالا در یکی از پنجرهها لاگین هستید و در یکی دیگر Logout کردهاید. حالا
پنجرههای مرورگر شما دارای دو وضعیت متفاوت هستند. Logged-in در برابر Logged-out و این گاهی باعث دردسر خواهد شد.
این وضعیت حتی میتواند باعث خطرهای امنیتی نیز بشود. تصور کنید که کاربری در یک فضای عمومی مثل یک کافی شاپ وارد سایت شما شدهاست و داشبرد مخصوص به خود را باز کردهاست. بنا به دلایلی کاربر قصد ترک محل را کرده و طبیعتا از برنامه شما Logout خواهد کرد . در این حالت اگر این کاربر برنامه شما را در صفحات مختلف مرورگر باز کرده باشد و لاگین نیز کرده باشد، هر کسی که بعد از او قصد استفاده از این کامپیوتر را داشته باشد ، میتواند به اطلاعات کاربر مورد نظر در آن صفحات دسترسی پیدا کند؛ چه این اطلاعات روی صفحه باشد و چه مثلا اطلاعات یک JWT token. چون کاربر فراموش کرده در صفحات دیگر هم Logout کند.
کد نویسی BroadcastChannel API
در نگاه اول، استفاده از این API ممکن است سخت به نظر برسد؛ ولی در واقع خیلی راحت است. برای نمونه قطعه کد زیر را درنظر بگیرید:
<!DOCTYPE html> <body> <!-- The title will change to greet the user --> <h1 id="title">Hey</h1> <input id="name-field" placeholder="Enter Your Name"/> </body> <script> var bc = new BroadcastChannel('gator_channel'); (()=>{ const title = document.getElementById('title'); const nameField = document.getElementById('name-field'); const setTitle = (userName) => { title.innerHTML = 'Hey ' + userName; } bc.onmessage = (messageEvent) => { // If our broadcast message is 'update_title' then get the new title from localStorage if (messageEvent.data === 'update_title') { // localStorage is domain specific so when it changes in one window it changes in the other setTitle(localStorage.getItem('title')); } } // When the page loads check if the title is in our localStorage if (localStorage.getItem('title')) { setTitle(localStorage.getItem('title')); } else { setTitle('please tell us your name'); } nameField.onchange = (e) => { const inputValue = e.target.value; // In the localStorage we set title to the user's input localStorage.setItem('title', inputValue); // Update the title on the current page setTitle(inputValue); // Tell the other pages to update the title bc.postMessage('update_title'); } })() </script>
این کد شامل یک Input باکس و یک title است. وقتی کاربر نام خود را در Input باکس وارد میکند، برنامه آن را در Localstorage با کلیدی به نام userName ذخیره میکند و بعد title صفحه جاری را به سلام + userName تغییر میدهد. مثلا اگر کاربر در Input باکس، عبارت بابک را وارد کند، title صفحه به سلام بابک تغییر داده میشود.
بدون BroadcastChannel، چنانچه کاربر در پنجرههای مختلف مرورگر، برنامه را باز کرده باشد، تغییری در Title آن صفحات داده نخواهد شد؛ مگر اینکه مجددا توسط کاربر بارگذاری شود.
در کد فوق ما یک وهله از BroadcastChannel را به نام gator_channel ایجاد کردهایم و بعد onmessage را مساوی متدی با یک آرگومان جهت دریافت پیام قرار دادهایم. در این متد چک شده که اگر نام پیام، مساوی update_title باشد، متغیر ذخیره شدهی در LocalStorage خوانده شود.
هربار که متد postMessage ، از BroadcastChannel را فراخوانی میکنیم، این متد، باعث اجرای متد onmessage در سایر پنجرهها میشود. پس اگر در پنجرهی جاری در Input باکس، کلمه فرهاد را بنویسیم، متد bc.postMessage('update_title') در پنجره جاری اجرا شده و باعث اجرای متد onmessage در سایر پنجرههایی که سایتمان در آن باز است میشود.
این API در چه حالتهایی کار میکند
برخلاف سایر APIها مثل window.postMessage، شما لازم نیست چیزی در مورد اینکه چند تا صفحه از سایتتان بر روی مرورگر جاری باز شده را بدانید. (توجه کنید که روی عبارت «مرورگر جاری» تاکید میکنم. چون اگر برنامه روی دو مرورگر مثلا Chrome و Firefox به صورت همزمان باز باشد، این API فقط روی صفحات باز مرورگر جاری فراخوانی خواهد شد و نه مرورگر دوم؛ توضیحات بیشتر در ادامه داده شده است)
BroadcastChannel فقط روی مرورگر جاری و صفحاتی از یک دامنه، اجرا خواهد شد. این به این معنا است که شما میتوانید پیامهایتان را از دامنه مثلا : https://alligator.io به دامنه https://alligator.io/js/broadcast_channels ارسال کنید. تنها نکتهای که لازم است تا رعایت شود این است که آبجکت BroadcastChannel در هر دو صفحه، از یک نام برای channel استفاده کرده باشند:
const bc = new BroadcastChannel('alligator_channel'); bc.onmessage = (eventMessage) => { // do something different on each page }
در حالتهای زیر این API کار نخواهد کرد:
هاستهای متفاوت:
https://alligator.io
https://www.aligator.io
پورتهای متفاوت:
https://alligator.io
https://alligator.io :8080
پروتکلهای متفاوت:
https://alligator.io
http://alligator.io
و یا برای مثال اگر مثلا در مرورگر Chrome یکی از صفحات به صورت Incognito باز شده باشد.
سازگاری این API با مرورگرهای مختلف
با توجه به اطلاعات سایت caniuse.com، این API در 75.6% مرورگرها پشتیبانی میشود. ولی مرورگرهای Safari و Internet Explorer از این API پشتیبانی نمیکنند. همچنین امکان استفاده از این API توسط کتابخانه sysend.js نیز فراهم شدهاست.
چه نوع پیامهایی را میتوانید به کمک این API ارسال کنید
- تمامی تایپها (Boolean,Null, Undefined,Number,BigInt, String) به غیر از symbol
- آبجکتهای Boolean و String
- Dates
- Regular Expressions
- Blobs
- Files, File Lists
- Array Buffer, ArrayBufferViews
- ImageBitmaps, ImageDates
- Arrays,Objects,Maps and Sets
قطعه کد زیر، بجای string، یک object را ارسال میکند:
bc.onmessage = (messageEvent) => { const data = messageEvent.data // If our broadcast message is 'update_title' then get the new title from localStorage switch (data.type) { case 'update_title': if (data.title){ setTitle(data.title); } else setTitle(localStorage.getItem('title')); break default: console.log('we received a message') } }; // ... Skipping Code bc.postMessage({type: 'update_title', title: inputValue});
چه کارهایی را میتوانید به کمک این API انجام دهید
چیزهای زیادی را میتوان مجسم کرد. محتملترین گزینه، به اشتراک گذاری state جاری برنامه است. برای مثال اگه از کتابخانههای flux یا redux برای مدیریت state برنامه استفاده میکنید، به کمک این API میتوانید state جاری را در تمامی صفحات باز برنامه، بروز رسانی کنید. حتی میتوانید به چیزی شبیه به machine state فکر کنید.
یا مثلا آخرین وضعیت سبد خرید کالای مشتری و یا موجودی کالاها، در یک سایت خرید آنلاین. همچنین به اشتراک گذاری فایلهای حجیم مثل عکس و غیره جهت جلوگیری از دانلود مجدد آنها در سایر صفحات.
به کمک دستور ()bc.close در هر زمانی میتوانید channel باز شده را ببندید و مجددا بسته به وضعیت برنامه، آن را باز کنید.
- یک ASP.NET Web Application با نام NorthwindService ایجاد نمایید و بر روی پروژه راست کلیک کنید و از منوی Add گزینه New Item را انتخاب نمایید از پنجره باز شده از دسته Data گزینه ADO.NET Entity Data Model را انتخاب و نام ان را Northwind بگذارید.
- از پنجره باز شده Generate from Databaseرا انتخاب و با انتخاب کانکشن از نوع Sql Server Compact 4 اتصال به فایل Northwind.sdf را انتخاب تا کلاسهای لازم تولید شود.
- برای تولید data service بر روی پروژه راست کلیک کنید و از منوی Add گزینه New Item را انتخاب نمایید از پنجره باز شده گزینه
WCF Data Service را انتخاب و نام آن را Northwind.svc بگذارید. کد زیر خودکار تولید میشود
public class Northwind : DataService< /* TODO: put your data source class name here */ > { // This method is called only once to initialize service-wide policies. public static void InitializeService(DataServiceConfiguration config) { // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc. // Examples: // config.SetEntitySetAccessRule("MyEntityset", EntitySetRights.AllRead); // config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V3; } }
- برای دسترسی به موجودیتهای Northwind بجای عبارت put your data source نام مدل را تایپ کنید
public class Northwind : DataService<NorthwindEntities>
- برای فعال کردن دسترسی به منابع data source متغیر config کلاس DataServiceConfiguration را بصورت زیر تنظیم نمایید. تابع SetEntitySetAccessRule با گرفتن نام موجودیت و نحوه دسترسی امکان استفاده از این موجودیت را با استفاده از WCF Data Service فزاهم مینمایید. مثلا در زیر امکان دسترسی به موجودیت Orders را با امکان خواندن همه، نوشتن ادقامی و جایگزین فراهم نموده است.
config.SetEntitySetAccessRule("Orders", EntitySetRights.AllRead | EntitySetRights.WriteMerge | EntitySetRights.WriteReplace ); config.SetEntitySetAccessRule("Customers", EntitySetRights.AllRead);
- اگر بخواهیم امکان خواندن همه موجودیتها را فراهم کنیم از کد زیر میتوانیم استفاده نمایید که * به معنای همه موجودیتهای data model میباشد
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
<service xmlns="http://www.w3.org/2007/app" xmlns:atom="http://www.w3.org/2005/Atom" xml:base="http://localhost:8358/Northwind.svc/"> <workspace> <atom:title>Default</atom:title> <collection href="Categories"> <atom:title>Categories</atom:title> </collection> <collection href="Customers"> <atom:title>Customers</atom:title> </collection> <collection href="Employees"> <atom:title>Employees</atom:title> </collection> <collection href="Order_Details"> <atom:title>Order_Details</atom:title> </collection> <collection href="Orders"> <atom:title>Orders</atom:title> </collection> <collection href="Products"> <atom:title>Products</atom:title> </collection> <collection href="Shippers"> <atom:title>Shippers</atom:title> </collection> <collection href="Suppliers"> <atom:title>Suppliers</atom:title> </collection> </workspace> </service>
- بر روی Solution پروژه جاری راست کلیک و از منوی Add گزینه New Project را انتخاب و یک پروژه از نوع WPF Application با نام NorthwindClient ایجاد نمایید.
- در پنجره MainWindow مانند کد زیر از یک Combobox و DataGrid برای نمایش اطلاعات استفاده نمایید
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Northwind Orders" Height="335" Width="425" Name="OrdersWindow" Loaded="Window1_Loaded"> <Grid Name="orderItemsGrid"> <ComboBox DisplayMemberPath="Order_ID" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="true" Height="23" Margin="92,12,198,0" Name="comboBoxOrder" VerticalAlignment="Top"/> <DataGrid ItemsSource="{Binding Path=Order_Details}" CanUserAddRows="False" CanUserDeleteRows="False" Name="orderItemsDataGrid" Margin="34,46,34,50" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="Product" Binding="{Binding Product_ID, Mode=OneWay}" /> <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity, Mode=TwoWay}" /> <DataGridTextColumn Header="Price" Binding="{Binding UnitPrice, Mode=TwoWay}" /> <DataGridTextColumn Header="Discount" Binding="{Binding Discount, Mode=TwoWay}" /> </DataGrid.Columns> </DataGrid> <Label Height="28" Margin="34,12,0,0" Name="orderLabel" VerticalAlignment="Top" HorizontalAlignment="Left" Width="65">Order:</Label> <StackPanel Name="Buttons" Orientation="Horizontal" HorizontalAlignment="Right" Height="40" Margin="0,257,22,0"> <Button Height="23" HorizontalAlignment="Right" Margin="0,0,12,12" Name="buttonSave" VerticalAlignment="Bottom" Width="75" Click="buttonSaveChanges_Click">Save Changes </Button> <Button Height="23" Margin="0,0,12,12" Name="buttonClose" VerticalAlignment="Bottom" Width="75" Click="buttonClose_Click">Close</Button> </StackPanel> </Grid> </Window>
- برای ارجاع به wcf data service بر روی پروژه راست کلیک و گزینه Add Service Reference را انتخاب نمایید در پنجره باز شده گزینه Discover را انتخاب تا سرویس را یافته و نام Namespase را Northwind بگذارید.
- حال مانند کد زیر یک شی از مدل NorthwindEntities با آدرس وب سرویس ایجاد نموده ایم و نتیحه کوئری با استفاده از کلاس DataServiceCollection به DataContext گرید انتصاب داده ایم که البته پیش فرض آن آشنایی با DataBinding در WPF است.
private NorthwindEntities context; private string customerId = "ALFKI"; private Uri svcUri = new Uri("http://localhost:8358/Northwind.svc"); private void Window1_Loaded(object sender, RoutedEventArgs e) { try { context = new NorthwindEntities(svcUri); var ordersQuery = from o in context.Orders.Expand("Order_Details") where o.Customers.Customer_ID == customerId select o; DataServiceCollection<Orders> customerOrders = new DataServiceCollection<Orders>(ordersQuery); this.orderItemsGrid.DataContext = customerOrders; } catch (Exception ex) { MessageBox.Show(ex.ToString()); } }
- با صدا زدن تابع SaveChanges مدل میتوانید تغییرات را در پایگاه داده ذخیره نمایید.
private void buttonSaveChanges_Click(object sender, RoutedEventArgs e) { try { context.SaveChanges(); } catch (DataServiceRequestException ex) { MessageBox.Show(ex.ToString()); } }
- برنامه را اجرا نمایید تا خروجی کار را مشاهده نمایید. مقادیر Quantity را تغییر دهید و دکمه Save Changes را انتخاب تا تغییرات دخیره شود.
فعالسازی تولید خودکار بستههای نیوگت در پروژههای NET Core.
پس از تهیهی یک کتابخانهی مبتنی بر NET Core.، تنها کاری که در جهت تولید خودکار بستههای نیوگت باید انجام شود، افزودن مدخل postcompile ذیل به فایل project.json است:
"scripts": { "postcompile": [ "dotnet pack --no-build --configuration %compile:Configuration%" ] }
در اینحالت اگر فایل nupkg تولیدی را توسط برنامههای zip باز کنید، مشاهده خواهید کرد که فایل nuspec خودکاری نیز در آن درج شدهاست؛ اما ... مشخصات ثبت شدهی در آن ناقص هستند و شامل مواردی مانند نام پروژه، نام نویسنده، مجوز استفادهی از پروژه، آدرس پروژه و امثال آنها نیستند. در نگارشهای دیگر دات نت، این مشخصات از فایل nuspec تهیه شدهی توسط ما جمع آوری و درج میشود. اما در اینجا خیر.
تکمیل فایل project.json برای درج مشخصات پروژه و تکمیل اطلاعات فایل nuspec
هرچند به ظاهر دیگر فایل nuspec دستی تهیه شده در اینجا پردازش نمیشود، اما تمام اطلاعات آنرا در فایل project.json نیز میتوان درج کرد:
{ "version": "1.1.1.0", "authors": [ "Vahid Nasiri" ], "packOptions": { "owners": [ "Vahid Nasiri" ], "tags": [ "PdfReport", "Excel", "Export", "iTextSharp", "PDF", "Report", "Reporting", "Persian", ".NET Core" ], "licenseUrl": "http://www.gnu.org/licenses/old-licenses/lgpl-2.0-standalone.html", "projectUrl": "https://github.com/VahidN/iTextSharp.LGPLv2.Core" }, "description": " iTextSharp.LGPLv2.Core is an unofficial port of the last LGPL version of the iTextSharp (V4.1.6) to .NET Core.", "scripts": { "postcompile": [ "dotnet pack --no-build --configuration %compile:Configuration%" ] } }
تکمیل تنظیمات Build پروژه
بهتر است کتابخانههای خود را در حالت release و همچنین بهینه سازی شده، توزیع کنید. به همین منظور نیاز است مدخل ذیل را نیز به فایل project.json اضافه کرد:
"configurations": { "Release": { "buildOptions": { "optimize": true, "platform": "anycpu" } } },
افزودن مستندات XML ایی کتابخانه
به احتمال زیاد XML-Docهای هر متد (کامنتهای مخصوص دات نتی هر متد یا خاصیت عمومی) را نیز به کدهای خود افزودهاید. برای اینکه فایل XML نهایی آن به صورت خودکار تولید شده و همچنین در بستهی نیوگت نهایی درج شود، نیاز است مدخل xmlDoc را به buildOptions اضافه کنید:
"buildOptions": { "xmlDoc": true },
"buildOptions": { "xmlDoc": true, "nowarn": [ "1591" ] // 1591: missing xml comment for publicly visible type or member },
برای مطالعهی بیشتر
project.json reference
report.DataSources.Add(new ReportDataSource("Header", "از نوع لیست باشد"));
معماری اطلاعات یا Information Architecture و یا به اختصار IA در یک تیم توسعه نرمافزار، یک وظیفه پایه و اساسی است که معمولا بین طراحان، توسعه دهندگان و یا طراحان استراتژی محتوا تقسیم میگردد. اما صرف نظر از اینکه چه کسی در یک تیم آن را بر عهده میگیرد، IA تخصص خاص خود را نیازمند است که این تخصص که شامل ابزارها و شاخصها و منابعی است که باید به درستی تحقیق و گردآوری گردند. در این مقاله قصد داریم تا به این امر بپردازیم که واقعا IA چیست؟ و چرا یک جنبهی مهم و ارزشمند در طراحی فرآیندهای user experience به شمار میرود؟
Information Architecture چیست؟
بیان کردن یک تعریف دقیق برای IA کمی پیچیدهتر از تعاریف دیگری همچون content strategy و یا interaction design به نظر میرسد. بر خلاف content strategy که به وسیله طراحان استراتژی محتوا و یا interaction design که توسط طراحان UI/UX انجام میگیرد، IA به ندرت در زمرهی یک کار جداگانه قرار میگیرد. اما با این وجود، این کار در مهندسی نرم افزار بسیار با ارزش و لازم محسوب میگردد. (منبع)
بر اساس تعریف ویکیپدیا، IA اینگونه تعریف میگردد: "معماری اطلاعات عبارت است از طراحی ساختاری سامانههای اشتراک اطلاعات، که با هدف یافت پذیری و کاربرد پذیری انجام میشود."
در فرهنگ معماری اطلاعات، مفهوم یافتپذیری یا Findability به زبان ساده، شاخصی است که قابلیت یافت شدن و مکانیابی یک مجموعه اطلاعات را محک میزند. به عنوان مثال سامانههای اطلاعرسانی مانند وب سایتها باید به گونهای طراحی شوند که مردم در هر سطحی، به سادگی بتوانند اطلاعات مورد نظر خود را پیدا کنند.
مفهوم کاربردپذیری یا Usability ، شاخصهای است که میزان سهولت کاربری یک ابزار را نشان میدهد. این تعریف را میتوان به این صورت کامل نمود: "میزانی که یک محصول میتواند توسط کاربران خاصی برای رسیدن به هدفی مشخص مورد استفاده قرار گیرد و در حین استفاده، ضمن داشتن اثربخشی و کارآیی، رضایت کاربر را در زمینه مورد استفاده تامین کند." به عنوان مثال هنگامیکه شما قصد خرید اینترنتی را داشته باشید، در درجه اول مفهوم یافتپذیری برای شما پررنگ خواهد شد و پس از آن با انجام خرید حس کاربردپذیری فروشگاه خواهد بود که برای دفعات بعدی شما را به آن وبسایت هدایت خواهد کرد.
بنا بر آنچه که گفته شد، مفهوم یافتپذیری مقدم بر کاربردپذیری است. یعنی اگر کاربر نتواند آنچه را که به دنبال آن است بیابد، هرگز فرصت استفاده از آنرا نخواهد داشت. به علاوه اگر یافتپذیری محقق شود، کاربردپذیری هم بهبود خواهد یافت، چرا که مردم میتوانند به سرعت و سهولت به آنچه که نیاز دارند دست یابند. ذکر این نکته نیز حائز اهمیت است که موتورهای جست و جو، تنها وظیفهی هدایت کاربران را به وبسایت هدف خواهند داشت. اما وظیفه یافت پذیری، با بازدید کاربران از وبسایت آغاز میگردد. به نوعی میتوان گفت که یافتپذیری میکوشد به مردم این امکان را بدهد تا در هنگام گذار در وبسایت، به اطلاعاتی که نیاز دارند دست یابند.
معماری اطلاعات یکی از مهمترین مراحل توسعهی نرمافزار، به خصوص توسعهی نرمافزارهای تحت وب به شمار میرود. در حقیقت با انجام معماری اطلاعات دقیق، میتوان مواردی از قبیل رسیدن به اهداف تعیین شده، کم کردن هزینهی نگهداری و به روز رسانی، افزایش کارآیی و در نهایت کم شدن ریسکها را مدیریت نمود.
بر اساس آنچه که در وبسایت UXmatters و webmonkey گفته شده است، IA در شش مرحله صورت میگیرد:
1. ارزیابی هدف کسب و کار ( Assess business intent )
2. ارزیابی هدف کاربران ( Assess user intent )
3. ارزیابی محتوا ( Assess content )
4. مدیریت محتوا ( Organize content )
5. برقرارسازی ارتباط میان اطلاعات ( Enable information relationships )
6. فراهمسازی فرآیند هدایت محتوا ( Provide navigation )
تصویر زیر که برگرفته از وبسایت SitePoint میباشد برخی از مراحل فوق را به صورت مختصر و ساده نمایش داده است.
اگر به وبسایت رسمی انجمن معماری اطلاعات سری بزنید مطالب مفیدی در زمینهی پیاده سازی IA به دست خواهید آورد.
تصویر زیر ارتباط تنگاتنگ سه مبحث Information Design ، Interaction Design و Sensorial Design را نمایش میدهد. همانطور که میبینید، محتوا در مرکزیت هر سه موضوع قرار دارد. بنابراین میتوان اینگونه استنباط کرد که محتوا اصلیترین بخش یک کسبوکار نرمافزاری را تشکیل میدهد. اما در بخش پیشین دیدیم که محتوا به تنهایی نمیتواند راهگشای نتیجهی عالی از یک نرمافزار باشد. با توجه به دو مفهوم یافتپذیری و کاربردپذیری دیدیم برای آنکه بتوانیم در تولید نرمافزار بهترین باشیم، بایستی در قدم اول مفهوم یافتپذیری را رعایت نماییم. به زبان ساده باید هر چیزی را در جای مورد نظر خود قرار دهیم تا کاربر در مدت زمان خیلی کمی بتواند به آن دسترسی داشته باشد.
همانطور که در تصویر فوق ملاحظه میکنید دو اصطلاح شاید نا آشنای دیگر نیز آورده شده است، Interaction Design و Sensorial Design. در مقالهای دیگر به آنها خواهیم پرداخت.
اصل معکوس سازی وابستگیها
1) Dependency inversion principle یا DIP (اصل معکوس سازی وابستگیها)
DIP یکی از اصول طراحی نرم افزار است و D آن همان D معروف SOLID است (اصول پذیرفته شده شیءگرایی).
2) Inversion of Control یا IOC (معکوس سازی کنترل)
الگویی است که نحوه پیاده سازی DIP را بیان میکند.
3) Dependency injection یا DI (تزریق وابستگیها)
یکی از روشهای پیاده سازی IOC است.
4) IOC container
به فریم ورکهایی که کار DI را انجام میدهند گفته میشود.
Dependency inversion principle چیست؟
اصل معکوس سازی وابستگیها به این معنا است که بجای اینکه ماژولهای سطح پایین سیستم، رابطهای قابل استفادهای از خود را در اختیار سطوح بالاتر سیستم قرار دهند، ماژولهای قرار گرفته در سطوحی بالاتر، اینترفیسهایی را تعریف میکنند که توسط ماژولهای سطح پایین پیاده سازی خواهند شد.
همانطور که ملاحظه میکنید به این ترتیب وابستگیهای سیستم معکوس خواهند شد. نمونهای از عدم استفاده از این طراحی را در دنیای واقعی به صورت رومزه با آنها سر و کار داریم؛ مانند وسایل الکترونیکی قابل حملی که نیاز به شارژ مجدد دارند. برای مثال تلفنهای همراه، دوربینهای عکاسی دیجیتال و امثال آن.
هر کدام از اینها، رابطهای اتصالی متفاوتی دارند. یکی USB2، یکی USB3 دیگری Mini USB و بعضیها هم از پورتهای دیگری استفاده میکنند. چون هر کدام از لایههای زیرین سیستم (در اینجا وسایل قابل شارژ) رابطهای اتصالی مختلفی را ارائه دادهاند، برای اتصال آنها به منبع قدرت که در سطحی بالاتر قرار دارد، نیاز به تبدیلگرها و درگاههای مختلفی خواهد بود.
اگر در این نوع طراحیها، اصل معکوس سازی وابستگیها رعایت میشد، درگاه و رابط اتصال به منبع قدرت باید تعیین کننده نحوه طراحی اینترفیسهای لایههای زیرین میبود تا با این آشفتگی نیاز به انواع و اقسام تبدیلگرها، روبرو نمیشدیم.
اگر وابستگیها معکوس نشوند مطابق تصویر فوق، کلاس سطح بالایی را خواهیم داشت که به اینترفیس کلاسهای سطح پایین وابسته است. البته در اینجا اینترفیس یک کلمه عمومی است و بیشتر نحوه در معرض دید و استفاده قرار دادن اعضای یک کلاس مد نظر بوده است تا اینکه مثلا الزاما اینترفیسهای زبان خاصی مدنظر باشند.
مشکلی که در این حالت به زودی بروز خواهد کرد، افزایش کلاسهای سطح پایین و بیشتر شدن وابستگی کلاسهای سطح بالا به آنها است. به این ترتیب قابلیت استفاده مجدد خود را از دست خواهند داد.
در تصویر فوق حالتی را مشاهده میکنید که وابستگیها معکوس شدهاند. تغییر مهمی که در اینجا نسبت به حالت قبل رخ داده است، بالا بردن اینترفیس، به بالای خط میانی است که در تصویر مشخص گردیده است. این خط، معرف تعریف لایههای مختلف سیستم است. به عبارتی کلاسهای سطح بالا در لایه دیگری نسبت به کلاسهای سطح پایین قرار دارند. در اینجا اجازه دادهایم تا کلاس لایه بالایی اینترفیس مورد نیاز خود را تعریف کند. این نوع اینترفیسها در زبان سی شارپ میتوانند یک کلاس Abstract و یا حتی یک Interface متداول باشند.
با معکوس شدن وابستگیها، لایه سطح بالا است که به لایه زیرین عنوان میکند: تو باید این امکانات را در اختیار من قرار دهی تا بتوانم کارم را انجام دهم.
اکنون اگر در یک سیستم واقعی تعداد کلاسهای سطح پایین افزایش پیدا کنند، نیازی نیست تا کلاس سطح بالا تغییری کند. کلاسهای سطح پایین تنها باید عملکردهای تعیین شده در اینترفیس را پیاده سازی کنند. و این برخلاف حالتی است که وابستگیها معکوس نشدهاند:
تاریخچه اصل معکوس سازی وابستگیها
اصل معکوس سازی وابستگیها در نشریه C++ Report سال 1996 توسط شخصی به نام Bob Martin (معروف به Uncle Bob!) برای اولین بار مطرح گردید. ایشان همچنین یکی از آغاز کنندگان گروهی بود که مباحث Agile را ارائه کردند. به علاوه ایشان برای اولین بار مباحث SOLID را در دنیای شیءگرایی معرفی کردند (همان مباحث معروف هر کلاس باید تک مسئولیتی باشد، باز باشد برای توسعه، بسته برای تغییر و امثال آن که ما در این سری مباحث قسمت D آنرا در حالت بررسی هستیم).
مطابق تعاریف Uncle Bob:
الف) ماژولهای سطح بالا نباید به ماژولهای سطح پایین وابسته باشند. هر دوی اینها باید به Abstraction وابسته باشند.
ب) Abstraction نباید وابسته به جزئیات باشد. جزئیات (پیاده سازیها) باید وابسته به Abstraction باشند.
مثال برنامه کپی
اگر به مقاله Uncle Bob مراجعه کنید، یکی از مواردی را که عنوان کردهاند، یک برنامه کپی است که میتواند اطلاعات را از صفحه کلید دریافت و در یک چاپگر، چاپ کند.
حال اگر به این مجموعه، ذخیره سازی اطلاعات بر روی دیسک سخت را اضافه کنیم چطور؟ به این ترتیب سیستم با افزایش وابستگیها، پیچیدگی و if و elseهای بیشتری را خواهد یافت؛ از این جهت که سطح بالایی سیستم به صورت مستقیم وابسته خواهد بود به ماژولهای سطح پایین آن.
روشی را که ایشان برای حل این مشکل ارائه دادهاند، معکوس کردن وابستگیها است:
در اینجا سطح بالایی سیستم وابسته است به یک سری تعاریف Abstract خواندن و یا نوشتن؛ بجای وابستگی مستقیم به پیاده سازیهای سطح پایین آنها.
در این حالت اگر تعداد Readers و یا Writers افزایش یابند، باز هم سطح بالایی سیستم نیازی نیست تغییر کند زیرا وابسته است به یک اینترفیس و نه پیاده سازی آن که محول شده است به لایههای زیرین سیستم.
این مساله بر روی لایه بندی سیستم نیز تاثیرگذار است. در روش متداول برنامه نویسی، لایه بالایی به صورت مستقیم متدهای لایههای زیرین را صدا زده و مورد استفاده قرار میدهد. به این ترتیب هر تغییری در لایههای مختلف، بر روی سایر لایهها به شدت تاثیرگذار خواهد بود. اما در حالت معکوس سازی وابستگیها، هر کدام از لایههای بالاتر، از طریق اینترفیس از لایه زیرین خود استفاده خواهد کرد. در این حالت هرگونه تغییری در لایههای زیرین برنامه تا زمانیکه اینترفیس تعریف شده را پیاده سازی کنند، اهمیتی نخواهد داشت.
مثال برنامه دکمه و لامپ
مثال دیگری که در مقاله Uncle Bob ارائه شده، مثال برنامه دکمه و لامپ است. در حالت متداول، یک دکمه داریم که وابسته است به لامپ. برای مثال وهلهای از لامپ به دکمه ارسال شده و سپس دکمه آنرا کنترل خواهد کرد (خاموش یا روشن). مشکلی که در اینجا وجود دارد وابستگی دکمه به نوعی خاص از لامپ است و تعویض یا استفاده مجدد از آن به سادگی میسر نیست.
راه حلی که برای این مساله ارائه شده، ارائه یک اینترفیس بین دکمه و لامپ است که خاموش و روشن کردن در آن تعریف شدهاند. اکنون هر لامپی (یا هر وسیله الکتریکی دیگری) که بتواند این متدها را ارائه دهد، در سیستم قابل استفاده خواهد بود.
آشنایی با Leaflet
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
#map { height: 600px; }
var map = L.map('map').setView([29.6760859,52.4950737], 13);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; var osm = new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib}).addTo(map);
Marker، دایره و چندضلعی
در کنار نمایش Tileها میتوان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت میپذیرد:
var marker = L.marker([29.623116,52.497856]).addTo(map);
محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.
نمایش چند ضلعی و دایره هم کار ساده ای است. برای دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:
var circle = L.circle([29.6308217,52.5048021], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map);
در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شدهاند.
برای چند ضلعیها میتوان به این صورت عمل کرد:
var polygon = L.polygon([ [29.628453, 52.488838], [29.637368, 52.493987], [29.637168, 52.503987] ]).addTo(map);
کار کردن با Popup ها
از Popup میتوان برای نمایش اطلاعات اضافهای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال میتوان اطلاعاتی دربارهی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیرهای جدایی ذخیره شدند. اکنون میتوان به آن اشیاء یک popup اضافه کرد:
marker.bindPopup("باغ عفیف آباد").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");
به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش میدهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، میتوان popupهای مستقلی نیز ایجاد کرد:
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(map);