Add Project Phase 3 and 4 (#171)

Co-authored-by: Danial Khorasanizadeh <[email protected]>

docs/project/01-LinkAnalysis/03-TransactionVisualizer.md

@@ -0,0 +1,56 @@
+---
+title: مصورسازی تراکنش‌ها
+description: ''
+---
+
+در این فاز باید یک فایل حاوی دیتای تراکنش‌ها را از مدیر داده دریافت و ذخیره کنیم و سپس تراکنش‌ها را در قالب یک گراف به کاربر نمایش دهیم.
+
+## ساختار داده و تعریف اجزای آن به عنوان بخش‌های گراف
+
+در پروژه ما هرچیزی به شکل یکی از سه مورد زیر تعریف خواهد شد:
+
+1. راس گراف
+2. یال گراف
+3. مشخصه‌ای درباره یکی از دو مورد بالا
+
+ما در این پروژه با داده‌های فرضی تراکنش‌های بانکی سر و کار داریم. مجموعه داده باید به صورت یک فایل
+csv
+به برنامه داده شده و داده‌های ورودی به صورت یک جدول به کاربر نمایش داده شود. (در این فاز می‌توانید فرض کنید که جداول تنها تراکنش و حساب بانکی هستند اما بهتر است که ورودی جدول را به صورت پویا پیاده کنید تا بعدا توانایی اضافه کردن قابلیت‌های دیگر به آن را داشته باشید.)
+
+[Transactions](/datasets/transactions.zip)
+
+این داده‌ها شامل تعداد زیادی رکورد است. هر رکورد شامل اطلاعات زیر است:
+
+1. شماره حساب مبدا
+2. شماره حساب مقصد
+3. مبلغ تراکنش
+4. تاریخ تراکنش
+5. شماره مرجع تراکنش
+
+در شکل زیر یک نمونه از دیتابیس حاوی اطلاعات تراکنش را مشاهده می‌کنید:
+![Database View](./images/DataBase.jpg)
+
+در این فاز قرارداد می‌کنیم که حساب مبدا و مقصد به صورت راس‌های گراف و تراکنش‌ بین‌ آن‌ها به صورت یال گراف نمایش داده شود. همچنین مقدار تراکنش‌ها و تاریخ تراکنش به عنوان مشخصه یال تراکنش باشند.
+
+چیزی که در اینجا درباره آن صبحت کردیم، یعنی طرز نگرش به پدیده‌های پروژه و تعریف آن‌ها به صورت خاص، با اصطلاح آنتولوژی شناخته می‌شود. که در فازهای بعدی، بیشتر با آن آشنا خواهیم شد.
+
+## مصورسازی
+
+حال باید بتوانیم هر سطر موجود در پایگاه داده را که معادل یک تراکنش بانکی است، به صورت یک دمبل نشان دهیم. با پیاده‌سازی این ویژگی، امکان فراهم‌کردن بسیاری از قابلیت‌های پرکاربرد و ارزشمند فراهم می‌شود.
+
+در واقع ما سعی داریم چیزی شبیه به عکس زیر را پیاده‌سازی کنیم.
+
+![Data Dumble](./images/dumble.jpg)
+
+لازم به ذکر است که کادر موجود در بالای یال، نشان‌ دهنده‌ی لیست مشخصه‌هایی است که باید برای یال آورده شود.
+
+پیشنهاد می‌شود شماره حساب روی راس گراف نمایش داده شود تا در فاز بعدی کار راحت‌تر باشد.
+
+دست شما در پیاده‌سازی
+UI
+باز است و با رعایت چارچوپ اولیه، می‌توانید از شکل و رنگ‌های مختلف در طراحی المان‌ها استفاده‌کنید.
+ما با پیاده‌سازی این فاز، بعد از این که توانستیم هر رکورد را به صورت یک دمبل نشان بدهیم، آماده می‌شویم تا در آینده برنامه را به ابزارهای تحلیل مجهز کنیم.
+
+## نمایش اطلاعات حساب
+
+بعد از این که دمبل یک تراکنش روی بوم گراف ظاهر شد، کاربری که از برنامه استفاده می‌کند باید این امکان را داشته باشد که با کلیک روی راس گراف، اطلاعات حساب را ببیند. برای این کار پیشنهاد می‌شود که بعد از کلیک، اطلاعات حساب از مجموعه داده دوم برداشته شود و در یک منو از سمت راست، کنار صفحه نمایان شود.

docs/project/01-LinkAnalysis/04-Expansion.md

@@ -0,0 +1,60 @@
+---
+title: گسترش
+description: ''
+---
+
+در این فاز ما می‌خواهیم یک حساب را به عنوان یک نود روی بوم گراف وارد کنیم. سپس با
+گسترش
+این نود، تمامی حساب‌های دیگری که با این حساب تراکنش داشته‌اند را روی صفحه نمایش دهیم.
+در واقع قرار است چیزی شبیه به آن چه در زیر مشاهده می‌کنید را پیاده‌سازی کنیم.
+
+![Node Expansion](./images/expansion.gif)
+
+برای انجام این فاز مجموعه داده بزرگ‌تری در اختیار شما قرار می‌گیرد تا بتوانید قابلیت جدید را به خوبی تست کنید.  
+[Transactions](/datasets/transactions-expansion.zip)
+
+## نمایش یک حساب به عنوان راس گراف
+
+در فاز قبلی ما هر تراکنش را به صورت دمبل نشان می‌دادیم. در این فاز باید بتوانیم در ابتدا یک حساب را به تنهایی به عنوان راس گراف روی صفحه نشان بدهیم. بدین صورت که کاربر بتواند یک شماره حساب را در برنامه جست‌وجو کند و در صورت وجود آن شماره حساب، یک راس گراف که روی آن اسم مالک حساب نوشته شده در صفحه ظاهر شود.
+
+برنامه باید طوری باشد که اگر کاربر به تعداد دلخواه، شماره حساب جست‌وجو کرد، در صورت وجود روی صفحه راس گراف ظاهر شود.
+همچنین این ویژگی‌ که با کلیک روی راس، اطلاعات حساب نمایش داده شود باید وجود داشته‌باشد.
+
+## قابلیت کلیک راست روی راس
+
+بعد از این که کاربر یک شماره حساب را جست‌وجو کرد و راس گراف روی صفحه نمایش داده شد، باید ویژگی‌ای را در نظر بگیرید که کاربر بتواند روی آن کلیک راست کند و لیست حاوی سه گزینه‌ نمایان شود.
+
+1. پاک کردن راس
+2. گسترش دادن راس
+
+## گسترش راس
+
+ما تا این بخش، به کاربر استفاده کننده از نرم‌افزار این توانایی را داده‌ایم که یک شماره حساب را جست‌وجو کند، آن را به عنوان یک راس روی صفحه بیندازد، روی آن راست کلیک کند و لیستی حاوی سه گزینه نمایان شود.
+
+با انتخاب گزینه گسترش، باید تمامی حساب‌هایی که در پایگاه داده ما با حساب موجود روی صفحه تراکنش داشتند، به همراه یال تراکنش‌ بین آن‌ها، روی صفحه نشان داده شود. یال تراکنش باید جهت‌دار باشد و جهت آن از حساب مبدا به حساب مقصد باشد. همچنین میزان مبلغ تراکنش روی یال بین آن‌ها نوشته شود.
+
+در این زیر شما بخشی از پرتال تحلیل روابط ستاره را مشاهد‌ه می‌کنید که کاربر با راست کلیک کردن روی یک راس، می‌تواند آن را گسترش دهد.
+
+![STAR LA Expansion](./images/la-expansion.gif)
+
+## چالش‌های پیاده‌سازی گسترش راس‌ها
+
+به طور پیش‌فرض برای پیاده‌سازی این بخش، باید در پایگاه‌ داده تمامی تراکنش‌هایی را که حساب مورد نظر در آن‌ها حضور داشتند پیداکنیم و دمبل تراکنش‌ بین‌ آن‌ها را تشکیل‌دهیم. با این کار مثلا اگر حساب موردنظر 90 تراکنش انجام‌شده در پایگاه داده داشته باشد، 90 دمبل روی صفحه ایجاد می‌شود که نتیجه‌ی جالبی نیست و به درد تحلیل‌گر نمی‌خورد. برای این کار ما باید تمامی دنبل‌هایی را که یک سرشان حساب موردنظر است، ادغام
+(Merge)
+کنیم تا چیزی شبیه تصویر اول داک به وجود بیاید.
+
+به تصویر زیر دقت‌کنید:
+
+![Merge](./images/merge.gif)
+
+در پروژه ما فقط باید گراف ادغام شده را به کاربر نشان بدهیم و مرحله ادغام شدن در این تصویر برای فهم بهتر است. نتیجه‌ای که به کاربر نشان داده می‌شود باید شبیه گیف موجود در اول داک باشد.
+
+اما چگونه باید ادغام را پیاده‌سازی کنیم؟
+
+برای این کار کافی است راس‌هایی را که دقیقا تکرار شده‌ی راس اولیه بوده‌اند، یعنی نمایان‌گر یک حساب واحدند تبدیل به یک راس کنیم و بقیه راس‌های موجود در نتیجه جست‌‌و‌جو را به آن متصل کنیم. برای شناسایی این که کدام راس‌ها یکی هستند، باید آن‌ها را از طریق شماره حساب شناسایی کنیم. شماره حساب در این پروژه برای هر حساب مجزا، عددی واحد در نظر گرفته شده‌ است.
+
+علاوه بر این، وقتی قرار است تراکنش‌های انجام‌شده توسط یک حساب را رسم کنیم، حالت خاص دیگری به وجود می‌آید که حساب مورد نظر ما با یک حساب خاص، چند تراکنش داشته باشد.
+برای این حالت‌هامی‌توانید یال‌های انحناداری بین دو راس ایجاد کنید:
+
+![Curve](./images/curve.jpg)
+