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

به نظر شما بهترین راه حل برای داشتن قابلیت پرداخت برای خدمات هم برای مشتریان خارجی و هم ایرانی چیست؟ حتی فارغ از مسئله‌ی فیلتر شدن. با این فرض که خدمات جهانی باشه

نام فایل‌های تست واحد فایل‌های تست را هم‌نام با کامپوننتی که تست می‌کند نام‌گذاری کنید. فایل‌های تست را با پسوند .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، اسم هستند و نیاز به پسوند دارند و وقتی باید پسوند بگیرند که مشخص نیست آیا یک سرویس است یا چیز دیگری. مثال نام فایل نام نماد hero-data.service.ts @Injectable() export class HeroDataService { } credit.service.ts @Injectable() export class CreditService { } logger.service.ts @Injectable() export class Logger { }

نام فایل‌ها را با نقطه و خط تیره جدا کنید برای جدا کردن کلمات در نام‌های توصیفی از خط تیره استفاده کنید. برای جدا کردن نام توصیفی از نوع فایل از نقطه استفاده کنید. برای همه‌ی کامپوننت‌ها نامی انتخاب کنید که از الگویی ثابت برای توضیح مزیت کامپوننت و سپس نوع آن استفاده کنید. از نام نوع‌های مرسوم از جمله 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). چرا؟ قرارداد‌های ثابت شناسایی و مراجعه سریع به نوع‌های مختلف را آسان می‌کنند. مثال نام فایل نام نماد app.component.ts @Component({ ... }) export class AppComponent { } heroes.component.ts @Component({ ... }) export class HeroesComponent { } hero-list.component.ts @Component({ ... }) export class HeroListComponent { } hero-detail.component.ts @Component({ ... }) export class HeroDetailComponent { } validation.directive.ts @Directive({ ... }) export class ValidationDirective { } app.module.ts @NgModule({ ... }) export class AppModule init-caps.pipe.ts @Pipe({ name: 'initCaps' }) export class InitCapsPipe implements PipeTransform { } user-profile.service.ts @Injectable() export class UserProfileService { }

تک مسئولیتی قانون تک مسئولیتی را به تمام کامپوننت‌ها، سرویس‌ها و نماد‌های دیگر اعمال کنید. این باعث می‌شود که برنامه تمیزتر، خواناتر و امکان نگهداری‌ و تست را داشته باشد. قانون اول در هر فایل تنها یک چیز، مثل سرویس یا کامپوننت تعریف کنید. در نظر بگیرید که فایل‌ها را به ۴۰۰ خط کد محدود کنید. چرا؟ یک کامپوننت در هر فایل باعث راحتی خوانایی و نگهداری می‌شود همچنین باعث دوری از برخورد با تیم در سورس کنترل می‌شود. چرا؟ یک کامپوننت در هر فایل باعث دوری از باگ‌های مخفی‌ای می‌شود که هنگام ترکیب کامپوننت‌ها در یک فایل و اشتراک متغیر‌ها به وجود می‌آیند. چرا؟ یک کامپوننت تنها می‌تواند خروجی (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) ها و سرویس های پلتفرم مورد نظر دسترسی داشته باشند. فلاتر می‌تواند به سه طریق در همان روز اول به شما کمک کند: سرعت بالای توسعه: فلاتر برای سرعت بالای توسعه دهنده مهندسی شده است. راه‌اندازی گرم با حفظ وضعیت (Stateful hot reload) این اجازه را به شما می‌دهد که کد خود را تغییر داده و تغییرات را در کمتر از یک ثانیه و بدون از دست دادن حالت برنامه مشاهده کنید! علاوه بر این فلاتر با ابزار توسعه ی مشهور ادغام می‌شود؛ یعنی شما می‌توانید سریعا با ادیتور یا IDE ای که می‌شناسید و دوست دارید خود شروع به کار کنید. رابط کاربری منعطف: فلاتر ویجت‌ها، رندر کردن‌ها، انیمیشن‌ها و حرکات (Gesture) را به فریمورک انتقال می‌دهد تا برای شما کنترل کامل روی هر پیکسل از صفحه را فراهم کند! این یعنی شما انعطاف دارید تا طراحی های شخصی سازی شده بسازید. برنامه‌های بومی برای آی‌او‌اس و اندروید: برنامه های فلاتر قرارداد های پلتفرم و جزئیات صفحه را مثل اسکرول کردن (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 نصب اندروید نکته: فلاتر به نصب کامل اندروید استودیو متکی است تا وابستگی های پلتفرم اندروید آن را استفاده کند. با این حال شما می‌توانید برنامه های فلاتر خود را در ادیتور های مختلفی بنویسید. نصب اندروید استودیو اندروید استودیو را از اینجا دانلود کرده و نصب کنید. توجه داشته باشید که برای دسترسی به این وبسایت حتما باید پروکسی خود را فعال کنید. اندروید استودیو را اجرا کنید. در اولین برخورد صفحه نصب را میبینید. به دلیل تحریم، اندروید استودیو قادر به دانلود یا یافتن ابزار و SDK نخواهد بود بنابراین در اولین نصب با رفتن به مراحل بعدی چیزی دانلود نخواهد شد. بعد از رسیدن به مرحله آخر و انتخاب دکمه Finish صفحه خوش‌آمدگویی برای شما باز میشود که باید از پایین صفحه تنظیمات را باز کرده و به قسمت پروکسی وارد شوید. بعد از وارد کردن مشخصات پروکسی برنامه را ببندید و دوباره باز کنید این دفعه هم صفحه نصب را مشاهده خواهید کرد با این تفاوت که در مراحل نصب اندروید استودیو به صورت اتوماتیک آخرین کیت توسعه اندروید (Android SDK)، کیت ابزار پلتفرم (Android SDK Platform-Tools)، و کیت ابزار بیلد (Android SDK Build-Tools) را دانلود میکند که برای توسعه برنامه اندروید با فلاتر مورد نیاز است. نصب دستگاه اندرویدی شما ابتدا Developer options و USB debugging را در دستگاه خود فعال کنید. با استفاده از کابل USB موبایل خود را به کامپیوتر وصل کنید و اگر در موبایل شما اجازه خواست آن را تایید کنید. در ترمینال دستور flutter devices را اجرا کرده تا ببینید فلاتر دستگاه اندروید شما را شناسایی کرده یا خیر. برنامه فلاتر خود را با اجرای دستور flutter run راه اندازی کنید. نصب شبیه‌ساز اندروید برای آماده سازی تست و اجرای برنامه فلاتر شما روش شبیه‌ساز اندروید این مراحل را دنبال کنید: قابلیت VM Acceleration را روی کامپیوتر خود فعال کنید. AVD Manager را که در مسیر Android Studio>Tools>Android قرار دارد اجرا کنید و یک دستگاه مجازی بسازید. در قسمت Emulated Performance گزینه Hardware - GLES 2.0 را انتخاب کنید تا hardware acceleration را فعال کنید. حالا درست بودن مشخصات را تایید کرده و Finish را انتخاب کنید. سپس دستگاه شما در لیست دستگاه های اندروید مجازی اضافه می‌شود پس با کلیک روی آیکون Run دستگاه اندرویدی را راه اندازی کنید. حالا برنامه ی خود را با دستور 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 }

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