Aurelia - Debugging اقتناص الأخطاء او التصحيح أوريليا

 Aurelia - Debugging اقتناص الأخطاء او التصحيح أوريليا

في هذا الفصل ، ستتعلم كيفية إضافة مصحح سياق Aurelia كامتداد chrome.

ملاحظة - قبل إضافة الامتداد ، يجب أن يكون لديك ملفات أدوات aurelia . إذا لم يكن لديك ، يمكنك التحقق من فصل الأدوات.

الخطوة 1 - افتح ملحقات كروم

أسهل طريقة لفتح ملحقات chrome هي تشغيل الكود التالي في شريط عنوان URL بالمتصفح.

chrome://extensions

الخطوة 2 - إضافة ملحق

نظرًا لأن هذا الامتداد غير متاح حتى الآن من متجر Chrome ، تحقق من مربع اختيار وضع التطوير وانقر فوق تحميل الإضافات غير المضغوطة . سيؤدي هذا إلى فتح نافذة صغيرة حيث يمكنك اختيار الامتداد المراد إضافته.

في هذا المثال ، دعنا نختار مجلد Desktop / aurelia-projects / tools / Context-debugger ونفتحه.

الآن ، يمكننا أن نرى أن الامتداد يتم تحميله في المتصفح.

يمكننا أيضًا التحقق من وحدة تحكم المطورين. عندما نضغط على علامة تبويب العناصر ، سنرى خصائص aurelia في الركن الأيمن السفلي.

Aurelia - Bundling أوريليا - تجميع

 Aurelia - Bundling أوريليا - تجميع

في هذا الفصل ، ستتعلم كيفية استخدام التجميع في إطار عمل Aurelia.

الخطوة 1 - تثبيت المتطلبات الأساسية

يمكنك تثبيت aurelia-bundler عن طريق تشغيل الأمر التالي في موجه الأوامر .

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

إذا لم يكن لديك برنامج gulp مثبتًا ، فيمكنك تثبيته عن طريق تشغيل هذا الرمز.

C:\Users\username\Desktop\aureliaApp>npm install gulp

يمكنك أيضًا تثبيت حزمة request -dir من npm .

C:\Users\username\Desktop\aureliaApp>npm install require-dir

الخطوة 2 - إنشاء مجلدات وملفات

أولاً ، أنشئ ملف gulpfile.js في دليل جذر التطبيقات.

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

تحتاج إلى إنشاء ملف bundle.js داخل مجلد المهام .

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

الخطوة 3 - الجلبة

استخدم البلع باعتباره عداء المهام. تحتاج إلى إخباره بتشغيل الكود من build \asks \ bundle.js .

gulpfile.js

require('require-dir')('build/tasks');

الآن ، قم بإنشاء المهمة التي تحتاجها. ستأخذ هذه المهمة التطبيق ، وتنشئ ملفات dist / appbuild.js و dist / vendor-build.js . بعد اكتمال عملية التجميع ، سيتم أيضًا تحديث ملف config.js . يمكنك تضمين جميع الملفات والمكونات الإضافية التي تريد حقنها وتصغيرها.

bundle.js

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',
	
   bundles: {
      "dist/app-build": {
         includes: [
            '[*.js]',
            '*.html!text',
            '*.css!text',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
            'aurelia-bootstrapper',
            'aurelia-fetch-client',
            'aurelia-router',
            'aurelia-animator-css',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task('bundle', function() {
   return bundle(config);
});  

في موجه الأوامر سوف اعلامنا عندما تجميع كاملة.

Aurelia - Tools أوريليا - أدوات

 Aurelia - Tools أوريليا - أدوات

في هذا الفصل ، سوف تتعلم كيفية إعداد واستخدام أدوات aurelia .

الخطوة 1 - المجلد الجذر

لنقم بإنشاء مجلد جذر حيث سنحتفظ بجميع تطبيقات Aurelia.

C:\Users\username\Desktop>mkdir aurelia-projects

الخطوة 2 - أدوات أوريليا

داخل مجلد aurelia-projects ، سنقوم باستنساخ مستودع أدوات aurelia من github.

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/tools.git

الخطوة 3 - إنشاء مشروع جديد

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

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git

نحتاج أيضًا إلى تثبيت الحزم والوحدات والتبعيات. يمكنك الاختيار من بين العديد من تطبيقات الهيكل العظمي. سوف نستخدم skeleton-es2016 .

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>npm install
C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>jspm install

أخيرًا ، نحتاج إلى تشغيل الكود التالي لبناء بيئة التطوير.

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp build-dev-env

الخطوة 4 - التحديث

قم بتحديث المستودعات المحلية باستخدام الأمر التالي.

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp update-own-deps

الخطوة 5 - سحب

يمكننا أيضًا سحب تبعية Aurelia بدون بناء.

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp pull-dev-env

Aurelia - Localization أوريليا - التعريف او الترجمة

 Aurelia - Localization أوريليا - التعريف او الترجمة

تقدم Aurelia البرنامج المساعد i18n . في هذا الفصل ، ستتعلم كيفية ترجمة تطبيقك باستخدام هذا المكون الإضافي.

الخطوة 1 - تثبيت البرنامج المساعد

افتح نافذة موجه الأوامر وقم بتشغيل الكود التالي لتثبيت المكون الإضافي i18n .

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

نحتاج أيضًا إلى تثبيت المكون الإضافي الخلفي.

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

الخطوة 2 - إنشاء مجلدات وملفات

في المجلد الجذر للمشروع ، نحتاج إلى إنشاء دليل محلي .

C:\Users\username\Desktop\aureliaApp>mkdir locale

في هذا المجلد ، تحتاج إلى إضافة مجلدات جديدة لأي لغة تريدها. سننشئ en مع ملف translation.js بداخله.

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json    

الخطوة 3 - استخدم البرنامج المساعد

تحتاج إلى استخدام التمهيد اليدوي لتتمكن من استخدام هذا البرنامج المساعد. تحقق من فصل التكوين لمزيد من المعلومات. نحتاج إلى إضافة المكون الإضافي i18n إلى ملف main.js.

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },
				
         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

الخطوة 4 - ترجمة ملف JSON

هذا هو الملف حيث يمكنك تعيين قيم الترجمة. سوف نستخدم مثالا من الوثائق الرسمية. و دي-DE ينبغي في الواقع أن تستخدم مجلد للترجمة إلى اللغة الألمانية، ولكن سوف نستخدم اللغة الإنجليزية العبارات بدلا من ذلك، لتسهيل الفهم.

ترجمة. json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

الخطوة 5 - ضبط الإعدادات المحلية

نحتاج فقط إلى استيراد المكون الإضافي i18n وتعيينه لاستخدام رمز JSON من مجلد de-DE .

app.js

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')
		
      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

الخطوة 6 - عرض

هناك طريقتان لترجمة البيانات. سنستخدم محول ValueConverter مخصص اسمه t . يمكنك أن ترى في المثال التالي طرقًا مختلفة لتنسيق البيانات. قارن هذا مع ملف translation.json وستلاحظ الأنماط المستخدمة للتنسيق.

<template>
   <p>
      Translation with Variables: <br />
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br />
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${ 'friend' | t } <br />
      ${ 'friend' | t: { context: 'male' } } <br />
      ${ 'friend' | t: { context: 'female' } }
   </p>
	
</template>

عندما نقوم بتشغيل التطبيق ، سوف نحصل على الناتج التالي.

Aurelia - Dialog صندوق الحوار أوريليا

 Aurelia - Dialog صندوق الحوار أوريليا

تقدم Aurelia طريقة لتنفيذ نافذة الحوار (المشروطة). في هذا الفصل ، سنوضح لك كيفية استخدامه.

الخطوة 1 - تثبيت البرنامج المساعد للحوار

يمكن تثبيت البرنامج المساعد Dialog من نافذة موجه الأوامر .

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

لكي يعمل هذا البرنامج المساعد ، نحتاج إلى استخدام التمهيد اليدوي. لقد غطينا هذا في فصل التكوين. داخل ملف main.js ، نحتاج إلى إضافة المكون الإضافي aurelia-الحوار .

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 

   aurelia.start().then(() => aurelia.setRoot());
}

الخطوة 2 - إنشاء مجلدات وملفات

أولاً ، سنقوم بإنشاء دليل جديد يسمى modal . دعنا نضعه داخل مجلد المكونات . افتح موجه الأوامر وقم بتشغيل التعليمات البرمجية التالية.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

في هذا المجلد ، سننشئ ملفين جديدين. وهذه الملفات تمثل الرأي و الرأي نموذج للمشروط لدينا.

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

الخطوة 3 - إنشاء مشروط

أولاً ، دعنا نضيف كود نموذج العرض . نحن بحاجة إلى استيراد وحدة تحكم الحوار وضخها . يتم استخدام وحدة التحكم هذه للتعامل مع وظائف محددة مشروطة. في المثال التالي ، نستخدمه لمركزية مشروطة أفقيًا.

my-modal.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

و عرض وكود تبدو هذه. سيتم فتح أو إغلاق الأزرار عند النقر فوقها.

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

الخطوة 4 - تشغيل مشروط

الخطوة الأخيرة هي وظيفة لتشغيل النموذج الخاص بنا. نحن بحاجة إلى استيراد وإدخال DialogService . هذه الخدمة لديها طريقة مفتوحة ، حيث أننا يمكن أن تمر عرض نموذج من بلدي الوسائط الملف و نموذج ، حتى نتمكن من ربط حيوي البيانات.

app.js

import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         console.log(response);
			
         if (!response.wasCancelled) {
            console.log('OK');
         } else {
            console.log('cancelled');
         }
         console.log(response.output);
      });
   }
};

أخيرًا ، سننشئ زرًا حتى نتمكن من استدعاء دالة openModal .

app.html

<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template>

إذا قمنا بتشغيل التطبيق ، فيمكننا النقر فوق الزر OPEN MODAL لتشغيل نافذة مشروطة جديدة.

Aurelia - Animations أوريليا - صور متحركة

 Aurelia - Animations أوريليا - صور متحركة

في هذا الفصل ، ستتعلم كيفية استخدام الرسوم المتحركة لـ CSS في إطار عمل Aurelia.

الخطوة 1 - عرض

ستحتوي طريقة العرض الخاصة بنا على عنصر واحد سيتم تحريكه وزر لتشغيل وظيفة animateElement () .

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

الخطوة 2 - عرض النموذج

داخل ملف JavaScript الخاص بنا ، سنستورد المكون الإضافي CssAnimator ونحقنه كتبعية. و animateElement وظيفة استدعاء الرسوم المتحركة لبدء الرسوم المتحركة. سيتم إنشاء الرسوم المتحركة في الخطوة التالية.

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

الخطوة 3 - الأسلوب

سنكتب CSS داخل ملف styles / styles.css . .myAnimation-add هي نقطة البداية للرسوم المتحركة بينما يتم استدعاء .myAnimation-remove عند اكتمال الرسم المتحرك.

style.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

بمجرد النقر فوق الزر ANIMATE ، سيتم تغيير لون الخلفية من اللون الأزرق الفاتح إلى الظل الداكن. عند اكتمال هذه الرسوم المتحركة بعد ثلاث ثوانٍ ، سيتلاشى العنصر إلى حالة البداية.