با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

در این مقاله وبلاگی ایجاد خواهید کرد که از سرور مجازی GraphQL استفاده میکند. ما برنامه وبلاگ را با استفاده از کلاینت Apollo و Vue می سازیم. می توانید سرور مجازی GraphQL را بگیرید تا بتوانید همراه با آموزش آن را دنبال کنید.
فعال کردن CORS
سرور مجازی GraphQL با AdonisJS ساخته شده است. AdonisJS بسته ای را ارائه می دهد که می توانیم از آن برای مدیریت اشتراک گذاری مقطعی منبع (CORS) در API استفاده کنیم. به طور پیش فرض CORS در AdonisJS شروع میشود ، بنابراین باید آن را فعال کنیم. برای فعال کردن CORS در برنامه AdonisJS ، origin  را به صورت زیر در config/cors.js روی true  تنظیم می کنیم:
config/cors.js
origin: true
اگرچه سرور مجازی GraphQL کلون شده قبلاً CORS را فعال کرده است ، اما ذکر آن خالی از لطف نیست.
راه اندازی سرور مجازی GraphQL
از آنجا که برنامه وبلاگ ما از سرور مجازی GraphQL استفاده می کند ، باید سرور مجازی را شروع کرده و آن را برای بقیه آموزش در حالت اجرا نگه داریم. برای شروع ، وارد دیرکتوری پروژه سرور مجازی GraphQL می شویم و دستور زیر را اجرا می کنیم:
⦁ $ adonis serve –dev
⦁
با این کار سرور مجازی GraphQL شروع به کار می کند.

بقیه آموزش بر این فرض است که شما قبلاً سرور مجازی GraphQL را راه اندازی کرده اید و در حال اجرا است.
با توجه به این مسئله ، بیایید شروع به ساخت برنامه وبلاگ خود کنیم.
ایجاد یک برنامه Vue
با ایجاد یک برنامه جدید Vue با استفاده از Vue CLI شروع خواهیم کرد:
⦁ $ vue init webpack graphql-blog-app
⦁
⦁ $ // select `Y` to use Vue router
⦁
با این کار یک برنامه جدید Vue با نام Graphql-blog-app ایجاد می شود و متعلقات آن را نصب می کند.
نصب بسته های لازم
با ایجاد برنامه ، می توانیم به سراغ نصب بسته های لازم برای ساخت برنامه وبلاگ GraphQL برویم:
⦁ $ cd graphql-blog-app
⦁
⦁ $ npm install –save vue-apollo@next graphql apollo-client apollo-link apollo-link-context apollo-link-http apollo-cache-inmemory graphql-tag
بیایید به سرعت روی همه بسته ها مروری کنیم:
⦁ vue-apollo: یکپارچه سازی Apollo / GraphQL برای VueJS است. ما آخرین نسخه این افزونه را نصب می کنیم که به ما امکان می دهد از تمام ویژگی های فوق العاده ای که همراه با کلاینت آپولو 2.0 وجود دارد استفاده کنیم.
⦁ graphql: اجرای مرجع GraphQL برای JavaScript .
⦁ apollo-client: یک کلاینت ذخیره سازی GraphQL ، جامع و آماده تولید ، برای هر سرور مجازی یا چارچوب UI .
⦁ apollo-link: یک رابط استاندارد برای اصلاح جریان کنترل درخواستهای GraphQL و واکشی نتایج GraphQL .
⦁ apollo-link-context: برای تنظیم زمینه ای روی عملکرد شما استفاده میشود ، که توسط سایر پیوندها در پایین زنجیره استفاده می شود.
⦁ apollo-link-http: برای گرفتن نتایج GraphQL از طریق شبکه با استفاده از واکشی HTTP استفاده می شود.
⦁ apollo-cache-inmemory: اجرای حافظه پنهان برای آپولو Client 2.0.
⦁ Graphql-tag: برچسب تحت اللفظی قالب JavaScript که نمایش داده های GraphQL را تجزیه می کند.
راه اندازی Vue Apollo
در مرحله بعد ، اجازه دهید بسته ها را برای استفاده قرار دهیم. ما با ایجاد یک نمونه ApolloClient و نصب افزونه VueApollo شروع خواهیم کرد. src / main.js را باز کنید و کد زیر را به آن اضافه کنید:
src/main.js
import { ApolloClient } from ‘apollo-client’
import { HttpLink } from ‘apollo-link-http’
import { InMemoryCache } from ‘apollo-cache-inmemory’
import VueApollo from ‘vue-apollo’

const httpLink = new HttpLink({
// URL to graphql server, you should use an absolute URL here
uri: ‘http://localhost:3333/graphql’
})

// create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})

// install the vue plugin
Vue.use(VueApollo)

یک نمونه جدید از httpLink را با URL (http: // localhost: 3333 / Graphql) سرور مجازی GraphQL خود ایجاد می کنیم. سپس با استفاده از httpLink ایجاد شده در بالا ، یک کلاینت Apollo ایجاد می کنیم و مشخص می کنیم حافظه پنهان را می خواهیم. در آخر ، افزونه Vue Apollo را نصب می کنیم.
در مرحله بعدی، بیایید یک آبجکت apolloProvider ایجاد کنیم که در مؤلفه اصلی خود آن را مشخص خواهیم کرد:
src/main.js
const apolloProvider = new VueApollo({
defaultClient: apolloClient
})

// update Vue instance by adding `apolloProvider`
new Vue({
el: ‘#app’,
router,
apolloProvider,
template: ‘<App/>’,
components: { App }
})

ما نمونه جدیدی از افزونه Vue Apollo را با استفاده از apolloClient ایجاد شده به عنوان کلاینت پیش فرض مان ایجاد می کنیم. در آخر ، با اضافه کردن آن در نمونه Vue ، از آبجکت apolloProvider استفاده می کنیم ، به همان روشی که از روتر Vue استفاده خواهیم کرد.
اضافه کردن Bulma
به منظور استفاده از این آموزش ، از Bulma CSS استفاده خواهیم کرد. بنابراین ، اجازه دهید آن را اضافه کنیم. index.html را باز کنید و به شرح زیر به روز کنید:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<title>GraphQL Blog App</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css”>
</head>
<body>
<div id=”app”></div>
<!– built files will be auto injected –>
</body>
</html>

ما Bulma را در CDN ارجاع می دهیم.
حذف کد استفاده نشده
هنگامی که برنامه Vue خود را ایجاد کردیم که در این آموزش استفاده نمی کنیم ، برخی از فایل ها و کد ها هستند که همراه آن می آیند. باید آنها را حذف کنیم تا در برنامه ما دخالت نکنند. مؤلفه Hello  را حذف کرده و تمام منابع آن را از src / router / index.js حذف کنید.
اضافه کردن چیدمان مستر
این وبلاگ از یک طرح کلی در صفحات خود استفاده می کند. در این حالت ، بیایید یک چیدمان تعریف کنیم که همه صفحات از آن استفاده کنند. برای انجام این کار ، src / App.vue را باز کنید و به شرح زیر آپدیت کنید:
src/App.vue
<template>
<div id=”app”>
<nav class=”navbar is-primary” role=”navigation” aria-label=”main navigation”>
<div class=”container”>
<div class=”navbar-brand”>
<router-link class=”navbar-item” to=”/”>Blog App</router-link>

<button class=”button navbar-burger”>
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</nav>
<router-view/>
</div>
</template>

<script>
export default {
name: ‘app’
}
</script>

یک هدر اضافه می کنیم که همه صفحات از آن استفاده خواهند کرد.
ثبت نام کاربر
کاربران باید بتوانند در برنامه وبلاگ ما عضو شوند. ما یک مؤلفه SignUp ایجاد خواهیم کرد که آن را مدیریت کند. بنابراین ، در src/components یک پوشه ادمین جدید ایجاد کنید. تمام مؤلفه های مربوط به ادمین در این پوشه به صورت داخلی ایجاد می شوند.
قبل از ایجاد مؤلفه SignUp ، اجازه دهید یک فایل اختصاصی ایجاد کنیم که تمام نمایشگرها و جهش های GraphQL ما را در خود نگه می دارد. ما این فایل را مستقیماً در داخل src ایجاد خواهیم کرد. یک فایل Graphql.js را در داخل src ایجاد کنید و کد زیر را درون آن پیست کنید:
src/graphql.js
import gql from ‘graphql-tag’

export const SIGNUP_MUTATION = gql`mutation SignupMutation($username: String!, $email: String!, $password: String!) {
createUser(
username: $username,
email: $email,
password: $password
) {
id
username
email
}
}`

این جهش GraphQL است که ایجاد کاربر جدید در سرور مجازی GraphQL ما را کنترل می کند. نام کاربری ، ایمیل و رمز عبور کاربر را می گیرد. این متغیرها از مؤلفه SignUp منتقل می شوند.
در مرحله بعد ، بیایید مؤلفه SignUp را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل SignUp.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/SignUp.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-4 is-offset-4″>
<h2 class=”title has-text-centered”>Signup</h2>

<form method=”POST” @submit.prevent=”signup”>
<div class=”field”>
<label class=”label”>Username</label>

<p class=”control”>
<input
type=”text”
class=”input”
v-model=”username”>
</p>
</div>

<div class=”field”>
<label class=”label”>E-Mail Address</label>

<p class=”control”>
<input
type=”email”
class=”input”
v-model=”email”>
</p>
</div>

<div class=”field”>
<label class=”label”>Password</label>

<p class=”control”>
<input
type=”password”
class=”input”
v-model=”password”>
</p>
</div>

<p class=”control”>
<button class=”button is-primary is-fullwidth is-uppercase”>SignUp</button>
</p>
</form>
</div>
</div>
</section>
</template>

<script>
import { SIGNUP_MUTATION } from ‘@/graphql’

export default {
name: ‘SignUp’,
data () {
return {
username: ”,
email: ”,
password: ”
}
},
methods: {
signup () {
this.$apollo
.mutate({
mutation: SIGNUP_MUTATION,
variables: {
username: this.username,
email: this.email,
password: this.password
}
})
.then(response => {
// redirect to login page
this.$router.replace(‘/login’)
})
}
}
}
</script>

این مؤلفه فرم ثبت نام را برای کاربران ارائه می دهد. پس از ارسال فرم ، یک روش signup  فراخوانی می شود. در روش signup  ، از روش mutate  موجود در this.$apollo استفاده می کنیم (از افزونه Vue Apollo. از جهش SIGNUP_MUTATION که قبلاً ایجاد شده استفاده می کنیم و متغیرهای لازم را می گذرانیم. پس از موفقیت در روند ثبت نام (یعنی وقتی کاربر ایجاد شد) کاربر را به صفحه ورود (که به زودی ایجاد خواهیم کرد) هدایت می کنیم.
اضافه کردن مسیر ثبت نام
src / router / index.js را باز کنید ، و کد زیر را به آن اضافه کنید:
src/router/index.js
import SignUp from ‘@/components/Admin/SignUp’

// add these inside the `routes` array
{
path: ‘/signup’,
name: ‘SignUp’,
component: SignUp
},

حال هنگامی که از مسیر /signup بازدید می کنیم ، باید فرم ثبت نام خود را مانند تصویر زیر ببینیم:

ورود کاربر
بیایید به کاربران امکان ورود به سیستم را اضافه کنیم. درست مانند کاری که با استفاده از کاربر انجام دادیم ، اجازه دهید ابتدا جهش GraphQL را ایجاد کنیم. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const LOGIN_MUTATION = gql`mutation LoginMutation($email: String!, $password: String!) {
login(
email: $email,
password: $password
)
}`

این جهش GraphQL دسترسی کاربر را به سرور مجازی GraphQL ما مدیریت می کند. ایمیل و رمز عبور کاربر را می گیرد.
سپس ، درون پوشه ادمین، یک فایل LogIn.vue ایجاد کنید و کد زیر را درون آن پیست کنید:
src/components/Admin/LogIn.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-4 is-offset-4″>
<h2 class=”title has-text-centered”>Login</h2>

<form method=”POST” @submit.prevent=”login”>
<div class=”field”>
<label class=”label”>E-Mail Address</label>

<p class=”control”>
<input
type=”email”
class=”input”
v-model=”email”>
</p>
</div>

<div class=”field”>
<label class=”label”>Password</label>

<p class=”control”>
<input
type=”password”
class=”input”
v-model=”password”>
</p>
</div>

<p class=”control”>
<button class=”button is-primary is-fullwidth is-uppercase”>Login</button>
</p>
</form>
</div>
</div>
</section>
</template>

<script>
import { LOGIN_MUTATION } from ‘@/graphql’

export default {
name: ‘LogIn’,
data () {
return {
email: ”,
password: ”
}
},
methods: {
login () {
this.$apollo
.mutate({
mutation: LOGIN_MUTATION,
variables: {
email: this.email,
password: this.password
}
})
.then(response => {
// save user token to localstorage
localStorage.setItem(‘blog-app-token’, response.data.login)

// redirect user
this.$router.replace(‘/admin/posts’)
})
}
}
}
</script>

این مؤلفه فرم ساده ای را برای ورود کاربران فراهم می کند. پس از ارسال فرم ، یک روش login  فراخوانی می شود. در روش login ، ما از روش mutate  استفاده می کنیم. ما از جهش LOGIN_MUTATION که قبلاً ایجاد شده است استفاده می کنیم و از متغیرهای لازم عبور می کنیم. پس از موفقیت در فرآیند ورود به سیستم ، توکنی را که از سرور مجازی GraphQL دریافت کرده ایم در ذخیره سازی محلی سیو کرده و کاربر را هدایت می کنیم.
افزودن مسیر ورود
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import LogIn from ‘@/components/Admin/LogIn’

// add these inside the `routes` array
{
path: ‘/login’,
name: ‘LogIn’,
component: LogIn
},

حال وقتی از مسیر /login بازدید می کنیم ، باید فرم ورود به سیستم را مانند تصویر زیر مشاهده کنیم:

ایجاد مؤلفه منو
قبل از شروع به اشغال قسمتهای ادمین وبلاگ خود ، بیایید یک مولفه منو ایجاد کنیم که به عنوان منوی پیمایش نوار کناری ارائه شود. در پوشه ادمین ، یک فایل Menu.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/Menu.vue
<template>
<aside class=”menu”>
<p class=”menu-label”>Post</p>
<ul class=”menu-list”>
<li>
<router-link to=”/admin/posts/new”>New Post</router-link>
</li>
<li>
<router-link to=”/admin/posts”>Posts</router-link>
</li>
</ul>
<p class=”menu-label”>User</p>
<ul class=”menu-list”>
<li>
<router-link to=”/admin/users”>Users</router-link>
</li>
</ul>
</aside>
</template>

این به سادگی پیوندهایی را به برخی بخش های ادمین برنامه وبلاگ ارائه می دهد.
نمایش کاربران
در بخش ادمین ، می خواهیم بتوانیم لیست کاربرانی که ایجاد شده اند را ببینیم. برای همین ، یک مولفه کاربران ایجاد کردیم. اما اول ، بیایید جستار GraphQL را بنویسیم که تمام کاربرهای ایجاد شده را منتقل می کند. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const ALL_USERS_QUERY = gql`query AllUsersQuery {
allUsers {
id
username
email
}
}`
این جستار GraphQL همه کاربران را از سرور مجازی GraphQL ما دریافت می کند.
در مرحله بعد ، بیایید مؤلفه Users  را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل Users.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/Users.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Users</h2>

<table class=”table is-striped is-narrow is-hoverable is-fullwidth”>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for=”user in allUsers”
:key=”user.id”>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
<router-link :to=”`/admin/users/${user.id}`”>View</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</template>

<script>
import Menu from ‘@/components/Admin/Menu’
import { ALL_USERS_QUERY } from ‘@/graphql’

export default {
name: ‘Users’,
components: {
Menu
},
data () {
return {
allUsers: []
}
},
apollo: {
// fetch all users
allUsers: {
query: ALL_USERS_QUERY
}
}
}
</script>

ما از مؤلفه Menu  ایجاد شده قبلی استفاده می کنیم. سپس داده های خود را تعریف می کنیم که پس از بدست آوردن اطلاعات از سرور مجازی GraphQL جمع می شوند. در درون آبجکت apollo ، برای جستجوی همه کاربران ، عبارت GraphQL را اضافه می کنیم. از ALL_USERS_QUERY که در بالا ایجاد کردیم استفاده می کند. ذکر این نکته حائز اهمیت است که ، نام داده های ما (allUsers در این مورد) باید به همان نامی باشد که در جستار GraphQL استفاده می شود (در این مورد allUsers). هنگامی که allUsers با داده های سرور مجازی GraphQL ما جمع می شود ، کاربران را با حلقه زدن در آرایه کاربران در یک جدول نمایش می دهیم. همچنین برای مشاهده جزئیات هر کاربر پیوندی اضافه می کنیم.
اضافه کردن مسیر کاربران
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Users from ‘@/components/Admin/Users’

// add these inside the `routes` array
{
path: ‘/admin/users’,
name: ‘Users’,
component: Users
},
حال وقتی از مسیر /admin/users بازدید می کنیم ، باید لیستی از کاربران را مانند تصویر زیر ببینیم:

مشاهده جزئیات کاربر
در قسمت آخر پیوندی برای مشاهده جزئیات کاربر اضافه می کنیم. اکنون ، بیایید آن را پیاده سازی کنیم. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const USER_QUERY = gql`query UserQuery($id: Int!) {
user(id: $id) {
id
username
email
posts {
id
}
}
}`

این جستار GraphQL کاربر را با شناسه خود از سرور مجازی GraphQL دریافت می کند. شناسه کاربر را به عنوان یک آرگومان در نظر می گیرد. شناسه کاربر از مؤلفه UserDetails منتقل می شود.
در مرحله بعد ، بیایید مؤلفه UserDetails را ایجاد کنیم. در داخل پوشه ادمین ، یک فایل UserDetails.vue ایجاد کنید و کد زیر را در آن قرار دهید:
src/components/Admin/UserDetails.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>User Details</h2>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Username</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.username” readonly>
</p>
</div>
</div>
</div>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Email Address</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.email” readonly>
</p>
</div>
</div>
</div>

<div class=”field is-horizontal”>
<div class=”field-label is-normal”>
<label class=”label”>Number of posts</label>
</div>
<div class=”field-body”>
<div class=”field”>
<p class=”control”>
<input class=”input is-static” :value=”user.posts.length” readonly>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>

<script>
import Menu from ‘@/components/Admin/Menu’
import { USER_QUERY } from ‘@/graphql’

export default {
name: ‘UserDetails’,
components: {
Menu
},
data () {
return {
user: ”,
id: this.$route.params.id
}
},
apollo: {
// fetch user by ID
user: {
query: USER_QUERY,
variables () {
return {
id: this.id
}
}
}
}
}
</script>

ما نام کاربری ، ایمیل و تعداد پست های ایجاد شده مشخص را نمایش می دهیم. USER_QUERY شناسه ی کاربری را که می خواهیم جزئیات او را مشاهده کنیم دریافت می کند. شناسه کاربری از پارامترهای مسیر گرفته می شود. یعنی /admin/users/12 داده شده، 12 شناسه یک کاربر خاص میباشد. نیاز به راهی داریم تا بتوانیم این شناسه را به جستار خود منتقل کنیم. برای این کار با تعریف یک تابع variables  که یک آبجکت حاوی شناسه کاربر را برمیگرداند ، از  reactive parameter استفاده می کنیم.
افزودن مسیر اطلاعات کاربر
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید. این مسیر باید زیر مسیرهای قبلی باشد:
src/router/index.js
import UserDetails from ‘@/components/Admin/UserDetails’

// add these inside the `routes` array
{
path: ‘/admin/users/:id’,
name: ‘UserDetails’,
component: UserDetails,
props: true
},

در حال حاضر باید بتوانیم جزئیات خاصی از کاربر را مشاهده کنیم:

اعتباردهی به کاربر
فقط کاربران معتبر می توانند پست جدیدی اضافه کنند. بنابراین ، به راهی نیاز داریم تا یک هدر Autorization را با استفاده از نشانه کاربر به همراه درخواست اضافه کردن پست جدید که نشان دهنده کاربر است ، ارسال کنیم. می توانیم با apollo-link-context به راحتی این کار را انجام دهیم. src / main.js را باز کنید و کد زیر را به آن اضافه کنید:
src/main.js
import { setContext } from ‘apollo-link-context’

const authLink = setContext((_, { headers }) => {
// get the authentication token from localstorage if it exists
const token = localStorage.getItem(‘blog-app-token’)

// return the headers to the context so httpLink can read them
return {
headers: {
…headers,
authorization: token ? `Bearer ${token}` : null
}
}
})

// update apollo client as below
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
})

ابتدا ، apollo-link-context را وارد می کنیم. سپس از آن استفاده می کنیم تا authLink را ایجاد کنیم که نشانه کاربر را از فضای ذخیره محلی دریافت کند و هدرهایی را که حاوی عنوان Authorization  می باشد برگرداند. سرانجام ، در کلاینت Apollo از authLink استفاده می کنیم.
اکنون یک هدر اعتباردهی به همراه کلیه درخواستهای ایجاد شده به سرور مجازی GraphQL ما ارسال می شود.
افزودن پست جدید
پست ها قلب هر وبلاگ هستند. کاربران باید بتوانند یک پست جدید اضافه کنند. باز هم ، برای اضافه کردن پست جدید به وبلاگ خود، ابتدا جهش GraphQL را ایجاد خواهیم کرد. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const ADD_POST_MUTATION = gql`mutation AddPostMutation($title: String!, $content: String!) {
addPost(
title: $title,
content: $content
) {
id
slug
title
content
user {
id
username
email
}
}
}`
این جهش عنوان و محتوای پستی را که می خواهیم به آن اضافه کنیم به سرور مجازی GraphQL اضافه می کند.
سپس ، یک مولفه AddPost را در پوشه ادمین ایجاد کنید و کد زیر را درون آن پیست کنید:
src/components/Admin/AddPost.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Add Post</h2>

<form method=”post” @submit.prevent=”addPost”>
<div class=”field”>
<label class=”label”>Title</label>

<p class=”control”>
<input
class=”input”
v-model=”title”
placeholder=”Post title”>
</p>
</div>

<div class=”field”>
<label class=”label”>Content</label>

<p class=”control”>
<textarea
class=”textarea”
rows=”10″
v-model=”content”
placeholder=”Post content”
></textarea>
</p>
</div>

<p class=”control”>
<button class=”button is-primary”>Add Post</button>
</p>
</form>
</div>
</div>
</div>
</section>
</template>

<script>
import Menu from ‘@/components/Admin/Menu’
import { ADD_POST_MUTATION, ALL_POSTS_QUERY } from ‘@/graphql’

export default {
name: ‘AddPost’,
components: {
Menu
},
data () {
return {
title: ”,
content: ”
}
},
methods: {
addPost () {
this.$apollo
.mutate({
mutation: ADD_POST_MUTATION,
variables: {
title: this.title,
content: this.content
},
update: (store, { data: { addPost } }) => {
// read data from cache for this query
const data = store.readQuery({ query: ALL_POSTS_QUERY })

// add new post from the mutation to existing posts
data.allPosts.push(addPost)

// write data back to the cache
store.writeQuery({ query: ALL_POSTS_QUERY, data })
}
})
.then(response => {
// redirect to all posts
this.$router.replace(‘/admin/posts’)
})
}
}
}
</script>
این مؤلفه فرم اضافه کردن پست جدید را ارائه می دهد. با استفاده از ADD_POST_MUTATION متغیرهای لازم را به آن منتقل می کند. از آنجا که کلاینت Apollo جستار را کش میکند(در این مورد در حافظه قرار میدهد) ، در زمان اجرای اقدامات جهش به روشی برای به روزرسانی حافظه پنهان نیاز داریم. توجه کنید یک تابع update  وجود دارد که ما با اضافه کردن پست جدید به حافظه نهان، از آن برای به روز کردن فروشگاه استفاده می کنیم. ابتدا داده ها را از حافظه نهان مطابق با جستار خود (ALL_POSTS_QUERY) می گیریم ، سپس پست جدید را به آرایه allPosts اضافه می کنیم. در آخر ، داده های جدید را دوباره در حافظه نهان می نویسیم. پس از ارسال موفق، به لیست پستها (که به زودی ایجاد خواهیم کرد) هدایت می شویم.
افزودن مسیر ارسال پست
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import AddPost from ‘@/components/Admin/AddPost’

// add these inside the `routes` array
{
path: ‘/admin/posts/new’,
name: ‘AddPost’,
component: AddPost
}
کاربران باید بتوانند اکنون پست جدیدی اضافه کنند:

نمایش پست ها
ما ابتدا با اضافه کردن کد زیر به src / Graphql.js ، عبارت GraphQL را ایجاد می کنیم:
src/graphql.js
export const ALL_POSTS_QUERY = gql`query AllPostsQuery {
allPosts {
id
title
slug
user {
username
}
}
}`
این جستار GraphQL تمام پست ها را از سرور مجازی GraphQL ما دریافت می کند.
سپس ، یک مولفه Posts را درون پوشه ادمین بسازید و کد زیر را در آن قرار دهید:
src/components/Admin/Posts.vue
<template>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-3″>
<Menu/>
</div>
<div class=”column is-9″>
<h2 class=”title”>Posts</h2>

<table class=”table is-striped is-narrow is-hoverable is-fullwidth”>
<thead>
<tr>
<th>title</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for=”post in allPosts”
:key=”post.id”>
<td>{{ post.title }}</td>
<td>{{ post.user.username }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</template>

<script>
import Menu from ‘@/components/Admin/Menu’
import { ALL_POSTS_QUERY } from ‘@/graphql’

export default {
name: ‘Posts’,
components: {
Menu
},
data () {
return {
allPosts: []
}
},
apollo: {
// fetch all posts
allPosts: {
query: ALL_POSTS_QUERY
}
}
}
</script>

ما از مؤلفه Menu  ایجاد شده قبلی استفاده می کنیم. سپس داده های خود را تعریف می کنیم که پس از بدست آوردن اطلاعات از سرور مجازی GraphQL ما جمع می شوند. در درون آبجکت apollo ، برای دریافت همه کاربران ، عبارت GraphQL را اضافه می کنیم. که از ALL_USERS_QUERY که در بالا ایجاد کردیم، استفاده می کند. ذکر این نکته حائز اهمیت است که ، نام داده های ما (allUsers در این مورد) باید به همان نامی باشد که در جستار GraphQL  ما استفاده می شود (در این مورد allUsers). هنگامی که allUsers با داده های سرور مجازی GraphQL ما جمع می شود ، کاربران را با حلقه زدن در آرایه کاربران در یک جدول نمایش می دهیم. همچنین برای مشاهده جزئیات هر کاربر پیوندی اضافه می کنیم.
افزودن مسیر پست ها
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Posts from ‘@/components/Admin/Posts’

// add these inside the `routes` array
{
path: ‘/admin/posts’,
name: ‘Posts’,
component: Posts
}
حال وقتی از مسیر /admin/posts بازدید می کنیم ، باید لیستی از پست ها را در تصویر زیر مشاهده کنیم:

ایجاد صفحه هوم وبلاگ
صفحه اصلی وبلاگ لیستی از تمام پست های ایجاد شده را درست مانند بخش نمایش پست ها نشان می دهد. در حقیقت ، صفحه اصلی دقیقاً از همان GraphQL استفاده می کند که در نمایش پست ها استفاده می شود. این تنها نشانه صفحه اصلی است که متفاوت خواهد بود. یک مولفه Home در قسمت src/components ایجاد کنید و کد زیر را به آن اضافه کنید:
src/components/Home.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-6 is-offset-3″>
<h1 class=”title”>Latest Posts</h1>

<h3
v-for=”post in allPosts”
:key=”post.id”
class=”title is-5″>
<router-link :to=”post.slug”>
{{ post.title }}
</router-link>
</h3>
</div>
</div>
</section>
</template>

<script>
import { ALL_POSTS_QUERY } from ‘@/graphql’

export default {
name: ‘Home’,
data () {
return {
allPosts: []
}
},
apollo: {
// fetch all posts
allPosts: {
query: ALL_POSTS_QUERY
}
}
}
</script>

همانطور که می بینیم بخش JavaScript با کامپوننت Posts یکسان است. فقط نشانه گذاری متفاوت دارد. ما آرایه ی پست ها را دور می زنیم و عنوان هر پست را که با کد شماره صفحه آنها مرتبط است، نشان می دهیم.
اضافه کردن مسیر خانه
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import Home from ‘@/components/Home’

// add these inside the `routes` array
{
path: ‘/’,
name: ‘Home’,
component: Home
}

در بازدید از مسیر / ، باید صفحه اصلی وبلاگ خود را مانند تصویر زیر مشاهده کنید:

مشاهده پست
آخرین موردی که باید اضافه شو ، امکان مشاهده پست خاص است. کد زیر را به src / Graphql.js اضافه کنید:
src/graphql.js
export const POST_QUERY = gql`query PostQuery($slug: String!) {
post(slug: $slug) {
id
title
slug
content
user {
id
username
email
}
}
}`

این جستار یک پست را با کد شماره صفحه خود دریافت میکند. کد شماره صفحه پست را به عنوان یک آرگومان میگیرد.
سپس ، یک مولفه SinglePost را در داخل src/components ایجاد کرده و کد زیر را به آن اضافه کنید:
src/components/SinglePost.vue
<template>
<section class=”section”>
<div class=”columns”>
<div class=”column is-6 is-offset-3″>
<router-link class=”button is-link is-small” to=”/”>Back Home</router-link>

<h1 class=”title”>
{{ post.title }}
</h1>

<div class=”content”>
{{ post.content }}
</div>
</div>
</div>
</section>
</template>

<script>
import { POST_QUERY } from ‘@/graphql’

export default {
name: ‘SinglePost’,
data () {
return {
post: ”,
slug: this.$route.params.slug
}
},
apollo: {
// fetch post by slug
post: {
query: POST_QUERY,
variables () {
return {
slug: this.slug
}
}
}
}
}
</script>

ما به سادگی عنوان پست و محتوای آن و سپس پیوندی را برای بازگشت به صفحه اصلی نمایش می دهیم. بخش JavaScript پیاده سازی مورد استفاده در نمایش جزئیات کاربر را دنبال می کند. در این حالت ، کد شماره صفحه پست را از پارامترهای مسیر دریافت می کنیم.
افزودن مسیر مشاهده پست
src / router / index.js را باز کنید و کد زیر را به آن اضافه کنید:
src/router/index.js
import SinglePost from ‘@/components/SinglePost’

// add these inside the `routes` array
{
path: ‘/:slug’,
name: ‘SinglePost’,
component: SinglePost,
props: true
}
توجه: این مسیر باید آخرین مسیر در آرایه مسیرها باشد.
اکنون باید بتوانیم یک پست واحد را مشاهده کنیم:

نتیجه
در این آموزش ، نحوه ساختن یک برنامه وبلاگ با GraphQL ، کلاینت Apollo و VueJS را مشاهده کردیم. همچنین دیدیم که چگونه برنامه frontend  خود را به یک سرور مجازی GraphQL وصل کنیم. کد کامل این آموزش در GitHub موجود است.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:ApolloClient, CORS, UI, VueApollo

ساخت برنامه های وب پیشرونده با Angular

Progressive web apps برنامه های وب هستند که با فناوری هایی ساخته شده اند که باعث می شود آنها مانند برنامه های بومی (native) رفتار کنند. فواید برنامه های وب پیشرونده ، امکان کار یکنواخت در زمان غیرقابل اطمینان بودن پوشش شبکه است. همچنین بر خلاف برنامه های بومی ، نیازی به نصب نیست اما سریعتر از برنامه های وب معمولی هستند. در این مقاله شما می توانید یک برنامه وب پیشرونده را با Angular بسازید و آن را با Firebase مستقر کنید.
شروع
برای ساختن یک برنامه وب پیشرونده با Angular ، یک وب سایت کوچک در این آموزش ایجاد خواهید کرد. پس از اتمام کار ، از افزونه Lighthouse Chrome برای آزمایش پیشرفت برنامه خود استفاده می کنید. همچنین می توانید این پروژه را از GitHub کلون کنید.

ایجاد یک پروژه جدید Angular
برای ایجاد یک پروژه جدید Angular از طریق Angular CLI ، باید Angular CLI را روی دستگاه خود نصب کنید. اگر Angular CLI هنوز روی دستگاه شما نصب نشده است ، دستور زیر را برای نصب آن در سطح جهانی اجرا کنید:
⦁ $ npm install -g ⦁ @angular/cli
⦁
پس از نصب Angular CLI در سطح جهانی ، می توانید یک پروژه جدید را با آن ایجاد کنید. به طور پیش فرض Angular فایلهای آزمایشی تولید می کند که در این پروژه آموزشی استفاده ای ندارند. برای جلوگیری از این تولید ، می توانید فلگ –skip-tests را به دستور زیر اضافه کنید که یک پروژه جدید ایجاد می کند:
⦁ $ ng new ng-pwa –skip-tests
⦁
ایجاد مانیفست برنامه وب
مانیفست برنامه وب یک فایل JSON است که شامل پیکربندی میباشد که به یک برنامه وب امکان ذخیره در صفحه اصلی کاربر را می دهد. همچنین ظاهر و رفتار آن را هنگام راه اندازی از صفحه اصلی تعریف می کند. مانیفست برنامه وب یک نیاز اساسی برای برنامه های وب پیشرونده است اما می تواند در هر وب سایتی مورد استفاده قرار گیرد.
برای ایجاد یک مانیفست برنامه وب برای برنامه خود ، به پوشه src / بروید و فایلی با نام manifest.json را در ریشه پوشه ایجاد کنید. محتوای زیر را در فایل اضافه کنید:
src/manifest.json
{
“name”: “Angular Progressive Web App”,
“short_name”: “Ng-PWA”,
“start_url”: “./”,
“theme_color”: “#008080”,
“background_color”: “#008B8B”,
“display”: “standalone”,
“description”: “A PWA that is built with Angular”,
“icons”: [
{
“src”: “/assets/images/icons/icon-16×16.png”,
“sizes”: “16×16”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-32×32.png”,
“sizes”: “32×32”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-150×150.png”,
“sizes”: “150×150”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-180×180.png”,
“sizes”: “180×180”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/assets/images/icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
]

}

در مانیفست برنامه وب ما ، نامی را که در صفحه هوم کاربران به آیکون برنامه ما پیوست خواهد شد و یک short_name که در صورت طولانی بودن آن جایگزین میشود را تعریف کردیم . همچنین صفحه فرود برنامه را هنگامی که از صفحه اصلی با start_url راه اندازی میشود ، مشخص کردیم. theme_color رنگی را که UI مرورگر هنگام بازدید از سایت ما مشاهده می کند را مشخص می نماید. ویژگی background_color رنگ پس زمینه ای را کنترل می کند که هنگام اجرای برنامه توسط کاربران از صفحه هوم آن ها، آیکون برنامه ما را نمایش میدهد . با display ، مشخص میکنید که وقتی کاربر از سایت شما بازدید می کند باید UI مرورگر پنهان شود یا خیر.
انتظار داریم کاربران با انواع مختلف دستگاه ها با اندازه صفحه های مختلف از سایت ما بازدید کنند ، بنابراین نیاز به ایجاد نسخه های تکراری از آیکون های برنامه خود در ابعاد مختلف داریم. realfavicongenerator.net می تواند به خودکارسازی این روند کمک کند.

پس از اتمام کار ، به فایل index.html بروید و موارد زیر را به بخش head اضافه کنید:
src/index.html
…
<link rel=”manifest” href=”/manifest.json”>
<meta name=”theme-color” content=”#008080″>
…

مانیفست برنامه وب به پوشه build اضافه نمی شود مگر اینکه ما به Angular دستورالعمل این کار را بدهیم. ما این کار را با اضافه کردن فایل manifest.json به آرایه دارایی ها در بخش apps فایل .angular-cli.json انجام خواهیم داد.
.angular-cli.json
…
“apps”: [
{
…
“assets”: [
…
“manifest.json”
],
…

اضافه کردن ارائه دهندگان خدمات
ارائه دهندگان خدمات پایه و اساس برنامه های وب پیشرونده هستند که در جاوا اسکریپت نوشته شده اند و به ذخیره کردن دارایی ها و فایل های مهم کمک می کنند ، این ویژگی به شما کمک می کند تا هنگامی که پوشش شبکه غیرقابل دسترسی یا غیرقابل اطمینان باشد ، عملکرد یک برنامه را حفظ کنید. ارائه دهندگان خدمات همچنین می توانند درخواست ها را رهگیری کنند و پاسخ های سرور مجازی را در میان موارد دیگر مدیریت کنند.
ما باید برنامه خود را قبل از وارد کردن آن به تولید ، با Webpack بسازیم و مسئول سرویس ما باید بتواند فایل های ساخت را ردیابی و ذخیره کند. با بسته npm sw-precache-webpack-plugin ، بسته را نصب می کنیم و آن را پیکربندی می کنیم. سپس می توانیم یک فرمان را اجرا کنیم که به صورت خودکار ارائه دهنده سرویس را در پوشه build ایجاد کند.
دستور نصب npm را برای نصب بسته اجرا کنید:
⦁ $ npm install –save-dev sw-precache-webpack-plugin
⦁
پس از نصب بسته ، به ریشه برنامه بروید و فایلی با نام precache-config.js ایجاد کنید. موارد زیر را در فایل اضافه کنید:
pre-cache.config.js
var SWPrecacheWebpackPlugin = require(‘sw-precache-webpack-plugin’);

module.exports = {
navigateFallback: ‘/index.html’,
navigateFallbackWhitelist: [],
stripePrefix: ‘dist’,
root: ‘dist/’,
plugins:[
new SWPrecacheWebpackPlugin({
cacheId: ‘ng-pwa’,
filename: ‘service-worker.js’,
staticFileGlobs: [
‘dist/index.html’,
‘dist/**.js’,
‘dist/**.css’
],

})
],
stripePrefix: ‘dist/assets’,
mergeStaticsConfig: true
};

فایل precache-config.js با استفاده از آبجکت های لفظی جفتهای مقدار کلیدی sw-precache-webpack-plugin را پیکربندی می کند.
Angular به عنوان یک چارچوب نرم افزار نهایی برای ایجاد برنامه های تک صفحه ای، از مسیریابی URL سمت کلاینت استفاده می کند و بنابراین می تواند URL های دلخواه تولید کند که توسط ارائه دهنده سرویس خودکار تولید شده، ذخیره نمی شود. در چنین شرایطی ما یک ورودی HTML را تعریف خواهیم کرد که URL درخواستی روی آن نگاشت شود و navigateFallback آن را مدیریت کند. ورودی HTML باید بتواند منابع مورد نظر را تأمین کند. از آنجا که برنامه ما SPA است ، و index.html نقطه ورود است – می تواند URL های دلخواه را اداره کند ، بنابراین باید در بین فایل هایی که برای ذخیره در آرایه staticFileGlobs انتخاب شده اند قرار بگیرد. navigateFallbackWhitelist می تواند خالی و یا حاوی یک regex باشد که نوع / الگوی URL را که برای استفاده از navigateFallback استفاده می شود ، تعریف کند.
برای درک عمیق تر از نحوه پیکربندی افزونه sw-precache-webpack ، مستندات آن را بخوانید.
برای به پایان رساندن راه اندازی ارائه دهنده سرویس ، یک اسکریپت / دستور سفارشی npm ایجاد خواهیم کرد که برای ساختن برنامه ما و تولید خودکار فایل ارائه دهنده سرویس در پوشه build استفاده خواهد شد. به فایل pack.json بروید و موارد زیر را به اسکریپت ها اضافه کنید:
package.json
…
“scripts”: {
…
“pwa”: “ng build –prod && sw-precache –root=dist –config=precache-config.js”
},
…

بررسی نما
از آنجا که تمرکز اصلی ما بر روند ساخت برنامه وب پیشرونده با Angular است، فقط یک نمای واحد داریم .
src/app/app.component.html
<div class=”container”>
<h1>
A Progressive Web App Built with Angular.
</h1>
<img width=”300″ src=”data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=” alt=”Angular logo”>

<h2>Get Started With Progressive Web Apps: </h2>
<ul>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/primers/service-workers/”>Service Workers</a></h4>
</li>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/web-app-manifest/”>Web App Manifest</a></h4>
</li>
<li>
<h4><a target=”_blank” rel=”noopener” href=”https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/”>Code Lab (PWA)</a></h4>
</li>
</ul>

</div>

اگر مشخصه target عنصر لنگرگاه به دلایل امنیتی و عملکردی روی _blank تنظیم شود ، ویژگی rel = “noopener” در برنامه های وب پیشرونده ضروری است:
در ادامه کد CSS آمده است:
src/styles.css
body{
background-color: teal;
}

.container{
text-align: center;
}

ul{
list-style: none;
}

h1, h2, a {
color: white;
}

به کارگیری برنامه
اراده دهنده خدمات ضربان قلب هر برنامه وب پیشرونده است. با این حال برای اینکه ارائه دهنده سرویس خوب عمل کند ، برنامه ما باید از طریق یک اتصال مطمئن ارائه شود. از این رو ، برنامه خود را به Firebase میفرستیم ، که میزبان یک اتصال امن است و مراحل را طی خواهید کرد.

برای شروع ، به firebase.google.com مراجعه کنید. اگر از قبل حساب کاربری ندارید ، یک حساب کاربری ایجاد کنید تا به کنسول دسترسی داشته باشید. از کنسول ، یک پروژه Firebase جدید ایجاد کنید.

پس از ایجاد یک پروژه Firebase جدید ، به ترمینال فرمان بروید و به پوشه برنامه وب پیشرونده خود بروید. npm install -g firebase-tools را برای نصب ابزارهای firebase در سطح جهانی اجرا کنید. بسته ابزارهای firebase به ما امکان می دهد برنامه های اجرایی و استقراری را از ترمینال فرمان آزمایش کنیم.
پس از اتمام نصب ، باید برنامه خود را برای آماده سازی جهت استقرار بسازیم. برای ساخت برنامه Angular و تولید خودکار ارائه دهنده سرویس، npm run pwa را اجرا کنید. این دستور اسکریپت سفارشی را که قبلاً ایجاد کردیم اجرا می کند و تولید برنامه ما را آماده می کند.

زمان معرفی Firebase به برنامه ما است. برای ورود به Firebase دستور firebase login را اجرا کنید. دستور firebase init را برای شروع اولیه Firebase در پروژه اجرا کنید. سپس به سؤالات به شرح زیر پاسخ دهید:
• آیا آماده ادامه کار هستید؟ (Y / n) = Y
• کدام ویژگی Firebase CLI را برای تنظیم این پوشه می خواهید؟ = میزبانی
• یک پروژه Firebase پیش فرض برای این فهرست انتخاب کنید = نام پروژه Firebase تان
• به عنوان دایرکتوری عمومی خود می خواهید از چه مواردی استفاده کنید؟ = dist
• به عنوان یک برنامه تک صفحه پیکربندی شود (همه آدرس ها به /index.html بازنویسی شوند) ؟ (y / N) = Y
• فایل dist / index.html از قبل موجود است. بازنویسی شود؟ (y / N) = N

برنامه ما آماده استقرار است. برای استقرار برنامه در Firebase ، firebase deploy را اجرا کنید.
در آخر ، firebase open hosting: site را اجرا کنید تا برنامه خود را ببینید.

تست با Lighthouse
Lighthouse یک افزونه کروم است که توسط گوگل ساخته شده است. می توان از آن علاوه بر سایر آزمایشات، برای تست میزان سازگاری یک برنامه وب پیشرونده با استاندارد برنامه پیشرونده وب استفاده کرد. بالاترین امتیاز 100٪ و امتیاز PWA برای این برنامه 91٪ است.

نتیجه
برنامه های وب پیشرونده تجربه ای مشابه برنامه های بومی را در اختیار کاربران قرار می دهند. با این حال ، PWA ها سبک تر و بسیار انعطاف پذیر هستند. Angular یک چارچوب محبوب نرم افزار نهایی است. در این مقاله شما یک برنامه وب پیشرونده با Angular ایجاد و از طریق Firebase مستقر کرده اید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Angular CLI, Firebase, Lighthouse Chrome, Progressive web apps

می توان با Koa برنامه “سلام جهانی” ساخت

Express یکی از محبوب ترین چارچوب های Node.js است. Koa یک چارچوب وب جدید است که توسط تیم اکسپرس ایجاد شده است. هدف آن این است که یک نسخه مدرن و مینیمالیستی اکسپرس باشد. برخی از ویژگی های آن پشتیبانی و اتکا به ویژگی های جدید JavaScript مانند ژنراتور و async / await است. Koa همچنین با هیچ میان افزاری ارسال نمی شود اما می توان آن را با استفاده از افزونه های سفارشی و موجود گسترش داد.
با دنبال کردن این مقاله ، با چارچوب Koa بیشتر آشنا می شوید و یک اپلیکیشن درست می کنید تا با عملکرد و فلسفه آن آشنا شوید.
پیش نیازها
برای دنبال کردن این آموزش ، به نصب موارد زیر نیاز دارید:
Node.js و NPM
همچنین نیاز به دانش کار با دستور JavaScript و ES6 دارید.
ستاپ و پیکربندی
برای شروع ، یک دیرکتوری جدید برای پروژه خود ایجاد کنید. این کار با کپی کردن و اجرای دستور زیر در ترمینال شما قابل انجام است:
$ mkdir koala

توجه: شما می توانید پروژه خود را به هر نامی ایجاد کنید ، اما در این مقاله ما از Koala به عنوان نام و دیرکتوری پروژه استفاده خواهیم کرد.

در این مرحله ، شما دایرکتوری پروژه koala را ایجاد کرده اید. در مرحله بعد ، پروژه گره خود را از داخل دیرکتوری شروع می کنید. می توانید با اجرای دستورات زیر این کار را انجام دهید:
$ cd koala

$ npm init koala
پس از اجرای دستور npm init ، اعلان ها را دنبال کنید و جزئیات پروژه خود را پر کنید. در پایان این کار ، یک فایل pack.json با اطلاعاتی که هنگام درخواست از شما وارد کرده اید ، خواهید داشت. توجه داشته باشید که می توانید npm init -y را برای ایجاد فایل pack.json با مقادیر پیش فرض اجرا کنید.
سپس ، برای نصب Koa این دستور را اجرا کنید:
$ npm install koa –save

بسته به نسخه Node موردنظر شما ممکن است نیازی به افزودن فلگ –save نداشته باشید. این فلگ به نسخه های قدیمی تر Node می گوید که کتابخانه نصب شده (در این حالت Koa) را به لیست متعلقات موجود در فایل pack.json شما اضافه کند. در نسخه های Node جدیدتر ، فقط می توانید npm i koa را اجرا کنید تا Koa را نصب کنید.
ایجاد سرور مجازی Koa
در طول راه اندازی و شروع پروژه ، از شما خواسته شد که وارد قسمت ورود برنامه خود شوید. در این مقاله از index.js استفاده خواهید کرد که مقدار پیش فرض به عنوان نقطه ورود شما بود.
ابتدا فایل index.js را ایجاد کنید. این کار را از راه های گوناگون می توان انجام داد. برای کاربران MacOS و Linux ، این کار با اجرای دستور زیر در ترمینال شما قابل انجام است:
$ touch index.js
با استفاده از ویرایشگر کد / متن مورد نظر خود ، پروژه خود را باز کرده و قطعه زیر را در فایل index.js کپی کنید:
// index.js

‘use strict’;

const koa = require(‘koa’)
const app = new koa()

app.use(function *(){
this.body = “Hello World !!!”;
});

app.listen(1234)

در قسمت بالا ، شما یک برنامه koa ایجاد کرده اید که روی پورت 1234 اجرا می شود. می توانید برنامه را با استفاده از دستور زیر اجرا کنید:
$ node index.js

و از برنامه در http: // localhost: 1234 بازدید کنید.
ساخت برنامه شما
همانطور که قبلاً نیز اشاره شد ، Koa.js با هیچ میان افزاری حمل نمی کند و برخلاف ماقبل خود ، یعنی Express ، مسیریابی را به طور پیش فرض انجام نمی دهد.
به منظور اجرای مسیرها در برنامه Koa ، یک کتابخانه میان افزار برای مسیریابی در Koa ، یعنی Koa Routerنصب خواهید کرد. با اجرای این دستور آن را نصب کنید:
$ npm install koa-router –save

برای استفاده از روتر در برنامه خود ، فایل index.js خود را اصلاح کنید:
// index.js

‘use strict’;
const koa = require(‘koa’)
const koaRouter = require(‘koa-router’)

const app = new koa()
const router = new koaRouter()

router.get(‘koala’, ‘/’, (ctx) => {
ctx.body = “Welcome! To the Koala Book of Everything!”
})

app.use(router.routes())
.use(router.allowedMethods())

app.listen(1234, () => console.log(‘running on port 1234’))

در بالا ، شما یک مسیر را بر روی آدرس اصلی برنامه خود تعیین کرده اید (http: // localhost: 1234) و این مسیر را برای برنامه Koa خود ثبت کرده اید.
برای اطلاعات بیشتر در مورد تعریف مسیر در برنامه های Koa.js ، به اسناد کتابخانه Koa Router در این لینک مراجعه کنید.
همانطور که قبلاً گفته شد، Koa به عنوان یک چارچوب حداقلی به کار می رود ، بنابراین ، برای اجرای رندر نمای با موتور قالب باید یک کتابخانه میان افزار را نصب کنید. چندین کتابخانه برای انتخاب وجود دارد اما در این مقاله از koa-ejs استفاده خواهید کرد.
برای این کار ابتدا کتابخانه را با استفاده از دستور زیر نصب کنید:
$ npm install koa-ejs –save

در مرحله بعدی ، فایل index.js خود را اصلاح کنید تا الگوی خود را با قطعه کد زیر ثبت کنید:
// index.js

‘use strict’;
const koa = require(‘koa’)
const path = require(‘path’)
const render = require(‘koa-ejs’)
const koaRouter = require(‘koa-router’)

const app = new koa()
const router = new koaRouter()

render(app, {
root: path.join(__dirname, ‘views’),
layout: ‘layout’,
viewExt: ‘html’,
cache: false,
debug: true
})

router.get(‘koala’, ‘/’, (ctx) => {
ctx.body = “Welcome! To the Koala Book of Everything!”
})

app.use(router.routes())
.use(router.allowedMethods())

app.listen(1234, () => console.log(‘running on port 1234’))

همانطور که در بالا مشاهده شد ، در ثبت نام تمپلیت خود ، دیرکتوری اصلی فایل های نما (view)، بسط فایل های نما و فایل نمای پایه (که نماهای دیگر گسترش می دهند) را به برنامه خود میگویید.
اکنون که میان افزار قالب خود را ثبت کرده اید ، تعریف مسیر خود را برای ارائه یک فایل الگو اصلاح کنید:
// index.js

…

router.get(‘koala’, ‘/’, (ctx) => {
let koala_attributes = [];
koala_attributes.push({
meta_name: ‘Color’,
meta_value: ‘Black and white’
})
koala_attributes.push({
meta_name: ‘Native Country’,
meta_value: ‘Australia’
})
koala_attributes.push({
meta_name: ‘Animal Classification’,
meta_value: ‘Mammal’
})
koala_attributes.push({
meta_name: ‘Life Span’,
meta_value: ’13 – 18 years’
})
koala_attributes.push({
meta_name: ‘Are they bears?’,
meta_value: ‘no!’
})
return ctx.render(‘index’, {
attributes: koala_attributes
})
})

…

در بالا ، مسیر پایه شما فایل index.html را که در دیرکتوری نماها موجود است را ارائه می دهد. فایل index.html شما حاوی چند HTML اساسی برای نمایش ویژگی های koala شما است. در زیر مشاهده کنید:
<!– views/index.html –>

<h2>Koala – a directory Koala of attributes</h2>
<ul class=”list-group”>
<% attributes.forEach( function(attribute) { %>
<li class=”list-group-item”>
<%= attribute.meta_name %> – <%= attribute.meta_value %>
</li>
<% }); %>
</ul>

برای دریافت گزینه های بیشتر با استفاده از میان افزار الگوی Koa-ejs ، مطالب کتابخانه را در اینجا مشاهده کنید.
مدیریت خطاها و پاسخ ها
Koa با مشخص کردن زود هنگام میان افزار خطا در فایل ورود به سیستم ، خطاها را مدیریت می کند. میان افزار خطا باید زود تعریف شود زیرا فقط خطاهایی که بعد از معرفی میان افزار خطا ایجاد شده باشند، دریافت میشوند. با استفاده از فایل index.js خود ، آن را تنظیم کنید تا موارد زیر را شامل شود:
// index.js

‘use strict’;
const koa = require(‘koa’)
const render = require(‘koa-ejs’)
const koaRouter = require(‘koa-router’)

const app = new koa()
const router = new koaRouter()

app.use( async (ctx, next) => {
try {
await next()
} catch(err) {
console.log(err.status)
ctx.status = err.status || 500;
ctx.body = err.message;
}
})

…

بلوک فوق هر گونه خطایی را که هنگام اجرای برنامه شما به وجود آمده است ، دریافت می کند. ما این کار را با ایجاد خطایی در بدنه عملکرد مسیری که تعریف کرده اید آزمایش خواهیم کرد:
// index.js

…

router.get(‘koala’, ‘/’, (ctx) => {
ctx.throw(‘Test Error Message’, 500)
})
…

هدف پاسخ Koa معمولاً در آبجکت زمینه آن قرار گرفته است. بیایید با استفاده از تعریف مسیر ، نمونه ای از تنظیم پاسخ ها را نشان دهیم:
// index.js

‘use strict’;
const koa = require(‘koa’)
const koaRouter = require(‘koa-router’)

const app = new koa()
const router = new koaRouter()

app.use( async (ctx, next) => {
try {
await next()
} catch(err) {
console.log(err.status)
ctx.status = err.status || 500;
ctx.body = err.message;
}
})

router.get(‘koala’, ‘/’, (ctx) => {
ctx.status = 200
ctx.body = “Well this is the response body”
})

نتیجه
در این مقاله ، شما مختصراً با Koa و چگونگی اجرای برخی کارکردهای متداول در یک پروژه Koa آشنا شدید. Koa یک چارچوب حداقلی و انعطاف پذیر است که می تواند به قابلیت های بیشتری از آنچه این مقاله نشان داده است ، گسترش یابد. به دلیل مشابه بودن آن به اکپرس ، برخی حتی ماهیت آن را با Express 5.0 توصیف کرده اند.
کل کد این مقاله در Github موجود است و منبع شامل برخی مفاهیم بیشتر میباشد که در اینجا مورد بحث نیستند ، زیرا خارج از محدوده مقدمه میباشند.

 

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:ES6, Express, Koa

مدیریت حالت فرم در React با Redux Form

redux-form یک روش عالی برای مدیریت اشکال است که توسط Redux تهیه شده است. در واقع یک کامپوننت مرتبه بالاتر (HOC) است که از re-redux استفاده می کند تا مطمئن شود فرم های HTML در React از Redux برای ذخیره تمام وضعیت آن استفاده میکنند.
redux-form مولفه های زیر را برای کمک به شما در ساخت برنامه های تان دارد:
formReducer (): تابعی است که می گوید چگونه می توانید فروشگاه Redux را بر اساس تغییراتی که از برنامه اعمال می شود به روز کنید. این تغییرات توسط اقدامات Redux شرح داده شده است. formReducer باید روی فرم Redux نصب شود.
reduxForm (): تابع reduxForm () یک جزء مرتبه بالاتر است که یک آبجکت پیکربندی می گیرد و همیشه یک عملکرد جدید را برمی گرداند. و برای دربرگیری مؤلفه فرم و پیوند تعامل کاربر با اقدامات ارسالی Redux استفاده می شود.
مؤلفه <Field />: مؤلفه ای که در داخل مؤلفه فرم پیچیده شما قرار دارد. به عنوان روشی برای اتصال عناصر ورودی در یک فرم به redux-form logic ارائه میشود. به عبارت دیگر، این راهی است که ما می توانیم ورودی را از آنچه کاربر تایپ می کند ، دریافت کنیم.
می توانید اطلاعات بیشتر در مورد API redux-form را در مستندات آن بخوانید.
در این آموزش ، از فرم redux برای ساختن فرم با اعتبار و اتصال آن به فروشگاه Redux استفاده خواهید کرد.
پیش نیازها
برای تکمیل این آموزش به یک محیط توسعه محلی برای Node.js. نیاز دارید. نحوه نصب Node.js و ایجاد محیط توسعه محلی را در این لینک دنبال کنید.
مرحله 1 – ایجاد پروژه
ما می خواهیم با بسته  create-react-app، یک برنامه React بسازیم. create-react-app به شما امکان می دهد برنامه های React را بدون پیکربندی ساخت ایجاد کنید. با اجرای دستور ترمینال زیر می توانید از برنامه create-react-app استفاده کنید. این برنامه به صورت خودکار یک برنامه React را در یک پوشه با عنوان contact-redux ایجاد می کند.
⦁ $ npx create-react-app contact-redux
⦁
توجه به این نکته مهم است که npx فقط با نسخه های npm 5.2 و بالاتر کار می کند. اگر نسخه پایین تر از آن را دارید و هنوز هم دوست دارید از create-react-app در رایانه خود استفاده کنید، دستورات ترمینال زیر را برای نصب برنامه create-react-app و شروع یک برنامه React اجرا کنید.

⦁ $ npm install -g create-react-app
⦁
⦁ $ create-react-app contact-redux
به دایرکتوری بروید و سرور مجازی توسعه را شروع کنید تا اطمینان حاصل شود که همه چیز کار می کند. برای شروع برنامه جدید ایجاد شده React در حالت توسعه ، دستور زیر را اجرا کنید:
⦁ $ npm start
⦁
موارد زیر را در مرورگر خود مشاهده خواهید کرد:

اکنون یک برنامه React فعال و در حال اجرا است.
دستور زیر را اضافه کنید تا متعلقات لازم برای فرم را اضافه کنید.
⦁ npm install –save redux react-redux redux-form
⦁
⦁ redux – یک کانتینر حالت و شرطی لازم برای کارکرد redux-form است.
⦁ React -Redux – React Redux اتصالات رسمی React برای Redux است و همچنین شرط لازم برای کارکردن redux-form
⦁ redux-form – بسته مورد استفاده برای این آموزش.
پس از نصب ، می توانید روی فرم تماس با ما کار کنید.
مرحله 2 – ایجاد فرم
ما پیوند Bulma CDN را به فایل index.html اضافه خواهیم کرد تا یک ظاهر طراحی پیش فرض اضافه شود. فایل public/index.html را باز کنید و خط کد زیر را به برچسب head اضافه کنید:
public/index.html
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>

اکنون می خواهیم ویرایشهایی را در فایل src / App.js انجام دهیم. فایل src / App.js را باز کنید و خط کد زیر را در قسمت بالای فایل اضافه کنید.
src/App.js
import { reduxForm, Field } from ‘redux-form’;

سپس ، به تابع render () بروید و با کد زیر آن را اصلاح کنید:
src/App.js
render() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Welcome to React x redux-form</h1>
</header>
<div className=”container”>
<p className=”App-intro”>
Contact Form
</p>
<SignInForm />
</div>
</div>
);
}
متن مقدمه تغییر کرده است و از همه مهمتر یک مؤلفه <SignInForm /> را که در زیر ایجاد خواهیم کرد اضافه کردیم. این یک مؤلفه ساده خواهد بود که فرم مورد نیاز ما را برمی گرداند و آن را به مؤلفه redux-form وصل می کند. در همان فایل src / App.js ، قبل از اعلام class App extends Component ، این کد را در زیر تایپ کنید.
src/App.js
let SignInForm = props => {
return <form className=”form”>
<div className=”field”>
<div className=”control”>
<label className=”label”>First Name</label>
<Field className=”input” name=”firstName” component=”input” type=”text” placeholder=”First Name”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Last Name</label>
<Field className=”input” name=”lastName” component=”input” type=”text” placeholder=”Last Name”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Email</label>
<Field className=”input” name=”email” component=”input” type=”email” placeholder=”Email Address”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Proficiency</label>
<div className=”select”>
<Field className=”input” name=”proficiency” component=”select”>
<option />
<option value=”beginner”>Beginner Dev</option>
<option value=”intermediate”>Intermediate Dev</option>
<option value=”expert”>Expert Dev</option>
</Field>
</div>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Age</label>
<Field className=”input” name=”age” component=”input” type=”number” placeholder=”Age”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”checkbox”>
<Field name=”saveDetails” id=”saveDetails” component=”input” type=”checkbox”/>
Save Details
</label>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Message</label>
<Field className=”textarea” name=”message” component=”textarea” />
</div>
</div>

<div className=”field”>
<div className=”control”>
<button className=”button is-link”>Submit</button>
</div>
</div>

</form>;
};
در این کد فرم تماس با ما به صورت جزیی تنظیم می شود که از کاربر می خواهد اطلاعاتی مانند نام ، نام خانوادگی و سن را میخواهد. نکته جالب در این فرم مولفه Field است.
مولفه Field از بسته فرم redux تهیه می شود و نحوه نوشتن فیلد input  است. مشخصه type  تعیین می کند چه نوع ورودی باید باشد ، یعنی ورودی radio  ، ورودی checkbox  ، ورودی text  یا ورودی email . مشخصه component  تعیین می کند که چه نوع فیلد ورودی باید باشد ، می تواند برچسبهای input ، textarea  یا select  باشد و ویژگی prop همان چیزی است که برای شناسایی وضعیت فیلدهای فروشگاه redux که در زیر ایجاد خواهیم کرد ، استفاده خواهد شد.
بنابراین برای استفاده از فرم متصل به فرم redux ، باید یک نوع فروشگاه Redux ایجاد کنیم و این کاری است که در آینده انجام خواهیم داد.
مرحله 3 – راه اندازی فروشگاه Redux
ما به یک فروشگاه Redux احتیاج داریم که بتوانیم مؤلفه فرم (SignInForm) را که ایجاد کردیم به هم وصل کنیم. بیایید با وارد کردن بسته redux شروع کنیم. فایل src / index.js را باز کنید و خطوط کد زیر را اضافه کنید که در آن اساساً redux  را وارد برنامه React میکنیم.
src/index.js
import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

اولین خط کد createStore  و combineReducers را وارد میکند. createStore کمک می کند تا یک فروشگاه Redux ایجاد کنید که وضعیت کامل برنامه شما را نگه میدارد و combineReducers  به ​​شما کمک می کند تا کلیه توابع کاهشی خود را در یک تابع کمکی منفرد مدیریت کنید که می تواند پس از آن به CreateStore منتقل شود. می توانید اطلاعات بیشتر در مورد این عملکردها را در صفحه مرجع Redux API مطالعه کنید.
خط دوم کد Provider  را از react-redux تأمین می کند. Provider  کمک می کند تا وضعیت فروشگاه به کلیه اجزای کانتینر موجود در برنامه منتقل شود و در ادامه نشان خواهیم داد که چگونه کار می کند.
خط سوم کد reducer  به عنوان formReducer وارد میکند و این چیزی است که ما می خواهیم از آن استفاده کنیم تا فرم خود را به فروشگاه Redux وصل کنیم.
در مرحله بعد ، ما فروشگاه واقعی Redux را ایجاد می کنیم و با استفاده از مؤلفه Provider  ، اطمینان حاصل می کنیم که برای همه اجزای کانتینر کاربرد دارد. فایل src / index.js را با بلوک کد زیر ویرایش کنید.
src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

import ‘./index.css’;
import App from ‘./App’;
import registerServiceWorker from ‘./registerServiceWorker’;

const rootReducer = combineReducers({
form: formReducer,
});

const store = createStore(rootReducer);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById(‘root’)
);

registerServiceWorker();

در بلوک کد بالا ، ما از تابع CombineReducers استفاده می کنیم تا formReducer را از فرم به فروشگاه Redux وصل کنیم. در اصل برای به روزرسانی هر یک از حالت های ما در پاسخ به اقدامات ، که در این حالت ، تغییر فرم هستند ، مورد استفاده قرار می گیرد. خط بعدی کد برای ایجاد فروشگاه با استفاده از CreatStore از Redux استفاده می شود.
سپس این فروشگاه تازه ایجاد شده به کمک Provider که در قسمت کامپوننت برنامه است، در دسترس همه قسمتهای برنامه قرار میگیرد و همچنین خصیصه ای را قبول می کند که همانstore  است که در بالا ایجاد شد.
بیایید به فرم برگردیم و در آخر آن را به فروشگاه وصل کنیم.
مرحله 4 – اتصال فرم به redux-form
ما مؤلفه فرم خود را داریم اما هنوز به فرم redux وصل نشده است. بیایید آن را تنظیم کنیم. این بلوک کد را درست زیر class App extends Component و بلافاصله پس از اعلان مؤلفه ارائه دهنده SignInForm ، تایپ کنید.
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
})(SignInForm);

در بلوک کد بالا ، SignInForm با استفاده از کامپوننت مرتبه بالاتر reduxForm به فرم متصل به redux تبدیل می شود. این بدان معنی است که فرم ما اکنون به فروشگاه قلاب شده است.
نکته مهم این است که فرم کلید پیکربندی ، به عنوان شناسه استفاده می شود و از آن برای تهیه نامی منحصر به فرد برای مؤلفه فرم گردد. اگر چند فرم وجود داشته باشد ، برای مدیریت بهتر حالتهای مختلف ، باید از اسامی جداگانه استفاده کنید.
نکته بعدی که باید انجام دهیم پیکربندی مواردی است که هنگام کلیک بر روی دکمه اتفاق می افتد. در یک برنامه ایده آل ، شما می خواهید داده ها را به یک API راه دور یا برخی از پایگاه های داده ارسال کنید اما به خاطر اهداف نمایشی ، ما داده های فرم را در کنسول مرورگر وارد خواهیم کرد. برای انجام این کار ، باید داده های فرم را از مشخصه ها بگیریم و آنها را در جایی ذخیره کنیم.
در داخل مولفه SignInForm ، خط کد زیر را درست بالای عبارت return  اضافه کنید.
src/index.js
const { handleSubmit } = props;
return <form **onSubmit={handleSubmit}** className=”form”>

props  موجود در فرم SignInForm به دسته handleSubmit تجزیه می شوند. در هنگام کلیک بر روی دکمه ارسال ، از تابع handSubmit در فرم به عنوان کنترل کننده رویداد onSubmit استفاده می شود.

سرانجام ، در داخل مولفه app در فایل src / App.js ، تابعی را ایجاد می کنیم که داده های فرم را به کنسول مرورگر وارد می کند. درست قبل از تابع render() ، بلوک کد زیر را به فایل اضافه کنید.
src/App.js
handleSignIn = values => {
console.log(values);
};
سپس تابع handSignIn را به عنوان کنترل کننده رویداد برای مؤلفه SignInForm اضافه کنید. redux-form به طور خودکار مشخص می کند که داده های بدست آمده از فرم ، که اساساً مؤلفه SignInForm است باید به لطف توابع handleSubmit فوق در کنسول وارد شوند.
src/App.js
<SignInForm onSubmit={this.handleSignIn} />

اکنون می توانید برنامه را با اجرای دستور پایانه npm start شروع کنید. فرم را پر کنید ، روی ارسال کلیک کنید و مقادیر وارد شده به کنسول را مشاهده خواهید کرد.

مرحله 5 – افزودن اعتبارات
وقتی صحبت از فرم های ساخت و ارسال redux-form با برخی از ویژگی های اعتبار سنجی به میان می آید، افزودن اعتبارات مهم است و اکنون قصد داریم آن را اجرا کنیم. در فایل src / App.js ، بلوک کد زیر را تایپ کنید.
src/App.js
const validate = val => {
const errors = {};
if (!val.firstName) {
console.log(‘First Name is required’);
errors.firstName = ‘Required’;
}
if (!val.lastName) {
console.log(‘Last Name is required’);
errors.lastName = ‘Required’;
}
if (!val.email) {
console.log(’email is required’);
errors.email = ‘Required’;
} else if (!/^.+@.+$/i.test(val.email)) {
console.log(’email is invalid’);
errors.email = ‘Invalid email address’;
}
if (!val.age) {
errors.age = ‘Required’
} else if (isNaN(Number(val.age))) {
errors.age = ‘Must be a number’
} else if (Number(val.age) < 18) {
errors.age = ‘Sorry, you must be at least 18 years old’
}
return errors;
};
تابع validate  برای بررسی خطاهای اعتبار سنجی در فرم استفاده می شود. از پارامتر Val برای بررسی اعتبار سنجی فیلدهای مختلف استفاده می شود. ابتدا بررسی می کنیم که آیا آبجکت errors  خالی است ، بدیهی است که آبجکت خالی به این معنی است که خطایی وجود ندارد. سپس از منطق شرطی استفاده می کنیم تا بررسی کنیم که آیا یک فیلد خالی است یا خیر ، اگر هست شما خطای مربوطه را وارد می کنید. در بلوک کد بالا ، ما فقط اعتبار سنجی برای نام ، نام خانوادگی ، ایمیل و سن را انجام می دهیم.
در شرط اعتبار سنجی ایمیل ، بررسی می کنیم که آیا خالی است یا خیر و همچنین اینکه آیا یک ایمیل معتبر با استفاده از regex استفاده کرده است و در اعتبارسنجی مشروط سن ، بررسی می کنیم که خالی است ، یا یک عدد است و آیا کاربر کمتر از 18 سال است.
در مرحله بعدی ، عملکرد اعتبارسنجی خود را به صورت redux ثبت خواهیم کرد تا بتواند از آن استفاده کند و آزمایش های اعتبار سنجی را انجام دهد. تابع validate  را به مؤلفه مرتبه بالاتر redux-form اضافه کنید:
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
validate,
})(SignInForm);

اکنون که عملکرد اعتبارسنجی خود را آماده کرده ایم و در فرم Hux-redux ثبت شده است ، یک مؤلفه قابل استفاده مجدد ایجاد کنید که خطاها را در هر زمان وقوع، نشان دهد و از آن مؤلفه جدید ایجاد شده در فرم های ما استفاده کند.
src/index.js
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<div className=”control”>
<label className=”field”>{label}</label>
<input className=”input” {…input} placeholder={label} type={type}/>
{touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
)

مؤلفه renderField آبجکت input  ، یک label ، نوع ورودی و meta را که خاصیت redux-form است در اختیار شما قرار می دهد. خط {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
به این معنی است که اگر هنگام کلیک/ تمرکز روی فیلد فرم ، خطایی وجود داشته باشد ، باید پیام خطایی نشان داده شود. همچنین در صورت بروز هرگونه خطا ، فرم ارسال نمی شود.
حال اگر فرم را بررسی کردید و سعی در وارد کردن ورودی های نامعتبر دارید یا از فیلدهایی که دارای تست های اعتبار سنجی هستند ، عبور میکنید ، باید پیام های خطا را دریافت کنید.

نتیجه
در این آموزش شما یک فرم با redux-form ساخته اید و آن را به فروشگاه Redux وصل کردید. بدون نیاز به اعتبار سنجی شماتیک خارجی، اعتبارات همزمان را در فرم اضافه کردید.
می توانید اطلاعات بیشتر در مورد redux-form را در سایت رسمی مطالعه کنید و برای آگاهی بیشتر می توانید از مثال های آنها استفاده کنید.
می توانید کد کامل این آموزش را در GitHub پیدا کنید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:HOC, re-redux, Redux, redux-form

ارتقاء از AngularJS به Angular با ngUpgrade

Angular (2+) در دسترس است ، و همه ما از این موضوع بسیار هیجان زده هستیم. با این حال ، برای برخی از ما ، هنوز پایگاههای بزرگ کد AngularJS (1.x) در محل کار وجود دارد. چگونه می توانیم برنامه خود را به نسخه جدید Angular منتقل کنیم – به ویژه اگر نتوانیم برای بازنویسی کامل شش ماه از توسعه مشخصه فاصله بگیریم؟
این جاست که کتابخانه ngUpgrade وارد عمل می شود. ngUpgrade ابزار رسمی است که به شما امکان می دهد برنامه خود را اندک اندک منتقل کنید. در واقع بهAngular اجازه میدهد تا زمانی که نیاز به ارتقاء آهسته دارید ، به صورت پهلو به پهلو و به همراه کد AngularJS شما اجرا شود.
در این راهنما ngUpgrade و Angular را نصب و راه اندازی می کنید. سپس اصول اولیه نوشتن مولفه ها را یاد خواهید گرفت.
(اگر طولانی بودن این راهنما شما را خسته میکند ، نگران نباشید. من یک ویدیوی کاملاً مفصل به نام Upgrading AngularJS تهیه کرده ام که همه این موارد را با جزئیات پوشش می دهد).
<a href=“https://www.upgradingangularjs.com?ref=scotch.io”\>

</a\>
نقطه شروع ما
برای شروع کار با ngUpgrade ، برنامه شما باید چند پیش شرط را برآورده کند:
1- کد سازماندهی شده توسط مشخصه (نه براساس نوع) و هر فایل فقط شامل یک آیتم (مانند یک بخشنامه یا سرویس)
2- تنظیم TypeScript
3- استفاده از بسته نرم افزاری ماژول (بیشتر افراد از Webpack استفاده می کنند)
4- استفاده از AngularJS 1.5+ با کنترلرهای جایگزین شده توسط مولفه ها
(اگر در هر یک از این موارد گمراه شدید ، ما همه آن ها را در قسمت های 1 و 2 این لینک پوشش می دهیم)
در حال حاضر ، یک دقیقه وقت بگذارید تا پروژه نمونه دوره را در GitHub کلون یا فورک کنید (فراموش نکنید که npm install را نصب کنید). این تعهد را بررسی کنید تا نقطه شروع ما را ببینید:
git checkout fdfcf0bc3b812fa01063fbe98e18f3c2f4bcc5b4
ما یک پروژه سفارش سیستم داریم که می توانیم از طریق ngUpgrade برای کار استفاده کنیم. با شروع این تعهد ، برنامه ما تمامی معیارهای فوق را رعایت می کند. ما از معماری مؤلفه ها ، TypeScript و Webpack استفاده می کنیم (حتی در زمینه توسعه و تولید نیز ساختارهایی داریم).
توجه: در بسیاری از برنامه های بزرگ AngularJS ، شما نمی توانید همه چیز را به یک منبع کاملاً جدید Git منتقل کنید و سالها سابقه را از بین ببرید. همچنین ممکن است از ساختار برنامه ای متفاوت از CLI استفاده کنید. اگر می توانید از CLI برای ارتقاء خود استفاده کنید ، پس این کار را انجام دهید. با این حال ، این راهنما ، تنظیم دستی را در اینجا به شما آموزش می دهد تا بتوانید کنترل کاملی بر روی به روزرسانی خود داشته باشید.

نصب Angular & ngUpgrade
ما آماده نصب Angular ، ngUpgrade و همه متعلقات هستیم. در پروژه نمونه ، پیش بروید و آرایه متعلقات pack.json خود را به روز کنید تا این گونه به نظر برسد:
“dependencies”: {
“@angular/common”: “^5.2.5”,
“@angular/compiler”: “^5.2.5”,
“@angular/core”: “^5.2.5”,
“@angular/forms”: “^5.2.5”,
“@angular/platform-browser”: “^5.2.5”,
“@angular/platform-browser-dynamic”: “^5.2.5”,
“@angular/router”: “^5.2.5”,
“@angular/upgrade”: “^5.2.5”,
“angular”: “1.6.6”,
“angular-route”: “1.6.6”,
“bootstrap”: “3.3.7”,
“core-js”: “^2.5.3”,
“jquery”: “^2.2.4”,
“lodash”: “4.17.4”,
“moment”: “~2.17.1”,
“reflect-metadata”: “^0.1.12”,
“rxjs”: “^5.5.6”,
“zone.js”: “^0.8.20″
}

(ما می خواهیم از این Angular 5 در این سری استفاده کنیم ، حتی اگر پروژه نمونه از نسخه 4 استفاده کند. نگران نباشید. مراحل یکسان هستند.)
ما می توانیم همه این بسته ها را با یک پرچم ذخیره در یک دستور طولانی در پایانه قرار دهیم ، اما از زمان استفاده میکنیم تا توضیح دهیم که هرکدام از این بسته ها چیست.
ابتدا کتابخانه های ما تحت فضای نام @angular :
⦁ @angular/common: اینها خدمات ، اتصالات و دستورالعمل های مورد نیاز Angular هستند. این بسته همچنین حاوی HttpClient جدید مشابه نسخه 4.3 است ، بنابراین ما دیگر نیازی به @ angular / http نداریم.
⦁ @angular/compiler : کامپایلر الگوی Angular است. قالب ها را می گیرد و آنها را به کدی تبدیل می کند که باعث می شود برنامه شما اجرا و ارائه شود. تقریباً هرگز نیازی به تعامل با آن ندارید.
⦁ @angular/core: بخشهای مهم زمان اجرای Angular هستند که توسط هر برنامه مورد نیاز است. این موارد مانند دکوراتورهای ابرداده (به عنوان مثال ، Component ، Injectable) ، تمام متعلقات ورودی و چرخه زندگی مولفه مانند OnInit متصل میشوند.
⦁ @angular/forms : همه چیزهایی است که برای فرم ها نیاز داریم ، خواه قالب یا واکنش پذیر.
⦁ @angular/platform-browser: همه چیزی که به قلمرو و مرورگر مربوط است ، به خصوص بخش هایی که در ارائه قلمرو کمک می کند. بسته ای است که شامل bootstrapStatic میباشد ، روشی که ما برای راه اندازی برنامه های کاربردی خود برای تولید استفاده می کنیم.
⦁ @angular/platform-browser-dynamic: این بسته شامل ارائه دهندگان و یک روش بوت استرپ دیگر برای برنامه هایی است که الگوهای مربوط به مشتری را کامپایل می کنند. بسته ای است که ما در هنگام توسعه از bootstrapping استفاده می کنیم و در ویدیوی دیگری تعویض بین این دو را پوشش خواهیم داد.
⦁ @angular/router: همانطور که ممکن است حدس بزنید ، فقط روتر Angular است.
⦁ @angular/upgrade: کتابخانه ngUpgrade است که به ما امکان می دهد برنامه AngularJS ما را به Angular منتقل کنیم.
بعد از همه بسته های Angular ، بسته های چندکاره ما که وابسته به Angular هستند ، آمده اند:
⦁ core-js متن جهانی یا پنجره ای را با ویژگی های خاصی از ES6 یا ES2015 متصل می کند.
⦁ reflect-metadata یک کتابخانه چند منظوره برای حاشیه نویسی است که از Angular در کلاس های خود استفاده می کند.
⦁ Rxjs: کتابخانه ای است که شامل همه مشاهداتی است که برای دستیابی به داده های خود از آنها استفاده خواهیم کرد.
⦁ zone.js یک قطعه چندگانه برای مشخصات Zone است ، که بخشی از نحوه مدیریت Angular در تشخیص تغییر میباشد.
بعضی اوقات ، اختلافاتی در رابطه با نسخه TypeScript که استفاده می کنید وجود دارد. این می تواند به دلیل RxJS ، کامپایلر Angular یا Webpack باشد. اگر با خطاهای تلفیقی عجیب و غریب مواجه شدید ، تحقیقاتی انجام دهید تا متوجه شوید که کدام یک از آنها به یک دامنه نسخه خاص از TypeScript برای نسخه ای که استفاده می کنید نیاز دارند.
ترمینال خود را باز کنید، در پوشه public  پروژه وارد شوید و npm install را اجرا کنید (اگر ترجیح می دهید، میتوانید Yarn را نصب و از آن استفاده کنید). خواهید دید که تمام بسته های شما نصب شده است.
اکنون آماده هستیم تا با استفاده از بوت دوگانه AngularJS و Angular ، برنامه خود را به برنامه هیبریدی تبدیل کنیم.
تنظیم ngUpgrade
برای راه اندازی ngUpgrade ، باید یک سری مراحل انجام دهیم تا AngularJS و Angular بتوانند در کنار یکدیگر اجرا شوند.
مرحله 1: حذف Bootstrap از index.html
اولین کاری که باید انجام دهیم حذف دستورالعمل bootstrap از index.html است. اینگونه AngularJS به طور معمول با بارگذاری صفحه شروع می شود ، اما ما قصد داریم آن را از طریق Angular با استفاده از ngUpgrade بوت کنیم. بنابراین ، فقط index.html را باز کنید و آن برچسب data-ng-app را حذف کنید. (اگر در برنامه خود از DI جدی استفاده می کنید ، این برنامه را نیز در این مرحله حذف کنید.) فایل index.html شما اینگونه خواهد شد:
<html>
<head>
<title>Amazing, Inc. Order System</title>
</head>
<body>
<navigation></navigation>
<div class=”container” ng-view></div>
</body>
</html>

مرحله 2: تغییر ماژول AngularJS
حال باید تغییراتی در ماژول AngularJS ایجاد کنیم. app.ts را باز کنید. اولین کاری که باید انجام دهیم تغییر نام برنامه های app.ts به app.module.ajs.ts است تا نشان دهد که این ماژول برای AngularJS میباشد. این یک نام طولانی است ، اما در Angular می خواهیم نوع را در نام فایل خود داشته باشیم. در اینجا از app.module استفاده می کنیم و سپس ajs  را اضافه می کنیم تا مشخص کنند که به جای app.module اصلی برای Angular (که در یک ثانیه انجام خواهیم داد) برای AngularJS است.
با توجه به برنامه فعلی ، ما فقط از AngularJS استفاده می کنیم ، بنابراین همه عبارات ورودی خود را در اینجا داریم و همه چیز را در ماژول Angular خود ثبت می کنیم. با این حال ، آنچه اکنون قصد داریم انجام دهیم انتققال این ماژول و وارد کردن آن به ماژول Angular جدید برای آماده سازی و راه اندازی آن است. بنابراین ، در خط 28 اجازه دهید یک ثابت رشته ای از نام برنامه خود ایجاد کنیم:
const MODULE_NAME = ‘app’;
سپس رشته برنامه خود را با نام ماژول در اعلان Angular.module جایگزین خواهیم کرد:
angular.module(MODULE_NAME, [‘ngRoute’])
// component and service registrations continue here

و در آخر ، باید ثابت خود را منتشر کنیم:
export default MODULE_NAME;
می توانید ماژول AngularJS تمام شده را در این مرحله ببینید.
مرحله 3: ایجاد ماژول برنامه Angular
ماژول AngularJS ما آماده است ، بنابراین ما اکنون آماده ساختن ماژول Angular هستیم. سپس ماژول AngularJS را وارد خواهیم کرد تا بتوانیم به صورت دستی آن را در اینجا بوت کنیم. این همان چیزی است که اجازه می دهد این دو چارچوب با هم اجرا شوند ، و ngUpgrade را قادر می سازد تا شکاف بین آنها را پر کند.
اولین کاری که باید انجام دهیم ایجاد یک فایل جدید در همان سطح ماژول AngularJS به نام app.module.ts است. اکنون برای اولین بار ، الگویی را می بینید که در طی ارتقاء برای شما آشنا می شود: ساخت و ارائه کلاس ، تزئین آن با حاشیه نویسی و وارد کردن همه متعلقات.
در ماژول برنامه جدید خود ، بیایید یک کلاس بنام AppModule ایجاد کنیم:
export class AppModule {
}

اکنون بیایید اولین یادداشت خود را (که به آن دکوراتور نیز می گویند) اضافه کنیم. حاشیه نویسی فقط بخشی از ابرداده است که Angular هنگام ساختن برنامه ما استفاده می کند. فراتر از کلاس جدید ، از حاشیه نویسی NgModule استفاده خواهیم کرد و در یک آبجکت گزینه ها وارد میکنیم:

@NgModule({})
export class AppModule {
}

اگر دنبال ویرایشگری مانند Visual Studio Code هستید ، می بینید که TypeScript گیج شده است زیرا نمی داند NgModule چیست. دلیل این امر آن است که ما باید آن را از کتابخانه هسته Angular وارد کنیم. بعد از دکوراتور، می توانیم این کار را با:
import { NgModule } from ‘@angular/core’;
انجام دهیم.
حال ، در ابجکت گزینه های ما برای ngModule ، باید یک سری ورودی را وارد کنیم. آرایه ورودی ها سایر NgModules را که این NgModule به آن بستگی دارد ، مشخص می کند. (این ورودی ها متفاوت از ورودی TypeScript در بالای فایل ما است.) در حال حاضر ، ما به BrowserModule و UpgradeModule احتیاج داریم:
import { NgModule } from ‘@angular/core’;

@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule { }

البته ، ما آنهایی که در بالای فایل ما وارد نشده اند را نداریم ، بنابراین باید این کار را نیز انجام دهیم. بعد از اولین ورودی ، می توانیم اضافه کنیم:
import { BrowserModule } from ‘@angular/platform-browser’;
import { UpgradeModule } from ‘@angular/upgrade/static’;
یک UpgradeModule هم در upgrade  و هم upgrade/static وجود دارد. ما می خواهیم از استاتیک استفاده کنیم زیرا گزارش خطای بهتری را ارائه می دهد و با کامپایل AOT کار می کند.
داربست اصلی ماژول ریشه را برای راه اندازی Angular دریافت کرده ایم و آماده هستیم تا بوت کردن را انجام دهیم.
مرحله 4: Bootstrapping در ماژول Angular
برای راه اندازی برنامه خود ، اولین کاری که باید انجام دهیم تزریق UpgradeModule با استفاده از یک تابع constructor است:
constructor(private upgrade: UpgradeModule){
}

در تابع constructor خود لازم نیست کاری انجام دهیم. نکته بعدی که انجام خواهیم داد ، رونویسی تابع doBootstrap است. بعد از constructor ، تایپ کنید:
ngDoBootstrap(){
}

در مرحله بعد ، از تابع bootstrap UpgradeModule استفاده خواهیم کرد. همان انضای بوت استرپ Angular را دارد ، اما برای ما چند کار اضافی انجام می دهد. ابتدا مطمئن شوید که Angular و AngularJS در نواحی صحیح اجرا می شوند ، و سپس یک ماژول اضافی را تنظیم می کند که اجازه می دهد AngularJS در Angular و Angular در AngularJS قابل مشاهده باشد. و در آخر اینکه ، API های قابلیت تست را سازگار می کند ، به طوری که Protrotor با برنامه های ترکیبی کار می کند ، که بسیار حائز هاهمیت است.
بیایید آن را اضافه کنیم:
ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}

ما در ابتدا عنصر document  و سپس ماژول AngularJS درون یک آرایه را وارد میکنیم. در آخر، می توانید نمونه ای از این مورد را ببینید ، ما یک آبجکت پیکربندی اضافه می کنیم تا بتوانیم تزریق متعلقات را انجام دهیم.
ممکن است بپرسید که نام ماژول از کجا آمده است. ما باید آن را با سایر عبارات خود وارد کنیم:
import moduleName from ‘./app.module.ajs’;
فایل app.module.ts ما تکمیل شده و اینگونه خواهد بود:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { UpgradeModule } from ‘@angular/upgrade/static’;
import moduleName from ‘./app.module.ajs’;

@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }

ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}
}

این الگویی خواهد بود که به مرور زمان برای شما آشنا می شود.
مرحله 5: ایجاد main.ts
اکنون که ماژول AngularJS و ماژول Angular خود را تنظیم کرده ایم ، به یک نقطه ورودی نیاز داریم که می خواهد این دو را جمع کرده و برنامه ما را اجرا کند. بیایید یک فایل جدید را تحت پوشه src با نام main.ts ایجاد کنیم.
در main.ts ، باید مواردی را وارد کنیم ، به Angular بگوییم که کدام نسخه از AngularJS را لود کند ، و سپس به آن بگوییم که ماژول Angular ما را راه اندازی کند. ابتدا باید دو کتابخانه چند نسخه ای و تابع platformBrowserDynamic را وارد کنیم:
import ‘zone.js’;
import ‘reflect-metadata’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

چرا platformBrowserDynamic به جای platformBrowser؟ Angular دو روش برای کامپایل دارد: یک گزینه دینامیکی و یک گزینه استاتیک. در گزینه دینامیکی (معروف به just-in-time یا JIT) ، کامپایلر Angular برنامه را در مرورگر کامپایل می کند و سپس برنامه را راه اندازی می کند. گزینه استاتیک (معروف به ahead-of-time یا AOT) یک برنامه بسیار کوچکتر تولید می کند که سریعتر راه اندازی می شود. این امر به این دلیل است که کامپایلر Angular بعنوان بخشی از فرآیند ساخت ، زودتر از زمان اجرا می شود. ما فقط می خواهیم از روش JIT در اینجا با سرور مجازی Webpack dev استفاده کنیم.
(در این دوره ما یک ماژول کامل را صرف راه اندازی AOT برای تولید می کنیم).
حال ما باید هر دو ماژول Angular و AngularJS را وارد کنیم و همچنین روشی را ارائه دهیم که به Angular بگویید از کدام نسخه AngularJS استفاده کند:
import { setAngularLib } from ‘@angular/upgrade/static’;
import * as angular from ‘angular’;

import { AppModule } from ‘./app.module’;

حال برای پایان این کار ، فقط باید setAngularLib را فراخوانی کنیم و در نسخه AngularJS خود وارد کنیم و باید platformBrowserDynamic را فراخوانی کنیم و به آن بگوییم که ماژول برنامه ما را راه اندازی کند. فایل نهایی به این صورت است:
import ‘zone.js’;
import ‘reflect-metadata’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { setAngularLib } from ‘@angular/upgrade/static’;
import * as angular from ‘angular’;
import { AppModule } from ‘./app.module’;

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);

اکنون که این ستاپ را انجام دادیم ، فقط باید نقطه ورود Webpack را در پیکربندی خود تغییر دهیم.
مرحله ششم: بروزرسانی Webpack
خوشبختانه این روند بوت استرپ کردن یک برنامه ترکیبی برای شما منطقی شده است. ما یک فایل main.ts داریم که نقطه ورود ماست ، که کتابخانه AngularJS ما را تنظیم کرده و ماژول Angular ما را بوت می کند. سپس ، ماژول Angular ماژول AngularJS را بوت می کند. این همان چیزی است که اجازه می دهد هر دو چارچوب در کنار یکدیگر اجرا شوند.
اکنون آماده هستیم پیکربندی Webpack خود را تغییر دهیم تا با فایل main.ts ما و نه یکی از فایل های ماژول برنامه شروع شود. webpack.common.js را باز کنید (در زیر پوشه webpack-configs قرار دارد). در زیر module.exports ، برای entry ریشه برنامه خود را به main.ts تغییر خواهیم داد:
entry: {
app: ‘./src/main.ts’,
}

تست برنامه
اکنون ، آماده هستیم تا برنامه ترکیبی خود را در عمل مشاهده کنیم. با باز کردن یک ترمینال و اجرای این دستورات می توانید سرور مجازی dev را اجرا کنید:
cd server
npm start
cd ../public
npm run dev

خواهید دید که Webpack در حال لود شدن است و TypeScript ما با موفقیت کامپایل شده است.
بیایید مرورگر را در localhost:9000 بررسی کنیم: می بینید که برنامه ما هنوز روی سرور مجازی dev اجرا می شود.

بسته به نسخه مورد استفاده، ممکن است در کنسول هشدارهایی در مورد core-js مشاهده کنید ، اما نگران آنها نباشید ، روی کار ما تأثیری ندارند. همچنین می توانید سربرگ شبکه را باز کرده و vendor bundle و app bundle را ببینید:

بسته vendor کاملاً بزرگ است و به این دلیل است که 1) ما سرور مجازی Webpack dev را اجرا می کنیم ، بدان معنی که هیچ چیزی را حداقل نمی کند ، 2) ما در حال اجرای Angular در کامپایل پویا هستیم ، بنابراین کد کامپایلر را به مرورگر ارسال میکند. وقتی در مورد کامپایل AOT صحبت می کنیم این جریان رو به پایین را درست خواهیم کرد ، اما می توانیم همینجا بمانیم و ببینیم که همه داده های مان هنوز در حال لود شدن هستند.
اکنون Angular و AngularJS در کنار یکدیگر در حال اجرا هستند ، به این معنی که برنامه ترکیبی خود را با موفقیت تنظیم کرده ایم. این بدان معنی است که ما آماده هستیم تا نسخه برنامه خود را به صورت جز به جز ارتقا دهیم.
بازنویسی و تنزل رتبه اولین مؤلفه شما
مرحله 1: بازنویسی مؤلفه
ما برنامه خود را بوت کرده و در حالت ترکیبی اجرا نمودیم ، بنابراین آماده هستیم تا با انتقال هر بخش از برنامه خود ، کار را شروع کنیم. یکی از رویکردهای متداول انتخاب مسیر و سپس شروع به بازنویسی هر قطعه از پایین به بالا است ، که از چیزی شروع میشود که کمترین متعلقات را داشته باشد. این به ما امکان می دهد تا به طور تکراری برنامه خود را ارتقاء دهیم تا در هر نقطه ، چیزی داشته باشیم که قابل استفاده در تولید باشد.
بیایید از مسیر هوم شروع کنیم زیرا با تنها یک مولفه هوم کار آسانی خواهد بود. ابتدا مؤلفه هوم خود را به home.component.ts تغییر خواهیم داد.
حال باید مولفه هوم خود را به عنوان کلاس Angular بازنویسی کنیم. اولین کاری که باید انجام دهیم وارد کردن مؤلفه از کتابخانه هسته Angular در بالای فایل است:
import { Component } from ‘@angular/core’
نکته بعدی که انجام خواهیم داد این است که تابع homeComponentController را به یک کلاس تبدیل کنیم. همچنین می توانیم آن را با حروف بزرگ بنویسیم و controller  را در انتهای نام حذف کنیم ، به طوری که فقط HomeComponent نامیده شود. دست آخر ، بگذارید از پرانتز خلاص شویم. و در انتها اینچونه خواهد بود:
class HomeComponent {
var vm = this;
vm.title = ‘Awesome, Inc. Internal Ordering System’;
}

اکنون بیایید آنچه را که درون کلاس است پاک کنیم. ما دیگر نیازی به اعلام vm نداریم زیرا از کلاس استفاده می کنیم. همچنین می توانیم یک ویژگی از title  را به عنوان یک رشته اضافه کنیم و عنوان را روی یک تابع constructor تنظیم کنیم. کلاس ما اینگونه خواهد شد:
class HomeComponent {
title: string;
constructor(){
title = ‘Awesome, Inc. Internal Ordering System’;
}
}

همچنین نیاز به ارائه این کلاس و سپس حذف خط export default داریم.
حال باید از دکوراتور metadata کامپوننت که وارد کردیم استفاده کنیم تا به Angular بگوییم یک مولفه است. می توانیم آبجکت کامپوننت هوم را با دکوراتور کامپوننت و یک آبجکت options جایگزین کنیم:
@Component({
}

اولین گزینه دکوراتور مولفه ما selector است. که فقط برچسب HTML است که ما برای اشاره به این مؤلفه ، که فقط ” home ” خواهد بود ، استفاده خواهیم کرد. توجه داشته باشید که در Angular ، selector یک مورد رشته ای است. و متفاوت از AngularJS است ، که مولفه آن را در camel case نامگذاری می کنیم ، و سپس به یک برچسب HTML با خط فاصله ترجمه می کنیم. در اینجا ، ما می خواهیم دقیقاً برچسب مورد نظر خود را استفاده کنیم. در این حالت ، فقط آن را در ” home ” نگاه می داریم ، بنابراین چندان مهم نیست. پس از آن ، ما الگوی خود را مشخص خواهیم کرد ، دقیقاً مانند AngularJS ، بنابراین فقط می گویم: template: template. و کامپوننت تمام شده ما به شرح زیر است:
import { Component } from ‘@angular/core’;

const template = require(‘./home.html’);

@Component({
selector: ‘home’,
template: template
})
export class HomeComponent {
title: string;
constructor(){
this.title = ‘Awesome, Inc. Internal Ordering System’;
}
}

توجه: اگر در حال کار بر روی برنامه ای هستید که از کامپایلر AOT استفاده می کند ، بهتر است به جای کارهایی که در اینجا انجام می دهیم از patternUrl استفاده کنید و در Webpack تغییراتی ایجاد کنید. البته برای JIT و سرور مجازی توسعه کاملاً مناسب است.

مرحله 2: تنزل رتبه کامپوننت برای AngularJS
اکنون برای ” downgrade ” این مؤلفه باید از کتابخانه ngUpgrade استفاده کنیم. Downgrading به معنای ایجاد یک مولفه یا سرویس AngularJS در دسترس است. از طرف دیگر ” Upgrading ” به معنای تهیه یک مولفه یا سرویس AngularJS در دسترس برای Angular است. آن را در مقاله دیگری پوشش خواهیم داد. خوشبختانه ، تنزل رتبه بسیار آسان است.
ابتدا باید در بالای فایل به همراه ورودی های خود ، دو کار را انجام دهیم. نیاز به وارد کردن تابع downgradeComponent از کتابخانه ارتقاء Angular داریم. متغیری به نام Angular را اعلام کنیم تا بتوانیم این مؤلفه را در ماژول AngularJS خود ثبت کنیم. اینگونه به نظر می رسد:
import { downgradeComponent } from ‘@angular/upgrade/static’;
declare var angular: angular.IAngularStatic;
downgrade کردن مؤلفه کاملاً ساده است. در پایین مؤلفه ما ، این مؤلفه را به عنوان دستورالعمل ثبت خواهیم کرد. دستورالعمل خود ، که فقط home است ، وارد میکنیم ، همان selector در این مورد. پس از آن ، تابع downgradeComponent را از ngUpgrade عبور خواهیم کرد. این تابع مؤلفه Angular ما را به یک دستورالعمل AngularJS تبدیل می کند. سرانجام ، ما این آبجکت را به صورت angular.IDirectiveFactory به کار میگیریم. ثبت نام پایانی به شرح زیر است:
app.module(‘app’)
.directive(‘home’, downgradeComponent({component: HomeComponent} as angular.IDirectiveFactory);

اکنون یک مولفه Angular تنزل یافته داریم که برای برنامه AngularJS ما در دسترس است. شاید تعجب کنید که چرا به جای وارد کردن و ثبت آن در ماژول AngularJS ما ، آن دستورالعمل را در پایین این فایل ثبت کردیم. هدف نهایی این است که به محض اینکه همه برنامه ما تبدیل شد از شر آن فایل خلاص شویم ، بنابراین می خواهیم به تدریج همه چیز را از آن فایل حذف کنیم و سپس با لغو نصب AngularJS ، نهایتا آن را حذف کنیم. این کار برای برنامه های نمونه یا جابه جایی سریع بسیار مفید است (در یک ثانیه).
پیش بروید و app.module.ajs.ts را باز کنید و ورودی homeComponent را در خط 12 و ثبت مؤلفه در خط 37 را حذف کنید.
مطلب سریع در مورد کامپایل AOT
این روش تنزل رتبه – ثبت مؤلفه downgrade شده در فایل کامپوننت و حذف آن از فایل ماژول AngularJS برای توسعه کاملاً مناسب عمل می کند یا اگر به دنبال بازنویسی سریع برنامه قبل از استقرار برنامه خود هستید. با این حال ، کامپایلر Angular AOT برای تولید با این روش کار نخواهد کرد. بلکه همه ثبت نامهای تنزل رتبه ما در ماژول AngularJS را میخواهد.
تنزل رتبه یکسان است ، اما در عوض کارهای زیر را انجام میدهید:
1- downgradeComponent را در app.module.ajs.ts وارد کنید (قبلاً در آنجا angular  را دریافت کردید ، بنابراین نیازی به اعلام آن نیستید).
2- ورودی HomeComponent را به import { HomeComponent } from ‘./home/home.component’; وارد کنید چرا که به یک ارائه نام دار سوییچ کرده ایم.
3- ثبت نام مؤلفه ها را به همان رجیستری که دقیقاً در بالا نشان داده شده تغییر دهید.
در این لینک و همچنین در دوره 3 ارتقاء AngularJS می توانید اطلاعات بیشتری در مورد تنظیم ngUpgrade برای AOT مطالعه کنید (یک ماژول کامل وجود دارد که مرحله به مرحله آن را بیان می کند).
مرحله 3: به روزرسانی الگو
پس از به روزرسانی یک مولفه ، باید حتماً الگوی آن را به روز کنیم تا با دستور جدید Angular مطابقت داشته باشد. در این حالت ، حداقل تغییراتی وجود دارد که باید در homeComponent انجام دهید. فقط باید ctrl $ را در خط دو حذف کنیم. اکنون الگو اینگونه به نظر می رسد:
<div class=”row”>
<h1>{{title}}</h1>
</div>

اکنون ما در برنامه ترکیبی خود یک مولفه هوم کاملاً کاربردی تقلیل یافته داریم.
مرحله 4: افزودن به ماژول برنامه Angular
بیایید مؤلفه Angular جدید خود را به ماژول Angular اضافه کنیم. app.module.ts را باز کنید. ابتدا باید مولفه هوم خود را فقط بعد از ورودی های دیگر ، وارد کنیم:
import { HomeComponent } from ‘./home/home.component’;
حال ، باید HomeComponent را به برنامه Angular خود اضافه کنیم. کلیه مؤلفه های Angular باید به آرایه declarations  درNgModule ما اضافه شوند. بنابراین ، پس از خط 12 در آبجت گزینه ها ، آرایه جدیدی به نام declarations  اضافه می کنیم و مؤلفه خود را اضافه می کنیم:
declarations: [
HomeComponent
]

همچنین باید یک آرایه enterComponent ایجاد کنیم و HomeComponent خود را به آن اضافه کنیم. کلیه مؤلفه های کاهش یافته باید به این آرایه entryComponents اضافه شوند. آن را بعد از declarations اضافه خواهیم کرد
entryComponents: [
HomeComponent
]

با این کار ، عملیات ما تمام شد.
بررسی اینکه آیا کار کند
بیایید همان دستورات قبلی را اجرا کنیم و مطمئن شویم که برنامه ما هنوز کار می کند. این دستورات دوباره آمده است:
cd server
npm start
cd ../public
npm run dev

به localhost: 9000 برگردید. می بینید که مؤلفه اصلی ما در حال لود شدن در مرورگر به عنوان یک مولفه بازنویسی Angular است! حتی می توانید برای مثبت اندیشی، به سربرگ منابع Devtools کروم بروید. webpack:// را باز کنید ، به پایین بروید ./src/home/home.component.ts ، و مطمئناً ، در آنجا وجود دارد!

نتیجه
در این راهنما موارد زیر را انجام دادید:
• نصب Angular و ngUpgrade
• تنظیم یک ماژول Angular
• بوت کردن Angular و AngularJS
• به روزرسانی Webpack
• بازنویسی و کاهش رتبه اولین مؤلفه خود
در ادامه این راهنما ، ما در مورد اصول اولیه بازنویسی و سرویس های تنزل رتبه صحبت خواهیم کرد.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Angular, AngularJS, bootstrapping, ngUpgrade, TypeScript, Webpack

احراز هویت API با JSON Web Tokens و Passport

بسیاری از برنامه های وب و API ها از نوعی تأیید اعتبار برای محافظت از منابع استفاده می کنند و دسترسی خود را فقط برای کاربران تأیید شده محدود می کنند. این راهنما نحوه اجرای احراز هویت برای یک API را با استفاده از JSON Web Tokens (JWTs) و Passport ، یک میان افزار تأیید اعتبار برای Node مطرح می کند.
آشنایی با JSON Web Tokens
JSON Web Token (JWT) یک استاندارد باز است که روشی کم حجم و مختصر برای انتقال ایمن اطلاعات بین طرفین به عنوان یک شی JSON را تعریف می کند.
JWT ها به دلیل اینکه به صورت دیجیتالی امضا میشوند ، امن هستند و و اگر اطلاعات موجود در داخل به هر شکلی دستکاری شود، نشانه نامعتبر را ارائه می کند. در ادامه خواهیم دید که چگونه این کار امکان پذیر است.
JWT از سه تعریف جداگانه ساخته شده است: header (هدر)، Payload (لود) و Signature (امضا).
header: هدر نوع الگوریتم مورد استفاده برای تأیید نشانه و نوع نشانه را تعریف می کند:
{
“type” : “JWT”,
“alg” : “HS256”
}

* Payload : شامل ادعاها (Claims) میباشد. ادعاها اطلاعاتی در مورد کاربر به همراه سایر ابرداده های اضافی مانند موارد زیر است:
{
id : 1
name : ‘devgson’
iat : 1421211952
}

Signature: امضا اطلاعات را در header و Payload در فرمت base64 با یک کلید مخفی کدگذاری می کند. تمام این اطلاعات توسط الگوریتم مشخص شده در سربرگ امضا می شود. در مثال ما ، از HMACSHA256 استفاده می کنیم. امضا تأیید می کند که پیام ارسال شده در طول مسیر دستکاری نشده است.
HMACSHA256(
base64UrlEncode(header) + “.” +
base64UrlEncode(payload),
secret
)

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

تنظیم Passport
Passport یک میان افزار تأیید اعتبار است که برای تأیید اعتبار درخواست ها استفاده می شود. این امکان را به توسعه دهندگان می دهد تا برای تأیید اعتبار کاربران از استراتژی های مختلفی استفاده کنند ، از جمله استفاده از یک پایگاه داده محلی یا اتصال به شبکه های اجتماعی از طریق API . در این راهنما ، ما از استراتژی محلی (ایمیل / رمز عبور) استفاده خواهیم کرد.
بیایید یک ساختار پوشه را برای فایل هایی که از آنها استفاده خواهیم کرد ایجاد کنیم:
-model
—model.js
-routes
—routes.js
—secure-routes.js
-auth
—auth.js
-app.js
-package.json

بسته های لازم را با این دستور نصب کنید:
⦁ npm install –save bcrypt body-parser express jsonwebtoken mongoose passport passport-local passport-jwt
⦁

برای درهم سازی رمزهای عبور کاربر به bcrypt ، برای امضای نشانه ها به jsonwebtoken ، برای اجرای استراتژی محلی به passport-local و برای دریافت و تأیید JWT به passport-jwt نیاز خواهیم داشت.
در اینجا نحوه کار برنامه آمده است:
• کاربر با sign up و log in وارد سیستم شده و پس از ورود کاربر به سیستم ، یک نشانه وب JSON به کاربر داده می شود.
• از کاربر انتظار می رود این نشانه را به صورت محلی ذخیره کند.
• این نشانه هنگام تلاش برای دستیابی به برخی از مسیرهای امن توسط کاربر ارسال می شود ، پس از تأیید این نشانه ، به کاربر اجازه دسترسی به مسیر داده میشود.
تنظیم پایگاه داده
اول از همه ، ما طرح کاربر را ایجاد می کنیم. کاربر فقط باید ایمیل و رمز عبور خود را ارائه کند ، این اطلاعات کافی است.
model/model.js

const mongoose = require(‘mongoose’)
const bcrypt = require(‘bcrypt’);
const Schema = mongoose.Schema;

const UserSchema = new Schema({
email : {
type : String,
required : true,
unique : true
},
password : {
type : String,
required : true
}
});
…

اکنون ما نمی خواهیم رمزهای عبور را با متن ساده ذخیره کنیم ، زیرا اگر یک حمله کننده موفق به دسترسی به بانک اطلاعاتی شود ، می تواند رمز عبور را بخواند ، بنابراین می خواهیم از این امر جلوگیری کنیم. از بسته ای به نام “bcrypt” استفاده می کنیم تا کلمه عبور کاربر را در هم سازی (hash) کند و آنها را با خیال راحت ذخیره کند.
model/model.js
….
//This is called a pre-hook, before the user information is saved in the database
//this function will be called, we’ll get the plain text password, hash it and store it.
UserSchema.pre(‘save’, async function(next){
//’this’ refers to the current document about to be saved
const user = this;
//Hash the password with a salt round of 10, the higher the rounds the more secure, but the slower
//your application becomes.
const hash = await bcrypt.hash(this.password, 10);
//Replace the plain text password with the hash and then store it
this.password = hash;
//Indicates we’re done and moves on to the next middleware
next();
});

//We’ll use this later on to make sure that the user trying to log in has the correct credentials
UserSchema.methods.isValidPassword = async function(password){
const user = this;
//Hashes the password sent by the user for login and checks if the hashed password stored in the
//database matches the one sent. Returns true if it does else false.
const compare = await bcrypt.compare(password, user.password);
return compare;
}

const UserModel = mongoose.model(‘user’,UserSchema);

module.exports = UserModel;

تنظیم ثبت نام و ورود به میان افزار
ما از استراتژی محلی passport برای ایجاد میان افزار استفاده خواهیم کرد که ثبت نام کاربر و ورود را انجام میدهد. سپس به مسیرهای خاصی وصل شده و برای احراز هویت استفاده می شود.
auth/auth.js

const passport = require(‘passport’);
const localStrategy = require(‘passport-local’).Strategy;
const UserModel = require(‘../model/model’);

//Create a passport middleware to handle user registration
passport.use(‘signup’, new localStrategy({
usernameField : ’email’,
passwordField : ‘password’
}, async (email, password, done) => {
try {
//Save the information provided by the user to the the database
const user = await UserModel.create({ email, password });
//Send the user information to the next middleware
return done(null, user);
} catch (error) {
done(error);
}
}));

//Create a passport middleware to handle User login
passport.use(‘login’, new localStrategy({
usernameField : ’email’,
passwordField : ‘password’
}, async (email, password, done) => {
try {
//Find the user associated with the email provided by the user
const user = await UserModel.findOne({ email });
if( !user ){
//If the user isn’t found in the database, return a message
return done(null, false, { message : ‘User not found’});
}
//Validate password and make sure it matches with the corresponding hash stored in the database
//If the passwords match, it returns a value of true.
const validate = await user.isValidPassword(password);
if( !validate ){
return done(null, false, { message : ‘Wrong Password’});
}
//Send the user information to the next middleware
return done(null, user, { message : ‘Logged in Successfully’});
} catch (error) {
return done(error);
}
}));
….
ایجاد مسیرها
اکنون که میان افزاری برای مدیریت ثبت نام و ورود به سیستم داریم ، بیایید مسیری ایجاد کنیم که از این میان افزار استفاده کند.
routes/routes.js
const express = require(‘express’);
const passport = require(‘passport’);
const jwt = require(‘jsonwebtoken’);

const router = express.Router();

//When the user sends a post request to this route, passport authenticates the user based on the
//middleware created previously
router.post(‘/signup’, passport.authenticate(‘signup’, { session : false }) , async (req, res, next) => {
res.json({
message : ‘Signup successful’,
user : req.user
});
});

…

امضای JWT
هنگامی که کاربر وارد سیستم میشود ، اطلاعات کاربر به callback سفارشی ما ارسال می شود که به نوبه خود یک نشانه ایمن با اطلاعات ایجاد می کند. پس از دستیابی به مسیرهای ایمن (که بعداً ایجاد خواهیم کرد) باید این نشانه به عنوان یک پارامتر پرس و جو منتقل شود.

routes/routes.js
….
router.post(‘/login’, async (req, res, next) => {
passport.authenticate(‘login’, async (err, user, info) => { try {
if(err || !user){
const error = new Error(‘An Error occurred’)
return next(error);
}
req.login(user, { session : false }, async (error) => {
if( error ) return next(error)
//We don’t want to store the sensitive information such as the
//user password in the token so we pick only the email and id
const body = { _id : user._id, email : user.email };
//Sign the JWT token and populate the payload with the user email and id
const token = jwt.sign({ user : body },’top_secret’);
//Send back the token to the user
return res.json({ token });
}); } catch (error) {
return next(error);
}
})(req, res, next);
});

module.exports = router;

توجه: ما { session : false } را تنظیم کردیم زیرا نمی خواهیم جزئیات کاربر را در یک بخش ذخیره کنیم. انتظار داریم که کاربر در صورت درخواست هر یک از موارد را به مسیرهای امن ارسال کند. این امر به ویژه برای API مفید است ، اما به دلایل عملکردی روش پیشنهادی برای برنامه وب نیست.

تأیید نشانه کاربر
بنابراین اکنون ثبت نام و ورود کاربر به سیستم را مدیریت کرده ایم ، قدم بعدی این است که به کاربران دارای نشانه اجازه دسترسی به مسیرهای خاص ایمن را بدهیم ، اما چگونه می توانیم تأیید کنیم که توکن ارسال شده توسط کاربر معتبر است و به طریقی دستکاری نشده است. بیایید در مرحله بعد این کار را انجام دهیم.
auth/auth.js
….
const JWTstrategy = require(‘passport-jwt’).Strategy;
//We use this to extract the JWT sent by the user
const ExtractJWT = require(‘passport-jwt’).ExtractJwt;

//This verifies that the token sent by the user is valid
passport.use(new JWTstrategy({
//secret we used to sign our JWT
secretOrKey : ‘top_secret’,
//we expect the user to send the token as a query parameter with the name ‘secret_token’
jwtFromRequest : ExtractJWT.fromUrlQueryParameter(‘secret_token’)
}, async (token, done) => {
try {
//Pass the user details to the next middleware
return done(null, token.user);
} catch (error) {
done(error);
}
}));

توجه: اگر به اطلاعات اضافی یا حساسی در مورد کاربر نیاز دارید که در توکن موجود نیست ، می توانید از _id موجود در نشانه برای بازیابی آنها از پایگاه داده استفاده کنید.
ایجاد مسیرهای ایمن
اکنون اجازه می دهیم برخی از مسیرهای ایمن را ایجاد کنید که فقط کاربران دارای نشان های تأیید شده به آنها دسترسی داشته باشند.
routes/secure-routes.js
const express = require(‘express’);

const router = express.Router();

//Let’s say the route below is very sensitive and we want only authorized users to have access

//Displays information tailored according to the logged in user
router.get(‘/profile’, (req, res, next) => {
//We’ll just send back the user details and the token
res.json({
message : ‘You made it to the secure route’,
user : req.user,
token : req.query.secret_token
})
});

module.exports = router;

بنابراین اکنون با ایجاد مسیرها و میان افزار تأیید اعتبار کار ما انجام شده است ، بیایید همه چیز را کنار هم قرار دهیم و سپس آن را آزمایش کنیم.
app.js

const express = require(‘express’);
const mongoose = require(‘mongoose’);
const bodyParser = require(‘body-parser’);
const passport = require(‘passport’);
const app = express();
const UserModel = require(‘./model/model’);

mongoose.connect(‘mongodb://127.0.0.1:27017/passport-jwt’, { useMongoClient : true });
mongoose.connection.on(‘error’, error => console.log(error) );
mongoose.Promise = global.Promise;

require(‘./auth/auth’);

app.use( bodyParser.urlencoded({ extended : false }) );

const routes = require(‘./routes/routes’);
const secureRoute = require(‘./routes/secure-route’);

app.use(‘/’, routes);
//We plugin our jwt strategy as a middleware so only verified users can access this route
app.use(‘/user’, passport.authenticate(‘jwt’, { session : false }), secureRoute );

//Handle errors
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.json({ error : err });
});

app.listen(3000, () => {
console.log(‘Server started’)

تست با Postman
اکنون که همه چیز را کنار هم قرار داده ایم ، بگذارید از Postman برای آزمایش تأیید اعتبار API استفاده کنیم. اول از همه ما باید با یک ایمیل و رمز عبور وارد سیستم شوید. می توانیم این جزئیات را از طریق body درخواست خود ارسال کنیم. پس از اتمام این کار ، برای شروع درخواست POST روی دکمه ارسال کلیک کنید.

می توانیم رمز عبور رمزگذاری شده را ببینیم ، بنابراین هرکسی که به دیتابیس دسترسی دارد فقط به رمز عبور hashed دسترسی خواهد داشت ، ما امنیت را 10 دور افزایش دادیم. در این لینک میتوانید اطلاعات بیشتری در این مورد بیابید.
اکنون بیایید با اعتبارات خود وارد شویم و توکن را دریافت کنیم. مسیر /login را بازدید کنید و ایمیل و رمز عبوری که قبلا استفاده کردید را وارد نمایید و سپس درخواست را آغاز کنید.

اکنون ما نشانه خود را داریم ، هر زمان که بخواهیم به یک مسیر امن دسترسی پیدا کنیم ، این نشانه را ارسال خواهیم کرد. بیایید این کار را با دسترسی به یک مسیر امن user/profile امتحان کنیم ، نشانه خود را در یک پارامتر پرس و جو به نام secret_token ارسال خواهیم کرد ، این نشانه دریافت و بررسی می شود و در صورت صحت اعتبار دسترسی به مسیر را دریافت خواهیم کرد.

همانطور که مشاهده می کنید ، نشانه معتبر به ما امکان دسترسی به مسیر امن را می دهد. می توانید پیش بروید و دسترسی به این مسیر را امتحان کنید. اما در صورت وجود نشانه نامعتبر ، این درخواست یک خطای Unauthorized  را برمی گرداند.
نتیجه
JSON web tokens راهی مطمئن برای ایجاد تأیید اعتبار برای API ها ارائه می دهند. با رمزگذاری کلیه اطلاعات موجود در این نشانه می توان یک لایه امنیتی بیشتر اضافه کرد و از این طریق آن را ایمن تر کرد. برخی منابع برای یادگیری بیشتر در مورد JWT عبارتند از:
Getting started with JSON web tokens by Auth0
Using JSON web tokens as API keys by Auth0

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:JSON Web Tokens, Passport, Payload

ایجاد Swiper مانند Netflix را در Vue

اگر مدتی است که برای وب کار می کنید ، در ساخت swiper ها حداقل با برخی مشکلات روبرو شده اید – به دلایلی ، همیشه به نظر می رسد که راهکار خاص خود را دارند. این swiper ها به اندازه دلخواه شما پاسخگو نیستند و یا کار طراحی گسترده ای باید انجام شود تا به نیمی از آنچه انتظار داشتید برسید.
حال اگر تا کنون از Netflix استفاده کرده اید ، دیده اید که swiper های فیلم آنها چقدر ظریف و روان هستند. به لطف Vue و کتابخانه vue-awesome-swiper ، می توانید swiperهای مخصوص خود را بسازید.
در این آموزش یک swiper در Vue ایجاد خواهید کرد.
• یک محیط توسعه محلی برای Node.js. نیاز دارید. آموزش نحوه نصب Node.js و ایجاد محیط توسعه محلی را دنبال کنید.
مرحله 1 – ایجاد پروژه
Vue یک چارچوب frontend پیشرونده است که به ما کمک می کند تا رابط های تعاملی و شگفت انگیزی ایجاد کنیم. می توانید در این لینک درمورد Vue اطلاعات بیشتری کسب کنید
برای نصب Vue در دستگاه خود ، باید دستور زیر را اجرا کنید:
$ npm install -g vue-cli

این دستور Vue را به صورت جهانی روی دستگاه شما نصب می کند. برای تأیید نصب Vue ، دستور زیر را در ترمینال خود اجرا کنید:
$ vue –version

اگر به عنوان نتیجه یک عدد نسخه دریافت کردید ، یعنی Vue را روی دستگاه خود نصب کرده اید.
اکنون که Vue بر روی دستگاه های شما نصب شده است ، آماده هستیم تا ساخت خود را آغاز کنیم. برای ایجاد برنامه ، از Vue CLI برای شروع کار استفاده کنید. دستور زیر را در ترمینال خود اجرا کنید:
$ vue init webpack netflix-like-swipers

این دستور اعلانی را برای تکمیل کار به ما نشان می دهد و هنگامی که کارها را انجام دادیم ، یک پروژه نمونه Vue را با استفاده از webpack ایجاد می کنیم تا برنامه خود را تغییر داده و بسازیم.

مرحله 2 – ایجاد مؤلفه فیلم
هدف مؤلفه ها استفاده مجدد از برخی قسمت های UI ماست. در این حالت ، ما قصد داریم فیلم های زیادی داشته باشیم ، بنابراین می خواهیم یک مولفه فیلم بسازیم و سپس همانطور که می خواهیم در طول برنامه از آن استفاده کنیم.
برای ساخت مؤلفه فیلم ، یک فایل Movies.vue را در دیرکتوری src/components/ ایجاد کنید
$ nano src/components/Movie.vue

در Movie.vue ، مؤلفه خود را به شرح زیر می سازیم:
Movie.vue
<script>
export default {
name: ‘Movie’,
props : [
‘image’,
‘title’,
‘description’,
‘duration’
],
}
</script>

در اینجا ، ما کامپوننت خود را نامگذاری می کنیم و همچنین props  را برای مولفه ها مشخص میکنیم که در هر بار استفاده از مؤلفه اضافه می شود .
برای تعریف الگوی مؤلفه ، کد زیر را اضافه کنید:
Movie.vue
<template>
<div class=”movie” v-bind:style=”{ backgroundImage: ‘url(‘ + image + ‘)’ }”>
<div class=”content”>
<h1 class=”title”>{{ title }}</h1>
<p class=”description”>{{ description }}</p>
<p class=”duration”>{{ duration }}</p>
</div>
</div>
</template>

سپس برای کنترل نحوه نمایش فیلم ، یک ظاهر طراحی شده برای مؤلفه اضافه کنید:
Movie.vue
<style scoped>
h1, h2 {
font-weight: normal;
}
.movie{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: left;
padding: 10px;
width : 350px;
height : 500px;
background-color: rgba(255,255,255,0.7);
background-repeat: no-repeat;
background-blend-mode: overlay;
background-size: cover;
}
</style>

اکنون که مؤلفه فیلم خود را ایجاد کرده اید ، Swiper ها را در برنامه ادغام می کنید.
مرحله 3 – ایجاد مؤلفه HomePage با Vue-Awesome-Swiper
ماژول را با دستور زیر نصب کنید:
$ npm install vue-awesome-swiper –save

اکنون یک مولفه HomePage.vue را در دیرکتوری src/components ایجاد کنید که در آن از swiper استفاده خواهیم کرد.
$ touch src/components/HomePage.vue

در HomePage.vue ، مؤلفه را ایجاد کرده و مؤلفه های Movie، swiper، swiperSlide را وارد کنید. و اسلایدر را با استفاده از خصوصیات thedata برای مؤلفه پیکربندی کنید:
HomePage.vue
<script>
import Movie from ‘./Movie’
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

export default {
name: ‘HomePage’,
components: {
Movie,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
direction : ‘vertical’,
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’
},
}
}
}
}
</script>
در این حالت ، مشخص کردیم که می خواهیم swipers ما به صورت عمودی باشند و سبک صفحه بندی باید bullets باشد
قالب، مولفه های تکی Movie  را لود می کند و محتوا را تنظیم می کند:
https://via.placeholder.com/728×90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide
C/O https://placeholder.com/
HomePage.vue
<template>
<swiper :options=”swiperOption”>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 1″ description=”Movie 1 description” duration=”2hrs”/>
</swiper-slide>
<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 2″ description=”Movie 2 description” duration=”2hrs”/>
</swiper-slide>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 5″ description=”Movie 5 description” duration=”2hrs”/>

</swiper-slide>

<div class=”swiper-pagination” slot=”pagination”></div>
</swiper>
</template>

ما از مؤلفه <swiper /> استفاده می کنیم و مولفه های <swiper-slide /> بسیاری در داخل آن داریم. برای نگه داشتن عنصر صفحه بندی نیز یک div اضافه کردیم.
CSS زیر را به فایل اضافه کنید تا swiper را طراحی کنید:
HomePage.vue
<style scoped>
.swiper-slide{
display: flex;
justify-content: center;
flex-direction: column;
}
.swiper-container {
height : 500px;
}
</style>

فایل را ذخیره کنید. اکنون می توانید مؤلفه را ارائه دهید.
مرحله 4 – ارائه مؤلفه های ما
برای ارائه مولفه ها ، آنها را وارد کنید و در فایل src / App.vue استفاده کنید.
فایل را در ویرایشگر خود باز کنید:
$ nano src/App.vue

ابتدا کامپوننت HomePage را وارد کنید و swiper را مقدار اولیه بدهید:
App.vue
<script>
import HomePage from ‘./components/HomePage’
export default {
name: ‘App’,
components: {
HomePage
},
data() {
return {
swiperType : ‘Easy Vertical Swiper’
}
}
}
</script>

سپس الگو را اضافه کنید:
App.vue
<template>
<div id=”app”>
<h1>{{ swiperType }}</h1>
<HomePage/>
</div>
</template>

در آخر ، یک ظاهر طراحی اضافه کنید:
App.vue
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
align-items: center;
flex-direction: column;
}
</style>

اطمینان حاصل کنید که همه فایل ها ذخیره شده اند و سرور مجازی توسعه را با دستور زیر شروع می کنید:
npm run dev

با این دستور یک سرور مجازی توسعه شروع می شود. برای مشاهده برنامه خود به http: // localhost: 8080 مراجعه کنید.
مرحله 5 – جستجوی انواع دیگر Swiper ها
اکنون که مشاهده کردیم که Swiperهای ساده چطور کار می کنند ، بیایید گزینه های بیشتری را بررسی کنیم. به افکت های Swiper CoverFlow سه بعدی و Swiperهای جایگزیده نگاهی خواهیم انداخت. برای نمونه های بیشتر swiper ، می توانید مثال های آن را در صفحه پروژه vue-awesome-swiper مرور کنید.
برای ایجاد یک Swiper افکت سه بعدی CoverFlow ، گزینه های کشویی را در HomePage.vue تنظیم کنید تا به این شکل درآید: // HomePage.vue
<script>
[..]
export default {
name: ‘HomePage’,
[…]
data() {
return {
swiperOption: {
effect: ‘coverflow’,
grabCursor: true,
centeredSlides: true,
slidesPerView: ‘5’,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
},
pagination: {
el: ‘.swiper-pagination’
}
}
}
}
}
</script>

اکنون ممکن است از خودتان بپرسید ، “اگر می خواستم در swiper های خود swiper داشته باشم باید چه کار میکردم”. برای انجام این کار ، HomePage.vue خود را به شرح زیر تغییر دهید:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptionh: {
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-h’,
clickable: true
}
},
swiperOptionv: {
direction: ‘vertical’,
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-v’,
clickable: true
}
}
}
}
}
</script>

ما تنظیمات مربوط به swipers های مختلف را مشخص می کنیم و سپس در الگوی خود ، ساختاری مانند این داریم:
<template>
<swiper :options=”swiperOptionh”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<swiper-slide>
<swiper :options=”swiperOptionv”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-v” slot=”pagination”></div>
</swiper>
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-h” slot=”pagination”></div>
</swiper>
</template>

توجه کنید که چگونه از:options=”swiperOptionh” برای مشخص کردن پیکربندی های horizontal swiper و از :options=”swiperOptionv” برای vertical swiper استفاده می کنیم .
اکنون که نمونه های پایه swiper را دیدیم ، به خوبی میتوانیم به ساخت Netflix مانند swipers بپردازیم.
فایل HomePage.vue خود را ویرایش کنید تا به این شکل ظاهر شود:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptions : {
slidesPerView: 5,
spaceBetween: 0,
freeMode: true,
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
}
}
}
}
}
</script>

با انتخاب تعداد فیلم هایی که در هر نمایش می خواهیم ، گزینه های مربوط به swiper را تغییر دادیم. همچنین فاصله بین آنها را 0 قرار دادیم. برای اینکه swipe احساس بی پایان داشته باشد، حلقه را روی true قرار می دهیم. همچنین نام کلاس دکمه های ناوبری خود را مشخص کردیم – این کار عملکردی را به دکمه ها اضافه می کند.
تمپلیت را اصلاح کنید تا ساختار زیر را داشته باشد:
<template>
<swiper :options=”swiperOptions”>
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–4NgMf3RF–/v1521804358/avengers.jpg” title=”Avengers : Infinity War” description=”Thanos is around” duration=”2hrs”/>
</swiper-slide>
[…]
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–qXaW5V3E–/v1521804426/wakanda.jpg” title=”Black Panther” description=”Wakanda Forever” duration=”2hrs15mins”/>
</swiper-slide>
<div class=”swiper-button-prev” slot=”button-prev”></div>
<div class=”swiper-button-next” slot=”button-next”></div>
</swiper>
</template>

برای دیدن نتایج به سرور مجازی خود مراجعه کنید.
نتیجه
در این مقاله ، شما swipers را در یک برنامه Vue پیاده سازی کرده اید. اکنون می توانید آنها را با سهولت در برنامه های کاربردی خود اجرا کنید.

 

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:frontend, Netflix, swiper, Vue, Vue CLI

ساختن سیستم مستندات (Documentation) با Vue و VuePress

مستندات خوب بخش مهمی از یک پروژه موفق است ، اما یک سیستم مستندسازی کامل ممکن است بیشتر از آنچه پروژه شما نیاز دارد را شامل شود. در این حالت ، صفحات استاتیک اغلب کاملاً خوب عمل می کنند. در این پست ، ما می خواهیم یک وب سایت مستندات استاتیک ایجاد کنیم که همچنین یک برنامه تک صفحه با استفاده از سازنده استاتیک سایت یعنی VuePress است.
سایت های استاتیک
سایت های استاتیک وب سایتهایی هستند که همانطور که ذخیره شده اند ارائه می شوند. هیچ تعامل مستقیم مشتری-سرور مجازی به جز از سمت برنامه های جاسازی شده شخص ثالث وجود ندارد. تولید کنندگان سایت استاتیک در اینترنت بسیار زیاد هستند و هر یک نسبت به بقیه متفاوت است. برخی از آنها سرعت و دفعات لود را بیش از انعطاف پذیری ترجیح میدهند، و برخی دیگر از قابلیت های بسط یافته حمایت می کنند. سایتهای استاتیک به دلیل افزایش سرعت آنها ترجیح داده می شوند و نبود سرور مجازی احتمال نقص در امنیت را کاهش می دهد.
VuePress دارای یک مولد سایت استاتیک و همچنین یک تم پیش فرض مناسب برای ساخت سریع وب سایت های مستند سازی است. در این آموزش ، ما از تم مستندات پیش فرض برای ساخت سیستم خود استفاده خواهیم کرد.
VuePress
به طور پیش فرض ، VuePress فایل های markdown را همانطور که در پوشه ها شکل گرفته و برای ارائه به فایل های HTML ارسال می شوند، تجزیه میکند. VuePress با ایجاد Vue ،  Vue Router برای ایجاد مسیرهای جداگانه ، و webpack  برای دارایی های دسته شده به کار می آید. در حین ساخت ، هر فایل markdown به عنوان الگوی Vue تجزیه می شود ، در حالی که دارایی ها توسط یک webpack دسته می شوند. تجزیه فایل های markdown به الگوهای Vue راهی را ایجاد می کند که می توانید برای عبور از اسکریپت های بومی Vue به شکل مولفه های تک فایل استفاده کنید.
VuePress سازگار با سئو است و به طور پیش فرض ابزاری برای اجرای ردیابی تحلیلی با استفاده از Google Analytics در صفحات شما فراهم می کند. همچنین ، VuePress با یک سیستم جستجوی حداقلی همراه است که تمام عناوین موجود در وب سایت را فهرست بندی می کند و در هنگام جستجو آنها را نمایش می دهد.
اگرچه انتقالات VuePress با یک طرح پاسخگوی پیش فرض برای مستندات ، ارسال می شوند ، اما از طرح بندی های سفارشی برای یک ظاهر طراحی شده نیز پشتیبانی می کند. برای این پست ، ما باید یک سیستم مستندسازی حداقلی با استفاده از تم پیش فرض و همچنین ویژگی Vue در Markdown را با استفاده از ساخت یک شمارنده ساده در یک فایل Markdown ، پیاده سازی کنیم.
پیش نیازها
برای این آموزش ، باید دانش اساسی در مورد HTML ، CSS و JavaScript داشته باشید. آگاهی از Vue نیز مفید است اما لازم نیست.
نصب
برای این پروژه به Node و npm مدیر بسته آن نیاز دارید. با اجرای دستور زیر بررسی کنید که آیا آن را در پایانه خود نصب کرده اید:
node -v && npm -v

این دستور به ترتیب نسخه های نصب شده node و npm را نمایش می دهد. اگر نصب نکردید ، می توانید آن را از اینجا دانلود کنید.
سپس ، یک پروژه جدید ایجاد کنید. یک پوشه جدید ایجاد کنید و به آن دیرکتوری تغییر دهید:
mkdir vuepress && cd $_

یک پروژه node جدید را در دیرکتوری vuepress مقداردهی کنید:
npm init -y

به سرعت پروژه جدیدی را چارچوب بندی می کند و یک فایل pack.json ایجاد می نماید.
سپس ، VuePress را بصورت محلی با دستور زیر نصب میکنیم:
npm install -D vuepress

پس از نصب VuePress در پروژه ، همه موارد مورد نیاز خود را دارید ، زیرا VuePress با تم مستندات پیش فرض استفاده شده برای این پروژه ارسال می شود. با این حال ، می خواهیم مستندات را متناسب با نیاز خود تنظیم کنیم ، بنابراین در محله بعد پوشه ها و فایل ها را با متن ساختگی ایجاد خواهیم کرد.
ایجاد پوشه ها و فایل ها
هنگام ایجاد پوشه در VuePress ، مراقب باشید ، زیرا پوشه ها و فایل های علامت گذاری را مطابق ترتیب آنها ارزیابی می کند. هر فایل علامت گذاری به عنوان یک پوشه به یک فایل HTML وارد می شود که مسیر آن پوشه اصلی است.
ابتدا یک پوشه Docs ایجاد کنید تا تمام محتوای و پیکربندی اسناد را در خود جای دهد:
mkdir docs && cd $_

در دایرکتوری Docs ، پوشه .vuepress و پوشه های اسناد را که فایل ها را ذخیره می کند ایجاد کنید – counter  و guide.
برای کارکردن این مسیرها ، در هر پوشه به فایل README.md نیاز دارند. این به عنوان یک مسیر هوم به آن بخش ویژه خدمت می کند.
پوشه counter  حاوی فایل های نشانه گذاری برای تجزیه و همچنین فایل های پیش فرض README.md برای صفحه اصلی است. پوشه guide  حاوی مطالب مشابه با پوشه counter  میباشد.
پوشه .vuepress دیرکتوری مولفه ها را در خود جای میدهد، پوشه dist که در build ایجاد شده و فایل config.js که برای پیکربندی سیستم کلی استفاده می شود.
ایجاد مؤلفه های Vue
برای این پروژه ، ما یک شمارشگر ساده با استفاده از Vue می سازیم. دو مؤلفه Vue را با پسوند .vue به نام counter.vue و my-header.vue ایجاد کنید. این مؤلفه ها به ترتیب به عنوان یک مؤلفه شمارنده و یک هدر ساده عمل می کنند. در my-header.vue ، متن vue را ویرایش کنید:
<template>
<div>
<h1>This Header is actually a Vue Template</h1>
</div>
</template>
<script>

</script>
<style scoped>
</style>

اسکریپت counter.vue را مانند این ویرایش کنید:
<template>
<div class=”counter”>
<h1>{{number}}</h1>
<button @click = “increment”>Increment</button>
<button @click = “decrement”>Decrement</button>
</div>
</template>
<script>
export default {
data(){
return{
number: 0,
}
},
methods:{
increment(){
if(this.number >= 0){
this.number++
}
},
decrement(){
if(this.number > 0){
this.number —
}
}
}
}
</script>
<style scoped>
.counter{
display: inline-block;
margin-left: 30%;
}
button{
display: inline-block;
padding: 20px;
margin: 10px;
font-weight: bold;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgb(11, 11, 114);
}
h1{
text-align: center;
}
</style>

این مؤلفه شامل همه چیزهایی است که برای شمارنده لازم دارید. در حال حاضر مولفه های Vue آماده استفاده هستند.
ایجاد فایل های Markdown
در مرحله بعد ، فایلهای Markdown را در دایرکتوری counter  و guide  ایجاد کنید. فایل های Markdown را برای counter و guide ببینید. از Frontmatter برای تنظیم دینامیکی عنوان صفحات جداگانه استفاده می شود. مؤلفه <counter /> نیز در فایل علامت گذاری قرار داده شده است.
این فایل ها بعداً به صفحات استاتیک تبدیل می شوند. برای صفحه اصلی خود ، همچنین نیاز به یک فایل Markdown با عنوان README.md داریم تا به عنوان صفحه اصلی ارائه شود. Frontmatter در فایل های Markdown برای تنظیم برخی از ویژگی های پویای صفحه اصلی استفاده می شود. یک فایل EADME.md در دایرکتوری اسناد ایجاد و آن را ویرایش کنید:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—

سپس ، مؤلفه my-header Vue را در مسیر هوم قرار دهید. فایل README.md را ویرایش کنید تا مؤلفه را شامل شود:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—
<my-header></my-header>

اکنون تمام فایل های مورد نیاز Markdown را دارید. بیایید پیکربندی ناوبری و نوار کناری (sidebar) را با استفاده از .vuepress / config.js انجام دهیم.
پیکربندی طرح بندی
فایل config.js برای شخصی سازی سیستم مستندات استفاده می شود. در ایجاد این سیستم سفارشی ، یک آبجکت که شامل فیلدهای مورد نیاز است صادر می کنیم:
module.exports = {
title: ‘VuePress’,
description: “A demo documentation using VuePress”,
themeConfig:{
nav: [
{ text: ‘COUNTER’, link: ‘/counter/’ },
{ text: ‘GUIDE’, link: ‘/guide/’ },
],
sidebar: [
{
title: ‘Counter’,
collapsable: false,
children: [
‘/counter/counter-app’
]
},
{
title: ‘API Guide’,
collapsable: false,
children: [
‘/guide/guide’,
‘/guide/api’
]
}
]
}
}

ابتدا عنوان وب سایت را مشخص می کنیم و توضیحی را به آن اختصاص می دهیم که برای سئو خوب باشد. این عنوان و توضیحات به طور خودکار یک سیستم جستجوی فهرست شده را در وب سایت با نوار جستجو ارائه می دهد.
مورد بعدی در اسکریپت ، آبجکت themeConfig است که پارامترهای مورد نیاز برای اجرای برخی عملکردهای خاص در تم را دریافت می کند. برای ایجاد نوار ناوبری ، یک آرایه nav ایجاد می کنیم که حاوی آبجکت های مشخص کننده متن و مسیر نمایش هر عنصر nav می باشد. می توانید اطلاعات بیشتری درباره پیکربندی تم پیش فرض را در اینجا مشاهده کنید.
ما از نوارهای کناری طبقه بندی شده استفاده کرده ایم تا کاربران بتوانند هر لحظه در مستندات ، نگاهی سریع به منو داشته باشند. با استفاده از ویژگی collapsable  در گروه نوار کناری ، می توان منوی نوار کناری را به طور پیش فرض روی collapse تنظیم کرد. در اینجا می توانید اطلاعات بیشتری را در نوار کناری بیابید.
اکنون همه چیز تنظیم شده است ، برای شروع یک سرور مجازی توسعه ، دستور زیر را اجرا کنید:
vuepress dev docs

سرور مجازی dev محلی در پورت 8080 میزبانی می شود. VuePress با ویژگی لود مجدد جدید ، اجرای هرگونه تغییر در برنامه را در حین توسعه اعمال می کند.
اگر مؤلفه های Vue در حالت لایو بودن سرور مجازی توسعه محلی ایجاد شوند، ریستارت سرور مجازی توسعه لازم خواهد بود.

اکنون که ما یک سرور مجازی dev در حال اجرا داریم، هدف استقرار سایت خواهد بود. برای تمیز کردن مسائل ، فایل package.json را ویرایش کنید تا شامل دستورات توسعه و همچنین دستورات ساخت باشد. فایل package.json را ویرایش کنید:
{
“name”: “vuepress”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
“keywords”: [],
“author”: “”,
“license”: “MIT”,
“devDependencies”: {
“vuepress”: “^0.5.0”
}
}

برای ساختن فایل های استاتیک ، اکنون می توانیم این دستور را اجرا کنیم:
npm run docs:build

ممکن است ساخت آن مدت زمانی طول بکشد و پس از آن می توانید فایل های استاتیک ساخته شده را در .vuepress / dist پیدا کنید
تغییر استایل
VuePress از فایل های استاتیک و همچنین دارایی های webpack پشتیبانی می کند و توجه میکند که از صحت URL اختصاص داده شده به یک دارایی در نشانه گذاری قبل از ساخت اطمینان حاصل شود. برای مورد ما ، فقط باید رنگ پایه را کمی تغییر دهیم. ما با استفاده از سبک ها رنگ های پیش فرض را باطل می کنیم.
یک فایل جدید به نام override.styl را در Docs / .vuepress ایجاد کنید. در حالی که از اسامی متغیر اختصاص داده شده به رنگ مطابق مستندات رسمی استفاده می کنیم ، اسکریپت override.styl را ویرایش می کنیم تا accentColor را با موارد زیر تغییر دهیم:
$accentColor = #cfa809
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

سرور مجازی توسعه را با دستور زیر مجدد راه اندازی کنید:
npm run docs:dev

توجه داشته باشید که تغییرات ایجاد شده در فایل استایل بلافاصله در مرورگر منعکس می شود.
اکنون سیستم مستندات را با صفحات جداگانه تکمیل کرده ایم.
به کار بردن Netlify
در مرحله بعدی با استفاده از Netlify سایت استاتیک را مستقر می کنید. Netlify با بکارگیری Github یا هر ارائه دهنده کنترل نسخه میزبانی و پشتیبانی شده ، گزینه ادغام مداوم را فراهم می کند. برای استقرار سایت خود در Netlify این مراحل را دنبال کنید:
گام 1
در Github و Netlify یک حساب کاربری ایجاد کنید. کد خود را با استفاده از Git به Github وارد کنید.
گام 2
وارد حساب Netlify خود شوید و گزینه ” New site from Git ” را انتخاب کنید. Github را به عنوان ارائه دهنده توسعه مداوم انتخاب کنید و منبع حاوی مستندات را انتخاب کنید.
گام 3
شعبه را تعیین کنید تا به عنوان master مستقر شوید یا هر شعبه ای را که می خواهید مستقر کنید انتخاب کنید. دستور build را روی npm run docs:build تنظیم کنید: دایرکتوری انتشار را روی  docs/.vuepress/distقرار دهید. روی ” Deploy Site” کلیک کنید. وب سایت شما باید در زمان کمی مستقر شود و یک URL عمومی برای دسترسی به آن فراهم گردد.
در اینجا نسخه مستقر شده از این آموزش در Netlify وجود دارد.
نتیجه
سایت های استاتیک به دلیل سرعت ، امنیت و قابلیت نگهداری مفید هستند. در این آموزش ما با استفاده از VuePress یک وب سایت مستندات استاتیک ایجاد کردیم که یک برنامه تک صفحه ای نیز میباشد. VuePress انعطاف پذیری نوشتن اسکریپت های Vue را در داخل فایل های Markdown ارائه می دهد که پویایی را به سایت های استاتیک ارائه می کند. به راحتی پروژه را اصلاح کنید تا چندین پوشه و فایل های markdown مربوطه را دربر بگیرید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:counter, Frontmatter, Google Analytics, guide, markdown, VuePress

استفاده از map، filter، و reduce در جاوااسکریپت

برنامه نویسی کاربردی در جاوا اسکریپت از خوانایی کد ، قابلیت حفظ و قابلیت آزمایش کد بهره می برد.
یکی از ابزارهای برنامه نویسی کاربردی ، برنامه نویسی به سبک پردازش آرایه است. این امر مستلزم گرفتن آرایه به عنوان ساختار داده بنیادی میباشد. سپس برنامه شما به یک سری عملیات روی عناصر موجود در آرایه تبدیل می شود.
حوزه های بسیاری وجود دارد که این ویژگی در آن ها مفید است ، مانند نقشه برداری نتایج AJAX برای مؤلفه های React با map ، حذف داده های غیرعادی با filter و استفاده از reduce. این عملکردها ، “Array Extras” نامیده می شوند و انتزاعی حول حلقه ها for هستند. چیزی نیست که با این توابع بتوانید انجام دهید و با for نتوانید به دست بیاورید و برعکس.
در این آموزش ، با نگاهی به filter ، map و reduce ، درک عمیق تری از برنامه نویسی کاربردی در جاوااسکریپت ایجاد خواهیم کرد.
تکرار با for
ما از حلقه های for برای تکرار روی هر مورد در آرایه استفاده می کنیم. معمولاً در طول راه کاری روی هر آیتم انجام می دهیم.
یک مثال می تواند بزرگ کردن حرف اول هر رشته در یک آرایه باشد.
const strings = [‘arielle’, ‘are’, ‘you’, ‘there’];
const capitalizedStrings = [];

for (let i = 0; i < strings.length; i += 1) {
const string = strings[i];
capitalizedStrings.push(string.toUpperCase());
}

console.log(capitalizedStrings);

در این قطعه ، با آرایه ای از حروف کوچک شروع می کنیم. سپس ، به یک آرایه خالی را مقدار اولیه می دهیم ، که رشته های بزرگ خود را ذخیره می کنیم.
در داخل حلقه for ، رشته بعدی را در هر تکرار می گیریم. حروف آن را بزرگ میکنیم و آن را به capitalizedStrings میفرستیم. در انتهای حلقه ، CapitalizedStrings شامل هر کلمه ای در رشته ها است ، اما می دانید ، که با حروف بزرگ است است.
این ما را به اولین تابع خود می رساند: forEach. روشی است که در آرایه ها “به طور خودکار” حول لیست ما حلقه می شود. به عبارت دیگر ، جزئیات مقدار اولیه و افزایش شمارنده برای ما را کنترل می کند.
به جای موارد فوق ، که به صورت دستی رشته ها را فهرست می کنیم ، می توانیم forEach را فراخوانی کنیم و رشته بعدی را در هر تکرار دریافت کنیم. نسخه به روز شده چیزی شبیه به این خواهد بود:
const strings = [‘arielle’, ‘are’, ‘you’, ‘there’];
const capitalizedStrings = [];

strings.forEach(function (string) {
capitalizedStrings.push(string.toUpperCase());
})

این تقریباً همان چیزی است که ما با آن شروع کردیم. اما خلاص شدن از این i کد ما را قابل خواندن تر می کند.
همچنین الگوی اصلی را ارائه می دهد که دوباره زمان و زمان را خواهیم دید. یعنی: ما ترجیح می دهیم از روشهایی در Array.prototype استفاده کنیم که جزییاتی مانند مقداردهی اولیه و افزایش شمارنده را حذف می کند. به این ترتیب ، ما می توانیم به جای متن استاندارد (boilerplate) ، روی منطق مهم تمرکز کنیم.
درک رمز سزار و حملات Brute Force
در کد های زیر ، ما در مثال های map ، reduce و filter T رشته های رمزگذاری و رمزگشایی را استفاده خواهیم کرد.
مثلا:
// Thanks to EvanHahn for this: https://gist.github.com/EvanHahn/2587465
const caesar = require(‘./caesar’);

// We can encrypt the string: ‘this is my secret message’ with `caesar`
// Here, we scramble the message by shifting each letter forward by 2 letters: ‘a’ becomes ‘c’; ‘s’ becomes ‘u’; etc.
const encryptedString = caesar(‘this is my super secret message.’, 2);
console.log(encryptedString); // ‘vjku ku oa uwrgt ugetgv uvtkpi.’

مفهوم این است که ، اگر من یک پیام عادی مانند ‘this is my super secret message’ به شما ارسال کنم ، و شخص دیگری به آن دست یابد ، می توانند بلافاصله راز را بخوانند. بدیهی است اگر اطلاعات حساسی مانند گذرواژه را ارسال کنید ، که ممکن است کسی در حال مشاهده ان باشد، میتواند مشکل آفرین باشد.
رمزگذاری (Encrypting) یک رشته به معنای: “پیچیده کردن خواندن است به طوری که بدون رمزگشایی خواندن آن ممکن نباشد.” به این ترتیب ، حتی اگر کسی در حال شنود باشد ، و حتی اگر پیام شما را رهگیری کند ، تا زمانی که آن را unscramble کنند، خوانده نشده باقی خواهد ماند. برای توضیح مثال بالا ، رشته “vjku ku oa uwrgt ugetgv uvtkpi” را ببینید که مفهوم آن تقریبا مشخص نیست.
رمزگذاری سزار یکی از راه های رمزگشایی رشته ای به این شکل است. برای رمزگذاری با رمز سزار ، یک کلید ، n ، بین 1 تا 24 انتخاب می کنیم و هر حرف در رشته اصلی را با یکی از حروف n تا انتهای الفبا جایگزین می کنیم.
بنابراین ، اگر کلید 2 را انتخاب کنیم ، a می شود c؛ b می شود d؛ c می شود e؛ و به همین ترتیب.
تعویض حروف مثل این رشته اصلی را تقریبا غیر قابل خواندن میکند. اما ، ما با تغییر حروف رمزگشایی کردیم. بنابراین ، تنها کاری که باید برای رمزگشایی انجام دهید این است که آنها را به عقب برگردانید. اگر پیامی را دریافت کردید که می دانید با کلید 2 رمزگذاری شده بود، تنها کاری که باید برای رمزگشایی انجام دهید این است که حروف را دو فاصله برگردانید. بنابراین ، c می شود a؛ d می شود b؛ و غیره.
متأسفانه ، امروزه این یک شکل رمزنگاری قوی نیست ، زیرا شکستن آن بسیار آسان است. یک روش برای رمزگشایی هر رشته رمزگذاری شده با رمز سزار این است که فقط سعی کنید آن را با هر کلید ممکن رمزگشایی کنید. بالاخره یکی از نتایج صحیح خواهد بود. تمام کاری که باید انجام دهید این است که آرایه 24 خروجی را اسکن کنید تا خروجی که انگلیسی است را پیدا کنید. بقیه به اندازه رشته اصلی غیرقابل خواندن خواهند بود.
در زیر ، من از تابعی به نام tryAll استفاده می کنم ، که دقیقاً همین کار را انجام می دهد. یعنی: یک رشته رمزگذاری شده را میگیرد و آرایه ای از هر رمزگشایی احتمالی را برمی گرداند. یکی از این نتایج رشته ای است که ما می خواهیم. بنابراین ، این همیشه رمز را می شکند.
اسکن آرایه ای از 24 رمزگشایی احتمالی چالش برانگیز است. باید بتوانیم مواردی را که قطعاً نادرست هستند از بین ببریم.
در بخش filter ، تابعی را با نام isEnglish مشاهده خواهید کرد که فقط این کار را انجام می دهد. به طور خاص ، یک رشته را می خواند. حساب می کند که چه تعداد از 1000 کلمه رایج انگلیسی در آن رشته وجود دارند. و در صورت یافتن بیش از 3 کلمه در جمله ، رشته را در دسته انگلیسی طبقه بندی می کند. اگر رشته شامل کمتر از 3 کلمه از آن آرایه باشد ، آن را بیرون می اندازد.
البته که روش های پیچیده تری برای بررسی اینکه یک رشته انگلیسی است ، وجود دارد ، اما فعلا این روش کافی است.
پیاده سازی های tryAll و isEnglish مهم نیستند ، اما اگر کنجکاو هستید ، می توانید آنها را در این لینک پیدا کنید: tryAll / isEnglish
تبدیل آرایه ها با map
بازسازی حلقه for برای استفاده از forEach  مزایای این سبک را نشان میدهد. اما هنوز جایی برای بهبود نسخه به روز شده وجود دارد.
در مثال بالا ، ما در حال روزرسانی capitalizedStrings  در پاسخ به forEach هستیم. هیچ چیز ذاتا غلطی در این کار نیست. اما ، اجتناب از عوارض جانبی مانند آن در هر زمان ممکن دردسر زیادی دارد.
اگر مجبور نیستیم ساختارهای داده را که در دامنه دیگری قرار دارند ، بروزرسانی کنیم … احتمالاً بهتر است انجام ندهیم.
در این مورد خاص ، می خواستیم هر رشته موجود در strings  را به نسخه حروف بزرگ آن تبدیل کنیم. این یک مورد کاربرد بسیار متداول برای حلقه for است: همه چیز را در یک آرایه قرار میدهد. آن را به چیز دیگری تبدیل میکند؛ و نتایج را در یک مجموعه جدید جمع آوری میکند.
تبدیل هر عنصر در یک آرایه به عنصر جدید و جمع آوری نتایج ، نقشه برداری (mapping) نامیده می شود. جاوا اسکریپت یک عملکرد داخلی برای این مورد استفاده دارد که map نامیده میشود.
ما forEach  استفاده کردیم زیرا نیاز به مدیریت متغیر تکرار i را حذف می کند. لازم نیست که به صورت دستی در آرایه لیست بندی کنیم و بنابراین می توانیم روی منطقی که واقعاً مهم است متمرکز شویم.
به همین ترتیب ، ما از map استفاده می کنیم زیرا مقدار دهی اولیه یک آرایه خالی را کنار میگذارد و به سمت آن میرود. دقیقاً مثل forEach  که هر مکالمه برگشتی که کاری را برای هر مقدار رشته انجام می دهد ، میپذیرد، map نیز یک callback را قبول میکند که با هر مقدار رشته کاری انجام می دهد.
بیایید قبل از توضیح نهایی به یک نسخه نمایشی سریع بپردازیم. در این مثال ، من از تابعی برای ” رمزگذاری “مجموعه ای از پیام ها استفاده می کنم. می توانیم از حلقه for استفاده کنیم و می توانیم از forEach استفاده کنیم … اما با map بهتر است.
const caesar = require(‘../caesar’);

const key = 12;
const messages = [
‘arielle, are you there?’,
‘the ghost has killed the shell’,
‘the liziorati attack at dawn’
]

const encryptedMessages = messages.map(function (string) {
return caesar(string, key);
})

console.log(encryptedMessages);

توجه داشته باشید که در اینجا چه اتفاقی افتاده است.
• ما با یک آرایه messages به زبان انگلیسی ساده شروع می کنیم.
• از روش map روی messages برای رمزگذاری هر رشته با تابع سزار استفاده می کنیم و به طور خودکار نتیجه را در یک آرایه جدید ذخیره می کنیم.
پس از اجرای کد فوق ، encryptMessages به شکل زیر خواهد بود
[‘mduqxxq, mdq kag ftqdq?’, ‘ftq staef tme wuxxqp ftq etqxx’, ‘ftq xuluadmfu mffmow mf pmiz’].
این حالت سطح بسیار بالاتری از انتزاع را نسبت به حالت ورود دستی به آرایه فراهم میکند.
اکنون زمان خوبی برای اشاره به این نکته است که می توانیم از توابع آرایه ای برای بیان دقیق تر استفاده کنیم:
const caesar = require(‘../caesar’);

const key = 12;
const messages = [
‘arielle, are you there?’,
‘the ghost has killed the shell’,
‘the liziorati attack at dawn’
];

const encryptedMessages = messages.map(string => string.toUpperCase()):

console.log(encryptedMessages);

کنار گذاشتن موارد با filter
الگوی رایج دیگر استفاده از حلقه for برای پردازش موارد در یک آرایه است ، اما فقط برخی از آنها را خارج کنید/نگه دارید.
ما معمولاً با انجام بررسی if تصمیم می گیریم که چه مواردی را نگه داشته و کدام موارد را دور بیندازیم.
در JS خام ، ممکن است اینگونه باشد:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = [];
possibilities.forEach(function (decryptionAttempt) {
// Keep the string if it looks like an English sentence
if (isEnglish(decryptionAttempt)) {
likelyPossibilities.push(decryptionAttempt);
}
})

ابتدا ، سعی می کنیم پیام رمزگذاری شده را با هر کلید ممکن رمزگشایی کنیم. این بدان معناست که با آرایه ای از 24 احتمال رو به رو هستیم.
در این حلقه ، هرکدام را آزمایش می کنیم تا ببینیم که آیا یک رشته انگلیسی است یا خیر. اگر چنین است ، آن را نگه میداریم. اگر نه ، آن را دور می اندازیم.
این به وضوح یک مورد کاربرد رایج است. بنابراین ، یک ساختار داخلی برای آن وجود دارد که filter نامیده میشود.
مانند map ، ما یک filter وارد می کنیم ، که آن هم هر رشته را دریافت می کند. تفاوت در این است که ، filter تنها در صورتی که callback حالت true را بازگرداند، موارد را در یک آرایه ذخیره می کند. بنابراین ، ما می توانیم موارد فوق را به صورت زیر بیان کنیم:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = possibilities.filter(function (string) {
// If isEnglish(string) returns true, filter saves in the output array
return isEnglish(string);
})

از آنجا که این callback ، فقط isEnglish را فرامیخواند ، در واقع می توانیم آن را حتی به صورت دقیق تر بنویسیم ، مثل این:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = possibilities.filter(isEnglish);

موارد را با reduce در کنار هم قرار دهید
تاکنون ، برای سه مورد استفاده معمولی حول آرایه ها ، انتزاعاتی را مشاهده کردیم:
forEach ، که به ما امکان می دهد مانند for ، حول یک آرایه بگردیم اما نیاز به مدیریت دستی متغیر تکرار i را حذف می کند. آرایه را فهرست میکند؛ و غیره.
map ، که به ما امکان می دهد هر عنصر یک آرایه را تغییر دهیم و نتایج را در یک آرایه جمع آوری کنیم
filter ، که به ما امکان می دهد عناصر یک آرایه را برای نگهداری انتخاب کنیم
مورد دیگر استفاده رایج این است که: تکرار حول یک آرایه برای جمع آوری عناصر آن در یک نتیجه واحد
نمونه اصلی این است که تعداد زیادی عدد را جمع می کند.
// prices of: (big) box of oreos, girl scout cookies, fidget spinner, gold-plated Arch linux magnet
const prices = [12, 19, 7, 209];

// variable to store our total prices in
let totalPrice = 0;
for (let i = 0; i < prices.length; i += 1) {
totalPrice += prices[i];
}

// Report our total prices: $247
console.log(`Your total is ${totalPrice}.`);

همانطور که مطمئنا حدس زده اید ، انتزاعی نیز برای این مورد وجود دارد: reduce .
بازسازی حلقه فوق با reduce اینگونه خواهد بود:
const prices = [12, 19, 7, 209];

prices.reduce(function (totalPrice, nextPrice) {
// totalPrice is the price so far
console.log(`Total price so far: ${totalPrice}`)
console.log(`Next price to add: ${nextPrice}`)

// update totalPrice by adding the next price
totalPrice += nextPrice

// return the total price, and start over again
return totalPrice
}, 0)
// ^ the second argument to `reduce` is the totalPrice to start with on the first iteration

مانند map و filter ، reduce نیز یک callback را میپذیرد ، که در هر عنصر آرایه اجرا می شود.
برخلاف map و filter ، پاسخی که برای reduce ارسال می کنیم دو آرگومان را می پذیرد: یک TotalPrice و یک NextPrice.
TotalPrice مانند total در مثال اول است: قیمتی است که ما با اضافه کردن تمام قیمتهایی که تاکنون دیده ایم ، به دست می آوریم.
nextPrice عددی است که با انجام prices[i] در مثال اول به دست آوردیم. آن map را بخاطر بیاورید و reduce بطور خودکار در آرایه برای ما فهرست بندی میکند و این مقدار را به صورت خودکار به تماس های برگشتی آنها منتقل میکند. reduce همان کار را انجام می دهد ، اما آن مقدار را به عنوان آرگومان دوم به callback آن منتقل می کند.
درست مانند map و reduce ، در هر تکرار ، ما باید مقدار مورد نظر خود را برای بازگشت در انتهای حلقه برگردانیم. یعنی ، TotalPrice.
در آخر ، توجه داشته باشید که آرگومان دیگری را بعد از callback به reduce وارد میکنیم. در این حالت ، 0 را وارد میکنیم. این عمل مشابه با خطی در مثال اول است، که const total = 0 قرار دادیم. این آرگومان دوم مقدار اولیه totalPrice است.
درک reduce سخت تر از map یا filter است ، بنابراین بیایید به مثال دیگری توجه کنیم.
در مثال قبلی ، ما برای جمع آوری آرایه ای از اعداد به صورت مجموع از reduce استفاده کردیم. اما reduce چند کاره است. ما می توانیم از آن استفاده کنیم تا یک آرایه را به یک نتیجه واحد تبدیل کنیم.
مثلا، می توانیم از آن برای ساختن یک رشته استفاده کنیم.
const courses = [‘Introduction to Programming’, ‘Algorithms & Data Structures’, ‘Discrete Math’];

const curriculum = courses.reduce(function (courseList, course) {
// add the name to the class, with a preceding newline and tab for indentation
return courseList += `\n\t${course}`;
}, ‘The Computer Science curriculum consists of:’);

console.log(curriculum);

این کد خروجی زیر را ایجاد می کند:
The Computer Science curriculum consists of:
Introduction to Programming
Algorithms & Data Structures
Discrete Math

بنا به دلایلی ، بیان تعداد بسیار زیادی مثال از استفاده از reduce برای ساختن رشته هایی مانند این را لازم نمی بینم ، اما این یک شیوه کاربردی معمول است.
باز هم ، reduce چند کاره است: می توانیم از آن استفاده کنیم تا یک آرایه را به هر نوع نتیجه “تک” تبدیل کنیم.
حتی اگر آن نتیجه واحد آرایه دیگری باشد.
آن را بررسی کنید:
const names = [‘arielle’, ‘jung’, ‘scheherazade’];

const titleCase = function (name) {
// uppercase first letter of name
const first = name[0];
const capitalizedFirst = first.toUpperCase();

// get rest of name
const rest = name.slice(1);

// create list with all letters of the name, including capitalized first letter
const letters = [capitalizedFirst].concat(rest);

// join letters, return result
return letters.join(”);
}

const titleCased = names.reduce(function (titleCasedNames, name) {
// title-case the next name
const titleCasedName = titleCase(name);

// add the title-cased name to a list
titleCasedNames.push(titleCasedName);

// return list of capitalizedNames
return titleCasedNames
}, [])
// ^ start with an empty list

console.log(titleCased);
// [“Arielle”, “Jung”, “Scheherazade”]

ما از reduce برای تبدیل لیستی از اسامی با حروف کوچک به لیستی از اسامی دارای عنوان استفاده کردیم.
پیش از این ، یک لیست از اعداد را به یک مجموع واحد و یک لیست از رشته ها را به یک رشته واحد تبدیل کرده بودیم. در اینجا ، یک لیست از نام ها را به یک لیست واحد از نام ها با حرف اول بزرگ تبدیل کردیم.
این کار همچنان مجاز است ، زیرا لیست واحد نام های title-cased هنوز یک نتیجه واحد است. فقط به یک مجموعه تبدیل شده نه یک نوع ابتدایی.
ممکن است در مورد آن مثال آخر چیزی را متوجه شده باشید: ما از reduce برای همان کارهایی استفاده کرده ایم که قبلا برای map استفاده کرده بودیم.
با این وجود ممکن است آشکار نباشد ، اما یک مسئله بزرگ است.
ممکن است حدس بزنید که می توانیم map را بر حسب reduce بنویسیم. حق با شماست.
const map = (list, mapFunction) => {
const output = list.reduce((transformedList, nextElement) => {
// use the mapFunction to transform the nextElement in the list
const transformedElement = mapFunction(nextElement);

// add transformedElement to our list of transformed elements
transformedList.push(transformedElement);

// return list of transformed elements
return transformedList;
}, [])
// ^ start with an empty list

return output;
}

می توانیم همان نتیجه فوق را با این کد به دست آوریم:
سلب مسئولیت (disclaimer) اجباری: اگر تا الان در حال اجرای map آماده تولید بودید، باید برخی از ویژگی ها را به این اجرا اضافه کنید. ما همه اینها را به خاطر عدم ابهام به خود شما واگذار خواهیم کرد.
اگر می توانیم برای اجرای map از reduce استفاده کنیم ، برای filter چگونه است؟
const filter = (list, predicate) => {
const output = list.reduce(function (filteredElements, nextElement) {
// only add `nextElement` if it passes our test
if (predicate(nextElement)) {
filteredElements.push(nextElement);
}

// return the list of filtered elements on each iteration
return filteredElements;
}, [])
})
}

اگر این مورد گیج کننده است، اشکالی ندارد. حتی برای توسعه دهندگان با تجربه تر هم یک ایده جدید است. اما ، ارزش این را دارد که با آن آشنا شوید: ما به این میزان بینش کم نیاز داریم تا بعداً transduction را درست درک کنیم.
… و ، به من اعتماد کنید ، transduction به تنهایی آنقدر جالب است که ارزش کار را دارد.
نتیجه
در این آموزش ، نحوه استفاده از map ، filter و reduce را برای نوشتن کد قابل خواندن یاد گرفتید.
البته که مشکلی در استفاده از for وجود ندارد. اما بالا بردن سطح انتزاع با این توابع ، نتایج فوری از لحاظ خوانایی و قابلیت حفظ آن را به ارمغان می آورد.
از اینجا ، می توانید روش های دیگر آرایه مانند flatten ،concat و flatMap را جستجو کنید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:Ajax, Array Extras, capitalizedStrings

ساختن سیستم مستندات (Documentation) با Vue و VuePress

مستندات خوب بخش مهمی از یک پروژه موفق است ، اما یک سیستم مستندسازی کامل ممکن است بیشتر از آنچه پروژه شما نیاز دارد را شامل شود. در این حالت ، صفحات استاتیک اغلب کاملاً خوب عمل می کنند. در این پست ، ما می خواهیم یک وب سایت مستندات استاتیک ایجاد کنیم که همچنین یک برنامه تک صفحه با استفاده از سازنده استاتیک سایت یعنی VuePress است.
سایت های استاتیک
سایت های استاتیک وب سایتهایی هستند که همانطور که ذخیره شده اند ارائه می شوند. هیچ تعامل مستقیم مشتری-سرور مجازی به جز از سمت برنامه های جاسازی شده شخص ثالث وجود ندارد. تولید کنندگان سایت استاتیک در اینترنت بسیار زیاد هستند و هر یک نسبت به بقیه متفاوت است. برخی از آنها سرعت و دفعات لود را بیش از انعطاف پذیری ترجیح میدهند، و برخی دیگر از قابلیت های بسط یافته حمایت می کنند. سایتهای استاتیک به دلیل افزایش سرعت آنها ترجیح داده می شوند و نبود سرور مجازی احتمال نقص در امنیت را کاهش می دهد.
VuePress دارای یک مولد سایت استاتیک و همچنین یک تم پیش فرض مناسب برای ساخت سریع وب سایت های مستند سازی است. در این آموزش ، ما از تم مستندات پیش فرض برای ساخت سیستم خود استفاده خواهیم کرد.
VuePress
به طور پیش فرض ، VuePress فایل های markdown را همانطور که در پوشه ها شکل گرفته و برای ارائه به فایل های HTML ارسال می شوند، تجزیه میکند. VuePress با ایجاد Vue ،  Vue Router برای ایجاد مسیرهای جداگانه ، و webpack  برای دارایی های دسته شده به کار می آید. در حین ساخت ، هر فایل markdown به عنوان الگوی Vue تجزیه می شود ، در حالی که دارایی ها توسط یک webpack دسته می شوند. تجزیه فایل های markdown به الگوهای Vue راهی را ایجاد می کند که می توانید برای عبور از اسکریپت های بومی Vue به شکل مولفه های تک فایل استفاده کنید.
VuePress سازگار با سئو است و به طور پیش فرض ابزاری برای اجرای ردیابی تحلیلی با استفاده از Google Analytics در صفحات شما فراهم می کند. همچنین ، VuePress با یک سیستم جستجوی حداقلی همراه است که تمام عناوین موجود در وب سایت را فهرست بندی می کند و در هنگام جستجو آنها را نمایش می دهد.
اگرچه انتقالات VuePress با یک طرح پاسخگوی پیش فرض برای مستندات ، ارسال می شوند ، اما از طرح بندی های سفارشی برای یک ظاهر طراحی شده نیز پشتیبانی می کند. برای این پست ، ما باید یک سیستم مستندسازی حداقلی با استفاده از تم پیش فرض و همچنین ویژگی Vue در Markdown را با استفاده از ساخت یک شمارنده ساده در یک فایل Markdown ، پیاده سازی کنیم.
پیش نیازها
برای این آموزش ، باید دانش اساسی در مورد HTML ، CSS و JavaScript داشته باشید. آگاهی از Vue نیز مفید است اما لازم نیست.
نصب
برای این پروژه به Node و npm مدیر بسته آن نیاز دارید. با اجرای دستور زیر بررسی کنید که آیا آن را در پایانه خود نصب کرده اید:
node -v && npm -v

این دستور به ترتیب نسخه های نصب شده node و npm را نمایش می دهد. اگر نصب نکردید ، می توانید آن را از اینجا دانلود کنید.
سپس ، یک پروژه جدید ایجاد کنید. یک پوشه جدید ایجاد کنید و به آن دیرکتوری تغییر دهید:
mkdir vuepress && cd $_

یک پروژه node جدید را در دیرکتوری vuepress مقداردهی کنید:
npm init -y

به سرعت پروژه جدیدی را چارچوب بندی می کند و یک فایل pack.json ایجاد می نماید.
سپس ، VuePress را بصورت محلی با دستور زیر نصب میکنیم:
npm install -D vuepress

پس از نصب VuePress در پروژه ، همه موارد مورد نیاز خود را دارید ، زیرا VuePress با تم مستندات پیش فرض استفاده شده برای این پروژه ارسال می شود. با این حال ، می خواهیم مستندات را متناسب با نیاز خود تنظیم کنیم ، بنابراین در محله بعد پوشه ها و فایل ها را با متن ساختگی ایجاد خواهیم کرد.
ایجاد پوشه ها و فایل ها
هنگام ایجاد پوشه در VuePress ، مراقب باشید ، زیرا پوشه ها و فایل های علامت گذاری را مطابق ترتیب آنها ارزیابی می کند. هر فایل علامت گذاری به عنوان یک پوشه به یک فایل HTML وارد می شود که مسیر آن پوشه اصلی است.
ابتدا یک پوشه Docs ایجاد کنید تا تمام محتوای و پیکربندی اسناد را در خود جای دهد:
mkdir docs && cd $_

در دایرکتوری Docs ، پوشه .vuepress و پوشه های اسناد را که فایل ها را ذخیره می کند ایجاد کنید – counter  و guide.
برای کارکردن این مسیرها ، در هر پوشه به فایل README.md نیاز دارند. این به عنوان یک مسیر هوم به آن بخش ویژه خدمت می کند.
پوشه counter  حاوی فایل های نشانه گذاری برای تجزیه و همچنین فایل های پیش فرض README.md برای صفحه اصلی است. پوشه guide  حاوی مطالب مشابه با پوشه counter  میباشد.
پوشه .vuepress دیرکتوری مولفه ها را در خود جای میدهد، پوشه dist که در build ایجاد شده و فایل config.js که برای پیکربندی سیستم کلی استفاده می شود.
ایجاد مؤلفه های Vue
برای این پروژه ، ما یک شمارشگر ساده با استفاده از Vue می سازیم. دو مؤلفه Vue را با پسوند .vue به نام counter.vue و my-header.vue ایجاد کنید. این مؤلفه ها به ترتیب به عنوان یک مؤلفه شمارنده و یک هدر ساده عمل می کنند. در my-header.vue ، متن vue را ویرایش کنید:
<template>
<div>
<h1>This Header is actually a Vue Template</h1>
</div>
</template>
<script>

</script>
<style scoped>
</style>

اسکریپت counter.vue را مانند این ویرایش کنید:
<template>
<div class=”counter”>
<h1>{{number}}</h1>
<button @click = “increment”>Increment</button>
<button @click = “decrement”>Decrement</button>
</div>
</template>
<script>
export default {
data(){
return{
number: 0,
}
},
methods:{
increment(){
if(this.number >= 0){
this.number++
}
},
decrement(){
if(this.number > 0){
this.number —
}
}
}
}
</script>
<style scoped>
.counter{
display: inline-block;
margin-left: 30%;
}
button{
display: inline-block;
padding: 20px;
margin: 10px;
font-weight: bold;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgb(11, 11, 114);
}
h1{
text-align: center;
}
</style>

این مؤلفه شامل همه چیزهایی است که برای شمارنده لازم دارید. در حال حاضر مولفه های Vue آماده استفاده هستند.
ایجاد فایل های Markdown
در مرحله بعد ، فایلهای Markdown را در دایرکتوری counter  و guide  ایجاد کنید. فایل های Markdown را برای counter و guide ببینید. از Frontmatter برای تنظیم دینامیکی عنوان صفحات جداگانه استفاده می شود. مؤلفه <counter /> نیز در فایل علامت گذاری قرار داده شده است.
این فایل ها بعداً به صفحات استاتیک تبدیل می شوند. برای صفحه اصلی خود ، همچنین نیاز به یک فایل Markdown با عنوان README.md داریم تا به عنوان صفحه اصلی ارائه شود. Frontmatter در فایل های Markdown برای تنظیم برخی از ویژگی های پویای صفحه اصلی استفاده می شود. یک فایل EADME.md در دایرکتوری اسناد ایجاد و آن را ویرایش کنید:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—

سپس ، مؤلفه my-header Vue را در مسیر هوم قرار دهید. فایل README.md را ویرایش کنید تا مؤلفه را شامل شود:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—
<my-header></my-header>

اکنون تمام فایل های مورد نیاز Markdown را دارید. بیایید پیکربندی ناوبری و نوار کناری (sidebar) را با استفاده از .vuepress / config.js انجام دهیم.
پیکربندی طرح بندی
فایل config.js برای شخصی سازی سیستم مستندات استفاده می شود. در ایجاد این سیستم سفارشی ، یک آبجکت که شامل فیلدهای مورد نیاز است صادر می کنیم:
module.exports = {
title: ‘VuePress’,
description: “A demo documentation using VuePress”,
themeConfig:{
nav: [
{ text: ‘COUNTER’, link: ‘/counter/’ },
{ text: ‘GUIDE’, link: ‘/guide/’ },
],
sidebar: [
{
title: ‘Counter’,
collapsable: false,
children: [
‘/counter/counter-app’
]
},
{
title: ‘API Guide’,
collapsable: false,
children: [
‘/guide/guide’,
‘/guide/api’
]
}
]
}
}

ابتدا عنوان وب سایت را مشخص می کنیم و توضیحی را به آن اختصاص می دهیم که برای سئو خوب باشد. این عنوان و توضیحات به طور خودکار یک سیستم جستجوی فهرست شده را در وب سایت با نوار جستجو ارائه می دهد.
مورد بعدی در اسکریپت ، آبجکت themeConfig است که پارامترهای مورد نیاز برای اجرای برخی عملکردهای خاص در تم را دریافت می کند. برای ایجاد نوار ناوبری ، یک آرایه nav ایجاد می کنیم که حاوی آبجکت های مشخص کننده متن و مسیر نمایش هر عنصر nav می باشد. می توانید اطلاعات بیشتری درباره پیکربندی تم پیش فرض را در اینجا مشاهده کنید.
ما از نوارهای کناری طبقه بندی شده استفاده کرده ایم تا کاربران بتوانند هر لحظه در مستندات ، نگاهی سریع به منو داشته باشند. با استفاده از ویژگی collapsable  در گروه نوار کناری ، می توان منوی نوار کناری را به طور پیش فرض روی collapse تنظیم کرد. در اینجا می توانید اطلاعات بیشتری را در نوار کناری بیابید.
اکنون همه چیز تنظیم شده است ، برای شروع یک سرور مجازی توسعه ، دستور زیر را اجرا کنید:
vuepress dev docs

سرور مجازی dev محلی در پورت 8080 میزبانی می شود. VuePress با ویژگی لود مجدد جدید ، اجرای هرگونه تغییر در برنامه را در حین توسعه اعمال می کند.
اگر مؤلفه های Vue در حالت لایو بودن سرور مجازی توسعه محلی ایجاد شوند، ریستارت سرور مجازی توسعه لازم خواهد بود.

اکنون که ما یک سرور مجازی dev در حال اجرا داریم، هدف استقرار سایت خواهد بود. برای تمیز کردن مسائل ، فایل package.json را ویرایش کنید تا شامل دستورات توسعه و همچنین دستورات ساخت باشد. فایل package.json را ویرایش کنید:
{
“name”: “vuepress”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
“keywords”: [],
“author”: “”,
“license”: “MIT”,
“devDependencies”: {
“vuepress”: “^0.5.0”
}
}

برای ساختن فایل های استاتیک ، اکنون می توانیم این دستور را اجرا کنیم:
npm run docs:build

ممکن است ساخت آن مدت زمانی طول بکشد و پس از آن می توانید فایل های استاتیک ساخته شده را در .vuepress / dist پیدا کنید
تغییر استایل
VuePress از فایل های استاتیک و همچنین دارایی های webpack پشتیبانی می کند و توجه میکند که از صحت URL اختصاص داده شده به یک دارایی در نشانه گذاری قبل از ساخت اطمینان حاصل شود. برای مورد ما ، فقط باید رنگ پایه را کمی تغییر دهیم. ما با استفاده از سبک ها رنگ های پیش فرض را باطل می کنیم.
یک فایل جدید به نام override.styl را در Docs / .vuepress ایجاد کنید. در حالی که از اسامی متغیر اختصاص داده شده به رنگ مطابق مستندات رسمی استفاده می کنیم ، اسکریپت override.styl را ویرایش می کنیم تا accentColor را با موارد زیر تغییر دهیم:
$accentColor = #cfa809
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

سرور مجازی توسعه را با دستور زیر مجدد راه اندازی کنید:
npm run docs:dev

توجه داشته باشید که تغییرات ایجاد شده در فایل استایل بلافاصله در مرورگر منعکس می شود.
اکنون سیستم مستندات را با صفحات جداگانه تکمیل کرده ایم.
به کار بردن Netlify
در مرحله بعدی با استفاده از Netlify سایت استاتیک را مستقر می کنید. Netlify با بکارگیری Github یا هر ارائه دهنده کنترل نسخه میزبانی و پشتیبانی شده ، گزینه ادغام مداوم را فراهم می کند. برای استقرار سایت خود در Netlify این مراحل را دنبال کنید:
گام 1
در Github و Netlify یک حساب کاربری ایجاد کنید. کد خود را با استفاده از Git به Github وارد کنید.
گام 2
وارد حساب Netlify خود شوید و گزینه ” New site from Git ” را انتخاب کنید. Github را به عنوان ارائه دهنده توسعه مداوم انتخاب کنید و منبع حاوی مستندات را انتخاب کنید.
گام 3
شعبه را تعیین کنید تا به عنوان master مستقر شوید یا هر شعبه ای را که می خواهید مستقر کنید انتخاب کنید. دستور build را روی npm run docs:build تنظیم کنید: دایرکتوری انتشار را روی  docs/.vuepress/distقرار دهید. روی ” Deploy Site” کلیک کنید. وب سایت شما باید در زمان کمی مستقر شود و یک URL عمومی برای دسترسی به آن فراهم گردد.
در اینجا نسخه مستقر شده از این آموزش در Netlify وجود دارد.
نتیجه
سایت های استاتیک به دلیل سرعت ، امنیت و قابلیت نگهداری مفید هستند. در این آموزش ما با استفاده از VuePress یک وب سایت مستندات استاتیک ایجاد کردیم که یک برنامه تک صفحه ای نیز میباشد. VuePress انعطاف پذیری نوشتن اسکریپت های Vue را در داخل فایل های Markdown ارائه می دهد که پویایی را به سایت های استاتیک ارائه می کند. به راحتی پروژه را اصلاح کنید تا چندین پوشه و فایل های markdown مربوطه را دربر بگیرید.

 

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 –  میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18  –  ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4  –  ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta –  ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) –  با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django –  دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express  –  با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید  –  ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع  –  می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta  –   مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL  –  ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور  –  احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel  –  ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan  –  استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue  –  ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو  –  ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express  –  ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18  –  تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8  –  استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18  –  نصب Linux، Nginx، MariaDB،PHP در Debian 10

 

 

کلمات کلیدی خرید سرور

خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان – 

 

برچسب‌ها:counter, Frontmatter, Google Analytics, guide, markdown, VuePress