سید معین حسینی

نام فایل‌های تست واحد

• فایل‌های تست را هم‌نام با کامپوننتی که تست می‌کند نام‌گذاری کنید.
• فایل‌های تست را با پسوند .spec. نام‌گذاری کنید.

چرا؟ راهی ثابت را برای شناسایی تست‌ها فراهم می‌کند.

چرا؟ الگوی هم‌گام با karma یا راه‌انداز‌های تست دیگر فراهم می‌کند.

نام فایل‌های تست end to end

• فایل‌های تست e2e را به دنبال نام امکاناتی که تست می‌کند، با پسوند .e2e-spec. نام‌گذاری کنید.

چرا؟ راهی ثابت برای شناسایی سریع فایل‌های تست e2e فراهم می‌کند.

چرا؟ الگویی را مطابق راه‌اندازهای تست و سیستم‌های build خودکار فراهم می‌کند.

نام ماژول (Module) های انگولار

• به نام نشانهٔ ماژول پسوند Module را متصل کنید.
• به نام فایل پسوند .module.ts را بدهید.
• ماژول‌ها را با توجه به نام امکاناتی که ارائه می‌دهد و پوشه‌ای که در آن قرار دارد نام‌گذاری کنید.

چرا؟ راهی ثابت را برای شناسایی و اشاره به ماژول‌ها فراهم می‌کند.

چرا؟ نامگذاری شتری بزرگ ( Upper camel case) برای شناسایی اشیائی که می‌توانند توسط سازنده (constructor) نمونه سازی شوند عمومی است.

‌‌چرا؟‌ به راحتی ماژول را به عنوان ریشهٔ امکاناتی که به همان شکل نامگذاری شده‌اند مشخص می‌کند.

• ماژول‌های روتینگ (routing) را با پسوند RoutingModule نام‌گذاری کنید.
• نام یک فایل حاوی ماژول روتینگ را با routing.module.ts تمام کنید.

چرا؟ یک ماژول روتینگ (RoutingModule) ماژولی است که به صورت اختصاصی برای تنظیم کردن روتر (router) انگولار استفاده‌ می‌شود. یک قرارداد ثابت برای نام‌گذاری کلاس‌ها و نام فایل‌ها باعث می‌شوند این ماژول‌ها به راحتی پیدا شده و شناسایی شوند.

پیشوند‌های سفارشی کامپوننت‌ها

• از یک پیشوند سفارشی برای انتخاب‌گر های کامپوننت‌ها استفاده کنید. برای مثال پیشوند toh نشانگر Tour of Heroes است و پیشوند admin نشانگر محوطهٔ امکانات ادمین است.
• از پیشوندی استفاده کنید که نشان‌گر محوطهٔ امکانات یا نام خود برنامه (app) باشد.

چرا؟ از تداخل نام کامپوننت‌ها با کامپوننت‌های برنامه‌های دیگر و همچنین عناصر بومی html جلوگیری می‌کند.

چرا؟ به اشتراک گذاری و ترویج کامپوننت را در برنامه‌های دیگر آسان می‌کند.

چرا؟ کامپوننت‌های سفارشی در DOM به راحتی قابل شناسایی هستند.

انتخاب‌گر‌های دایرکتیوها (Directive)

• برای نامگذاری انتخاب‌گر‌های دایرکتیو‌ها از روش نام‌گذاری شتری کوچک (lower camel case) استفاده کنید.

چرا؟ تجزیه کنندهٔ html انگولار به حروف کوچک و بزرگ حساس است و نوع نامگذاری شتری را می‌شناسد.

پیشوند سفارشی دایرکتیو‌ها

• برای انتخاب‌گر‌های دایرکتیو‌ها از پیشوند استفاده کنید.
• انتخاب‌گرهایی که عنصر نیستند را به روش شتری (lower camel case) نام‌گذاری کنید مگر اینکه قرار باشد با نام یکی از ویژگی‌های (attribute) عناصر بومی html همخوانی داشته باشد.

چرا؟ از تداخل نام‌ها جلوگیری می‌کند.

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

نامگذاری پایپ‌ها (Pipes)

• از روش نامگذاری ثابت برای نامگذاری همهٔ پایپ‌ها به دنبال نام ویژگی آن استفاده کنید.
• چرا؟ یک راه ثابت برای شناسایی راحت و سریع پایپ‌ها ارائه می‌دهد.

معمولا کسانی که مهارتشون در حد خوب یا متوسط به بالاست سرشون به اندازه کافی شلوغ است (درآمد مناسب دارن) و دیدشون نسبت به برنامه نویسی و شغلشون صرفا درآمدش نیست. بیشتر این مسئله مطرح می‌شه که بتونن یک ابزار مفید بسازن تا واقعا بدرد بخور باشه و مشکل عده زیادی رو حل کنه با اینکه هدف پول نیست اما ساخت همین ابزار مفید و حل کردن مشکل عده‌ای به همراهش درآمدی هم خواهم داشت. بنده هم استثنا نیستم و همین مسئله برام مطرح است.

بسیار عالی ممنون از زحمات شما

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

Bootstrapping

• خود راه‌اندازی (bootstrapping) و منطق پلتفرم (platform) را در فایل main.ts قرار دهید.
• کنترل ارور (error handling) را هم شامل منطق خود راه‌اندازی قرار دهید.
• از قرار دادن منطق برنامه در main.ts دوری کنید. در عوض در نظر داشته باشید که آن‌ها را در کامپوننت یا سرویس قرار دهید.

‌‌چرا؟ یک قرارداد ثابت را برای منطق شروع یک برنامه دنبال می‌کند.

چرا؟ یک قرارداد آشنا از پلتفرم های تکنولوژی دیگر را دنبال می‌کند.

انتخاب‌گر کامپوننت ها (selector)

• برای نام‌گذاری انتخاب‌گرهای کامپوننت‌ها از روش نام‌گذاری کبابی (kebab-case) استفاده کنید.

چرا؟ نام عناصر را با مشخصات عناصر سفارشی ثابت نگه می‌دارد.

مشخص نیست چطور مشکلم حل شد اما به طور کلی اول libqt4-dev رو با دستور زیر نصب کردم:

sudo apt install libqt4-dev 

بعد یک پروژه ساختم که سیستم بیلدش CMake  بود و یک بار برنامه ساده رو اجرا کردم و بدون مشکل اجرا شد. وقتی دوباره یک پروژه با سیستم بیلد قبلی یعنی معادل پروژه اول ساختم برنامه بدون مشکل اجرا شد!

کنجکاوم بدونم این مشکل به چه دلیل  به وجود آمده بود؟ اگر کسی اطلاعاتی داشت ممنون میشم در اختیارم قرار بده.

درود خدمت اساتید بزرگوار،

من آخرین نسخه کیوت (5.11.2) رو دانلود و نصب کردم ولی یک برنامه خیلی ساده در کنسول ارور دیپندنسی داره!

:-1: error: Circular all <- first dependency dropped.

جستجوهای بنده هم اکثرا ختم می‌شه به ویرایش فایل make. انتظار می‌ره بعد از ساخت یک پروژه ساده کاملا بدون مشکل اجرا بشه!

چیزی نیاز به کانفیگ داره؟ محیط لینوکس هستم!

نام سرویس‌ها

• برای تمام سرویس‌ها، پس از نام مزیت آن‌ها از نام‌های ثابتی استفاده کنید.
• برای نام کلاس سرویس‌ها از پسوند Service استفاده کنید. برای مثال چیزی که داده‌ها و یا نام قهرمانان را می‌گیرد، باید DataService یا HeroService نام‌گذاری شود.
• بعضی عبارت‌ها به شکل مشخصی سرویس هستند و معمولا ماموریت خود را با تمام شدن با "er" نشان می‌دهند. شما ممکن است ترجیح بدهید سرویسی را که پیام‌‌ها را گزارش می‌کند را Logger بنامید تا این که آن را LoggerService نام‌گذاری کنید. تصمیم بگیرید که آیا این استثنا در پروژه شما مورد قبول است یا خیر.

چرا؟ راهی ثابت را برای شناسایی و مراجعه سریع به سرویس‌ها ارائه می‌کند.

چرا؟ نام‌های مشخص مثل Logger به پسوند نیازی ندارند.

چرا؟ نام سرویس‌هایی مثل Credit، اسم هستند و نیاز به پسوند دارند و وقتی باید پسوند بگیرند که مشخص نیست آیا یک سرویس است یا چیز دیگری.

نام فایل‌ها را با نقطه و خط تیره جدا کنید

• برای جدا کردن کلمات در نام‌های توصیفی از خط تیره استفاده کنید.
• برای جدا کردن نام توصیفی از نوع فایل از نقطه استفاده کنید.
• برای همهٔ کامپوننت‌ها نامی انتخاب کنید که از الگویی ثابت برای توضیح مزیت کامپوننت و سپس نوع آن استفاده کنید.
• از نام نوع‌های مرسوم از جمله service، component، pipe، module و directive استفاده کنید. در صورتی که مجبور شدید نام نوع اضافی بسازید اما مراقب باشید که تعداد آن‌ها زیاد نشود.

چرا؟ نام نوع‌ها راهی ثابت را برای تشخیص سریع محتوای فایل ارائه می‌کنند.

چرا؟ نام نوع‌‌ها پیدا کردن انواع خاص فایل را در تکنیک جستجوی درهم توسط ویرایش‌گر یا IDE را آسان‌تر می‌کند.

چرا؟ بدون تردید نام نوع‌هایی مثل service توصیف کننده و مشخص هستند. مخفف‌هایی مثل serv، svc و srv می‌توانند گیج کننده باشند.

چرا؟ نام نوع‌ها الگوی شناسایی خاصی ( pattern matching) را برای هر وظیفهٔ خودکار ارائه می‌دهند.

نماد‌ها و نام فایل‌ها

• برای تمام فایل‌ها، پس از نام چیزی که نشان می‌دهند، از نام‌هایی ثابت استفاده کنید.
• برای نام‌گذاری کلاس‌ها از نوع نام‌گذاری upper camel case استفاده کنید.
• نام نماد باید با نام فایل تطابق داشته باشد.
• به نام نماد‌ها، پسوند‌های قراردادی را اضافه کنید. (مثل: Component، Directive، Module، Pipe یا Service).
• به فایل‌ها پسوند‌های قراردادی را اضافه کنید. (مثل component.ts، directive.ts،module.ts، pipe.ts، service.ts).

چرا؟ قرارداد‌های ثابت شناسایی و مراجعه سریع به نوع‌های مختلف را آسان می‌کنند.

تک مسئولیتی

قانون تک مسئولیتی را به تمام کامپوننت‌ها، سرویس‌ها و نماد‌های دیگر اعمال کنید. این باعث می‌شود که برنامه تمیزتر، خواناتر و امکان نگهداری‌ و تست را داشته باشد.

قانون اول

• در هر فایل تنها یک چیز، مثل سرویس یا کامپوننت تعریف کنید.

• در نظر بگیرید که فایل‌ها را به ۴۰۰ خط کد محدود کنید.

چرا؟ یک کامپوننت در هر فایل باعث راحتی خوانایی و نگهداری می‌شود همچنین باعث دوری از برخورد با تیم در سورس کنترل می‌شود.

چرا؟ یک کامپوننت در هر فایل باعث دوری از باگ‌های مخفی‌ای می‌شود که هنگام ترکیب کامپوننت‌ها در یک فایل و اشتراک متغیر‌ها به وجود می‌آیند.

چرا؟ یک کامپوننت تنها می‌تواند خروجی (export) پیشفرض فایل خود باشد که lazy loading در روتر را را آسان می‌کند.

توابع کوچک

• توابع کوچک تعریف کنید.

• در نظر بگیرید که توابع را به کمتر از ۷۵ خط کد محدود کنید.

چرا؟ توابع کوچک برای تست راحت‌تر هستند مخصوصا اگر یک کار را انجام دهند و یک نتیجه را داشته باشند.

چرا؟ توابع کوچک باعث استفاده دوباره می‌شوند.

چرا؟ توابع کوچک خواناتر هستند.

چرا؟ توابع کوچک راحت تر نگهداری می‌شوند.

چرا؟ توابع کوچک به دوری از باگ‌های زیر کمک می‌کند:

• باگ‌هایی که در توابع بزرگ به وجود می‌آیند.

• باگ‌هایی که به دلیل اشتراک متغیر‌ها با محدوده (scope) خارجی به وجود می‌آیند.

• ایجاد وابستگی‌های ناخواسته

نام‌گذاری

از نام‌های ثابت برای تمام نماد‌ها استفاده کنید. الگویی را دنبال کنید که خصوصیت و سپس نوع نماد را توضیح دهد.

چرا؟ قرارداد‌های نامگذاری کمک می‌کنند که در یک نگاه راه ثابتی را برای پیدا کردن محتوا فراهم کنید. ثبات در پروژه حیاتی است. ثبات در تیم مهم است. ثبات در یک شرکت بهره‌وری را به شکل چشم‌گیری بالا می‌برد.

چرا؟ قرارداد‌های نام‌گذاری باید پیدا کردن و فهمیدن کد‌های دلخواه را آسان‌تر کنند.

چرا؟ نام پوشه‌ها و فایل‌ها باید به وضوح هدف خود را انتقال دهند. برای مثال:

app/heroes/hero-list.component.ts

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

ساخت یک کامپوننت آپلود در انگولار(Uploader Component) می‌تواند کار سختی باشد. به این دلیل که با فایل ها در جاوا اسکریپت سر و کار داریم. در این آموزش یک روش خوب را برای آپلود فایل‌ها آموزش می‌دهم. به علاوه این که چطور از روند آپلود در لحظه خبر داشته باشیم و با نمایش درصد داده‌های آپلود شده تجربهٔ خوبی را برای کاربران فراهم کنیم.

نکته: در این آموزش من به مباحث سمت سرور و دریافت فایل توسط آن نمی‌پردازم و به این شکل در نظر میگیرم که شما سروری آمادهٔ دریافت فایل دارید. حالا در سمت کلاینت که انگولار 6 یا بالاتر است، می‌خواهیم این فایل را با یک درخواست از نوع POST به سمت سرور بفرستیم و در حین آپلود گزارشی از روند آپلود در انگولار را نمایش دهیم. در این مورد من از کامپوننتی (Component) از انگولار متریال به نام نوار پیشرفت (Progress Bar) استفاده می‌کنم. می‌توانید نمونه نهایی این پروژه که برای آموزش ساخته شده را در مخزن گیت‌هاب مشاهده کنید.

ساخت پروژه انگولار

برای شروع، در دایرکتوری (Directory) مد نظر، پروژهٔ انگولار خود را با استفاده از رابط خط فرمان انگولار (Angular CLI) به نام آپلودر می‌سازیم. پس دستور زیر را وارد می‌کنیم:

ng new uploader

وابستگی‌های خارجی

از آنجایی که ما نیاز به عناصر پیچیدهٔ رابط کاربری (UI)، مثل نوار پیشرفت داریم؛ تصمیم گرفتم تا از کتابخانهٔ انگولار متریال استفاده کنیم. برای نصب این کتابخانه همچنین انیمیشن‌ها از دو دستور زیر استفاده کنید:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

برای این که بتوانیم از سی‌اس‌اس (CSS) این ماژول استفاده کنیم، لازم است که آن را در فایل استایل سراسری خود وارد (Import) کنیم:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

ساخت ماژول (Module) امکانات

برای این که کامپوننت خوب ما تا حد ممکن قابلیت استفادهٔ دوباره را داشته باشد، تصمیم گرفتم آن را در یک ماژول جدا بسته‌بندی کنم. برای ساخت این ماژول دستور زیر را استفاده کنید:

ng generate module upload

ساخت کامپوننت آپلود در انگولار

برای ساخت کامپوننت آپلود کافی است از دستور زیر استفاده کنید. همانطور که از نام این کامپوننت مشخص است، برای آپلود فایل‌های (File) خود از یک دیالوگ استفاده خواهیم کرد.

ng generate component upload/dialog

افزودن ماژول‌های خارجی

بعد، نیاز خواهیم داشت که تعداد زیادی ماژول خارجی را در ماژول جدید خود یعنی upload.module.ts وارد کنیم. برای مثال، نیاز داریم تا تمام عناصر رابط کاربری‌ای که استفاده خواهیم کرد را به این شکل وارد کنیم:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { DialogComponent } from './dialog/dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatButtonModule,
  MatDialogModule,
  MatListModule,
  MatProgressBarModule
} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule,
    MatListModule,
    MatProgressBarModule
  ],
  declarations: [DialogComponent],
  exports: [DialogComponent],
  entryComponents: [DialogComponent]
})
export class UploadModule { }

توجه کنید در صورتی که دقیقاً دستور‌های گفته شده را وارد کردید، کامپوننت شما توسط CLI در ماژول upload تعریف خواهد شد. درصورتی که شما از ماژولی استفاده نمی‌کنید، کامپوننت جدید شما در فایل app.module.ts تعریف می‌شود.

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

حالا برای این که بتوانیم از کامپوننت جدید خود استفاده کنیم باید ماژول تعریف شده را در app.module.ts وارد کنیم تا به  AppComponent اضافه شود.

سرویس آپلود در انگولار

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

ng generate service upload/upload

داخل این سرویس نیاز داریم تا از HttpClient استفاده کنیم. این سرویس تنها دارای یک تابع به نام upload خواهد بود و برای هر فایل یک Observable برمی‌گرداند. این Observable ها حاوی روند آپلود و درصد آن خواهد بود.

/**
* @description A Http request to upload files
* @param file
*/
upload(file: File): Observable<any> {

  const formData: FormData = new FormData();
  let url = '';
  
  formData.append('video', file, file.name);
  url = 'http://localhost:1500/api/upload/videos';

  const req = new HttpRequest('POST', url, formData, {
    reportProgress: true,
    responseType: 'text'
  });

  const progress = new Subject<any>();

  this.http.request(req).subscribe(event => {
    if (event.type === HttpEventType.UploadProgress) {
      const percentDone = Math.round(100 * event.loaded / event.total);
      progress.next({ percent: percentDone, loaded: event.loaded });
    } else if (event instanceof HttpResponse) {
      progress.complete();
    }
  });
  return progress.asObservable();
}

توجه داشته باشید که برای استفاده از این تابع باید موارد زیر را وارد کنید:

import { HttpClient, HttpEventType, HttpResponse, HttpRequest } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';

همچنین نمونه‌ای از HttpClient را در سازنده (Constructor) کلاس تعریف می‌کنیم تا بتوانیم درخواست http ارسال کنیم:

constructor(private http: HttpClient) { }

در تابع آپلود، فایل دریافتی را در یک فرم بسته بندی کرده، یک درخواست http از نوع POST ساخته و آن درخواست را همراه با فرم به عنوان دادهٔ همراه درخواست ارسال می‌کنیم. سپس به روند آپلود فایل گوش می‌دهیم، درصد آپلود را محاسبه می‌کنیم و مقدار آن را به جریان داده پاس می‌دهیم. حالا برای فایل مورد نظر observable ای از روند آپلود را در اختیار داریم.

سرانجام نیاز داریم تا آن سرویس را به عنوان provider در ماژول خود اضافه کنیم. برای این کار کافی است سرویس خود را در فایل ماژول وارد (Import) کنیم (اگر توسط CLI وارد نشده بود) و آن را به این صورت در قسمت providers ماژول معرفی کنیم:

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatDialogModule,
    MatListModule,
    MatProgressBarModule
  ],
  declarations: [DialogComponent],
  exports: [DialogComponent],
  entryComponents: [DialogComponent],
  providers: [UploadService]
})
export class UploadModule { }

نکته: در پروژه نمونه برای این که در App Component از دکمه‌های متریال استفاده می‌شود، MatButtonModule را در قسمت exports هم قرار دادم.

باز کردن دیالوگ آپلودر

برای باز کردن دیالوگ در فایل .ts کامپوننت اصلی یعنی App ماژول دیالوگ و کامپوننت دیالوگ خود را وارد ( import) می‌کنیم:

import { MatDialog } from '@angular/material';
import { DialogComponent } from './upload/dialog/dialog.component';

حالا در سازنده کلاس (constructor) نمونهٰ‌ای از MatDialog تعریف می‌کنیم:

constructor(public dialog: MatDialog) { }

با استفاده از تابع زیر می‌توانید دیالوگ ساخته شده توسط خود را باز کنید. این تابع را در کلاس کامپوننت App قرار می‌دهیم:

openDialog() {
  this.dialog.open(DialogComponent, {
    width: '720px'
  });
}

برای استفاده از این تابع تنها کافی است آن را به رویداد (event) کلیک روی دکمه بایند (Bind) کنیم. پس عبارت زیر را روی تگ دکمه‌ای که برای باز کردن دیالوگ در نظر گرفته‌ایم قرار می‌دهیم:

(click)="openDialog()"

اضافه کردن فایل‌ها

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

<input type="file" #file style="display: none" (change)="onFilesAdded()" multiple />

اما برای این که ظاهر زشتی دارد قرار است که آن را با استفاده از CSS مخفی کنیم. سپس آن را با استفاده از رویداد کلیک، از طریق منطق کامپوننت باز می‌کنیم. برای این کار در فایل ts کامپوننت یک ارجاع به آن عنصر نیاز داریم. برای این کار از دایرکتیوی (directive) به نام ViewChild استفاده می‌کنیم. همچنین متغیری نیاز داریم تا فایل را در آن ذخیره کنیم.  همانطور که می‌بینید برای استفاده از سرویس آپلود نمونه‌ای از آن را در سازنده کلاس تعریف کرده‌ام.

import { Component, OnInit, ViewChild } from '@angular/core';
import { UploadService } from '../upload.service';
@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
  @ViewChild('file') file;
  addedFile;

  constructor(private uploadService: UploadService) { }
  ngOnInit() {
  }
}

حالا با شبیه‌سازی یک کلیک منوی انتخاب فایل سیستم عامل را باز می‌کنیم.

addFiles() {
  this.file.nativeElement.click();
}

طبق عنصر input که بالاتر نوشته‌ام، هنگامی که انتخاب فایل توسط کاربر انجام شد تابعی به نام onFilesAdded صدا زده می‌شود که شکل زیر را دارد:

 onFilesAdded() {
  this.addedFile = this.file.nativeElement.files[0];
  console.log('Added File:', this.addedFile);
}

حالا فایل ذخیره شده را داریم که آمادهٔ آپلود است برای آپلود تابعی را تعریف کرده و از سرویسی که قبلا تهیه کردیم استفاده می‌کنیم. برای آن که درصد فایل آپلود شده و مقدار دادهٔ آپلود شده را داشته باشیم دو متغیر جدید تعریف می‌کنیم و به شکل زیر درصد آپلود و مقدار داده آپلود شده را بدست می‌آوریم:

upload() {
  const progress = this.uploadService.upload(this.addedFile);

  progress.subscribe((result) => {
  this.percent = result.percent;
  this.loaded = result.loaded;
  });
}

حالا برای مثال می‌توانیم روند پیشرفت آپلود را به شکل زیر به نمایش بگذاریم:

<mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar>

نمونهٔ پروژهٔ آماده شده برای این آموزش را می‌توانید از اینجا دریافت کنید.

امیدوارم آموزش مفیدی بوده باشه. خوشحال می‌شوم نظرات شما را درباره این آموزش بدانم.

مقدمه‌ای ساده

با توجه به فعالیت‌های هیجان انگیز اخیر گوگل و کنفرانس آی‌او امسال (Google IO/2018) که فلاتر (Flutter) رو معرفی کرد، فلاتر به یاری چند تا از ویژگی‌های قدرتمندش توانست توجه تقریبا تعداد زیادی از توسعه دهنده‌ها را به خود جلب کند و باعث کنجکاوی آنها شود. با توجه به این که شروع کار با این فریمورک در ایران به دلیل تحریم ممکن است کمی دردسر ساز باشد، بنده این آموزش ساده و صریح رو آماده کردم تا شاید گره از کار کسی باز شود و همچنین معرفی دوباره و دقیق‌تر فلاتر به زبان شیرین پارسی می‌تواند درک بهتری از این فریمورک و ویژگی های قدرتمندش به ما بدهد. پس با من همراه باشید.

نکته: لازم به ذکر است قبل از شروع نصب، برای دریافت پیش‌نیاز‌ها، نیاز به پروکسی دارید. پس حتما یکی تهیه کنید!

فلاتر (Flutter) چیست؟

به گفتهٔ گوگل:

کاربران برنامه ها انتظار دارند برنامه های شما دارای طراحی زیبا، انیمیشن‌های نرم و کارایی بالا باشند. برای رسیدن به این امر، توسعه دهنده‌ها نیاز دارند تا بدون نگرانی برای کیفیت یا کارایی امکانات جدید را سریع تر از همیشه بسازند. به همین دلیل ما فلاتر را ساختیم. فلاتر، فریموک UI موبایل گوگل که یک راه سریع و واضح برای توسعه دهنده‌ها فراهم میکند تا روی آی او اس و اندروید برنامه‌های بومی (Native) بسازند. این به خاطر این است که برنامه‌های ساخته شده با فلاتر از یک کد پایه ساخته شده‌اند، مستقیما به کد بومی Arm کامپایل میشوند، از پردازنده گرافیکی (GPU) استفاده می‌کنند و می‌توانند به ای‌پی‌آی (API) ها و سرویس های پلتفرم مورد نظر دسترسی داشته باشند. فلاتر می‌تواند به سه طریق در همان روز اول به شما کمک کند:

1. سرعت بالای توسعه: فلاتر برای سرعت بالای توسعه دهنده مهندسی شده است. راه‌اندازی گرم با حفظ وضعیت (Stateful hot reload) این اجازه را به شما می‌دهد که کد خود را تغییر داده و تغییرات را در کمتر از یک ثانیه و بدون از دست دادن حالت برنامه مشاهده کنید! علاوه بر این فلاتر با ابزار توسعه ی مشهور ادغام می‌شود؛ یعنی شما می‌توانید سریعا با ادیتور یا IDE ای که می‌شناسید و دوست دارید خود شروع به کار کنید.
2. رابط کاربری منعطف: فلاتر ویجت‌ها، رندر کردن‌ها، انیمیشن‌ها و حرکات (Gesture) را به فریمورک انتقال می‌دهد تا برای شما کنترل کامل روی هر پیکسل از صفحه را فراهم کند! این یعنی شما انعطاف دارید تا طراحی های شخصی سازی شده بسازید.
3. برنامه‌های بومی برای آی‌او‌اس و اندروید: برنامه های فلاتر قرارداد های پلتفرم و جزئیات صفحه را مثل اسکرول کردن (Scrolling)، پیمایش، آیکون‌ها، فونت‌ها و ... را دنبال می‌کند. به همین دلیل است که برنامه‌های ساخته شده با فلاتر در اپ استور و گوگل پلی مورد تایید است.

فلاتر برای توسعه دهنده‌ها عالی است، هم برای افراد باتجربه و هم برای تازه کاران در موبایل! اگر شما در موبایل تازه کار هستید، فلاتر به شما یک راه سریع، جالب و مدرن برای ساخت برنامه‌های بومی می‌دهد. اگر شما یک توسعه دهندهٔ با تجربهٔ موبایل هستید، می‌توانید فلاتر را جریان کار و ابزار‌های موجود خود اضافه کنید.

فلاتر آزاد و متن‌باز است، و توسط توسعه دهنده‌ها و سازمان‌های جهان مثل enterprise، آژانس‌ها و استارت‌آپ ها استفاده شده است. برای اطلاعات بیشتر و شروع می‌توانید به وب‌سایت فلاتر مراجعه کنید.

شروع کار با فلاتر

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

دانلود کیت توسعه نرم‌افزار فلاتر (Flutter SDK):

برای شروع ابتدا باید کیت توسعه فلاتر را دانلود کنید در اینجا چون ما با سیستم عامل اوبونتو کار می‌کنیم لازم است که به این لینک مراجعه کرده و کیت توسعه فلاتر را دانلود کنیم. لینک دانلود در تصویر زیر قابل مشاهده است. که زمان انتشار این نوشته نسخه 0.3.2 بتا است.

فایل فشرده دانلود شده را به دایرکتوری مورد نظر خود انتقال داده و آن را استخراج (Extract) کنید. برای مثال:

$ cd ~/development
$ tar xf ~/Downloads/flutter_linux_v0.3.2-beta.tar.xz

وقتی که با ترمینال در دایرکتوری مورد نظر هستید با اجرای دستور زیر به صورت موقت ابزار فلاتر را به مسیر خود اضافه کنید:

$ export PATH=`pwd`/flutter/bin:$PATH

حالا شما آماده هستید که دستورات فلاتر را وارد کنید.

اجرای دکتر فلاتر:

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

$ flutter doctor

این دستور محیط شما را بررسی کرده و گزارشی برای شما در صفحه ترمینال نمایش میدهد. کیت توسعهٔ دارت همراه با فلاتر وجود دارد و ضروری نیست که دارت را به صورت جدا نصب کنید. به دقت خروجی این دستور را برای برنامه‌های دیگری که نیاز به نصب آن دارید بررسی کنید. ممکن است لازم باشد کار‌های دیگری هم انجام دهید. برای مثال:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/mrdimaan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

مراحل پایین تر نحوه انجام این کار‌ها و اتمام روند نصب را به شما نشان می‌دهند.

بروزرسانی مسیر شما:

شما می‌توانید متغیر آدرس خود را فقط برای جلسه (session) در حال حاظر در خط فرمان بروزرسانی کنید. (همانطور که بالاتر آن را انجام دادیم). احتمالا میخواهید این متغیر یا برای همیشه آپدیت کنید، تا بتوانید دستورات فلاتر را در هر جلسه ترمینال اجرا کنید. ابتدا با ترمینال به دایرکتوری که پوشه با نام flutter در آن قرار دارد بروید و سپس با دستور pwd آدرس کامل آن مسیر را بدست آورید. برای مثال:

$ pwd
$ /home/moein/Documents/flutter-dev

حالا فایل .bash_profile را باز کنید. در صورتی که این فایل وجود ندارد آن را بسازید، عبارت زیر را در آن قرار دهید و به جای [PATH] آدرسی که از طریق pwd بدست آوردید را قرار دهید:

export PATH=[PATH]/flutter/bin:$PATH

حالا دستور زیر را اجرا کنید تا پنجره ی در حال حاظر را تازه سازی (Refresh) کند:

$ source $HOME/.bash_profile

نصب اندروید

نکته: فلاتر به نصب کامل اندروید استودیو متکی است تا وابستگی های پلتفرم اندروید آن را استفاده کند. با این حال شما می‌توانید برنامه های فلاتر خود را در ادیتور های مختلفی بنویسید.

نصب اندروید استودیو

1. اندروید استودیو را از اینجا دانلود کرده و نصب کنید. توجه داشته باشید که برای دسترسی به این وبسایت حتما باید پروکسی خود را فعال کنید.
2. اندروید استودیو را اجرا کنید. در اولین برخورد صفحه نصب را میبینید. به دلیل تحریم، اندروید استودیو قادر به دانلود یا یافتن ابزار و SDK نخواهد بود بنابراین در اولین نصب با رفتن به مراحل بعدی چیزی دانلود نخواهد شد. بعد از رسیدن به مرحله آخر و انتخاب دکمه Finish صفحه خوش‌آمدگویی برای شما باز میشود که باید از پایین صفحه تنظیمات را باز کرده و به قسمت پروکسی وارد شوید. بعد از وارد کردن مشخصات پروکسی برنامه را ببندید و دوباره باز کنید این دفعه هم صفحه نصب را مشاهده خواهید کرد با این تفاوت که در مراحل نصب اندروید استودیو به صورت اتوماتیک آخرین کیت توسعه اندروید (Android SDK)، کیت ابزار پلتفرم (Android SDK Platform-Tools)، و کیت ابزار بیلد (Android SDK Build-Tools) را دانلود میکند که برای توسعه برنامه اندروید با فلاتر مورد نیاز است.

نصب دستگاه اندرویدی شما

1. ابتدا Developer options و USB debugging را در دستگاه خود فعال کنید.
2. با استفاده از کابل USB موبایل خود را به کامپیوتر وصل کنید و اگر در موبایل شما اجازه خواست آن را تایید کنید.
3. در ترمینال دستور flutter devices را اجرا کرده تا ببینید فلاتر دستگاه اندروید شما را شناسایی کرده یا خیر.
4. برنامه فلاتر خود را با اجرای دستور flutter run راه اندازی کنید.

نصب شبیه‌ساز اندروید

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

1. قابلیت VM Acceleration را روی کامپیوتر خود فعال کنید.
2. AVD Manager را که در مسیر  Android Studio>Tools>Android قرار دارد اجرا کنید و یک دستگاه مجازی بسازید.
3. در قسمت Emulated Performance گزینه Hardware - GLES 2.0 را انتخاب کنید تا hardware acceleration را فعال کنید.
4. حالا درست بودن مشخصات را تایید کرده و Finish را انتخاب کنید.
5. سپس دستگاه شما در لیست دستگاه های اندروید مجازی اضافه می‌شود پس با کلیک روی آیکون Run دستگاه اندرویدی را راه اندازی کنید.
6. حالا برنامه ی خود را با دستور flutter run اجرا کنید.

آماده سازی محیط برنامه نویسی

اندروید استودیو

در صورتی که می‌خواهید از این IDE برای برنامه نویسی برنامه خود استفاده کنید کافیست پلاگین Flutter و Dart را در اندروید استودیو نصب کنید سپس بعد از یکبار راه اندازی مجدد اندروید استودیو قابلیت های جدیدی مربوط به فلاتر به اندروید استودیو اضافه خواهد شد و در صفحه خوش آمد گویی  گزینه ای برای ساخت پروژه فلاتر جدید نمایان خواهد شد. برای اجرای برنامه خود کافیست دستگاه اندروید مجازی خود را راه اندازی کرده و دکمه ی run در اندرید استودیو را انتخاب کنید.

ویژوال استودیو کد

در صورت استفاده از ویژوال استودیو کد هم به همین صورت میتوانید افزونه Flutter را نصب کنید. با نصب افزونه Flutter افزونه ی Dart هم به صورت خودکار نصب خواهد شد. حالا برای ساخت پروژهٔ جدید کافیست Ctrl + shift + p را بزنید، حالا در ورودی flutter را تایپ کنید و از بین گزینه‌های نمایش داده شده New Project را انتخاب کنید. همچنین برای اجرای پروژه میتوانید در گزینه‌های نمایش داده شده run را انتخاب کنید.

نکته خیلی مهم:  اگر هنوز نتوانستید برنامه ی خود را اجرا کنید اصلا نگران نباشید. چون باید برای Gradle هم پروکسی ست کنید تا برنامه شما اجرا شود. برای این کار فایل gradle.properties را باز کرده و محتوای داخل آن را به این صورت تغییر دهید و مشخصات پروکسی خود را به جای داده های فایل وارد کنید:

org.gradle.jvmargs=-DsocksProxyHost=0.0.0.0 -DsocksProxyPort=1080

همچنین نیاز هست تا محتویات فایل ‌build.gradle را به شکل زیر تغییر دهید:

buildscript {
    repositories  {
        jcenter ()
        maven {
            url "https://maven.google.com"
        }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
    }
}

allprojects {
    repositories {
        jcenter ()
        maven {
            url "https://maven.google.com"
        }
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

در ۱ ساعت قبل، کامبیز اسدزاده گفته است :

در مورد بورد‌ها Rpi خوبه اما جدیداً بورد Tinker ساخت Asus سرو صدای زیادی کرده که بسیار قدرتمند هست که میشه گفت Rpi پیش این یک اسباب‌بازی هست، اما از ایراد‌های Tinker Board میشه به مشکلات پشتیبانی نرم‌افزاری و تیم پشتیبانی ضعیفش اشاره کرد.

برد های رزبری پای چطور هستن؟ چیزایی که اطرافم می‌شنوم اینطور جلوه میده که بیشتر رزبری پای کار میکنن

سلام خدمت اساتید محترم

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

مقدمه

گاهی اوقات ارزش این را دارد که چند قدم به عقب برداریم  و از دید یک تازه‌کار دنیای توسعه را نگاهی بی‌اندازیم. امروزه که استقبال زیادی از فریم‌ورک (framework) انگولار می‌شود، پرسش‌های زیادی در مورد انگولار در ذهن‌ توسعه دهنده‌ها به وجود آمده پرسش‌هایی مانند: انگولار چیست؟ چرا باید انگولار را استفاده کنیم؟ چه موقع نباید از انگولار استفاده کنیم؟

در این مقاله من پاسخ این پرسش‌ها و مطالب بیشتری را می‌دهم. نگاهی خواهیم انداخت به این که انگولار چیست، چگونه راه‌اندازی شد و چه زمانی استفاده از انگولار ایدهٔ خوبی است. بگذارید از ابتدا شروع کنیم و ببینیم چگونه فریم‌ورک انگولار راه اندازی شد؟

انگولار چگونه راه‌اندازی شد؟

انگولار به عنوان یک پروژهٔ جانبی شروع شد. در سال 2009، میسکو هِوِری (Miško Hevery) و آدام ابرونز (Adam Abrons) پروژه‌ای را تحت عنوان <angular/> منتشر کردند که به توسعه دهنده‌ها‌ و طراحان کمک می‌کرد تا با استفاده از تگ (tag) های ساده HTML  وب اپلیکیشن‌هایی (Web application) بسازند. نام "Angular" از براکت های زاویه‌دار یا <> می‌آید، که تمام تگ‌های HTML را احاطه می‌کنند. میسکو ایدهٔ پشت این فریم‌ورک را در مصاحبه‌ای که در سال 2013 انجام شد شرح داد:

نقل قول

ما می‌خواستیم ببینیم که آیا می‌توانیم  اضافه کردن مقدار کمی html را برای طراحان وب، نه ضرورتا توسعه دهنده‌ها آسانتر کنیم به طوری که آنها بتوانند یک فرم استاتیک (static) را به چیزی تبدیل کنند که در واقع ایمیلی را ارسال کند. ایده می‌توانست به این شکل باشد که برای مثال شما رستورانی دارید که پیتزا می‌فروشد یا چیز دیگری، شاید می‌توانستید یک سیستم سفارش ساده‌ای را تنها با اضافه کردن تعدادی تگ html داشته باشید که می‌توانست به سرور ایمیل بزند.

چون دامین  angular.com گرفته شده بود - که هنوز هم گرفته شده - حامی‌ها نام کتابخانه را به GetAngular تغییر دادند و سایت کوچکی را قرار دادند که دربارهٔ امکانات فریم‌ورک صحبت می‌کرد. تصویر زیر وبسایت انگولار در سال 2009 را نشان می‌دهد:

پس از مدت کوتایی میسکو شروع به کار برای گوگل کرد، و در 2010 در حال کار کردن روی پروژه ای به نام google feedback بود. میسکو برد گرین (Brad Green) مدیر خود را قانع کرد تا پروژه را با استفاده از پروژه جانبی انگولار او باز نویسی کند و مقدار زمان و کدی که تیم توانست ذخیره کند کمک کرد تا گوگل را برای قدرتی که انگولار ارائه می‌داد متقاعد کند.

کمی بعد از موفقیت در بازنویسی Google Feedback، همان تیم کتابخانه را متن‌باز کردند و سرانجام نسخه 1.0 از انگولار در ماه می سال 2011 منتشر شد. طی چند سال آمار استفاده از انگولار صعود کرد، و امروز گوگل استفادهٔ نیم میلیون توسعه دهنده از انگولار را به رخ می‌کشد.

انگولار چه میکند؟

انگولار یک فریم‌ورک جاوا اسکریپت است که به توسعه دهنده‌ها در ساختن برنامه کمک می‌کند. این کتابخانه تعدادی امکانات را ارائه می‌کند که پیاده سازی نیازمندی‌های پیچیدهٔ برنامه‌های مدرن را بدیهی و آسان می‌کند. مانند پیوند داده (data binding)، مسیریابی (routing) و انیمیشن‌ها (animations).

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

چه زمانی باید انگولار را استفاده کرد؟

از دید تکنیکی شما می‌توانید هر چیزی با انگولار بسازید، اما انگولار در پروژه های پیچیده که شامل داده می‌شوند به بهترین شکل عمل می‌کند. اگر شما نگاهی به برنامه‌های متنوع ساخته شده توسط انگولار که در اینجا لیست شده بی‌اندازید، خواهید دید عموما برنامه‌هایی هستند که داده‌ها را از فرم (form) ها جمع‌آوری کرده و با آن کاری می‌کنند.

این به این معنی نیست که شما باید برای استفاده از انگولار در پروژهٔ خود فرم داشته باشید. توسعه دهنده‌ها تعداد تعجب برانگیزی از بازی‌ با انگولار به خوبی چیزهایی مثل برنامه‌های واقعیت مجازی ساخته‌اند! با این حال اکثر آموزش‌هایی که خواهید یافت دربارهٔ برنامه‌هایی از نوع فرم‌دار خواهد بود. برای مثال مستندات انگولار آموزشی دربارهٔ ساخت برنامه‌ای است که شما با استفاده از فرم، قهرمان هایی را می‌سازید و آنها را در لیستی مشاهده می‌کنید.

انگولار در برنامه‌های با پایه فرم خوب عمل میکند، همچنین برای برنامه‌های بزرگ و پیچیده بسیار مناسب است. همچنین انگولار نه آسان‌ترین فریم‌ورک جاوا اسکریپ است و نه کوچک‌ترین؛ بنابراین اگر در حال ساخت چیز کوچکی هستید کتابخانه‌های ساده‌تری مثل جی‌کوئری خواهید یافت که مناسب‌تر هستند. مشابهاً انگولار بسیار مناسب برنامه‌هایی است که توسط تیم‌های متوسط الی بزرگ ساخته شده‌اند. اگر شما خودتان در حال کار بر روی برنامه‌ای هستید، ممکن است قرارداد های انگولار را بیشتر از نیاز خود ببینید.

انگولار همچنین برای برنامه‌هایی مناسب است که نیاز دارند در محیط‌های توسعه مختلفی اجرا شوند. اگر شما برنامه‌ای دارید که باید به خوبی یک برنامهٔ ویندوزی یا مک اجرا شود، می‌توانید یکی از آموزش‌های آنلاین برای اجرای برنامهٔ انگولار خود با پروژه معروف الکترون را دنبال کنید. اگر شما برنامه‌ای دارید که باید به خوبی برنامه اندروید و ios اجرا شود، می‌توانید با استفاده از NativeScript برنامهٔ خود را در یک محیط بومی واقعی موبایل رندر (Render) کنید. در بعضی موارد حتی می‌توانید این کد را بین پلتفرم‌های مختلف به اشتراک بگذارید.

چه کسی پشتیبان انگولار است؟

تیم هستهٔ انگولار آرایه‌ای عظیم از افراد و جامعهٔ (community) انگولار را شامل می‌شود که در دنیا گسترده‌ شده‌اند. که می‌شود گفت بیشتر توسعه‌های روز به روز انگولار توسط کارمندان گوگل انجام شده است. صفحه دربارهٔ انگولار تقریباً 20 کارمند گوگل را در تیم هسته انگولار لیست کرده است و تمام برترین مشارکت کننده‌ها در پروژه انگولار در گوگل کار می‌کنند.

که می‌شود گفت گوگل انگولار را کنترل می‌کند، خود کتاب‌خانه هنوز تا مقدار زیادی تلاش جامعه است. بیشتر از  2000 فرد در یکی از مخزن‌های (repositories) متن‌باز انگولار مشارکت داشته‌اند. راهنما و آموزش‌های بی‌شمار نوشته شده توسط جامعه در دسترس هستند، و شرکت‌های مختلفی به توسعه دهنده‌ها برای قدرت بیشتر پیشنهاد آموزش و تجهیز شدن به انگولار را  می‌دهند.

چه نسخه ای از انگولار را استفاده کنم؟

در زمان نوشتن این مقاله دو نسخه مشهور انگولار موجود هستند. نسخه یک در وب‌سایت https://angularjs.org در دسترس است و نسخه ی آپدیت شدهٔ همان کتاب‌خانه‌ای است که میسکو و تیم در سال 2011 منتشر کردند. نسخه ی مشهور دیگر انگولار اکنون به سادگی "Angular"خوانده می‌شود و در وب‌سایت https://angular.io در دسترس است. انگولار مدرن کاملا شکل دوباره طراحی شدهٔ نسخه یک  برای مرورگرها، جریان‌های کار و پلتفرم‌های توسعه جدیدتر است.