جستجو در تالارهای گفتگو
در حال نمایش نتایج برای برچسب های 'آموزش'.
30 نتیجه پیدا شد
-
ساخت یک کامپوننت آپلود در انگولار(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> نمونه‌ی پروژه‌ی آماده شده برای این آموزش را میتوانید از اینجا دریافت کنید. امیدوارم آموزش مفیدی بوده باشه. خوشحال می‌شوم نظرات شما را درباره این آموزش بدانم.
-
کامبیز اسدزاده یک موضوع را ارسال کرد در <span class="ipsBadge ipsBadge_pill" style="background-color: #e62f3d; color: #ffffff;" >برنامه نویسی در C و ++C</span>
با توجه به وجود کتابخانه‌های متعدد در سی‌پلاس‌پلاس در این پُست قصد داریم آموزش‌هایی در رابطه با نحوهٔ راه اندازی انواع کتابخانه‌ها را در سی‌پلاس‌پلاس توضیح دهیم. محیط‌های توسعه جهت نصب Visual Studio و Qt Creator خواهند بود. در صورتی که نیاز است کتابخانه‌ای را به صورت سفارشی کامپایل کنید نکاتی را باید مورد توجه قرار دهید که در ادامه آمده‌اند. قبل از هر چیز نیاز است توضیحاتی در رابطه با انواع کتابخانه‌ها داده شود. کتابخانه‌ها برای اینکه در پروژه مورد استفاده قرار بگیرند نیاز است آنها از سمت منبع خود کامپایل و ساخته شوند. البته در این فرآیند باید توجه داشته باشید که نوع معماری در پیکربندی یک کتابخانه بسیار مهم است. برای مثال اگر قرار است کتابخانه‌ای را بر روی یک پروژه‌ای که تحت معماری x64 پیکربندی شده است و در وضعیت release منتشر شود، در این صورت حتماً باید کتابخانه مورد نظر تحت همین پیکربندی کامپایل شود. کتابخانه‌ها ممکن است خودشان وابستهٔ کتابخانه‌های دیگری باشند. برای مثال بخشی از ماژول کتابخانه Boost و Poco وابستهٔ کتابخانهٔ OpenSSL می‌باشد. و یا بخشی از کتابخانهٔ MySQL وابستهٔ کتابخانهٔ Boost می‌باشد. بنابراین قبل از پیکربندی پروژه تحت هر کتابخانه‌ای مطمئن شوید که پیش نیازات آن را در اختیار داشته باشید. توجه داشته باشید که حتماً راهنمای کتابخانهٔ مورد نظر خود را جهت نحوهٔ پیکربندی مطالعه نمایید، زیرا هیچ روش عامیانه‌ای وجود ندارد که بر روی تمامی کتابخانه‌ها صادق باشد. با توجه به نکات بالا آموزش لازم جهت پیکربندی و راه اندازی کتابخانه‌ها را تحت دو گزینهٔ Boost و MFSL ادامه می‌دهیم: نسخهٔ مورد نظر کتابخانهٔ مورد نظر را از این بخش دریافت کنید. فایل دریافت شده را استخراج و در یک مسیر مشخصی مانند C://کتابخانهٔ شماکپی کنید. محیط کنسول در سیستم عامل را باز کنید، پیشنهاد میشود از Visual Studio Cross Tools Command Prompt استفاده کنید. به مسیر کتابخانه تحت دستور cd رفته و وارد آن شوید. در این مرحله نیاز است تا قبل از ساخت کتابخانه آن را پیکربندی کنید، بنابراین دستور زیر را اجرا خواهیم کرد: ./configure دقت کنید که این مرحله معمولاً در کتابخانه‌ها متفاوت می‌باشد، برای مثال در کتابخانهٔ Boost فایلی به نام bootstrap.bat متخص ویندوز و فایل bootstrap.sh برای محیط‌های یونیکس موجود است که وظیفهٔ پیکربندی و تولید فایل ساخت را بر عهده دارد. البته در نظر داشته باشید که این چنین پیکربندی در کتابخانه‌های خاص ممکن است و در بیشتر آنها باید با دستورات configure و فلگ‌های موجود در هر یک از آنها اقدام به پیکربندی کنید. بنابراین با توجه این مورد میتوانید آموزش لازم را در این بخش پیگیری نمایید. بعد از پیکربندی دستور make، nmake، cmake و یا qmake متناسب با نوع ابزار سازنده باید اجرا شود تا کتابخانه بر اساس پیکربندی تنظیم شده شروع به کامپایل و ساخت کند. این مرحله معمولاً بر اساس قدرت پردازشی سیستم شما زمان متغیری خواهد داشت. بعد از به اتمام رسیدن زمان کامپایل کتابخانهٔ مورد نظر فایل‌های lib را تحت پسوند‌های .dll در ویندوز و .lib و .so در لینوکس و یونیکس تولید خواهد کرد که بهتر است مسیر include برای هدر‌های کتابخانه و lib برای فایل‌های کامپایل شده مشخص شود. طبق شرایط ذکر شده برای مثال ما از کتابخانهٔ SDL در این بخش استفاده خواهیم کرد. نسخهٔ از پیش کامپایل شده مربوط به آن را از این بخش دریافت و استخراج نمایید. قست اول (نصب و راه اندازی تحت محیط Visual Studio) وارد محیط ویژوال استودیو شده و بعد از ایجاد پروژه بر روی پروژه راست کلیک و گزینهٔ Properties را انتخاب کنید، به زبانه C/C++ رفته و زبانه General گزینهٔ Additional Include Directories را انتخاب کنید. در ادامه مسیر include را از کتابخانهٔ SDL به پروژه معرفی کنید. مرحله کنونی را تایید کنید، و به زبانهٔ Linker و سپس General بروید، در این بخش گزینهٔ Additional Linker Library را انتخاب و مسیر Lib را از کتابخانهٔ SDL معرفی کنید. در این مرحله فایل‌های کتابخانه معرفی شده‌اند. به زبانهٔ General و Input برگشته و در بخش Additional Dependences فایل‌های SDL2.lib و SDL2_image.lib و SDL2main.lib و SDL2_ttf.lib را معرفی کنید. در نهایت فایل‌های dll موجود در پوشهٔ lib کتابخانه را در کنار فایل اجرایی کپی کنید. قست دوم (نصب و راه اندازی تحت محیط Qt Creator) پروژه خود را ایجاد و بر روی نام پروژه راست کلیک کنید. گزینهٔ Add Library و سپس External Library را بزنید. طبق شرایط قبل گزینه‌های lib را همراه با include به پروژهٔ خود اضافه نمایید. کد مربوط به فایل .pro به صورت زیر خواهد بود win32: LIBS += -L$$PWD/../../../../SDL2-2.0.8/lib/x86/ -lSDL2 -lSDL2main -lSDL2_ttf INCLUDEPATH += $$PWD/../../../../SDL2-2.0.8/lib/x86 DEPENDPATH += $$PWD/../../../../SDL2-2.0.8/lib/x86 طبق روش کامپایل برنامه را کامپایل کنید و قبل از اجرا فایل‌های dll یا lib را نسبت به پلتفرم خود در کنار فایل اجرایی پروژه قرار دهید. https://iostream.ir/forums/topic/33-روش-افزودن-کتابخانه‌های-دیگر-به-محیط-qt-creator/ روش فوق در بیشتر کتابخانه‌ها قابل انجام است. -
با درود و خسته نباشید خدمت اساتید. به عنوان یه برنامه نویس مشتاق به c++ خیلی علاقه دارم اگر امکانش باشه اساتید یه دوره حرفه ای آموزش ارتباط c++ با qml در زمینه های مختلف رو استارت بزنند. آموزش هایی که واقعا درک ما کسانی که مشتاق به برنامه نویسی c++ در qml هست رو بالا ببره. qml توانایی خاصی در خلق رابط کاربری داره ولی این c++ هست که به این مساله قابلیت - انعطاف پذیری و سرعت میبخشه. اگر ملاک ما اسناد خود qt باشه میتونیم این مساله رو پیش ببریم اما با سرعت بسیار کم. پس اگر اساتید علاقه ای در این زمینه داشته باشند چه بهتر با زبان فارسی بشه حرکتی کرد تا فصل جدیدی از برنامه نویسی مدرن رقم بخوره. ممنون
-
درود از دوستان کسی وقت داره آموزش فارسی ساخت listmodel توسط C++ و ارسالش به qml رو بزاره ما هم استفاده کنیم. تو اغلب سایت های خارجی خیلی خلاصه وار بحث شده. اگر کسی تجربه ای داره ممنون میشم اینجا آموزششو بزاره. چون ظاهرا در پست قبلی من نتونستم با کلاس و توابع خود qml یه سرچ باکس برای listview بسازم و باید حتما با C++ لیست مدل رو ساخت و توسط ارسال به qml بشه سرچ کرد با سپاس
-
مقدمه‌ای ساده با توجه به فعالیت‌های هیجان انگیز اخیر گوگل و کنفرانس آی‌او امسال (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 }
