برای افرادی که برنامه نویسی IoT علاقه دارند، Raspberry Pi 3 یک سخت افزار هیجان انگیز به حساب می‌آید. مهمترین ویژگی این مدل نسبت به مدل‌های قبلی وجود Builtin WiFi در آن می‌باشد. در این مقاله از Scott Hanselman نشان داده شده که چطور با استفاده از زبان JavaScript و VS Code می‌توان روی این سخت‌افزار کد نوشت.
وجود , اضافی در حین معرفی خواص در زبان #C کاملا مجازه و به هیچ چیزی هم تفسیر نمیشه. اگر این رو حذف کردید و بعد برنامه رو کامپایل و به سرور ارسال کردید، یعنی فایل‌های bin روی سرور شما قدیمی بودن یا هماهنگ نشده بودند. معنای دیگری نداره.
* نکته: پروژه انگیولار متریال ۲ در زمان نوشتن این مقاله به تازگی نسخه بتا ۵ را ارائه داده و همچنان در حال توسعه است. این بدان معنی است که ممکن است همه چیز به سرعت تغییر یابد.
مقدمه
انگیولار متریال ۲ همانند انگیولار متریال یک، تمامی المانهای مورد نیاز برای طراحی یک برنامه تک صفحه‌ای را به راحتی فراهم می‌کند (هرچند تمامی المانهای آن در نسخه بتا پیاده سازی نشده‌اند). خبر خوب اینکه، اکثر کامپوننتهای ارائه شده در انگیولار متریال ۲ از قالب راست به چپ پشتیبانی می‌کنند و اعمال این قالب به سادگی اضافه کردن خصوصیت dir یک المان به rtl است.
در صفحه گیت‌هاب انگیولار متریال ۲ آمده‌است که انگیولار متریال ۲، واسط‌های کاربری با کیفیت بالا را ارائه می‌دهد و در ادامه منظورش را از «کیفیت بالا»، اینگونه بیان می‌کند:
تست تمامی
رفتارها توسط تست یکپارچگی (unit test ) و تست واحد ( integration test )
قابلیت
سفارشی سازی در چارچوب طراحی متریال
بهره‌وری
بالا
کد
تمیز و مستندات خوب
شروع کار با انگیولار متریال ۲
قدم اول: نصب angular-material و hammerjs
برای شروع بایستی Angular Material و angular animations و hammer.js را توسط npm به صورت زیر نصب کنید.
npm install --save @angular/material @angular/animations
npm install --save hammerjs
angular/material@: بسته مربوط به انگیولار متریال دو را نصب خواهد کرد.
angular/animations@: این بسته امکاناتی جهت ساخت افکت‌های ویژه هنگام تغییر صفحات، یا بارگذاری المنت‌ها را از طریق کدهای css نوشته شده، به راحتی امکان‌پذیر می‌کند.
Hammerjs: برخی از کامپوننتهای موجود در انگیولار متریال ۲ وابسته به کتابخانه Hammerjs هستند. (از جمله md-slide-toggle و md-slider, mdTooltip)
"scripts": [ "../node_modules/hammerjs/hammer.min.js" ],
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
قدم چهارم: افزودن تم و آیکون
همراه با نصب Angular Material تعدادی تم از قبل ساخته شده نیز نصب خواهند شد که شامل یکسری استایل با رنگهای مشخصی هستند. از جمله این تم‌ها عبارتند از:
همچنین با استفاده از Material Design icons نیز با استفاده از تگ <md-icon> به آیکونهای متریال نیز می‌توان دسترسی داشت.
برای افزودن آیکونهای متریال و همچنین انتخاب یک تم از قبل ساخته شده دو خط زیر را به فایل style.css اصلی برنامه اضافه کنید.
@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
نکته‌ای که در تگ <md-icon> وجود دارد این است که این تگ انواع فونت‌ها و آیکونهای svg را نیز پشتیبانی می‌کند. استفاده از آیکونهای متریال یکی از قابلیتهای این تگ محسوب می‌شود.
برای اطلاعات بیشتر از نحوه ساخت تم سفارشی میتوانید این لینک را دنبال کنید.
قدم آخر: انگیولار متریال آماده است!
با انجام مراحل بالا اکنون میتوانید به راحتی از کامپوننتهای متریال استفاده کنید. کافی است کدهای زیر را به فایل app.component.html اضافه کنید و یک قالب ساده برای برنامه خود بسازید.
<md-sidenav-container>
<md-sidenav #end align="end" opened="true" mode="side">
<md-toolbar color="accent">
<div>
<md-toolbar-row>
<img src="https://material.angular.io/favicon.ico" style="height:50px;margin-top: 2px; margin-bottom: 2px;">
<span>
برنامه من
</span>
</md-toolbar-row>
</div>
</md-toolbar>
<md-nav-list>
<md-list-item [routerLink]="['/']">
<div>
<div></div>
<md-icon role="img" aria-label="home">home</md-icon>
<span>خانه</span>
</div>
</md-list-item>
</md-nav-list>
<md-nav-list>
<md-list-item [routerLink]="['/registries']">
<div>
<div></div>
<md-icon role="img" aria-label="forms">content_paste</md-icon>
<span>فرم</span>
</div>
</md-list-item>
</md-nav-list>
<md-nav-list>
<md-list-item href="/charts">
<div>
<div></div>
<md-icon role="img" aria-label="charts">show_chart</md-icon>
<span>نمودارها</span>
</div>
</md-list-item>
</md-nav-list>
</md-sidenav>
<header>
<md-toolbar color="primary">
<button md-icon-button (click)="end.toggle()">
<md-icon>menu</md-icon>
</button>
<span>داشبورد</span>
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon>person</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item>تنظیمات</button>
<button md-menu-item>خروج</button>
</md-menu>
</header>
<main>
<router-outlet></router-outlet>
</main>
</md-sidenav-container>
<span>
<button md-fab>
<md-icon>check circle</md-icon>
</button>
</span> همچنین کدهای css زیر را به فایل اصلی style.css اضافه کنید.
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
direction: rtl;
width: 100%;
height: 100%;
}
.mat-button-toggle,
.mat-button-base,
.mat-button,
.mat-raised-button,
.mat-fab,
.mat-icon-button,
.mat-mini-fab,
.mat-card,
.mat-checkbox,
.mat-input-container,
.mat-list,
.mat-menu-item,
.mat-radio-button,
.mat-select,
.mat-list .mat-list-item .mat-list-item-content,
.mat-nav-list .mat-list-item .mat-list-item-content,
.mat-simple-snackbar,
.mat-tab-label,
.mat-slide-toggle-content,
.mat-toolbar,
.mat-tooltip { font-family: 'Iranian Sans', Tahoma !important;
}
md-sidenav {
width: 225px;
max-width: 70%;
}
md-sidenav md-nav-list {
display: block;
}
md-sidenav md-nav-list :hover {
background-color: rgb(250, 250, 250);
}
md-sidenav md-nav-list .md-list-item {
cursor: pointer;
}
.side-navigation {
padding-top: 0;
}
md-nav-list.side-navigation a[md-list-item] > .md-list-item > span.title {
margin-right: 10px;
}
md-nav-list.side-navigation a[md-list-item] > .md-list-item {
-webkit-font-smoothing: antialiased;
letter-spacing: .14px;
}
md-list a[md-list-item] .md-list-item, md-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
height: 48px;
padding: 0 16px;
}
button.my-fab {
position: absolute;
right: 20px;
bottom: 10px;
}
md-card {
margin: 1em;
}
md-toolbar-row {
justify-content: space-between;
}
.done {
position: fixed;
bottom: 20px;
left: 20px;
color: white;
}
md-nav-list.side-navigation a[md-list-item] {
position: relative;
}
md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
display: block;
}
md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
color: #000;
}
md-nav-list a {
text-decoration: none;
color: inherit;
}
a {
color: #039be5;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.no-padding {
padding: 0 !important;
}
به همین راحتی برنامه نمونه با طراحی متریال آماده است.
