تور آشنایی با پلتفرم خودکار قسمت پنجم

در این قسمت من می خواهم یک بخش دیگر از کد نویسی سمت client، به عنوان بخش مدیریت صفحات را به شما معرفی کنم.

ابتدا وارد سایت می شویم. از منوی اصلی، سمت چپ بخش مدیریت محتوا، مدیریت صفحات. سعی می کنم این آیتم های مهمی را که اینجا وجود دارد برای شما توضیح دهم. عنوان، که عنوان صفحه است. منو، منو در اصل لینک هایی است که شما قبلا ساختین، تمام لینک های(درخت لینک ها) که در وب سایت تان دارید، اینجا وجود دارد و شما می توانید برای لینک , صفحه بسازید.

لینک ها را هم شما می توانید از قسمت مدیریت لینک ها، همانطور که مشاهده می کنید برای زبان ها و کشورهای مختلف درخت لینک تان را اینجا کامل کنید. فقط تنها نکته ای که اینجا وجود دارد، یک حالت موبایل است من حالا به عنوان نمونه، در قسمت توسعه و تست، یک صفحه تستی دارم که حالت موبایل آن فعال است و آدرس آن develop/test/testpag  است. یک صفحه تستی دیگری هم وجود دارد که حالت موبایل آن فعال نیست و بازهم آدرس آن همان است.

فرق این دو تا این است که آن حالت موبایل به صورت اتوماتیک موبایل Sign به ابتدای url اضافه می شود آن موبایل Sign هم شما می توانید در وب کانفیگ تان تعریف کنید. اگر بخواهم به شما نشان بدهم، در توسعه، مدیریت وب کانفیگ، تنظیمات , در داخل تنظیمات، ما یک موبایل Sign داریم اینجا، این موبایل Sign  ایی که اینجا مشاهده می کنید، اگر ویرایش رابزنم، می بینید که مقداری که در داخل url قرار میگیرد، واسه ما کلمه کلیدی mobile است.

شما میتوانید برای خودتان تغییر بدهید به هر کلمه ای که دوست دارید. یک نکته ای که در قسمت تنظیمات وبکانفیگ وجود دارد (مدیریت وبکانفیگ)، یک ردیو باتن (Radio Button) گزینه ای است به اسم به جاوا اسکریپت تزریق شود. این آنجایی است که تنظیمات داخل وبکانفیگ را با  تنظیمات های داخل جاوا اسکریپت شما Sync می کند اینکه Setting های جاوا اسکریپت شما کجا هست را من جلوتر براتون توضیح میدهم ولی این امکان خیلی خوبی است که میتواتد سمت سرور و client را تنظیمات شما را با همدیگر Sync کند.

برمیگردم به مدیریت صفحات گزینه دیگری که اینجا مهمه نوع صفحه است. ما در پلتفرم 4 نوع صفحه داربم : مودال،فرم،قالب،چهارچوب.

مودال که همان مودال هایی است که باز میشود مودال بوت استرپ ،فرم صفحات اصلی Html است قالب , تم اصلی وب سایتمون است وچهار چوب که فریم ورک اصلی ما است .

من از چهار چوب شروع میکنم براتون یک توضیح مختصری میدهم .در حال حاضر یک چهارچوب پیش فرض بیشتر نداریم که فریم ورک خودکار است. در چهار چوب، سه تا بخش داریم , ما در مدیریت صفحاتی که شما میتوانید کد بزنید، یکی بخش Html است ،یکی بخش جاوا اسکریپت است یکی هم بخش cssاست در بخش Html فریم ورک اون چهار چوب اصلی ان Html و body و head  کلمات کلیدی وب سایت شما همه ی این ها داخل این چهار چوب می آید، اما مهم تر از آنها آن CSS ها و js های اصلی شما هستند مثل حالا bootstrap و Jquery یا هر چیز دیگه ای که استفاده می کنید. منتهی اگر شما اینجا دقت کنید من آمدم به طرز خاصی این ها را اینجا رفرنس کردم. مثلا همون ascore.css   که فریم وورک css اصلی خودکار است من به جای اینکه بیام حالت معمولی یک css  وارد آن بکنم، آمدم از کلمه ی asStyleRefrencesStart استفاده کردم و CSS ها , فایل های CSS که باید استفاده شود  که حالا مثلا اینجا  bootstrapt_Rtl  است آمدم داخل این خط دستور کد نوشتم و جاوا اسکریپت هم اگر دقت کنید باز همچین چیزی دارد asJavascriptRefrenceStart  برای شروع و asJavaScriptRefrencesEnd آمدم ascore.js  ،libs.js  ،fa  که fa برای زبان فارسی است ، چون چهارچوب خودکار فارسی انتخاب شده است , این ها را گذاشتم داخل این ولی اگه دقت کنید باز واسه جاوا اسکریپت حالت یخورده معمولی تر هم است ولی باز اینجا هم یک asScriptsPath  داریم حالا اینها چرا این طور است من براتون توضیح میدهم.

شما میتوانید به صورت معمولی هم CSS ها و استایل هاتون را اینجا بگذارید ولی موقعی که اینجور میگذارید دوتا مزیت برای شما دارد اول اینکه اگر در مدهای حالت دیباگ یا Release وارد شوید CSS ها و js درست آن حالت را به شما نشان می دهد یعنی اگر حالت دیباگ وارد شوید این CSS ها و js  دیباگ را می آورد و اگر حالت Release وارد شوید  CSS ها و js های Release را می آورد.

مزیت دیگر آن , این است یک حالت شمارنده , حالا اگر دقت کرده باشید تو همین جا وقتی صفحات لود می شود مثلا میگه که 2 از 10 یعنی 2 تا CSS و js  از 10 تا  CSS و js لود شده و همین جور شمارنده می اندازد 2 از 10، 3 از 10، 4 از 10 .

این در عوض این مزیت را دارد که شما بتونید به صورت گرافیکی مثل Gmail نشون بدید که چه تعداد از اسکریپت ها و استایل هاتون لود شده است .

واسه جاوا اسکریپت دقیقا همینجوریه , منتهی اگر دقت کنید برای جاوا اسکریپت یک چیز اضافه دارم یک حالت دیگه تعریف کردم، این حالت دیگر یک مزیت بیشتر ندارند آن هم اینکه در حالت دیباگ و Release اسکریپتدرست رو برای شما میاره ,  ولی دیگه شمارنده نمی اندازه.

برای اینکه ما بعضی جاها مجبوریم که اون js های خیلی پایه ایی (مثل Jquery) را به این شکل تعریف کنیم یعنی نمیتونیم شمارنده بندازیم یعنی Jquery حتما باید لود شده باشد modernizr حتما باید لود شده باشد signalR همینجوری , این ها حتما باید باشند تا بعد بشود شمارنده انداخت.بنابراین این بخشی از Html این فریم ورک در بخش جاوا اسکریپت است .

ما یک متدی دارد فریم ورک خودکار به اسم asInitApp که نقطه شروع برنامه وبسایت شما است. یعنی نقطه ی استارت وبسایت شما است از اینجا می خورد,  حالا یک appName یک زبان پیش فرض, مثل زبان فارسی و حالت موبایل و آپشن های دیگری هم زیاد دارد یکی از آپشن ها ورژن است من در ویدئو های قبلی به شما گفتم که پلتفرم گارانتی می کند که همیشه آخرین ورژن وبسایت شما برسد بدست کاربران نه ورژن کش شده داخل مرورگرها یک راهش همان تزریق وابستگی ها بود که ورژن میخورد و شما میتونستید آن صفحات خاص یا آن اسکریپت های خاص را که میخواستید از اول بسازید آپدیت کنید و ورژن آن را بلاتر ببرید و کاربر ورژن جدید تر را بگیرند.

یک راه دوم که داره اینجا است شما اگر این ورژن را عوض بکنید این کل وبسایت تان بروز می شود یعنی دیگر روی یک دونه اسکریپت یک دانه استایل یک دانه صفحه اعمال نمی شود. برای تمام صفحات و استایل هایتان مروزگر را مجبور کند برورد همه را از اول از سرور بگیرد و بیارود پس اینجا باید کمی مراقب باشید اگر میخواهید این  ورژن را بزنید حتما حالتی باشد که ورژن برنامه شما عوض شده.

من قبلا در مدیریت تنظیمات بهتون گفتم که Setting های داخل وبکانفیگ با  جاوا اسکریپت sync میشوند, یعنی اگر شما دقت کنید این Setting های وبکانفیگ که Radio Button ارسال به جاوا اسکریپت روشن است با جاوا اسکریپت Sync می شوند اما اینکه کجا Sync می شوند اون نقطه این نقطه است asInitApp , بصورت اتوماتیک و پشت صحنه شما هر ستینگی که را تیکش را بزنید خود پلتفرم به همراه این ستینگ ها اینجا نوشتید آنها را هم میاورد و به این ستینگ ها اضافه می کند و می فرستند به داخل فریم ورک خودکار.

حالا آنجا شما می توانید بروید سورس آن را داخل ascore.js، را ببینید که با آن Setting هایی که ارسال می شود به جاوا اسکریپت چه فرایندهایی چه بزینسی روی آن ها انجام می شود. حالا دیگه گزینه های دیگر هم دارد که بعدا بصورت مفصل توضیح خواهم داد.

در قسمت CSS هم CSS هایی که حالا برای خود فریم ورک لازم هستند را اینجا آوردم خب اینجا دیگه بخش مهمی نداریم. میرویم سراغ قالب.

در بخش قالب ها، قالب پیش فرض، همانطور که می بینید هر قالبی باید به فرم ورکی وصل بشود یک فرم ورک می تواند n تا قالب داشته باشد ما الان اینجا دوتا قالب داریم. پیش فرض و پیش فرض جایگزین . حالا شاید برایتان سوال شود که این چه معنی می دهد قالب پیش فرض و پیش فرض جایگزین. چون پلتفرم را خودش با خودش در اصل نوشتم یک موقع هایی قالب پیشفرض به خطا می خورد و دیگه امکان ویرایش وبسایت وجود نداشت , بنابراین من سوئیچ می کردم به پیش فرض جایگزین. همان پیش فرض را دوباره درست می کردم که بتوانم دوباره به ادامه توسعه وبسایت ادامه بدهم. برای همین این ها دوتا است کاربردش در این مواقع است. پس یک چارچوب می تواند n تا قالب داشته باشد و اینجا قالب پیش فرض چارچوب خودکار دارد.

در قسمت قالب ها یک الگوی قالب داریم که اینجا می بینید یک / فقط خورده است. این در اصل می گوید که این قالب روی چه الگویی از url ها اعمال می شود. وقتی که یک عدد / خورده یعنی که بر روی ریشه سایت , این قالب اصلی تان است . شما می توانید همینجا یک url بذارید مثل /Admin که نشان می دهد این قالب فقط بر روی صفحاتی که آدرس انها با Admin شروع می شود , اعمال گردد.

باز پارمتر های صفحه هم است , در پارمت های صفحه این در اصل پارمتر هایی است که به صفحه شما پاس می شود حالا این صفحه می تواند modal باشد فرم باشد قالب باشد شما می توانید در زمان اجرا یک تابع جاوا اسکریپت را صدا کنید یک مقادیری را محاسبه کنید و پاس بدهید به صفحتان منتهی این قبل از اینکه به صفحه شما برسد به خود فریم ورک هم می رسد , فریم ورک هم از این استفاده میکند. یکی از مواردی که فریم ورک استفاده میکند load script and style است ,  قبلا برای شما توضیح دادم که اسکریپت ها و استایل ها از طریق سیستم تزریق وابستگی های خود پلتفرم تزریق می شود به صفحات , اما یک وقت هایی است که شما آن برایتان کفایت نمی کند و نیاز دارید که flexible تر باشد مثلا فرض کنید که شما می خواهید که css و js را براساس انتخاب کاربر وارد صفحه تان کنید در زمان اجرا و دیزاین تایم یک تابعی را صدا کنید مثلا با انتخاب تم در زمان اجرا توسط کاربر css ها و js های مربوط به ان تم لود شود , اینجا هست که بهتان کمک می کند که در اصل مکمل سیستم تزریق وابستگی ها است.

در قالب هم اگر بیاییم یک html ای دارد که میاد در وسط ان body فریم ورکتان و یک نکته مهمی که اینجا دارد یک دانه placeholder دارد این آنجایی است که فرم هاتون که صفحه های اصلی html تون هستن لود می شوند و قرار می گیرند.

در قسمت جاوا اسکریپت تان نکنه مهمش همان متد asIsAuthenticated هست , این در اصل در سمت کاربر تشخیص می دهد که کاربر الان با نام کاربری و رمز عبور وارد سایت شده هست یا نه. اگر مثلا اون IsAuthenticated باشد دکمه خروج را فرضا نشون بده البته این را در نظر داشته باشید که  نباید از کدهای امنیتی ، کد هایی که از لحاظ امینتی برایتان مهم است یا محتوایی که از نظر امنیتی برایتان مهم است نشان بدهید. ماکزیمم همین مثلا دکمه خروج را نشان دهید یا بردارید در همین حد باید از همین isauthenticated استفاده کنیم.

اگر محتوای امن و مهمی دارید که فقط کاربرایتان ببینند باید از سمت سرور بردارید و بیاورید نه اینجا در قالب بگذارید و بگید اگر IsAuthenticated بود نشان بدهد و اگر نبود نشان ندهد. ولی در حد اینکه دکمه خروج را یا لینک ثبت نام را نشان بدهد یا ندهد را میتوانید در اینجا از متد اصلی IsAuthenticated استفاده کنید.

دکمه انتشار دارد اینجا اگه انتشار را بزنید علاوه بر اینکه در حالت دیباگ می رود در حالت Release تان هم انتشار پیدا می کند. این هم از قالب بود بعد فرم.

یک فرم هم به عنوان نمونه به شما نشان بدهم. مثلا تاریخچه خطا. باز همان طور که مشاهده می کنید در پارمتر های صفحه در زمان اجرا رفته مثلا تم تقویم را تم با عنوان پابلیک را لود کرده اورده. Html که آن صفحه دارد Html خاصی ندارد. Html معمولی که حالا با bootstrap نوشته شده است و جاوا اسکریپت آن هم که حالا بعدا بیشتر توضیح می دهم ولی چیز خاصی ندارد.

جاوا اسکریپت معمولی و Jquery هست. CSS هم بهتر است که اینجا نباشد بهتر از شما یک فایل جداگانه داشته باشید که همان اول صفحه لود کنید ولی خب اینجا حالا قابلیتی که هستش.

اینجا یک قسمت سرویس ها هم داریم که بعدا در یک ویدئو جدا گانه توضیح می دهم.