ساخت برنامه با AngularJS – مقدمه

ساخت برنامه با AngularJS – مقدمه

در اولین مجموعه از آموزش ساخت برنامه با AngularJS قصد دارم آموزشی را با شما به اشتراک بگذارم که از وب سایت رسمی AngularJS ترجمه شده است، در این آموزش سعی کرده ام که منظور نویسنده را به درستی به شما انتقال دهم. در این آموزش فرض شده است که شما هیچ تجربه ی کار با AngularJS ندارید.

یکی از بهترین راه ها برای شناخت AngularJS کار با این آموزش است، که با ساخت و ساز یک برنامه ی کاربردی وب با استفاده از AngularJS آشنا می شوید تا در آینده کمکی بشود در ساخت برنامه های پیشرفته تر.برنامه ای که قصد داریم در این آموزش ایجاد کنیم، ساخت یک کاتالوگ است که فهرستی از دستگاه های آندروید را نمایش می دهد، این برنامه همچنین این اجازه را می دهد که تنها دستگاه هایی که مورد علاقه شما است را فیلتر و نمایش دهد و در آخر جزئیات هر دستگاه را نمایش دهد.

catalog_screen

آموزش را دنبال کنید تا ببینید Angular چطور بدون استفاده از پسوند های بومی یا پلاگینی باعث دقیقتر و زیرکتر شدن مرورگرها می شود:

  •  مثال ها را مشاهده کنید تا ببینید که چطور با اتصال به داده های سمت سرویس گیرنده نماهای پویا در پاسخ به اعمال کاربر بلافاصله تغییر می کنند.
  • خواهید دید که چطور Angular نماها را همگام با داده های شما بدون نیاز به دستکاری DOMها نگهداری می کند، منظور از نماها همان views است.
  • برای یادگیری بهتر، راه ساده تر برای آزمایش برنامه وب خود، استفاده از Karma و Protractor است.
  • یاد بگیرید که چگونه از وابستگی های تزریق و خدماتی که وظایف متداول وب را انجام می دهند، مثل گرفتن داده ها در برنامه خود، استفاده کنید.

هنگامی که این مجموعه از آموزش را به پایان رساندید، قادر خواهید بود:

  • برنامه های پویای پویا ایجاد کنید تا در تمام مرورگرهای مدرن قابل اجرا باشد.
  • از پیوند داده برای مخابره کردن مدل داده در نمای شما.
  • ایجاد و اجرای تست های واحد، با Karma.
  • ایجاد و اجرای پایان برای پایان دادن آزمون، با Protractor.
  • نقل مکان منطق برنامه ها از یک الگو (template) به کنترل کننده ها (controllers).
  • دریافت داده ها از یک سرور با استفاده از سرویس Angular.
  • درخواست انیمیشن به خواست شما در برنامه، با استفاده از ngAnimate.
  • شناسایی منابع، برای یادگیری بیشتر در مورد AngularJS.

آموزش، شما را راهنمایی می کند تا از طریق تمام مراحل ساخت یک برنامه ساده آشنا شوید، از جمله نوشتن و اجرای واحد ها و تست نهایی به پایان.آزمایش در هر مرحله که برای شما آمده شده است، که تجربه کافی برای کار با AngularJS و برنامه های که قرار است با آن درست کنید را داشته باشید.

شما می توانید کل آموزش را در چند ساعت مطالعه کنید و یا ممکن است بخواهید هر بخش را در یک روز لذت بخش مطالعه کنید. اگر به دنبال یک معرفی کوتاه از AngularJS هستید، مستندات Getting Started را مشاهده کنید، که در آینده ترجمه این مطالب را هم در وب سایت خواهم گذاشت.

 

شروع به کار

بقیه صفحه توضیح می دهد که چطور توسعه دهنده های وب Angular را بر روی سیستم خود راه اندازی کنند. اگر فقط می خواهید آموزش را مشاهده کنید می توانید مستقیم به اولین مرحله بروید: مرحله 0 – آماده سازی پروژه.

 

کار با کد

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

این آموزش متکی بر استفاده از سیستم نسخه ی Git برای مدیریت کدها می باشد. نیازی نیست که چیزی درباره ی Git برای ادامه مطلب بدانید، به غیر از نحوه نصب و اجرای چند فرمان ساده git.

 

نصب Git

می توانید Git را از آدرس http://git-scm.com/download دانلود و نصب کنید. هنگامی که برنامه را نصب کردید، باید قادر باشید که از طریق خط فرمان به دستورات git دسترسی داشته باشید.

دستورات اصلی که شما نیاز به استفاده از آن دارید:

  • git clone ... : کلون یک مخزن از راه دور بر روی ماشین محلی خود
  • git checkout ... : بررسی یک شاخه ی خاص و یا یک نسخه ی برچسب از کد برای هک

 

دانــلود angular-phonecat

مخزن angular-phonecat را که در GitHub قرار داده شده است را با دستور زیر کلون کنید:

این دستور باعث می شود یک دایرکتوری angular-phonecat در دایرکتوری جاری خود ایجاد کند.

git-angular-phonecat

گزینه ی اختیاری depth=14-- فقط به Git می گوید که تنها 14 commit آخر برای ما مهم است. این باعث می شود دانلود سبکتر و سریعتر صورت گیرد.

دایرکتوری جاری خود را به آدرس angular-phonecat تغییر دهید:

دستورالعمل های این آموزش، از حالا به بعد، فرض شده است که شما تمام دستورات را در دایرکتوری angular-phonecat اجرا کرده اید.

 

نصب Node.js

اگر می خواهید یک وب سرور از پیش پیکربندی شده و ابزارهای تست داشته باشید، پس نیاز دارید که Node.js را نصب کنیم.

شما می توانید نصب برنامه ی Node.js برای سیستم عامل خود را از http://nodejs.org/download/ دانلود کنید.

نسخه ی Node.js خود را که نصب کرده اید را با دستور زیر در خط فرمان بررسی کنید:

در توزیع های مبتنی بر Debian، یک نام معادل با ابزاری دیگر به نام node وجود دارد. راه حلی که پیشنهاد شده، نصب مدیریت پیکیج ها nodejs-legacy است، که node را به nodejs تغییر نام می دهد.

اگر نیاز دارید که نسخه ی متفاوتی از node.js را بر روی سیستم داشته باشد، پیشنهاد می کنم، Node Version Manager (nvm) را نصب کنید.

هنگامی که node.js را نصب کردید، حال می توانید ابزارهای وابسته برای ساخت برنامه خود را دانلود کنیم:

git-angularjs-npm-install

این دستور ابزارهای زیر را در دایرکتوری node_modules دانلود می کند:

  • Bower – مدیریت بسته های کد در سمت سرویس گیرنده
  • Http-Server – یک وب سرور محلی شخصی ساده
  • Karma – اجرای واحد تست
  • Protractor – به پایان رساندن اجرای تست (E2E)

اجرای npm install همچنین به صورت اتوماتیک با استفاده از bower چارچوب Angular را در دایرکتوری app/bower_components دانلود می کند.

توجه داشته باشید که پروژه angular-phonecat از طریق اسکریپت های npm نصب و اجرا می شوند. به این معنا که لازم نیست هر یک از این ابزارها را برای ادامه این آموزش بصورت سراسری بر روی سیستم خود نصب کرده باشید.

اگر ابزارها یا اصطلاح ها بالا برای شما تازگی دارد، نگران نباشید، به مرور زمان با آنها می توانید آشنا شوید. برای درک بیشتر اینکه ابزارهای مدیریت بسته (package manager) چه هستند می توانید آموزش های مقدمه ای بر Grunt یا آغاز به کار با Bower را مطالعه کنید.

این پروژه تعدادی اسکریپت کاربردی npm از پیش تعریف شده برای راحتی در کار دارد که هنگام توسعه به آن نیاز پیدا می کنیم:

  • npm start – وب سرور محلی را شروع می کند
  • npm test – واحد تست Karma را اجرا می کند
  • npm run protractor – به پایان رساندن اجرای تست را اجرا می کند
  • npm run update-webdriver – نصب درایورهای مورد نیاز Protractor

 

نصب ابزار کمکی (اختیاری)

ماژول های Bower، Http-Server، Karma و Protractor هم اجرایی هستند، که بصورت سراسری نصب و مستقیما از طریق خط فرمان قابل اجرا هستند. در این آموزش نیازی به این کار نیست، اما اگر تصمیم گرفتید که آنها را مستقیم اجرا کنید، می توانید این ماژول ها را سراسری با استفاده از ... sudo npm install -g نصب کنید.

به عنوان مثال برای نصب باوئر از طریق خط فرمان می توانید دستور زیر را اجرا کنید:

اگر از سیستم عامل ویندوز استفاده می کنید کلمه ی sudo از دستور بالا را حذف کنید، سپس می توانید باوئر را مستقیما مثل زیر اجرا کنید:

 

اجرای وب سرور 

در حالی که برنامه های Angular کاملا سمت سرویس گیرنده اجرا می شوند، و این امکان وجود دارد که برنامه ها را بطور مستقیم از دایکتوری آنها با مرورگر اجرا کنیم، ولی بهتر است که برنامه ها را با استفاده از یک وب سرور HTTP اجرا کنیم. به طور خاص، به دلایل امنیتی، اکثر مرورگرهای امروزی اجازه نمی دهند که جاوا اسکریپت را به درخواست سرور، صفحات را مستقیما از طریق فایل سیستم اجرا کنند.

پروژه angular-phonecat با یک سرویس دهنده ی وب ایستا و ساده برای میزبانی برنامه در طول توسعه پیکربندی شده است. وب سرور خود را با دستور زیر اجرا می کنیم:

git-run-localhost8000

این کار باعث می شود که وب سرور محلی به port 8000 در سیستم شما گوش فرار دهد. حال می توانید به آدرس زیر از طریق مرورگر مراجعه کنید:

اگر دستورات بالا را به درستی انجام دهید، باید خروجی شما شبیه به زیر باشد:

angular-phonecat-product

در جهت اجرای وب سرور خود در یک ip یا port آدرس دیگر، می توانید فایل package.json را ویرایش کنید. می توانید از a- برای تنظیم آدرس و از p- برای تنظیم port استفاده کنید.

 

اجرای واحد تست

ما از واحد تست برای اطمینان از اینکه کدهای جاوا اسکریپت برنامه ما به درستی کار می کنند، استفاده می کنیم. واحد تست بر روی تست کردن بخش های جدای کوچک برنامه تمرکز می کند. واحد تست دز دایکتوری test/unit نگهداری می شود.

پروژه angular-phonecat برای استفاده از Karma پیکربندی شده است تا واحد تست را در برنامه اجرا کند. دستور زیر Karma را اجرا می کند:

بعد از اجرای دستور بالا خروجی در مرورگر شبیه به عکس زیر باید باشد:

angular-karma-ok

این کار باعث می شود واحد تست اجرا شود. Karma فایل پیکربندی را در آدرس test/karma.conf.js می خواند. این تنظیمات به Karma می گوید که:

  • مرورگر Chrome را باز کرده و به Karma متصلش کن
  • تمام واحدهای تست را در مرورگر اجرا کن
  • نتایج تست را در ترمینال نشان بده
  • تمام فایل های جاوا اسکریپت پروژه زیر نظر داشته باش تا هر گونه تغییری در آنها مشاهده شد، برنامه بطور خودکار کامپایل شود

خوب است که این امکان در پس زمینه ی برنامه همیشه فعال باشد، این کار باعث می شود بازخورد فوری از اینکه از تغییری در واحد تست رخ داده است را نمایش دهد، در حالی که شما در حال کار بر روی کدها هستید.

 

اجرای پایان برای پایان دادن به تست

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

واحد پایان دادن به تست در دایرکتوری test/e2e نگهداری می شود.

پروژه angular-phonecat برای استفاده از Protractor پیکربندی شده است تا واحد پایان دادن به تست را برای برنامه اجرا کند. Protractor به مجموعه ای از درایورها متکی می باشد تا اجازه تعامل با مرورگر را داشته باشد. می توانید این درایور را با دستور زیر اجرا کنید:

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

از آنجایی که Protractor با برنامه در حال اجرا تعامل می کند، نیاز داریم که وب سرور خود را اجرا کنیم:

آنگاه در یک پنچره خط فرمان دیگر، می توانیم اسکریپت تست Protractor را در برابر برنامه در حال اجرا اجرا کنیم:

protractor پیکربندی را از فایل test/protractor-config.js می خواند. این تنظیمات به Protractor می گوید که:

  • مرورگر Chrome را باز کرده و به برنامه متصلش کن
  • تمام واحد های اتمام تست ها را در مرورگر اجرا کن
  • گزارشی از این تست ها را در ترمینال نشان بده
  • پنجره مرورگر را ببند و از برنامه خارج شو

این خوب است که واحد اتمام تست را هر جایی که نیاز به تغییر HTML، یا می خواهید برنامه به درستی اجرا شود قرار دهید. این بسیار معمول است که E2E را قبل از قرار دادن commit جدید در مخزن اجرا کنیم.