SvelteKit آخرین چیزی است که من آن را فریمورک های کاربردی نسل بعدی می نامم. البته، با مسیریابی، استقرار و رندر سمت سرور مبتنی بر فایل که Next برای همیشه انجام داده است، یک برنامه را برای شما داربست میسازد. اما SvelteKit همچنین از طرحبندیهای تودرتو، جهشهای سرور که دادههای صفحه شما را همگامسازی میکند، و برخی موارد زیبایی که به آنها خواهیم پرداخت، پشتیبانی میکند.
این پست قرار است مقدمه ای در سطح بالا باشد تا امیدواریم برای هرکسی که هرگز از SvelteKit استفاده نکرده است کمی هیجان ایجاد کند. این یک تور آرام خواهد بود. اگر آنچه را که می بینید دوست دارید، اسناد کامل اینجا هستند.
از برخی جهات نوشتن این پست چالش برانگیز است. SvelteKit یک چارچوب برنامه. وجود دارد تا به شما در ساختن برنامهها کمک کند. که آن را سخت می کند نسخه ی نمایشی. ساخت یک برنامه کامل در یک پست وبلاگ امکان پذیر نیست. بنابراین در عوض، ما کمی از تخیل خود استفاده خواهیم کرد. ما اسکلت یک برنامه کاربردی را می سازیم، تعدادی متغیر UI خالی و داده های ثابت کدگذاری شده سخت خواهیم داشت. هدف این نیست که یک برنامه واقعی بسازید، بلکه در عوض به شما نشان دهیم که قطعات متحرک SvelteKit چگونه کار می کنند تا بتوانید برنامه کاربردی خود را بسازید.
برای این منظور، ما برنامه آزمایش شده و واقعی To-Do را به عنوان مثال می سازیم. اما نگران نباشید، این برای دیدن نحوه کار SvelteKit بسیار بیشتر از ایجاد یک برنامه To-Do دیگر است.
کد همه چیز در این پست است در GitHub موجود است. این پروژه نیز هست در Vercel مستقر شده است برای نمایش زنده
ایجاد پروژه شما
چرخش یک پروژه جدید SvelteKit به اندازه کافی ساده است. اجرا کن npm create your-app-name
در ترمینال قرار بگیرید و به سؤالات پاسخ دهید. مطمئن شوید که "Skeleton Project" را انتخاب کنید، اما در غیر این صورت هر آنچه را که می خواهید برای TypeScript، ESLint و غیره انتخاب کنید.
پس از ایجاد پروژه، اجرا کنید npm i
و npm run dev
و یک سرور توسعه دهنده باید شروع به کار کند. آتش بزن localhost:5173
در مرورگر و صفحه نگهدارنده برای برنامه اسکلت را دریافت خواهید کرد.
مسیریابی اساسی
توجه کنید routes
پوشه زیر src
. این کد برای همه مسیرهای ما نگه می دارد. قبلاً یک وجود دارد +page.svelte
با محتوایی برای روت در آنجا فایل کنید /
مسیر مهم نیست در کجای سلسله مراتب فایل هستید، صفحه واقعی آن مسیر همیشه دارای نام است +page.svelte
. با در نظر گرفتن آن، بیایید صفحاتی برای آن ایجاد کنیم /list
, /details
, /admin/user-settings
و admin/paid-status
و همچنین برای هر صفحه تعدادی متغیر متنی اضافه کنید.
طرح بندی فایل شما باید چیزی شبیه به این باشد:
باید بتوانید با تغییر مسیرهای URL در نوار آدرس مرورگر، در اطراف حرکت کنید.
طرح بندی
ما پیوندهای ناوبری را در برنامه خود می خواهیم، اما مطمئناً نمی خواهیم نشانه گذاری آنها را در هر صفحه ای که ایجاد می کنیم کپی کنیم. بنابراین، بیایید یک را ایجاد کنیم +layout.svelte
فایل در ریشه ما routes
پوشه، که SvelteKit آن را به عنوان یک الگوی جهانی برای همه صفحات در نظر می گیرد. بیایید و محتوایی به آن اضافه کنیم:
<nav> <ul> <li> <a href="/fa/">Home</a> </li> <li> <a href="/fa/list">To-Do list</a> </li> <li> <a href="/fa/admin/paid-status">Account status</a> </li> <li> <a href="/fa/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
برخی از ناوبری ابتدایی با برخی از سبک های اساسی. از اهمیت ویژه ای برخوردار است <slot />
برچسب زدن این هست نه شکافی که با اجزای وب و سایه DOM استفاده می کنید، بلکه یک ویژگی Svelte است که نشان می دهد محتوای ما را کجا قرار دهیم. هنگامی که یک صفحه رندر می شود، محتوای صفحه در جایی که شکاف است می لغزد.
و اکنون ما کمی ناوبری داریم! ما در هیچ مسابقه طراحی برنده نخواهیم شد، اما تلاش نمی کنیم.
چیدمان های تو در تو
چه میشود اگر بخواهیم همه صفحات مدیریتی ما طرحبندی معمولی را که اخیراً ساختهایم به ارث ببرند، اما برخی از موارد مشترک برای همه صفحات مدیریت (اما فقط صفحات مدیریت) را به اشتراک بگذارند، چه؟ مشکلی نیست، دیگری اضافه می کنیم +layout.svelte
فایل در روت ما admin
دایرکتوری، که توسط هر چیزی که در زیر آن قرار دارد به ارث می رسد. بیایید این کار را انجام دهیم و این محتوا را اضافه کنیم:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
یک بنر قرمز رنگ اضافه می کنیم که نشان می دهد این یک صفحه مدیریت است و سپس مانند قبل، a <slot />
نشان می دهد که ما می خواهیم محتوای صفحه ما به کجا برسد.
طرح ریشه ما از قبل رندر می شود. داخل طرح ریشه یک است <slot />
برچسب زدن محتوای چیدمان تو در تو به چیدمان ریشه می رود <slot />
. و در نهایت، طرح تودرتو خود را تعریف می کند <slot />
، که محتوای صفحه در آن رندر می شود.
اگر به صفحات مدیریت بروید، باید بنر قرمز جدید را ببینید:
تعریف داده های ما
خوب، بیایید برخی از داده های واقعی را ارائه کنیم - یا حداقل، ببینیم چگونه می توانیم برخی از داده های واقعی را ارائه دهیم. صد راه برای ایجاد و اتصال به یک پایگاه داده وجود دارد. این پست در مورد SvelteKit است، اما DynamoDB را مدیریت نمی کند، بنابراین به جای آن، برخی از داده های ثابت را "بارگیری" می کنیم. اما، ما از همه دستگاههای مشابهی برای خواندن و بهروزرسانی آن استفاده میکنیم که شما برای دادههای واقعی استفاده میکنید. برای یک برنامه وب واقعی، توابعی را که دادههای استاتیک را برمیگردانند با توابعی که به هر پایگاه دادهای که استفاده میکنید متصل و پرسوجو میکنند، تعویض کنید.
بیایید یک ماژول ساده برای خاک ایجاد کنیم lib/data/todoData.ts
که برخی از داده های ثابت را همراه با تاخیرهای مصنوعی برای شبیه سازی پرس و جوهای واقعی برمی گرداند. شما این را خواهید دید lib
پوشه وارد شده در جای دیگر از طریق $lib
. این یک ویژگی SvelteKit برای آن پوشه خاص است و حتی می توانید نام مستعار خود را اضافه کنید.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
تابعی برای برگرداندن یک آرایه مسطح از موارد کارهای ما، جستجوی برچسبهای ما، و تابعی برای واکشی یک کار (ما از آخرین مورد در صفحه جزئیات خود استفاده خواهیم کرد).
در حال بارگیری اطلاعات ما
چگونه آن داده ها را به صفحات Svelte خود وارد کنیم؟ چند راه وجود دارد، اما در حال حاضر، اجازه دهید یک را ایجاد کنیم +page.server.js
فایل در ما list
پوشه، و این محتوا را در آن قرار دهید:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
ما a را تعریف کرده ایم load()
تابعی که داده های مورد نیاز صفحه را جذب می کند. توجه کنید که ما هستیم نه await
با ما تماس می گیرد getTodos
و getTags
توابع ناهمگام انجام این کار باعث ایجاد یک آبشار بارگیری داده می شود، زیرا ما منتظر هستیم تا موارد انجام کار قبل از بارگیری برچسب های خود وارد شوند. در عوض، ما وعده های خام را از load
، و SvelteKit کارهای لازم را انجام می دهد await
آنها.
بنابراین، چگونه از مؤلفه صفحه خود به این داده ها دسترسی پیدا کنیم؟ SvelteKit ارائه می دهد data
برای کامپوننت ما با داده های روی آن. ما با استفاده از a به موارد و برچسبهای کارهایمان دسترسی خواهیم داشت تخصیص واکنشی.
کامپوننت صفحه فهرست ما اکنون به این شکل است.
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
و این باید موارد انجام کار ما را ارائه دهد!
گروه های چیدمان
قبل از اینکه به صفحه جزئیات برویم و دادهها را تغییر دهیم، اجازه دهید نگاهی به ویژگی SvelteKit بیاندازیم: گروه های چیدمان. ما قبلاً طرحبندیهای تودرتو برای همه صفحات مدیریت دیدهایم، اما اگر بخواهیم یک طرحبندی را بین صفحات دلخواه در همان سطح سیستم فایل خود به اشتراک بگذاریم، چه؟ به طور خاص، اگر بخواهیم یک طرح بندی را فقط بین صفحه فهرست و صفحه جزئیات خود به اشتراک بگذاریم، چه؟ ما قبلاً یک طرح جهانی در آن سطح داریم. در عوض، میتوانیم یک دایرکتوری جدید ایجاد کنیم، اما با نامی که در پرانتز است، مانند این:
ما اکنون یک گروه طرح بندی داریم که صفحات لیست و جزئیات ما را پوشش می دهد. اسمشو گذاشتم (todo-management)
اما شما می توانید آن را هر چیزی که دوست دارید نام گذاری کنید. برای روشن شدن، این نام خواهد بود نه URL های صفحات داخل گروه طرح بندی را تحت تاثیر قرار می دهد. URL ها ثابت خواهند ماند. گروههای طرحبندی به شما امکان میدهند طرحبندیهای اشتراکگذاری شده را به صفحات اضافه کنید، بدون اینکه همه آنها شامل کل یک فهرست در routes
.
We میتوانست اضافه کردن +layout.svelte
فایل و برخی احمقانه <div>
بنری که روی آن نوشته شده بود، "هی، ما در حال مدیریت کارهای انجام شده هستیم". اما بیایید کار جالب تری انجام دهیم. طرح بندی می تواند تعریف کند load()
توابع به منظور ارائه داده برای تمام مسیرهای زیر آنها. بیایید از این قابلیت برای بارگیری برچسبهای خود استفاده کنیم - زیرا از برچسبهای خود در خود استفاده خواهیم کرد details
صفحه - علاوه بر list
صفحه ای که قبلا داریم
در واقع، اجبار یک گروه طرحبندی فقط برای ارائه یک تکه داده، تقریباً ارزشش را ندارد. بهتر است آن داده ها را در آن کپی کنید load()
عملکرد برای هر صفحه اما برای این پست، بهانه ای برای دیدن یک ویژگی جدید SvelteKit فراهم می کند!
اول، اجازه دهید به ما بروید list
صفحه +page.server.js
فایل و برچسب ها را از آن حذف کنید.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
صفحه فهرست ما اکنون باید خطایی ایجاد کند زیرا وجود ندارد tags
هدف - شی. بیایید این را با اضافه کردن یک حل کنیم +layout.server.js
در گروه layout ما فایل کنید، سپس a را تعریف کنید load()
تابعی که تگ های ما را بارگذاری می کند.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
و درست مثل آن، صفحه فهرست ما دوباره در حال ارائه است!
ما در حال بارگیری داده ها از چندین مکان هستیم
بیایید یک نکته خوب در مورد آنچه در اینجا اتفاق می افتد قرار دهیم:
- ما تعریف کردیم
load()
تابع برای گروه طرح بندی ما که در آن قرار داده ایم+layout.server.js
. - این داده ها را برای تمام از صفحاتی که طرح بندی ارائه می کند - که در این مورد به معنای صفحات لیست و جزئیات ما است.
- صفحه فهرست ما نیز a را تعریف می کند
load()
عملکردی که در آن وجود دارد+page.server.js
فایل. - SvelteKit کار غرغر را انجام می دهد و نتایج این منابع داده را جمع آوری می کند، آنها را با هم ادغام می کند و هر دو را در دسترس قرار می دهد.
data
.
صفحه جزئیات ما
ما از صفحه جزئیات خود برای ویرایش یک مورد کار استفاده خواهیم کرد. ابتدا، بیایید یک ستون به جدول در صفحه فهرست خود اضافه کنیم که به صفحه جزئیات با شناسه مورد کار در رشته پرس و جو پیوند دارد.
<td><a href="/fa/details?id={t.id}">Edit</a></td>
حالا بیایید صفحه جزئیات خود را بسازیم. ابتدا یک لودر اضافه می کنیم تا موردی که در حال ویرایش آن هستیم را بگیرد. ایجاد یک +page.server.js
in /details
، با این محتوا:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
لودر ما با یک url
ویژگی که از آن می توانیم مقادیر رشته کوئری را استخراج کنیم. این کار جستجوی مورد کاری را که در حال ویرایش آن هستیم آسان می کند. بیایید این کار را همراه با قابلیت ویرایش آن ارائه کنیم.
SvelteKit دارای قابلیت های شگفت انگیز جهش داخلی است، به شرطی که از فرم ها استفاده کنید. فرم ها را به خاطر دارید؟ در اینجا صفحه جزئیات ما است. برای اختصار استایل ها را حذف کرده ام.
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
ما برچسبها را مانند قبل از لودر گروه طرحبندی خود و مورد کار را از لودر صفحه خود میگیریم. ما در حال چنگ زدن به واقعی هستیم tag
اشیاء از لیست کارها از شناسه های برچسب و سپس رندر کردن همه چیز. یک فرم با یک ورودی مخفی برای ID و یک ورودی واقعی برای عنوان ایجاد می کنیم. تگ ها را نمایش می دهیم و سپس دکمه ای برای ارسال فرم ارائه می دهیم.
اگر متوجه شدید use:enhance
، که به سادگی به SvelteKit می گوید که از بهبود پیشرونده و Ajax برای ارسال فرم ما استفاده کند. احتمالا همیشه از آن استفاده خواهید کرد.
چگونه ویرایش های خود را ذخیره کنیم؟
توجه کنید action="?/editTodo"
ویژگی روی خود فرم؟ این به ما می گوید که می خواهیم داده های ویرایش شده خود را کجا ارسال کنیم. برای پرونده ما، ما می خواهیم به یک editTodo
"عمل."
بیایید آن را با افزودن موارد زیر به آن ایجاد کنیم +page.server.js
فایلی که از قبل برای جزئیات داریم (که در حال حاضر دارای یک load()
تابع، برای گرفتن کارهای ما):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
اقدامات فرم به ما یک request
شی، که دسترسی به ما را فراهم می کند formData
، که دارای یک get
روش برای فیلدهای فرم مختلف ما ما آن ورودی مخفی را برای مقدار ID اضافه کردیم تا بتوانیم آن را در اینجا بگیریم تا مورد کاری را که در حال ویرایش هستیم جستجو کنیم. ما تاخیر را شبیه سازی می کنیم، جدید را فرا می خوانیم updateTodo()
روش، سپس کاربر را به مسیر هدایت کنید /list
صفحه این updateTodo()
روش فقط داده های استاتیک ما را به روز می کند. در زندگی واقعی شما نوعی به روز رسانی را در هر دیتا استوری که استفاده می کنید اجرا می کنید.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
بیایید آن را امتحان کنیم. ابتدا به صفحه فهرست می رویم:
حالا بیایید روی دکمه Edit برای یکی از موارد کار کلیک کنیم تا صفحه ویرایش در آن ظاهر شود /details
.
ما یک عنوان جدید اضافه می کنیم:
اکنون روی Save کلیک کنید. این باید ما را به وضعیت خودمان برگرداند /list
صفحه، با عنوان کار جدید اعمال شده است.
عنوان جدید چگونه ظاهر شد؟ اتوماتیک بود. هنگامی که ما به تغییر مسیر /list
صفحه، SvelteKit به طور خودکار همه لودرهای ما را مجدداً اجرا کرد، درست همانطور که بدون توجه به این کار انجام می داد. این پیشرفت کلیدی است که فریمورک های برنامه های نسل بعدی مانند SvelteKit، ریمیکسو بعد 13 فراهم کند. به جای اینکه روشی مناسب برای ارائه صفحات به شما ارائه دهند و سپس برای شما آرزوی موفقیت در دریافت هر نقطه پایانی برای به روز رسانی داده ها داشته باشند، جهش داده ها را در کنار بارگذاری داده ها ادغام می کنند و به این دو اجازه می دهند پشت سر هم کار کنند.
چند نکته ممکن است برایتان جالب باشد…
این به روز رسانی جهش چندان چشمگیر به نظر نمی رسد. هر زمان که شما پیمایش کنید، لودرها دوباره اجرا می شوند. اگر یک تغییر مسیر را در اکشن فرم خود اضافه نکرده بودیم، اما در صفحه فعلی باقی می ماندیم، چه؟ SvelteKit به روز رسانی را به صورت عملی مانند قبل انجام می دهد، اما این کار را انجام می دهد هنوز همه لودرهای صفحه فعلی، از جمله لودرهای موجود در طرح(های) صفحه را دوباره اجرا کنید.
آیا می توانیم ابزار هدفمندتری برای بی اعتبار کردن داده های خود داشته باشیم؟ به عنوان مثال، برچسبهای ما ویرایش نشدند، بنابراین در زندگی واقعی نمیخواهیم دوباره آنها را پرس و جو کنیم. بله، چیزی که به شما نشان دادم فقط رفتار فرم های پیش فرض در SvelteKit است. میتوانید رفتار پیشفرض را خاموش کنید ارائه تماس پاسخ به use:enhance
. سپس SvelteKit کتابچه راهنمای کاربر را ارائه می دهد توابع باطل.
بارگیری داده ها در هر مسیریابی به طور بالقوه گران و غیر ضروری است. آیا می توانم این داده ها را مانند ابزارهایی مانند حافظه پنهان پنهان کنم react-query
? بله، فقط متفاوت است. SvelteKit به شما امکان می دهد هدرهای کنترل حافظه پنهان را که وب قبلاً ارائه می دهد تنظیم کنید (و سپس به آنها احترام بگذارید). و من مکانیسمهای باطل کردن حافظه پنهان را در یک پست بعدی پوشش خواهم داد.
هر کاری که ما در طول این مقاله انجام داده ایم از داده های ثابت استفاده می کند و مقادیر را در حافظه تغییر می دهد. اگر میخواهید همه چیز را برگردانید و دوباره شروع کنید، آن را متوقف کرده و دوباره راهاندازی کنید npm run dev
فرآیند گره.
پسگفتار
ما به سختی سطح SvelteKit را خراشیده ایم، اما امیدواریم که شما آنقدر دیده باشید که در مورد آن هیجان زده شوید. من نمی توانم آخرین باری را که توسعه وب را به این اندازه سرگرم کننده پیدا کرده ام، به یاد بیاورم. با مواردی مانند بستهبندی، مسیریابی، SSR و استقرار که همگی خارج از جعبه انجام میشوند، زمان بیشتری را صرف کدنویسی میکنم تا پیکربندی.
در اینجا چند منبع دیگر وجود دارد که می توانید از آنها به عنوان مراحل بعدی یادگیری SvelteKit استفاده کنید:
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- قادر
- درباره ما
- در مورد IT
- دسترسی
- حساب
- عمل
- اقدامات
- آدم
- اضافه
- اضافه
- نشانی
- مدیر سایت
- پیشرفته
- اثر
- معرفی
- اجازه دادن
- در کنار
- قبلا
- همیشه
- مقدار
- و
- دیگر
- پاسخ
- هر کس
- نرم افزار
- کاربرد
- برنامه های کاربردی
- اعمال می شود
- دور و بر
- صف
- مقاله
- مصنوعی
- اختصاص داده
- اتوماتیک
- بطور خودکار
- در دسترس
- در انتظار
- به عقب
- زمینه
- پرچم
- بار
- اساسی
- قبل از
- بهترین
- بهتر
- میان
- بیت
- سیاه پوست
- بلاگ
- پست های وبلاگ
- آبی
- جعبه
- به ارمغان بیاورد
- مرورگر
- اشکالات
- ساختن
- ساخته
- ساخته شده در
- دکمه
- مخزن
- صدا
- تماس ها
- قابلیت های
- مورد
- قطعا
- به چالش کشیدن
- متغیر
- واضح
- رمز
- برنامه نویسی
- رنگ
- ستون
- بیا
- مشترک
- مسابقات
- جزء
- اجزاء
- همایش ها
- اتصال
- اتصال
- کنسول
- محتوا
- مناسب
- میتوانست
- دوره
- پوشش
- را پوشش می دهد
- ایجاد
- ایجاد شده
- ایجاد
- جاری
- در حال حاضر
- داده ها
- پایگاه داده
- به طور پیش فرض
- تعریف می کند
- تاخیر
- تاخیر
- گسترش
- طرح
- جزئیات
- برنامه نویس
- پروژه
- DID
- نمایش دادن
- نمی کند
- عمل
- آیا
- هر
- در جای دیگر
- کافی
- تمام
- کل
- خطا
- و غیره
- حتی
- هر
- همه چیز
- مثال
- برانگیخته
- هیجان
- وجود دارد
- گران
- صادرات
- امکان پذیر است
- ویژگی
- کمی از
- زمینه
- پرونده
- فایل ها
- سرانجام
- پایان
- آتش
- نام خانوادگی
- رفع
- صاف
- پیروی
- برای همیشه
- فرم
- قالب
- اشکال
- یافت
- چارچوب
- از جانب
- کامل
- سرگرمی
- تابع
- قابلیت
- توابع
- دریافت کنید
- گرفتن
- دادن
- دادن
- جهانی
- Go
- هدف
- می رود
- رفتن
- گرفتن
- گروه
- گروه ها
- رخ دادن
- سخت
- هدر
- کمک
- اینجا کلیک نمایید
- پنهان
- سلسله مراتب
- در سطح بالا
- دارای
- خوشبختانه
- افقی
- چگونه
- HTML
- HTTPS
- من می خواهم
- تصورات
- واردات
- اهمیت
- موثر
- in
- از جمله
- اول
- ورودی
- در عوض
- ادغام
- جالب
- معرفی
- IT
- اقلام
- خود
- جاوا اسکریپت
- کلید
- نام
- آخرین
- طرح
- یادگیری
- اجازه می دهد تا
- سطح
- Li
- زندگی
- سبک
- احتمالا
- لینک ها
- فهرست
- زنده
- بار
- بارکننده
- بارگیری
- بارهای
- طولانی
- نگاه کنيد
- مطالب
- مراجعه
- شانس
- دستگاه
- ساخت
- باعث می شود
- ساخت
- مدیریت
- کتابچه راهنمای
- حاشیه
- ماده
- به معنی
- حافظه
- صرفا - فقط
- ادغام
- روش
- قدرت
- ذهن
- ماژول ها
- بیش
- حرکت
- متحرک
- چندگانه
- نام
- تحت عنوان
- نوا
- هدایت
- جهت یابی
- لازم
- نیاز
- جدید
- بعد
- گره
- طبیعی
- عدد
- هدف
- اشیاء
- ONE
- سفارش
- دیگر
- در غیر این صورت
- خود
- ویژه
- مسیر
- انجام
- انتخاب کنید
- قطعه
- قطعات
- حفره یا سوراخ
- افلاطون
- هوش داده افلاطون
- PlatoData
- نقطه
- پست
- پست ها
- بالقوه
- آماده
- مشکل
- روند
- تولید کردن
- مترقی
- پروژه
- وعده
- ویژگی
- محفوظ
- ارائه
- فراهم می کند
- کشد
- قرار دادن
- سوال
- خام
- خواندن
- واقعی
- زندگی واقعی
- واقعیت
- قرمز
- تغییر مسیر
- بدون در نظر گرفتن
- ماندن
- به یاد داشته باشید
- برداشتن
- تفسیر
- ارائه
- درخواست
- منابع
- نتایج
- برگشت
- عودت
- بازده
- برگرداندن
- غنی
- ریشه
- مسیر
- مسیرها
- دویدن
- در حال اجرا
- همان
- ذخیره
- مشاهده
- خدمت
- تنظیم
- سایه
- اشتراک گذاری
- به اشتراک گذاشته شده
- باید
- نشان
- ساده
- به سادگی
- پس از
- تنها
- نمایش
- So
- برخی از
- چیزی
- منابع
- خرج کردن
- شروع
- آغاز شده
- ماند
- مراحل
- توقف
- ارسال
- پشتیبانی از
- سطح
- سیستم
- جدول
- TAG
- گرفتن
- مصرف
- صحبت
- پشت سر هم
- هدف قرار
- می گوید
- قالب
- پایانه
- La
- اشیاء
- سراسر
- زمان
- عنوان
- به
- با هم
- هم
- ابزار
- سفر
- درمان
- درست
- دور زدن
- حروفچینی
- ui
- زیر
- بروزرسانی
- به روز رسانی
- URL
- us
- استفاده کنید
- کاربر
- ارزش
- ارزشها
- مختلف
- از طريق
- چشم انداز
- صبر کنيد
- خواسته
- راه
- وب
- اجزای وب
- توسعه وب
- چی
- که
- سفید
- اراده
- پیروزی
- بدون
- شگفت انگیز
- مهاجرت کاری
- با این نسخهها کار
- با ارزش
- خواهد بود
- نوشتن
- شما
- شما
- زفیرنت