میثم ثوامری میثم ثوامری
اشتراک‌ها
انتشار Visual Studio Code
  •  پشتیبانی از Node و ASP.NET v5
  • refactoring
  • debugging
  • یکپارچکی با git

انتشار Visual Studio Code
‫۹ سال و ۶ ماه قبل، پنجشنبه ۱۰ اردیبهشت ۱۳۹۴، ساعت ۰۵:۴۰
سعید مقدس سعید مقدس
مطالب
ارسال پیام های تبلیغاتی به Telegram با استفاده از #C
ارسال پیام‌های تبلیغاتی از طریق نرم افزارهایی مثل Viber , Telegram  این روزها بازار داغی دارند. این نرم افزارها به همراه خود Api هایی را نیز جهت توسعه دهندگان ارائه می‌دهند. Telagram هم که به یکی از محبوب‌ترین نرم افزارها در ایران تبدیل شده‌است. اگر به مستندات Telegram مراجعه کنید، می‌توانید نحوه‌ی استفاده را مشاهده کنید. ولی روش‌های دیگری هم هستند که بسیار ساده‌تر هستند.
اگر به سایت notificatio.me مراجعه کنید، در این زمینه Api ایی را ارائه می‌دهد که به راحتی می‌توانید از آن برای ارسال پیام استفاده کنید. البته تا ارسال 100 پیام آن رایگان هست.
ابتدا یک پروژه‌ی از نوع Windows و یا console را ایجاد کنید.
سپس  در خط فرمان package manager console دستور زیر را کپی کنید:
Install-Package Notificatio.TelegramClient
پس از نصب شدن بسته‌ی Nuget، یک دکمه روی فرم قرار دهید و در رویداد OnClick آن دستورات زیر را تایپ کنید:
var api = NotificatioApi.Initialize(" Your Hash_Key");
            api.SendMessage("Phone Number", "this is a test Message");
سپس در سایت notificatio.me ثبت نام کنید و پس از ثبت نام، به پروفایلتان رفته و Api Hash ایی را که در آنجا قابل مشاهده هست، کپی و به جای Your Hash_Key قرار دهید. برای شماره تلفن هم فقط از اعداد استفاده کنید.
در آخر برنامه را اجرا کنید و بر روی دکمه، کلیک کنید. پس از اتمام کار ارسال، برای مشاهده‌ی تعداد پیام‌های ارسال شده و یا آمار ماهانه، در سایت فوق میتوانید به Dashboard آن مراجعه کنید و تعداد و آمار پیام‌های ارسالی را ببینید.

 البته با استفاده از jQuery هم میتوانید کار ارسال پیام را انجام دهید:
$.ajax({
    url: "http://www.api.notificatio.me/v1/user/message",
    type: "POST",
    dataType: "json",
    crossDomaint: true,
    data: {
        phoneNumber: "your_phone_number",
        apiHash: "your_api_hash",
        message: "your_message"
    },
    cache: false,
    success: function() {
        // Your code to handle success message sent
    },
    error: function(error) {
        // Your code to handle error
    }
});
‫۹ سال و ۵ ماه قبل، شنبه ۱۶ خرداد ۱۳۹۴، ساعت ۱۳:۱۵
یاسر مرادی یاسر مرادی
مطالب
توسعه برنامه‌های Cross Platform با Xamarin Forms & Bit Framework - قسمت سیزدهم
در این قسمت قصد داریم به بررسی نحوه‌ی بهبود Performance در پروژه‌های Xamarin Forms نگاهی بیاندازیم. صد البته امکان پوشش دادن تمامی نکات وجود ندارد و در این قسمت سعی بر پوشش دادن مهم‌ترین آنها را داریم.
توجه داشته باشید که در قسمت نهم به "x:DataType" و در قسمت چهارم به "مواردی مهم در زمینه‌ی بهبود عملکرد پروژه‌های Xamarin در Android" پرداخته بودیم که آن نکات در بهبود سرعت برنامه‌ها تاثیر گذارند. همان طور که در قسمت چهارم گفته شد، همیشه سرعت برنامه را در Release mode تست کنید.

در Xamarin Forms هر کنترل (برای مثال Entry و Button) در زمان اجرا به یک کنترل Native معادل خود تبدیل می‌شود. مشکلی که وجود دارد این است که وقتی از روی Button مربوط به Xamarin Forms، یک Button در Android و ... ساخته می‌شود، آن Button بر روی یک Container قرار می‌گیرد. در واقع به ازای هر کنترل Xamarin Forms، دو کنترل Native ساخته می‌شود(!) و تعداد کنترل‌های بیشتر در برنامه یعنی کندی بیشتر.
وظیفه تبدیل Xamarin forms control به یک Native control بر عهده ‌Renderer هاست. البته اینکه هر Xamarin Forms control به دو Native control تبدیل شود در ذیل بحث Fast Renderers در حال بهبود یافتن است. Fast Renderer یک Renderer است که به ازای هر Xamarin forms control، فقط یک کنترل Native را می‌سازد. راهنمای فعال سازی Fast Renderers را می‌توانید بخوانید و در برنامه‌هایتان اعمال کنید؛ ولی در پروژه‌های مبتنی بر Bit مانند XamApp، این مهم به صورت خودکار فعال می‌شود و نیازی به اقدام جداگانه‌ای نیست.

مورد بعدی در مورد Layout‌های Xamarin Forms است (Grid,StackLayout,FlexLayout و...) در صورتیکه قصد تعریف کردن مواردی چون Tap Gesture و Background را بر روی Layout خود ندارید و از Layout خود فقط انتظار Layout بودن را دارید، می‌توانید آنها را سریع‌تر سازید. مثال قسمت قبل را که برای نمایش هر Product در List View از Flex Layout استفاده می‌کرد، به‌خاطر بیاورید. ما آن Flex را استفاده کردیم تا نام Product، بیست و پنج درصد فضای هر ردیف از List View را بگیرد و ... به آن Flex Layout رنگی داده نشد یا هر چیزی از این قبیل. برای بهبود عملکرد آن List View می‌توانیم از Flex Layout به شکل زیر استفاده کنیم:
<sfListView:SfListView.ItemTemplate>
                <DataTemplate>
                    <FlexLayout
                        x:DataType="model:Product"
                        CompressedLayout.IsHeadless="True"
                        Direction="Row">
                        <Label
                            FlexLayout.Basis="40%"
                            Text="{Binding Name}"
                            VerticalTextAlignment="Center" /> ...
با اضافه کردن CompressedLayout.IsHeadless=True دیگر کنترل Native ای برای آن Flex Layout ساخته نمی‌شود و کنترل Native کمتر یعنی سرعت بیشتر برنامه.
برای این امکان، ذکر دو نکته الزامی است:
۱- استفاده از CompressedLayout.IsHeadless باعث می‌شود تعدادی از امکانات Layout مانند Background Color دیگر کار نکنند. فعال سازی آن فقط در DataTemplate‌های ListView توصیه می‌شود که مثلا 20 عدد Product در مثال قسمت قبل، منجر به ساخته شدن 20 عدد Flex Layout می‌شوند و اگر کاری کنیم که کنترل Native معادل آن ساخته نشود، لااقل 20 بار سود کرده‌ایم! استفاده کردن از CompressLayout در همه جای برنامه، ایده جالبی نیست.
۲- CompressedLayout فقط در Android و iOS اعمال می‌شود و تست کردن آن در UWP عملا فایده‌ای ندارد.

نکته مهم بعدی، بحث نمایش عکس است. در Xamarin Forms یک عکس می‌تواند در رزولوشن‌های مختلف با کمک Drawable در Android و Asset Catalog Image Sets در iOS و ... باشد. همچنین می‌توان عکس را از یک Url گرفت و یا به شکل Embedded در پروژه‌ی مشترک بین سه پلتفرم باشد. می‌توان علاوه بر PNG و JPG از WebP ،SVG و GIF نیز استفاده نمود. اما آنچه که مهم است این است که بعد از یادگیری اصول اولیه نمایش عکس در Xamarin Forms، حتما حتما از FF Image Loading برای نمایش عکس‌ها استفاده شود.
استفاده از FF Image Loading دارای مزایایی چون پشتیبانی از WebP | SVG است. همچنین این کتابخانه فایل‌ها را نیز Cache می‌کند (هم در صورتیکه Url باشند و قرار باشند از طریق اینترنت دریافت شوند و هم Bitmap حاصل از Render کردن آن عکس برای آن Device خاص همانند GlideX در Android). امکان گرد کردن عکس، یا سیاه و سفید نمودن آن و کوهی از امکانات دیگر، استفاده‌ی از این کتابخانه را الزامی می‌کند!
برای نمایش لوگوی Bit در برنامه برای مثال، ابتدا Package مربوطه را در پروژه XamApp نصب می‌کنیم. سپس آن را در Android ،iOS و UWP راه اندازی می‌کنیم و در Android مقدار enableFastRenderer را True می‌دهیم. سپس در Xaml داریم: 
        <ffimageloading:CachedImage
            CacheType="All"
            DownsampleToViewSize="true"
            HeightRequest="100"
            HorizontalOptions="Center"
            Source="https://avatars2.githubusercontent.com/u/22663390?s=100"
            VerticalOptions="Center"
            WidthRequest="100" />
پایان
‫۵ سال و ۹ ماه قبل، شنبه ۱ دی ۱۳۹۷، ساعت ۲۲:۰۰
وحید نصیری وحید نصیری
مطالب
طرحبندی صفحات وب با بوت استرپ 4 - قسمت سوم
قابلیت‌های یک Flex Container در بوت استرپ 4

یک Flex Container متداول به این صورت کار می‌کند:

این کلاس‌ها که موارد داخل پرانتز آن‌ها اختیاری است، المان را تبدیل به یک المان Flexbox می‌کنند. حالت نمایشی پیش‌فرض آن‌ها block است؛ اما اگر نیاز بود می‌توان آن‌ها را تبدیل به in-line نیز کرد. بنابراین ساده‌ترین Flex Container را می‌توان با افزودن کلاس d-flex ایجاد کرد.

بر روی یک Flex Container می‌توان کلاس‌های تعیین جهت را نیز تعریف کرد:

به این ترتیب می‌توان آیتم‌ها را به صورت ردیف‌ها و یا ستون‌هایی، نمایش داد. مقدار row در اینجا به صورت پیش‌فرض اعمال می‌شود. بنابراین ذکر کلاس خالی flex به معنای قرار دادن المان‌ها در طی چندین ردیف در صفحه است. در اینجا استفاده‌ی از reverse، نمایش المان‌ها را از راست به چپ میسر می‌کند.

در یک Flex Container امکان تعیین ترتیب عناصر نیز وجود دارد:

این مورد را در مطلب «طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم » بررسی کردیم. کلاس order را علاوه بر ستون‌ها، بر روی هر دربرگیرنده‌ای که دارای کلاس d-flex است نیز می‌توان اعمال کرد.

همچنین امکان تنظیم فواصل بین آیتم‌ها نیز در یک Flex Container پیش بینی شده‌است:

برای مثال استفاده‌ی از مقدار تراز center، روش بسیار مناسبی برای قرار دادن عناصر، در میانه‌ی افقی صفحه است. این مورد را نیز در قسمت قبل بررسی کردیم.

می‌توان نحوه‌ی Wrap المان‌ها را بر اساس فضای خالی در یک Flex Container به صورت زیر تنظیم کرد:

که در اینجا دو مقدار wrap و nowrap قابل تنظیم است. در حالت wrap، اگر آیتم‌ها با اندازه‌ی خودشان در ردیف جاری جا نشدند، به سطر یا سطرهای بعدی منتقل خواهند شد. حالت پیش‌فرض nowrap است.

برای تغییر تراز عمودی المان‌ها در یک Flex Container از کلاس align-content استفاده می‌شود:

این مورد را نیز در قسمت قبل بررسی کردیم و همانند کار با ستون‌ها می‌باشد.


یک مثال: بررسی ویژگی‌های یک Flex Container 

<head>
    <style>
        .item {
          background: #f0ad4e;
          text-align: center;
          width: 150px;
          height: 30px;
          border: 1px solid white;
        }
    </style>
</head>

<body>
    <div class="container bg-danger">
        <div class="bg-info" style="height:100vh">
            <div class="item">Exotic</div>
            <div class="item">Grooming</div>
            <div class="item">Health</div>
            <div class="item">Nutrition</div>
            <div class="item">Pests</div>
            <div class="item">Vaccinations</div>
        </div>
    </div>
</body>
در اینجا ارتفاع container به 100vh تنظیم شده‌است تا کل view-port را پوشش دهد و رنگ آن نیز به bg-info تنظیم شده‌است تا بتوان تغییر محل تراز عمودی را بهتر مشاهده کرد.
در ابتدا کلاس d-flex را به div داخل container اضافه می‌کنیم:
<div class="bg-info d-flex" style="height:100vh">
بلافاصله مشاهده خواهیم کرد که عناصر تعریف شده در طی یک ردیف از چپ به راست نمایش داده می‌شوند:


و اگر جهت این Flex Container را به صورت صریح مشخص کنیم:
<div class="bg-info d-flex flex-column" style="height:100vh">
آیتم‌های درون آن به صورت یک ستون نمایش داده می‌شوند:


و یا اگر بخواهیم آیتم‌ها را از راست به چپ به صورت یک ردیف نمایش دهیم می‌توان از flex-row-reverse استفاده کرد:

<div class="bg-info d-flex flex-row-reverse" style="height:100vh">


و اگر بجای row در این حالت column را مقدار دهی کنیم:
<div class="bg-info d-flex flex-sm-column-reverse" style="height:100vh">


آیتم‌ها از پایین صفحه شروع خواهند شد. البته در این مثال break-point از نوع sm نیز ذکر شده‌است تا پس از گذر از این اندازه‌ی صفحه، چنین اتفاقی رخ دهد.

و یا اگر بخواهیم آیتم‌ها از راست به چپ در طی یک ردیف، پس از اندازه‌ی صفحه‌ی sm و همچنین در میانه‌ی صفحه ظاهر شوند، می‌توان از کلاس justify-content استفاده کرد:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center"
     style="height:100vh">
با این خروجی:


و اگر wrap را فعال کنیم:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-wrap"
     style="height:100vh">


اگر آیتم‌ها با اندازه‌ی اصلی خودشان، در ردیف جاری جا نشدند، به سطرهای بعدی منتقل خواهند شد.
اگر nowrap را فعال کنیم:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-nowrap"
     style="height:100vh">
سعی می‌کند در ردیف جاری، آیتم‌ها را تا حد ممکن کوچک کرده و نمایش دهد:


و با فعالسازی align-content-start، تمام آیتم‌ها را به سمت بالای صفحه هدایت می‌کند و align-content-end، آن‌ها را از پایین صفحه شروع خواهد کرد:
<div class="bg-info d-flex flex-sm-row-reverse justify-content-center flex-wrap align-content-start"
     style="height:100vh">



کنترل آیتم‌های قرار گرفته‌ی درون یک Flex Container در بوت استرپ 4

علاوه بر امکان کنترل ویژگی‌های یک Flex Container، اجزای قرار گرفته‌ی درون آن‌ها را نیز می‌توان کنترل کرد و اینکار توسط کلاس align-self میسر است:


این مورد نیز همانند توضیحات کلاس align-self اعمالی به ستون‌ها است که در قسمت قبل بررسی کردیم.

به علاوه در اینجا امکان تعریف floating elements نیز مسیر است که شبیه به دسترسی به امکانات CSS در بوت استرپ است با امکان تنظیم break-points:

فرض کنید به تمام آیتم‌های داخل Flex Container کلاس float-left را اضافه کرده‌ایم. در این حالت Container قابلیت ردیابی اندازه‌ی این آیتم‌ها را از دست می‌دهد. به همین جهت با اعمال کلاس clearfix بوت استرپ به container، مجددا امکان ردیابی این آیتم‌ها را پیدا می‌کند.


کلاس‌های تعریف margin و padding در بوت استرپ 4

در بوت استرپ 4 کلاس‌های ویژه‌ای برای ایجاد margin و padding بین عناصر در نظر گرفته شده‌اند که خلاصه‌ی آن‌ها فرمول زیر است:

ابتدا با تعریف یک خاصیت شروع می‌شود؛ مانند m یا p، برای کنترل margin و padding. سپس لبه‌ای که باید به آن اعمال شود بدون فاصله و یا - ذکر می‌شود؛ مانند mt به معنای margin-top. در این فرمول x به معنای اعمال همزمان به چپ و راست است و y به معنای اعمال همزمان به بالا و پایین و اگر می‌خواهید آیتم‌های کناری آیتم جاری را به دو طرف لبه‌ها هدایت کنید از mx-auto استفاده کنید.
در اینجا امکان اعمال یک break-point اختیاری نیز وجود دارد. در آخر اندازه ذکر می‌شود که بین 0 تا 5 متغیر است.

یک مثال: اعمال کلاس‌های padding و margin بوت استرپ 4 

<head>
    <style>
        .item {
          background: #f0ad4e;
          text-align: center;
          border: 1px solid white;
        }
    </style>
</head>

<body>
    <div class="container bg-danger">
        <div class="bg-info d-flex">
            <div class="item">Exotic</div>
            <div class="item">Grooming</div>
            <div class="item bg-danger ml-3 my-sm-3 pb-3 pt-5">Health</div>
            <div class="item">Nutrition</div>
            <div class="item">Pests</div>
            <div class="item">Vaccinations</div>
        </div>
    </div>
</body>
در اینجا به آیتم Health یک margin-left با اندازه‌ی 3، یک margin بالا و پایین فعال شونده‌ی پس از sm با اندازه‌ی 3، یک padding پایین با اندازه‌ی 3 و یک padding بالا با اندازه‌ی 5 اضافه شده‌است؛ با این خروجی:



نمایش و مخفی سازی عناصر در بوت استرپ 4

کلاس invisible سبب می‌شود تا المانی در صفحه نمایش داده نشود، اما این المان همچنان فضای اختصاصی خود را خواهد داشت. کلاس visible به معنای نمایان بودن المانی تنها برای screen readers است (دستگاه‌های کمکی معلول‌ها).
اما روش اصلی نمایش و یا مخفی سازی عناصر در بوت استرپ 4، استفاده از خاصیت display است:

برای مثال با انتساب کلاس d-sm-none به المانی، می‌توان سبب مخفی شدن آن پس از گذر از sm شد.


امکان تعیین اندازه‌ی عناصر در بوت استرپ 4

بوت استرپ 4 تعدادی کلاس ویژه را برای تعیین اندازه‌ی عناصر نیز افزوده‌است:


در اینجا w=width، h=height، mw=max-height و mh=max-height است با مقادیر 25، 50، 75 و 100 و مقدار پیش‌فرض آن 100 است (یعنی پوشاندن کل container).


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: Bootstrap4_06.zip
‫۶ سال قبل، جمعه ۲۰ مهر ۱۳۹۷، ساعت ۱۳:۱۵
محمد رعیت پیشه محمد رعیت پیشه
مطالب
کار با اسکنر در برنامه های تحت وب (قسمت اول)
در اکثر برنامه‌های سازمانی، مثل برنامه‌های مدیریت آرشیو اسناد، همواره این نیاز جزو خواسته‌های کاربران بوده که بتوانند به صورت مستقیم و از طریق تنها یک کلیک، تصویر مورد نظر را اسکن کرده و به صورت خودکار در برنامه وارد کنند؛ یعنی بدون اینکه نیاز باشد با استفاده از یک برنامه دیگر ابتدا تصویر را اسکن کرده و سپس در فرم وب، فایل اسکن شده را Browse کنند.
این نیاز اساسا به معنی دسترسی به سخت افزار کاربر از طریق مرورگر می‌باشد که به دلایل متعددی امکان پذیر نیست! مشکلات امنیتی ایجاد شده در این راه بسیار جدی است. اما خوشبختانه راههایی برای رسیدن به این هدف وجود دارند:

1- ActiveX : که به صورت native فقط در IE پشتیبانی می‌شود (در نسخه‌های جدیدتر IE نیاز به بروز رسانی پلاگین ActiveX controls می‌باشد) و برای استفاده‌ی از آن در مرورگر‌های Firefox و Chrome هم باید از پلاگین‌های جانبی روی هر مرورگر استفاده کرد که مثلا برای اجرای بر روی Firefox، باید افزونه‌ی IE Tab را نصب کرد که تنها کارش این است که سایت را از طریق موتور IE در پنجره‌ی فایرفاکس اجرا کند! که البته این مورد مثل این می‌ماند که سایت در IE باز شده باشد که ممکن است زیاد خوشایند نباشد؛ در غیر اینصورت باید پروژه را از اول بر مبنای اجرای بر روی IE طراحی و پیاده سازی کرد. در ضمن از مشکلات اجرای پلاگین نوشته شده توسط برنامه نویس در IE و نسخه‌های مختلف آن هم چشم پوشی می‌کنیم. یکی از مزیت‌های این روش نسبت به بقیه این هست که دانلود و نصب پلاگین مورد نیاز به صورت خودکار و توسط مرورگر انجام می‌شود.

2- استفاده از یک کامپوننت جانبی : مثل کامپوننت‌های LEADTOOLS که ابزارهای متنوع و SDK‌های بسیار قدرتمندی را برای اینکار و کارهای دیگر، مانند کار با اسکن تصاویر مغزی، پردازش تصویر، بارکد خوان‌ها، مدیریت اسناد و ...  فراهم کرده است. قیمت این ابزار بسیار زیاد است و در برخی موارد امکانات فراهم آورده بسیار بیشتر است از خواسته‌ی ما. این ابزار، هم در HTML & Javascript و هم در DotNet قابل استفاده است و مستندات نسبتا خوبی هم در این زمینه ارائه کرده است. همچنین کامپوننت Dynamsoft که باز هم غیر رایگان هست و قیمت بالایی نیز دارد.

اگر روال کار کامپوننت‌های بالا را مورد بررسی قرار دهید (از طریق اجرای Demo ها، اینجا و اینجا) متوجه خواهید شد که هر دو نیاز به نصب یک سرویس یا App سمت کلاینت جهت اجرای دستورات خود دارند. پس می‌شود اینطور نتیجه گرفت که انجام اینکار بدون اینکه چیزی سمت کاربر نصب شود، ممکن نیست و در هر دو، لینک نصب فایل exe سرویس برای دانلود قرار داده شده است. بر این اساس به راه حل سومی خواهیم رسید که خودمان این سرویس را جهت تعامل با اسکنر سمت کاربر طراحی و پیاده سازی نماییم.

اما چطور ممکن است که با اجرای یک فایل exe سمت کاربر (با این فرض که کاربر در یک دامین مطمئن قرار دارد و می‌شود درخواست نصب سرویس را نمود) این امکان را برای کاربر فراهم نمود که با یک کلیک در مرورگر، اسکنر به صورت خودکار اسکن را آغاز کرده و سپس تصویر حاصل را به یکی از کنترلر‌های ما در سمت سرور ارسال نماید؟

برای اینکار ما با دو صورت مساله مواجه هستیم؛ اول اینکه چطور تصویر را سمت کاربر اسکن کنیم و دوم اینکه چطور این تصویر را به سرور ارسال نماییم!
برای مساله‌ی اول از کتابخانه Windows Image Acquisition (WIA) استفاده خواهیم نمود که این کتابخانه به ما این امکان را میدهد تا با سخت افزارهایی که از TWAIN پشتیبانی می‌کنند، بتوانیم ارتباط برقرار نماییم.

برای مساله‌ی دوم هم نیاز به پیاده سازی یک WCF Service و اجرای آن (هاست کردن) در سمت کلاینت داریم. در واقع با صدا زدن متدهای این سرویس، از کتابخانه‌ی بالا استفاده کرده و اسکن را انجام می‌دهیم.

ادامه دارد...
‫۹ سال و ۹ ماه قبل، جمعه ۱۷ بهمن ۱۳۹۳، ساعت ۰۳:۴۵