السبت، 2 فبراير 2019

كيف يتم تشغيل React مع ASP.NET Project


تعتبر مكتبة ReactJS إحدى أهم المكتبات لبناء تطبيقات تستخدم معاييرSPA  واستخدام ReactJS مع تقنية ASP.NET بجميع أنواعها صار متاحًا سواء مع ASP.NET Core أو مع ASP.NET MVC سواء مع مشاريع قائمة حاليًا أم مشاريع جديدة, ولعل الترقية لاستخدام هذه المكتبة مع الأنظمة التي تعمل حاليًا هو من أهم المواضيع التي تشغل بال المهتمين بتطبيقات SPA, من أجل ذلك نخصص هذه المقالة لشرح خطوات استخدام ReactJS مع نظام قائمة حاليًا.

الخطوة الأولى
إضافة ملف من النوع NPM configuration file إلى المسار الرئيسي Root path للمشروع, وذلك باتباع الخطوات التالية:



يجب أن يكون اسم الملف الجديد package.json ويحتوي على ما يلي:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack"
  },
  "devDependencies": {}
}

الخطوة الثانية
إضافة ملف اسمه .babelrc إلى جانب الملف package.json وذلك لاستخدام تقنية Babel التي تحول JSX إلى JavaScript يمكن للمتصفحات أن تفهمها, ويحتوي الملف على ما يلي:
{
  /* @babel/preset-env – enables latest JavaScript syntax */
  /* @babel/preset-react – adds support for React syntax */
  /* @babel/plugin-proposal-class-properties – adds support for an instance and/or static member declarations in JavaScript classes */
  "presets": [ "@babel/preset-env", "@babel/preset-react" ],
  "plugins": [ "@babel/plugin-proposal-class-properties" ]
}
الخطوة الثالثة
إضافة ملف Webpack configuration file بالاسم webpack.config.js إلى جانب الملف package.json وتحتوي على ما يلي:
"use strict";

var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
    entry: {
        bundle: ["./React/Footer.js", "./React/App.js", "./React/Index.js", "./React/Header1.js"]
    },
    output: {
        path: path.resolve(__dirname, "./React"),
        filename: "react.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    devtool: "inline-source-map",
    plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
في الشيفرة السابقة يجب الانتباه إلى أن المسار ./React والملفات التي بعده تكون على حسب المشروع, علمًا أن نتيجة تنفيذ هذا الملف هي ملف سيتم تخزينه تحت المجلد ./React أو أي مجلد آخر بالاسم react.js أو بأي اسم آخر

الخطوة الرابعة
لتشغيل React و Babel يجب تحميل بعض الحزم البرمجية من NPM وذلك باتباع الخطوات التالية:
1 - يجب فتح cmd tool التابعة للـ Visual Studio وذلك من قائمة ابدأ كما في الصورة التالية:

2 - الانتقال إلى مجلد المشروع كما في الصورة التالية:

3 - بعدها يجب تنفيذ الأوامر التالية والانتظار حتى تنتهي
npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader browser-sync browser-sync-webpack-plugin react react-dom webpack webpack-cli webpack-notifier

4 - بعد الانتهاء من تنفيذ الأوامر السابقة سيظهر مجلد جديد ضمن مجلد المشروع اسمه node_modules

الخطوة الخامسة
تثبيت NPM Task Runner على Visual Studio من Tools ومن ثم Extension and Updates

بعد تثبيت الأداة السابقة اتبع الخطوات التالية لتحويل الملفات التي تحتوي على React Code إلى ملفات JavaScript يمكن للمتصفحات فهمها:

بعدها تظهر الشاشة التالية:


اضغط مرتين Double click على dev لتنبدأ عملية إنشاء الملف react.js الذي حددناه في الملف webpack.config.js.
في حال اتباع الخطوات السابقة بشكل صحيح ولا يوجد خطأ في الملفات التي أنشأتها وتحتوي على React code عندها سيظهر التنبيه التالي:

وسيتم إنشاء ملف اسمه react.js تحت المجلد React, هذا الملف يمكن تضمينه ضمن ملفات المشروع باستخدام الكود التالي:

<script src="/React/react.js"></script>

الآن نفذ المشروع وستحصل على النتائج المطلوبة من شيفرة React التي تمت كتابتها







الاثنين، 22 فبراير 2016

Issue after install .NET Framework 4.6



بعد تثبيت .NET Framework 4.6 بشكل منفصل أو تثبيت Visual Studio 2015 ستحدث مشكلة في تشغيل ASP.NET حيث يظهر خطأ رقمه 255 غير واضح والسبب هو أنا منصة عمل .NET لا تعمل بشكل صحيح

تفاصيل المشكلة وحلها في المقالة التالية

https://support.microsoft.com/en-us/kb/3118750

لا تتوقف


الخميس، 5 نوفمبر 2015

مشكلة ويندوز 10 مع localhost



عند تحديث نظام تشغيل ويندوز إلى إصدار Windows 10 يتم تثبيت Microsoft Edge بشكل افتراضي وهو المتصفح الذي تراهن عليه مايكروسوفت ليكون بديلاً عن Internet Explorer في القريب العاجل.

المهم في هذا الموضوع هو ظهور مشكلة عند محاولة تصفح رابط محلي مثل Localhost أو رابط تم إعداده من خلال تعديل الملف hosts في المسار التالي:

C:\Windows\System32\drivers\etc

حيث لا يتعرف Microsoft Edge ويظهر الخطأ Page Not Found


لحل هذه المشكلة اتبع الخطوات التالية:




يجب إزالة تحديد الخيارين التاليين:

  • Include all local (intranet) sites not listed in other zones
  • Include all sites that bypass the proxy server


بالعربي نتقدم


السبت، 24 أكتوبر 2015

حل مشكلة الصفحة البيضاء في تقرير SSRS


عند استخدام خدمة التقارير مع SQL Server والتي يطلق عليها SSRS قد تواجه ظهور صفحة بيضاء عند عرض التقرير ضمن ASP.NET. إحدى الأسباب التي قد تؤدي إلى ذلك هي وجود مشكلة بالقيم المحددة لوسطاء التقرير Report Parameters وبالتحديد التي تقبل قيم NULL.



المشكلة التي واجهتها بالتحديد هي عند استخدام الشيفرة التالية:



حيث أمرر قيمة للوسيط ProjectID في حال أن قيمته لا تساوي NULL، عندها لا يظهر خطأ في التقرير ولكن يظهر صفحة بيضاء فقط.


الحل هو بتمرير NULL إلى الوسيط ProjectID بشكل صريح كما يلي:



بالعربي نتقدم

الثلاثاء، 20 أكتوبر 2015

الخطأ Keyset does not exist exception


إحدى الطرق لتطبيق الحماية لخدمات الويب المطبقة باستخدام تقنية WCF هي من خلال استخدام الشهادات الموثقة Authorized Certificates وذلك من خلال تطبيق الإعدادات التالية ضمن ملف الـ web.config

<system.serviceModel>
  <bindings>
    <basicHttpBinding>
      <binding name="BasicHttpBinding_IActiveDirectoryService">
        <security mode="TransportWithMessageCredential">
          <message clientCredentialType="Certificate" />
        </security>
      </binding>
    </basicHttpBinding>
  </bindings>
  <client>

    <endpoint address="https://[URL]/ActiveDirectoryService.svc"
              binding="basicHttpBinding"
              bindingConfiguration="BasicHttpBinding_IActiveDirectoryService"
              behaviorConfiguration="customBehavior"
              contract="IActiveDirectoryService"
              name="BasicHttpBinding_IActiveDirectoryService" />

  </client>

  <behaviors>
    <endpointBehaviors>
      <behavior name="customBehavior">
        <clientCredentials>
          <clientCertificate findValue="services-p"
                             x509FindType="FindBySubjectName"
                             storeLocation="LocalMachine" storeName="My" />
          <serviceCertificate>
            <authentication certificateValidationMode="ChainTrust" />
          </serviceCertificate>
        </clientCredentials>
      </behavior>
    </endpointBehaviors>
  </behaviors>

</system.serviceModel>

يجب الانتباه إلى قيمة الخاصية findValue للعنصر clientCertificate فهي تعبر عن اسم الشهادة التي تم تثبيتها على الجهاز، طبعاً هذه الإعدادات تعتمد على معلومات الشهادة الموثقة التي حصلت عليها.

المهم أنه في بعض الأحيان يظهر الخطأ التالي:

Keyset does not exist exception

أحد أسباب هذا الخطأ هي أن الحساب الخاص بالموقع على IIS Application Pool ليس لديه صلاحية للوصول إلى المفتاح الخاص Private Key الخاص بالشهادة، ولحل هذه المشكلة يجب اتباع الخطوات التالية:

1 – افتح الأداة MMC كما يلي




2 – أضف الأداة Certificates كما يلي:







3 – من خلال الأداة Certificates اختر الشهادة المناسبة وبالضغط على زر الفأرة الأيمن اختر All Tasks ومن ثم Manage Private Keys وأعطي حساب الـ IIS Application Pool الصلاحيات المناسبة.

الخطوات السابقة يجب أن تحل المشكلة السابق.

استمتع بالأفضل




الأحد، 18 أكتوبر 2015

آلية تشغيل IIS Express مع VS 2013


في الإصدارات السابقة لـ Visual Studio كانت هناك ميزة من خلالها يمكن توفير إدارة بسيطة للمستخدمين والأدوار Roles الخاص بنظام إدارة المستخدمين Microsoft Membership الافتراضي الذي يمكن تطبيقه على تطبيقات ASP.NET التي تعمل باستخدام تقنية النماذج Web Forms، هذه الميزة تعمل من خلال القائمة PROJECTS عندما يكون المشروع مفتوح ضمن الـ Visual Studio والأمر هو ASP.Net Configuration

كانت وظيفة هذه الأداء هي توفير إمكانيات بسيطة لإدارة المستخدمين والأدوار عند استخدام ASP.NET Membership Provider.

في Visual Studio 2013 لا تظهر هذه الأداة لكن مازالت إمكانية استخدامها متوفرة وذلك من خلال اتباع الخطوات التالية:

1 - ابحث عن مسار المجلد IISExpress تحت المجدل Program Files وعادة ما يكون كما يلي:


C:\Program Files\IIS Express

2 – شغل سطر الأوامر Command Prompt وانتقل إلى مسار المجلد IIS Express كما يلي:



3 – نفذ الأمر التالي:

iisexpress.exe /path:"C:\Windows\Microsoft.NET\Framework64\v4.0.30319\ASP.NETWebAdminFiles" /vpath:"/ASP.NETWebAdminFiles" /port:5467 /clr:4.0 /ntlm

مع الانتباه إلى أن قيمة المتغير port يمكن تغييرها مع الانتباه إلى استخدام رقم منفذ غير مستخدم


4 – الآن شغل الأمر التالي في المتصفح:

http://localhost:5467/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=[ProjectPath]&applicationUrl=/

مع الانتباه إلى ضرورة تغيير قيمة المتغير applicationPhysicalPath إلى مسار مجلد المشروع الفيزيائي، مثلاً:

c:\inetpub\wwwroot\mywebsite

الآن يجب أن تعمل الأداة بالشكل المناسب، في حال أنها لم تعمل الرجاء وضع تفاصيل الخطأ الذي يظهر في التعليقات لكي تتم مساعدتك.

استمتع بالأفضل









السبت، 10 أكتوبر 2015

كيف توقف خدمة في ويندوز بشكل إجباري



عند تشغيل/إيقاف Windows Service من خلال الشاشة services.msc أو من خلال سطر الأوامر Command Line باستخدام أحد الأمرين التاليين:

sc start [ServiceName]
sc stop [ServiceName]

في بعض الأحيان قد تعلق الخدمة في الوضع Starting أو Stopping لعدة أسباب من أهمها وجود شيفرة برمجية غير صحيحة في الحدث OnStart أو الحدث OnStop.

فمثلاً لنفترض الخدمة في الحالة Running ونريد إطفاءها (إيقافها عن العمل) وفي الحدث OnStop يوجد السطر التالي فقط:

throw new Exception(“”);

هذا يعني أنه عند كل محاول إيقاف الخدمة سيتم رمي هذا الاستثناء وبالتالي فشل عملية الإيقاف ولن يتمكن المستخدم من إيقاف الخدمة. لإيقاف مثل هذه الخدمات يجب اتباع الخطوات التالية:

1 – الحصول على اسم الخدم التي يجب إيقافها وذلك بالضغط عليها مرتين في شاشة خدمات نظام التشغيل services.msc


2 – تشغيل سطر الأوامر كمدير للنظام Run Command Prompt as administrator.

3 - نفذ السطر التالي

sc queryex TimeBroker

عندها تظهر النتيجة التالي:



نلاحظ القيمة PID تساوي 1348 وهو رقم العملية التي تشغل الخدمة ضمن نظام التشغيل.

4 – الخطوة الأخيرة هي تنفيذ الأمر التالي لقتل العملية رقم 1348 لإيقاف الخدمة عن العمل بشكل إجباري



بعد تنفيذ الأمر السابق ستكون الخدمة قد توقفت بشكل إجباري.









الجمعة، 9 أكتوبر 2015

أنواع الحقول في محرك البحث Solr



في هذه المقالة يتم استعراض جميع أنواع الحقول في Solr, تم نشر هذه المقالة على موقع scribd كملف PDF



الأحد، 27 يوليو 2014

خطوات تثبيت محرك البحث Solr



خطوات تثبيت محرك البحث Solr

http://www.scribd.com/doc/235190828/ArabicSolr-Installation

تعتبر هذه المقالة الأولى في سلسلة تعلم Solr بالعربي.

قراءة ماتعة


الخميس، 15 مايو 2014

كتاب شيربوينت 2013 باللغة العربية


بحمد الله تم اليوم إصدار كتابي الجديد بعنوان تعلم SharePoint 2013 بمشاركة أخي وصديقي فادي عبد الوهاب
الكتاب يتحدث عن شيربوينت 2013 والبحث وتعدد اللغات وبعض المفاهيم المفيدة

ندعو الله أن يكون رافداً للمحتوى العربي المعلوماتي حيث يعتبر الوحيد (على ما أعتقد) فيما يخص شيربوينت 2013 وهو الكتاب الثاني بعد تعلم شيربوينت 2010

لطلب الكتاب الرجاء التواصل على ismaeel.enjreny@gmail.com