پست‌های انتشارات Aurora Book

چگونه کتابخانه Angular خود را در npm انتشار دهید

Ali — Sat, 09 Oct 2021 14:30:02 +0330

اگر با angular به صورت حرفه‌ای کار می‌کنید، همیشه پیش آمده است که کامپوننت‌هایی ایجاد کنید که بتوانید در کل پروژه خودتان چندین بار از آن استفاده کنید. اما آیا تاکنون به این فکر افتاده‌اید که کامپوننت‌هایی که نوشته‌اید را با افراد دیگری در سراسر جهان به اشتراک بگذارید. اگر قصد این کار را دارید، می‌توانید تا انتهای مقاله همراه من باشید تا روش این کار را به شما آموزش دهم.سایت npmjs بزرگترین مکان برای ثبت نرم افزار در جهان است. توسعه دهندگان نرم افزارهای متن باز از npm برای اشتراک گذاری نرم افزارهای خود استفاده می‌کنند. در ابتدا شما نیاز دارید که در npm برای خود یک حساب کاربری باز کنید. شما می‌توانید با استفاده از این لینک به صورت رایگان ثبت نام کنید.نصب Angular اگر قبلا با angular کار کرده‌اید، پس احتمالا آن را روی سیستم خود نصب دارید. در غیر این صورت، در ابتدا نیاز دارید که NodeJS و npm را نصب کنید. برای این کار می‌توانید از لینک https://nodejs.org/en/download استفاده کنید. سپس با استفاده از دستور زیر angular CLI را نصب کنید.npm i -g @angular/cliساخت یک پروژه angularدر ابتدای کار نیاز دارید که یک پروژه angular بسازید. اما قبل از آن نیاز دارید که یک workspace بسازید که پروژه شما متعلق به آن باشد. برای ساخت یک angular workspace از دستور زیر استفاده کنید.ng new --create-application=falseدر این دستور بجای نام مورد نظر خود را قرار دهید. از create-application=false به این علت استفاده شده است تا در پروژه application ایجاد نشود. زیرا قصد داریم که یک library ایجاد کنیم. سپس با دستور زیر به مسیر پوشه workspace خود بروید.cd برای مثال من یک workspace به صورت زیر می سازم.ng new apple --create-application=falseساخت یک Angular Library جدیدیک پروژه کتابخانه angular کامپوننت یا سرویسی است که می‌تواند به صورت یک بسته npm منتشر شود. این پروژه‌ها خود به تنهایی اجرا نمی‌شوند و در angular application های دیگر استفاده می‌شوند. برای ساخت یک پروژه کتابخانه جدید، در ابتدا وارد مسیر workspace خود شوید، و سپس از دستور زیر استفاده کنید:ng generate library با این کار شما یک پروژه در workspace خود ایجاد کرده‌اید که شامل یک ماژول انگولاری با یک کامپوننت و یک سرویس است.اگر قصد انتشار بسته خود را دارید، باید به این نکته توجه کنید که نام بسته باید در npm registry یکتا باشد. پس باید قبل از نام گذاری بررسی کنید که نام کتابخانه شما از قبل در npm registry ثبت نشده باشد.در پروژه ایجاد شده، یک کامپوننت و یک سرویس هم ایجاد شده است. اگر شما فقط به کامپوننت آن نیاز دارید، می‌توانید service و فایل‌های وابسته به آن را حذف کنید.حذف فایل projects//src/lib/.service.tsحذف فایل projects//src/lib/.service.spec.tsبروزرسانی فایل projects//src/public-api.tsحال می‌توانید کتابخانه خود را در فایل کامپوننت بنویسید. اگر به فایل کامپوننت توجه کنید، مشاهده می کنید که template خود را باید مستقیم در خود فایل typescript بنویسید. اما اگر مانند application ها نیاز دارید که یک فایل مستقل برای template داشته باشید، می‌توانید همانند کامپوننت‌های application عمل کنید. به این صورت که در مسیر فایل کامپوننت یک فایل با نام .htmlبسازید. و سپس به صورت زیر در فایل typescript جایگذاری کنید.@Component( selector: 'lib-apple', templateUrl: './.html', styles: [] })کامپوننت خود را build کنیددستور زیر را اجرا کنید، تا کامپوننت شما build شود.ng build --prodفایل های خروجی در پوشه‌ای در مسیر زیر ساخته می شوند.dist/انتشار کامپوننت angular در npmدر ترمینال خود دستور npm login را وارد کنید تا اعتبارسنجی شما انجام شود. سپس با دستور زیر به مسیر فایل خروجی رویدcd dist/و در این مسیر دستور npm publish را اجرا کنید، تا کامپوننت شما منتشر شود. به همین راحتی شما اولین کتابخانه خود را در npm منتشر کردید. حال برای اینکه کتابخانه خود را مشاهده کنید، به مسیر زیر بروید.https://www.npmjs.com/package/همچنین می‌توانید دستور زیر را در ترمینال وارد کنید، تا همه اطلاعات بسته خود را مشاهده کنید.npm info اگر در برنامه خود تغییراتی ایجاد کردید، و سپس دوباره می خواهید که این تغییرات شما در بسته منتشر شده اعمال شود، باید در ابتدا ورژن بسته خود را ارتقا دهید و سپس عمل انتشار را انجام دهید. برای این کار به فایل package.json در مسیر کتابخانه مراجعه کنید و مقدار فیلد version را تغییر دهید و سپس دستور publish را دوباره اجرا کنید.{ "name": "", "version": "0.0.1", <-- here "peerDependencies": { "@angular/core": "^11.2.14" }, "dependencies": { "tslib": "^2.0.0" } }اضافه کردن کاربر به پروژه خوداگر می‌خواهید که کاربران دیگری هم به بسته منتشر شده خود اضافه کنید، به این معنی که در قسمت Collaborators نام کاربر دیگری هم نمایش دهد، در ابتدا کاربر مورد نظر باید در npmjs نام کاربری داشته باشد. سپس با استفاده از دستور زیر می‌توانید این کار را انجام دهید.npm owner add

وابستگی‌های کتابخانه شماممکن است کتابخانه‌ای که شما نوشته‌اید دارای وابستگی هایی باشد. به این معنی که برای اجرا خود نیاز به کتابخانه‌های خارجی دیگری دارد. برای اینکه کاربر هنگام نصب کتابخانه شما بتواند از آن استفاده کند، نیاز دارد که از قبل این کتابخانه‌های وابسته را نصب کند. اما شما می‌توانید در برنامه مشخص کنید که این نیازمندی ها چیست و هنگام نصب کتابخانه شما همه این نیازمندی‌ها خودشان نصب می‌شوند.برای مثال می‌خواهید از bootstrap در کتابخانه خود استفاده کنید. برای این کار bootstrap را در بخش peerDependencies در my-workspace/projects/my-lib/package.json اضافه کنید."peerDependencies": { ... "bootstrap": "^5.0.1", ... } با این کار هنگام نصب کتابخانه شما، bootstrap هم نصب می‌شود. سپس یک فایل scss. ایجاد کنید، و کد زیر را در بالای فایل اضافه کنید.@import "node_modules/bootstrap/scss/bootstrap"اضافه کردن فایل readme اگر به صفحه اول کتابخانه خود در سایت npmjs.com نگاه کنید، مشاهده می‌کنید که می‌توانید توضیحاتی را به کتابخانه خود اضافه کنید، تا کاربران راحت تر بتوانند از کتابخانه شما استفاده کنند. در مسیر کتابخانه شما فایلی به نام README.md وجود دارد. هر مطلبی که در این فایل بنویسید در صفحه اول کتابخانه شما نشان داده می‌شود.منابع: https://stackoverflow.com/questions/67876397/how-to-add-bootstrap-in-an-angular-libraryhttps://jasonwatmore.com/post/2020/06/16/angular-npm-how-to-publish-an-angular-component-to-npmhttps://docs.npmjs.com/adding-collaborators-to-private-packages-owned-by-a-user-account

کتابخانه Select2-Aurora راهکاری جدید در پیاده سازی select در انگولار

Ali — Sun, 30 May 2021 21:21:52 +0430

کتابخانه select-2-aurora یک پیاده سازی جدید از فرم کنترل select می‌باشد. در این کتابخانه همانند قبل می‌توانید لیست option های خود را اضافه کنید. با این تفاوت که این بار امکان جستجو در لیست option ها را هم دارید. یکی از امکانات جالب این کتابخانه دریافت داده ها از API می‌باشد. به این صورت که کافی است آدرس API خود را به ورودی دهید، سپس خود کنترل، داده ها را از API دریافت و نمایش می‌دهد.در زیر یک نمایش demo از کامپوننت را مشاهده می کنید:پیش نمایشی از کنترل select2-auroraروش نصب و استفادهبرای نصب آخرین نسخه می‌توانید از دستور زیر استفاده کنید:npm i select2-aurora@latestدر صورتی که بخواهید نسخه بخصوصی را نصب کنید، می توانید از دستور زیر استفاده کنید:npm i select2-aurora@1.0.0بعد از نصب کتابخانه، باید Select2AuroraModule را به ماژول مورد نظر خودتان اضافه کنید. در اینجا به app.modules.ts اضافه کرده ایم.import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Select2AuroraModule } from 'select2-aurora'; // <-- here @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, Select2AuroraModule // <-- here ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }طریقه استفاده از کتابخانه با استفاده از خصوصیت optionList کتابخانه select2-aurora خصوصیتی به نام optionList دارد. optionList لیستی از اشیایی از نوع AuroraSelectModel می‌باشد. برای تعریف optionList در ابتدا کلاس AuroraSelectModel را به کامپوننت خود import کنید. سپس همانند مثال زیر لیست option های خود را بسازید.import { AuroraSelectModel } from 'select2-aurora'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { countriesList: Array = new Array(); ngOnInit() { this.initOptionList(); } initOptionList() { this.countriesList = new Array(); this.countriesList.push(new AuroraSelectModel(1, 'Austria')); this.countriesList.push(new AuroraSelectModel(2, 'Belgium')); this.countriesList.push(new AuroraSelectModel(3, 'Finland')); this.countriesList.push(new AuroraSelectModel(4, 'France')); this.countriesList.push(new AuroraSelectModel(5, 'Germany')); this.countriesList.push(new AuroraSelectModel(6, 'Spain')); this.countriesList.push(new AuroraSelectModel(7, 'Portugal')); } }سپس select2-aurora را در template تعریف کنید:‍‍ طریقه استفاده select2-aurora در یک فرمهمانند فرم کنترلر های معمولی، از select2-aurora هم می‌توان به عنوان یک فرم کنترلر استفاده کرد. در زیر یک مثال از این نوع کاربرد بیان شده است.import { FormControl, FormGroup, FormBuilder } from '@angular/forms'; import { AuroraSelectModel } from 'select2-aurora'; export class AppComponent implements OnInit { countriesList: Array = new Array(); formGroup: FormGroup; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.initOptionList(); this.createForm(); } createForm() { this.formGroup = this.formBuilder.group({ countryFC: new FormControl() }); } initOptionList() { // as previous example } onSaveForm() { console.log(this.formGroup.value); } }حتی اگر optionList خود را مقداردهی کرده باشید، می‌توانید به فرم کنترل مقدار پیش فرض هم بدهید.this.formGroup = this.formBuilder.group({ countryFC: new FormControl(2) });سپس در template از آن به صورت زیر استفاده کنید:سرویس API همان طور که قبلا ذکر شد، شما می‌توانید optionList خود را با استفاده از یک سرویس API مقداردهی کنید. بدین منظور، کافی است که یک API بنویسید که در پاسخ لیستی از JSON ها با دو خصوصیت id و label را دارا باشد.apiUrl = 'http://127.0.0.1:8000/view1/'; اگر API نیاز به توکن JWT داشته باشد، می‌توانید آن را به select2-aurora به عنوان ورودی پاس دهید.apiUrl = 'http://127.0.0.1:8000/view1/'; jwtToken = 'dfsdfe3423i4jfhsdjnvsjhr3h4j23h4j23h4j232j4'; به این نکته توجه کنید که اگر همزمان هم از optionList و هم از apiUrl استفاده کنید، کتابخانه فقط apiUrl را در نظر می گیرد.کتابخانه select2-aurora یک پروژه متن باز می‌باشد، که هنوز در ابتدای کار توسعه است. شما می‌توانید از طریق لینک زیر به کتابخانه دسترسی داشته باشید و با حفظ ذکر منبع، آن را برای خود شخصی سازی کنید. https://github.com/mohammadali66/aurora/tree/master/projects/select2-aurora