From 159191a543f727c5a56f292c47d9fd649aa05773 Mon Sep 17 00:00:00 2001 From: tahadavari <77568584+tahadavari@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:45:05 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=20fe6cf?= =?UTF-8?q?5e1bf595f3195d6032352b2d4fc27272448=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 8 +- .../DOM-365758e1d888866aac34ed3c7618c25d.png | Bin 0 -> 35187 bytes assets/js/02622542.872fbb86.js | 1 + assets/js/0905dc1d.4fd8aef8.js | 1 + assets/js/0905dc1d.a80cf54e.js | 1 - assets/js/135f9412.ac496ec4.js | 1 + assets/js/1467c75f.c0cff30b.js | 1 + ...b220a.19ed7f43.js => 15bb220a.af6e45a0.js} | 2 +- assets/js/1c7175fc.d33ad623.js | 1 + ...e234f.664a94f2.js => 1cce234f.d078ac01.js} | 2 +- assets/js/2c3c5a7e.99f1154e.js | 1 + assets/js/335a1157.faa09cdd.js | 1 + ...e9b41.16efe8c6.js => 40ee9b41.0f555b88.js} | 2 +- assets/js/4be88686.5b8081cf.js | 1 - assets/js/55960ee5.0d53f0e6.js | 1 - assets/js/55960ee5.b1a57207.js | 1 + assets/js/62981acf.09bfca6f.js | 1 - assets/js/65418e96.b52f9d85.js | 1 + assets/js/75652c1b.daaa13cb.js | 1 - assets/js/75c3f910.396f9937.js | 1 + assets/js/75c3f910.586e24d3.js | 1 - assets/js/7a6c6835.ba27b13a.js | 1 - assets/js/7a6c6835.fcf0dcb3.js | 1 + assets/js/7b80e38e.5534ba73.js | 1 + assets/js/7f4cc17d.677dbde9.js | 1 - assets/js/8251dd08.13e5d51c.js | 1 - assets/js/8251dd08.aadd9c5f.js | 1 + assets/js/935f2afb.04b8c625.js | 1 - assets/js/935f2afb.0e6f9370.js | 1 + assets/js/947a9fd6.43ccb664.js | 1 + ...4c60d.435e9ed4.js => 9a64c60d.025d270c.js} | 2 +- assets/js/a303700d.49cdc83a.js | 1 + assets/js/a3f1f56d.6e3f8a06.js | 1 + assets/js/a6e4b508.283e92d2.js | 1 + assets/js/aeb04cee.1901503a.js | 1 + assets/js/b5bdea31.1be5ef1e.js | 1 + ...34c72.d7778456.js => bcd34c72.a83c4a3a.js} | 2 +- assets/js/be2c5105.2e8d8026.js | 1 - assets/js/be2c5105.89598dd8.js | 1 + assets/js/bfb1565e.88e6c0cc.js | 1 + assets/js/bfb1565e.a74fa07d.js | 1 - assets/js/ca5d7680.b955a397.js | 1 + assets/js/cb55dfd8.37cfb985.js | 1 - assets/js/ce6cf6db.30451355.js | 1 - ...33b0d.00f5c9bf.js => dd933b0d.d03edf4f.js} | 2 +- assets/js/df2fb5a6.15c204c9.js | 1 + assets/js/e5164cfe.fcfbf950.js | 1 - assets/js/eb849422.8303b33c.js | 1 + assets/js/main.135696e9.js | 2 - assets/js/main.2a888a66.js | 2 + ...CENSE.txt => main.2a888a66.js.LICENSE.txt} | 0 assets/js/runtime~main.57773aa7.js | 1 + assets/js/runtime~main.e49e464e.js | 1 - blog/archive/index.html | 8 +- blog/first-blog-post/index.html | 8 +- blog/index.html | 8 +- blog/long-blog-post/index.html | 8 +- blog/mdx-blog-post/index.html | 8 +- blog/tags/docusaurus/index.html | 8 +- blog/tags/facebook/index.html | 8 +- blog/tags/hello/index.html | 8 +- blog/tags/hola/index.html | 8 +- blog/tags/index.html | 8 +- blog/welcome/index.html | 8 +- docs/Roadmaps/index.html | 10 +- docs/frontend/angular/index.html | 279 ------------------ docs/frontend/index.html | 10 +- docs/frontend/phase01-sandbox/index.html | 78 +++++ docs/frontend/phase02-pilot/index.html | 107 +++++++ docs/frontend/phase03-ui-ux/index.html | 12 +- docs/frontend/phase04-css-and-sass/index.html | 10 +- docs/frontend/phase05-animation/index.html | 10 +- docs/frontend/phase06-clean-code/index.html | 12 +- docs/frontend/phase07-ci-cd/index.html | 42 +++ .../phase08-authentication/index.html | 12 +- docs/frontend/phase09-test/index.html | 112 +++++++ docs/frontend/phase09-unit-testing/index.html | 47 --- docs/frontend/phase10-dom/index.html | 67 +++++ docs/frontend/phase11-typescript/index.html | 154 ++++++++++ docs/general/index.html | 10 +- docs/general/phase01-presentation/index.html | 10 +- docs/general/phase02-grammar/index.html | 10 +- docs/intro/index.html | 10 +- docs/intro/phase01-onboarding/index.html | 10 +- docs/intro/phase02-health/index.html | 10 +- docs/intro/phase03-non-tech/index.html | 10 +- docs/intro/phase04-git/index.html | 10 +- docs/meetings/04-1-1/index.html | 21 ++ docs/meetings/ama/index.html | 27 ++ docs/meetings/coffee-chat/index.html | 23 ++ docs/meetings/daily/index.html | 52 ++++ docs/meetings/gathering/index.html | 21 ++ docs/meetings/index.html | 18 ++ docs/project/index.html | 10 +- docs/project/phase01-etl/index.html | 12 +- docs/project/star-sprint-project/index.html | 60 ++++ docs/roadmaps/Backend/index.html | 10 +- docs/roadmaps/DevOps/index.html | 10 +- docs/roadmaps/Frontend/index.html | 10 +- docs/software-engineering/index.html | 10 +- .../index.html | 221 +++++++++----- .../phase01-simple-project/index.html | 44 --- .../phase02-clean-code/index.html | 36 --- .../index.html | 83 ++++++ .../phase03-clean-code/index.html | 68 +++++ .../phase04-unit-test/index.html | 107 +++++-- .../phase05-tdd/index.html | 39 +-- .../phase06-cicd/index.html | 20 +- .../phase07-SQL/index.html | 10 +- .../phase08-EFCore/index.html | 12 +- .../index.html | 10 +- .../phase08-optional02-nest/index.html | 10 +- .../phase09-web/index.html | 10 +- docs/tags/index.html | 10 +- docs/tags/node-js/index.html | 18 -- docs/tags/readonly/index.html | 8 +- docs/tags/{angular => sandbox}/index.html | 12 +- index.html | 8 +- sitemap.xml | 2 +- 119 files changed, 1429 insertions(+), 779 deletions(-) create mode 100644 assets/images/DOM-365758e1d888866aac34ed3c7618c25d.png create mode 100644 assets/js/02622542.872fbb86.js create mode 100644 assets/js/0905dc1d.4fd8aef8.js delete mode 100644 assets/js/0905dc1d.a80cf54e.js create mode 100644 assets/js/135f9412.ac496ec4.js create mode 100644 assets/js/1467c75f.c0cff30b.js rename assets/js/{15bb220a.19ed7f43.js => 15bb220a.af6e45a0.js} (55%) create mode 100644 assets/js/1c7175fc.d33ad623.js rename assets/js/{1cce234f.664a94f2.js => 1cce234f.d078ac01.js} (68%) create mode 100644 assets/js/2c3c5a7e.99f1154e.js create mode 100644 assets/js/335a1157.faa09cdd.js rename assets/js/{40ee9b41.16efe8c6.js => 40ee9b41.0f555b88.js} (99%) delete mode 100644 assets/js/4be88686.5b8081cf.js delete mode 100644 assets/js/55960ee5.0d53f0e6.js create mode 100644 assets/js/55960ee5.b1a57207.js delete mode 100644 assets/js/62981acf.09bfca6f.js create mode 100644 assets/js/65418e96.b52f9d85.js delete mode 100644 assets/js/75652c1b.daaa13cb.js create mode 100644 assets/js/75c3f910.396f9937.js delete mode 100644 assets/js/75c3f910.586e24d3.js delete mode 100644 assets/js/7a6c6835.ba27b13a.js create mode 100644 assets/js/7a6c6835.fcf0dcb3.js create mode 100644 assets/js/7b80e38e.5534ba73.js delete mode 100644 assets/js/7f4cc17d.677dbde9.js delete mode 100644 assets/js/8251dd08.13e5d51c.js create mode 100644 assets/js/8251dd08.aadd9c5f.js delete mode 100644 assets/js/935f2afb.04b8c625.js create mode 100644 assets/js/935f2afb.0e6f9370.js create mode 100644 assets/js/947a9fd6.43ccb664.js rename assets/js/{9a64c60d.435e9ed4.js => 9a64c60d.025d270c.js} (64%) create mode 100644 assets/js/a303700d.49cdc83a.js create mode 100644 assets/js/a3f1f56d.6e3f8a06.js create mode 100644 assets/js/a6e4b508.283e92d2.js create mode 100644 assets/js/aeb04cee.1901503a.js create mode 100644 assets/js/b5bdea31.1be5ef1e.js rename assets/js/{bcd34c72.d7778456.js => bcd34c72.a83c4a3a.js} (98%) delete mode 100644 assets/js/be2c5105.2e8d8026.js create mode 100644 assets/js/be2c5105.89598dd8.js create mode 100644 assets/js/bfb1565e.88e6c0cc.js delete mode 100644 assets/js/bfb1565e.a74fa07d.js create mode 100644 assets/js/ca5d7680.b955a397.js delete mode 100644 assets/js/cb55dfd8.37cfb985.js delete mode 100644 assets/js/ce6cf6db.30451355.js rename assets/js/{dd933b0d.00f5c9bf.js => dd933b0d.d03edf4f.js} (99%) create mode 100644 assets/js/df2fb5a6.15c204c9.js delete mode 100644 assets/js/e5164cfe.fcfbf950.js create mode 100644 assets/js/eb849422.8303b33c.js delete mode 100644 assets/js/main.135696e9.js create mode 100644 assets/js/main.2a888a66.js rename assets/js/{main.135696e9.js.LICENSE.txt => main.2a888a66.js.LICENSE.txt} (100%) create mode 100644 assets/js/runtime~main.57773aa7.js delete mode 100644 assets/js/runtime~main.e49e464e.js delete mode 100644 docs/frontend/angular/index.html create mode 100644 docs/frontend/phase01-sandbox/index.html create mode 100644 docs/frontend/phase02-pilot/index.html create mode 100644 docs/frontend/phase07-ci-cd/index.html create mode 100644 docs/frontend/phase09-test/index.html delete mode 100644 docs/frontend/phase09-unit-testing/index.html create mode 100644 docs/frontend/phase10-dom/index.html create mode 100644 docs/frontend/phase11-typescript/index.html create mode 100644 docs/meetings/04-1-1/index.html create mode 100644 docs/meetings/ama/index.html create mode 100644 docs/meetings/coffee-chat/index.html create mode 100644 docs/meetings/daily/index.html create mode 100644 docs/meetings/gathering/index.html create mode 100644 docs/meetings/index.html create mode 100644 docs/project/star-sprint-project/index.html rename docs/software-engineering/{phase03-c-sharp => phase01-c-sharp}/index.html (60%) delete mode 100644 docs/software-engineering/phase01-simple-project/index.html delete mode 100644 docs/software-engineering/phase02-clean-code/index.html create mode 100644 docs/software-engineering/phase02-full-text-search-project/index.html create mode 100644 docs/software-engineering/phase03-clean-code/index.html delete mode 100644 docs/tags/node-js/index.html rename docs/tags/{angular => sandbox}/index.html (67%) diff --git a/404.html b/404.html index 6d458a89..526b6a16 100644 --- a/404.html +++ b/404.html @@ -6,13 +6,13 @@ صفحه ای که دنبال آن بودید پیدا نشد. | آکادمی ستاره - - + +
پرش به مطلب اصلی

صفحه ای که دنبال آن بودید پیدا نشد.

صفحه‌ای که دنبال آن بودید پیدا نشد.

لطفا با صاحب وبسایت تماس بگیرید و ایشان را از مشکل پیش آمده مطلع کنید.

- - + + \ No newline at end of file diff --git a/assets/images/DOM-365758e1d888866aac34ed3c7618c25d.png b/assets/images/DOM-365758e1d888866aac34ed3c7618c25d.png new file mode 100644 index 0000000000000000000000000000000000000000..83d81329ebe44b5992e0dc0ec9f58519b7182cca GIT binary patch literal 35187 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 literal 0 HcmV?d00001 diff --git a/assets/js/02622542.872fbb86.js b/assets/js/02622542.872fbb86.js new file mode 100644 index 00000000..c8daf8a8 --- /dev/null +++ b/assets/js/02622542.872fbb86.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcodestar_documents=self.webpackChunkcodestar_documents||[]).push([[5224],{3905:(e,n,t)=>{t.d(n,{Zo:()=>u,kt:()=>d});var a=t(7294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var p=a.createContext({}),s=function(e){var n=a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},u=function(e){var n=s(e.components);return a.createElement(p.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},m=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),m=s(t),d=r,k=m["".concat(p,".").concat(d)]||m[d]||c[d]||l;return t?a.createElement(k,i(i({ref:n},u),{},{components:t})):a.createElement(k,i({ref:n},u))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var l=t.length,i=new Array(l);i[0]=m;var o={};for(var p in n)hasOwnProperty.call(n,p)&&(o[p]=n[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>i,default:()=>c,frontMatter:()=>l,metadata:()=>o,toc:()=>s});var a=t(7462),r=(t(7294),t(3905));const l={title:"Sandbox",description:"When I was a kid, my mom used to just throw me into a pile of broken glass!",tags:["Sandbox"]},i=void 0,o={unversionedId:"frontend/phase01-sandbox",id:"frontend/phase01-sandbox",title:"Sandbox",description:"When I was a kid, my mom used to just throw me into a pile of broken glass!",source:"@site/docs/frontend/phase01-sandbox.md",sourceDirName:"frontend",slug:"/frontend/phase01-sandbox",permalink:"/codestar-documents/docs/frontend/phase01-sandbox",draft:!1,editUrl:"https://github.com/Star-Academy/codestar-documents/tree/master/docs/frontend/phase01-sandbox.md",tags:[{label:"Sandbox",permalink:"/codestar-documents/docs/tags/sandbox"}],version:"current",frontMatter:{title:"Sandbox",description:"When I was a kid, my mom used to just throw me into a pile of broken glass!",tags:["Sandbox"]},sidebar:"tutorialSidebar",previous:{title:"\u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f",permalink:"/codestar-documents/docs/frontend"},next:{title:"Pilot",permalink:"/codestar-documents/docs/frontend/phase02-pilot"}},p={},s=[{value:"\u0645\u0642\u062f\u0645\u0647",id:"\u0645\u0642\u062f\u0645\u0647",level:2},{value:"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc",id:"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc",level:2},{value:"\u0645\u062a\u063a\u06cc\u0631\u0647\u0627",id:"\u0645\u062a\u063a\u06cc\u0631\u0647\u0627",level:3},{value:"var",id:"var",level:4},{value:"let",id:"let",level:4},{value:"const",id:"const",level:4},{value:"Regular Function vs Arrow Function",id:"regular-function-vs-arrow-function",level:3},{value:"this",id:"this",level:4},{value:"Constructor",id:"constructor",level:4},{value:"arguments & args",id:"arguments--args",level:4},{value:"return",id:"return",level:4},{value:"Modules",id:"modules",level:3},{value:"type",id:"type",level:4},{value:"\u0645\u0632\u0627\u06cc\u0627",id:"\u0645\u0632\u0627\u06cc\u0627",level:4},{value:"import & export",id:"import--export",level:4},{value:"Node.js & npm",id:"nodejs--npm",level:3},{value:"Setup",id:"setup",level:4},{value:"Package Installation",id:"package-installation",level:4},{value:"Prettier",id:"prettier",level:4},{value:"ESLint",id:"eslint",level:4}],u={toc:s};function c(e){let{components:n,...t}=e;return(0,r.kt)("wrapper",(0,a.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("mdxAdmonitionTitle",{parentName:"admonition"},"\u0627\u06cc\u0646 \u0641\u0627\u0632\u060c \u06cc\u06a9\u06cc \u0627\u0632 \u0641\u0627\u0632\u0647\u0627\u06cc ",(0,r.kt)("inlineCode",{parentName:"mdxAdmonitionTitle"},"Sandbox")," \u0627\u0633\u062a."),(0,r.kt)("p",{parentName:"admonition"},"\u0628\u0647 \u0641\u0627\u0632\u0647\u0627\u06cc\u06cc ",(0,r.kt)("inlineCode",{parentName:"p"},"Sandbox")," \u0645\u06cc\u200c\u06af\u0648\u06cc\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0631\u0628\u0648\u0637 \u0646\u0645\u06cc\u200c\u0634\u0648\u0646\u062f\n\u0648 \u062f\u0631 \u06a9\u0627\u0631\u06af\u0627\u0647\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u0628\u0631\u06af\u0632\u0627\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u062f\u0631\u0633 \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0627\u06cc\u0632\u0648\u0644\u0647 \u0628\u0647 \u062a\u062f\u0631\u06cc\u0633 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f.\n\u0627\u0644\u0628\u062a\u0647 \u0627\u06cc\u0646 \u0628\u0647 \u0622\u0646 \u0645\u0639\u0646\u0627 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u0632\u0647\u0627 \u0646\u06a9\u0627\u062a \u06a9\u0645\u200c\u0627\u0647\u0645\u06cc\u062a\u06cc \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b\n\u0628\u0644\u06a9\u0647 \u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u0646\u06a9\u0627\u062a \u0645\u0647\u0645\u06cc \u062a\u0639\u0628\u06cc\u0647 \u0634\u062f\u0647 \u06a9\u0647 \u062f\u0631 \u0641\u0627\u0632\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0642\u0627\u0628\u0644 \u0628\u06cc\u0627\u0646 \u0646\u0628\u0648\u062f\u0646\u062f.")),(0,r.kt)("h2",{id:"\u0645\u0642\u062f\u0645\u0647"},"\u0645\u0642\u062f\u0645\u0647"),(0,r.kt)("p",null,"\u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u0632 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0646\u06a9\u0627\u062a \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u0645\u0647\u0645 \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u0645\n\u06a9\u0647 \u062f\u0631 \u0627\u062f\u0627\u0645\u06c0 \u06a9\u0627\u0631 \u0628\u0647 \u06a9\u0645\u06a9 \u0645\u0627 \u062e\u0648\u0627\u0647\u0646\u062f \u0622\u0645\u062f."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"\u0686\u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u0633\u0647 \u0639\u0628\u0627\u0631\u062a ",(0,r.kt)("inlineCode",{parentName:"li"},"var")," \u0648 ",(0,r.kt)("inlineCode",{parentName:"li"},"let")," \u0648 ",(0,r.kt)("inlineCode",{parentName:"li"},"const")," \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u061f"),(0,r.kt)("li",{parentName:"ul"},"\u062a\u0641\u0627\u0648\u062a Function \u0628\u0627 Arrow Function \u0686\u06cc\u0633\u062a\u061f"),(0,r.kt)("li",{parentName:"ul"},"\u0645\u0641\u0647\u0648\u0645 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f ",(0,r.kt)("inlineCode",{parentName:"li"},"this")," \u0686\u06cc\u0633\u062a\u061f"),(0,r.kt)("li",{parentName:"ul"},"\u0635\u0641\u062a ",(0,r.kt)("inlineCode",{parentName:"li"},"type")," \u062f\u0631 \u062a\u06af ",(0,r.kt)("inlineCode",{parentName:"li"},"script")," \u0686\u06cc\u0633\u062a\u061f"),(0,r.kt)("li",{parentName:"ul"},"\u0686\u0637\u0648\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u06a9\u062f\u06cc \u06a9\u0647 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0646\u0648\u0634\u062a\u0647\u200c\u0627\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u061f"),(0,r.kt)("li",{parentName:"ul"},"\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u06a9\u062f \u0686\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u061f")),(0,r.kt)("hr",null),(0,r.kt)("h2",{id:"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc"},"\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc"),(0,r.kt)("h3",{id:"\u0645\u062a\u063a\u06cc\u0631\u0647\u0627"},"\u0645\u062a\u063a\u06cc\u0631\u0647\u0627"),(0,r.kt)("p",null,"\u0642\u0628\u0644 \u0627\u0632 \u0633\u0627\u0644 2015 \u0645\u06cc\u0644\u0627\u062f\u06cc\u060c \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 JavaScript \u062a\u0646\u0647\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u0645 \u0627\u0632 ",(0,r.kt)("inlineCode",{parentName:"p"},"var")," \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.\n\u0627\u0645\u0627 \u0628\u0627 \u0645\u0639\u0631\u0641\u06cc ES6 \u0639\u0628\u0627\u0631\u062a\u200c\u0647\u0627\u06cc ",(0,r.kt)("inlineCode",{parentName:"p"},"let")," \u0648 ",(0,r.kt)("inlineCode",{parentName:"p"},"const")," \u0646\u06cc\u0632 \u0628\u0647 \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0645\u062e\u062a\u0635\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645."),(0,r.kt)("h4",{id:"var"},"var"),(0,r.kt)("p",null,"\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0639\u0628\u0627\u0631\u062a ",(0,r.kt)("inlineCode",{parentName:"p"},"var")," \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c\n\u0622\u0646 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 Global Scope \u06cc\u0627 \u0646\u0632\u062f\u06cc\u06a9\u200c\u062a\u0631\u06cc\u0646 Function Scope \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f."),(0,r.kt)("p",null,"\u0628\u0647 \u0639\u0646\u0648\u0646 \u0645\u062b\u0627\u0644 \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0632\u06cc\u0631:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"function defineAndPrintName() {\n if (true) {\n var name = 'Bijan';\n console.log(`inner scope -> name: ${name}`);\n }\n\n console.log(`outer scope -> name: ${name}`);\n}\n\ndefineAndPrintName();\n")),(0,r.kt)("p",null,"\u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-text"},"inner scope -> name: Bijan\nouter scope -> name: Bijan\n")),(0,r.kt)("p",null,"\u0686\u0631\u0627 \u06a9\u0647 \u0645\u062a\u063a\u06cc\u0631 ",(0,r.kt)("inlineCode",{parentName:"p"},"name")," \u062f\u0627\u062e\u0644 \u0627\u0633\u06a9\u0648\u067e\u0650 \u062a\u0627\u0628\u0639\u0650 ",(0,r.kt)("inlineCode",{parentName:"p"},"defineAndPrintName")," \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f."),(0,r.kt)("p",null,"\u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 Scope\u0647\u0627 \u062f\u0631 JavaScript \u0628\u0627 \u0622\u06a9\u0644\u0627\u062f \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\n\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 ",(0,r.kt)("inlineCode",{parentName:"p"},"if (true)")," \u0646\u062f\u0627\u0631\u06cc\u0645."),(0,r.kt)("h4",{id:"let"},"let"),(0,r.kt)("p",null,"\u0628\u0631\u062e\u0644\u0627\u0641 ",(0,r.kt)("inlineCode",{parentName:"p"},"var"),"\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0632 ",(0,r.kt)("inlineCode",{parentName:"p"},"let")," \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c\n\u0622\u0646 \u0645\u062a\u063a\u06cc\u0631 \u062f\u0631 Scope \u0641\u0639\u0644\u06cc \u0645\u062d\u062f\u0648\u062f \u0645\u06cc\u200c\u0634\u0648\u062f."),(0,r.kt)("p",null,"\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0632\u06cc\u0631:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"function defineAndPrintName() {\n {\n let name = 'Bijan';\n console.log(`inner scope -> name: ${name}`);\n }\n\n console.log(`outer scope -> name: ${name}`);\n}\n\ndefineAndPrintName();\n")),(0,r.kt)("p",null,"\u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-text"},"inner scope -> name: Bijan\nReferenceError: name is not defined\n")),(0,r.kt)("h4",{id:"const"},"const"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"const"),"\n\u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0627\u0646\u0646\u062f ",(0,r.kt)("inlineCode",{parentName:"p"},"let")," \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0628\u0627 \u0627\u06cc\u0646 \u062a\u0641\u0627\u0648\u062a \u06a9\u0647 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u06a9\u0631\u062f.\n\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0645\u0642\u062f\u0627\u0631\u06cc \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u06cc\u0686\u200c\u0648\u0642\u062a \u0646\u0628\u0627\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f\u060c\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ",(0,r.kt)("inlineCode",{parentName:"p"},"const")," \u0628\u0627\u0639\u062b \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f\u061b\n\u0647\u0645\u0686\u0646\u06cc\u0646 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0634\u062e\u0635 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u062f \u0631\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0646\u062f\u060c\n\u0628\u0627 \u062f\u06cc\u062f\u0646 ",(0,r.kt)("inlineCode",{parentName:"p"},"const")," \u0645\u0637\u0645\u0626\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.\n\u0645\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0627\u0632 ",(0,r.kt)("inlineCode",{parentName:"p"},"const")," \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\n\u0648 \u062a\u0646\u0647\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 ",(0,r.kt)("inlineCode",{parentName:"p"},"let")," \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f."),(0,r.kt)("p",null,"\u0628\u0631\u0627\u06cc \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://ui.dev/var-let-const/"},"var vs let vs const in JavaScript")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://medium.com/infancyit/difference-between-var-let-and-const-in-es6-16a08d74b8b2"},"Medium - Difference Between Var, Let and Const in ES6")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/"},"freeCodeCamp - Var, Let, and Const \u2013 What's the Difference?"))),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"regular-function-vs-arrow-function"},"Regular Function vs Arrow Function"),(0,r.kt)("p",null,"\u062f\u0631 JavaScript \u0628\u0647 \u062f\u0648 \u0634\u06a9\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"function sayHello(name) {\n console.log(`hello, ${name}!`);\n}\n\n// or\n\nconst sayHello = (name) => {\n console.log(`hello, ${name}!`);\n};\n")),(0,r.kt)("p",null,"\u06a9\u0647 \u0628\u0647 \u0646\u0648\u0639 \u0627\u0648\u0644 Regular Function \u0648 \u0628\u0647 \u0646\u0648\u0639 \u062f\u0648\u0645 Arrow Function \u06af\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.\n\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u062a\u0641\u0627\u0648\u062a \u0627\u06cc\u0646 \u062f\u0648 \u0631\u0648\u0634 \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f\u06cc\u0645."),(0,r.kt)("h4",{id:"this"},"this"),(0,r.kt)("p",null,"\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0632 Regular Function \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0645\u0642\u062f\u0627\u0631 ",(0,r.kt)("inlineCode",{parentName:"p"},"this")," \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0645\u06a9\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0627\u0628\u0639 \u0627\u0632 \u0622\u0646\u062c\u0627 \u0635\u062f\u0627 \u0632\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a.\n\u0627\u0645\u0627 \u0627\u06af\u0631 \u0627\u0632 Arrow Function \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u0647\u0645\u0648\u0627\u0631\u0647 \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 \u0634\u06cc\u0626\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"const regularFunctionWrapper = {\n whatIsThis: function () {\n console.log(this); // regularFunctionWrapper\n },\n};\n\nconst arrowFunctionWrapper = {\n whatIsThis: () => {\n console.log(this); // globalThis\n },\n};\n\nregularFunctionWrapper.whatIsThis();\narrowFunctionWrapper.whatIsThis();\n")),(0,r.kt)("h4",{id:"constructor"},"Constructor"),(0,r.kt)("p",null,"\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0628\u0647 JavaScript \u0628\u06cc\u0627\u06cc\u0646\u062f\u060c \u0627\u0632 Regular Function \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Constructor \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u062f:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"function Circle(radius) {\n this.radius = radius;\n\n this.printArea = function () {\n console.log('area', Math.PI * Math.pow(this.radius, 2));\n };\n}\n\nconst small = new Circle(10);\nconst large = new Circle(100);\n\nsmall.printArea();\nlarge.printArea();\n")),(0,r.kt)("h4",{id:"arguments--args"},"arguments & args"),(0,r.kt)("p",null,"\u062f\u0631 Regular Function \u06cc\u06a9 \u06a9\u0644\u06cc\u062f\u0648\u0627\u0698\u0647 \u0628\u0647 \u0646\u0627\u0645 arguments \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631\u0648\u0627\u0642\u0639 \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u06cc\u200c\u0628\u0627\u0634\u062f\u061b\n\u062f\u0631 Arrow Function \u0647\u0645 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0627\u06cc\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0627\u0645\u0627 \u0628\u0627\u06cc\u062f \u0635\u0631\u0627\u062d\u062a\u0627\u064b \u062f\u0631 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639 \u0628\u0647 \u0622\u0646 \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u06cc\u0645:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"function regularFunctionSum() {\n let result = 0;\n\n for (const n of arguments) {\n if (!isNaN(n)) result += n;\n }\n\n return result;\n}\n\nconst arrowFunctionSum = (...args) => {\n let result = 0;\n\n for (const n of args) {\n if (!isNaN(n)) result += n;\n }\n\n return result;\n};\n\nconsole.log('Regular Function', regularFunctionSum(4, 8, 15, 16, 23, 42)); // 108\nconsole.log('Arrow Function', arrowFunctionSum(4, 8, 15, 16, 23, 42)); // 108\n")),(0,r.kt)("h4",{id:"return"},"return"),(0,r.kt)("p",null,"\u062f\u0631 Arrow Function \u0627\u06af\u0631 \u0628\u062f\u0646\u06c0 \u062a\u0627\u0628\u0639 \u0641\u0642\u0637 \u0634\u0627\u0645\u0644 \u06cc\u06a9 Expression \u0628\u0627\u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u062f\u0648\u0646\u0650 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u06a9\u0644\u0627\u062f \u0648 return \u0646\u0648\u0634\u062a:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"const rand = (min, max) => Math.floor(Math.random() * (max - min) + min);\n\nconsole.log(rand(4, 42));\n")),(0,r.kt)("p",null,"\u0628\u0631\u0627\u06cc \u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/"},"5 Differences Between Arrow and Regular Functions")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/"},"freeCodeCamp - When (and why) you should use ES6 arrow functions \u2014 and when you shouldn\u2019t"))),(0,r.kt)("hr",null),(0,r.kt)("h3",{id:"modules"},"Modules"),(0,r.kt)("h4",{id:"type"},"type"),(0,r.kt)("p",null,"\u06cc\u06a9\u06cc \u0627\u0632 \u0635\u0641\u0627\u062a\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647 \u062a\u06af ",(0,r.kt)("inlineCode",{parentName:"p"},"script")," \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u060c ",(0,r.kt)("inlineCode",{parentName:"p"},"type")," \u0627\u0633\u062a\u061b\n\u0627\u06cc\u0646 \u0635\u0641\u062a \u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0627\u0633\u0645\u0634 \u067e\u06cc\u062f\u0627\u0633\u062a\u060c \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627 \u06a9\u062f \u0634\u0645\u0627 \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u062f.\n\u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062a\u0646\u0648\u0639\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc ",(0,r.kt)("inlineCode",{parentName:"p"},"type")," \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a \u0627\u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0641\u0642\u0637 \u0628\u0647 ",(0,r.kt)("inlineCode",{parentName:"p"},"module")," \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html"},'

آرشیو

آرشیو

2019

2021

- - + + \ No newline at end of file diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 42895ac8..6c98960a 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -6,13 +6,13 @@ First Blog Post | آکادمی ستاره - - + +

First Blog Post

· خواندن ۱ دقیقه
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- - + + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 7fb29774..bbdbac21 100644 --- a/blog/index.html +++ b/blog/index.html @@ -6,13 +6,13 @@ Blog | آکادمی ستاره - - + +

· خواندن ۱ دقیقه
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· خواندن ۱ دقیقه
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- - + + \ No newline at end of file diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 94d972f3..c9ef89c9 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -6,13 +6,13 @@ Long Blog Post | آکادمی ستاره - - + +

Long Blog Post

· خواندن 3 دقیقه
Endilie Yacop Sucipto

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- - + + \ No newline at end of file diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 20ea317b..45cc5749 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -6,13 +6,13 @@ MDX Blog Post | آکادمی ستاره - - + +

MDX Blog Post

· خواندن ۱ دقیقه
Sébastien Lorber

Blog posts support Docusaurus Markdown features, such as MDX.

tip

Use the power of React to create interactive blog posts.

<button onClick={() => alert('button clicked!')}>Click me!</button>
- - + + \ No newline at end of file diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index c62ffe7a..2de5fe9d 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -6,13 +6,13 @@ 4 پست با برچسب "docusaurus" | آکادمی ستاره - - + +

4 پست با برچسب "docusaurus"

مشاهده تمام برچسب‌ها

· خواندن ۱ دقیقه
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· خواندن ۱ دقیقه
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- - + + \ No newline at end of file diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index e327b273..2df3f969 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -6,13 +6,13 @@ یک پست با برچسب "facebook" | آکادمی ستاره - - + +

یک پست با برچسب "facebook"

مشاهده تمام برچسب‌ها

· خواندن ۱ دقیقه
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- - + + \ No newline at end of file diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index ad619eac..0345aa6b 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -6,13 +6,13 @@ 2 پست با برچسب "hello" | آکادمی ستاره - - + +

2 پست با برچسب "hello"

مشاهده تمام برچسب‌ها

· خواندن ۱ دقیقه
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- - + + \ No newline at end of file diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 47879097..fb6cd058 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -6,13 +6,13 @@ یک پست با برچسب "hola" | آکادمی ستاره - - + +

یک پست با برچسب "hola"

مشاهده تمام برچسب‌ها

· خواندن ۱ دقیقه
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- - + + \ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index db01526b..a3d0672b 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -6,13 +6,13 @@ برچسب‌ها | آکادمی ستاره - - + +

برچسب‌ها

- - + + \ No newline at end of file diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 0b1dd41a..54e10603 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -6,13 +6,13 @@ Welcome | آکادمی ستاره - - + +

Welcome

· خواندن ۱ دقیقه
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- - + + \ No newline at end of file diff --git a/docs/Roadmaps/index.html b/docs/Roadmaps/index.html index b753ef92..aa218ffa 100644 --- a/docs/Roadmaps/index.html +++ b/docs/Roadmaps/index.html @@ -6,13 +6,13 @@ مسیرهای یادگیری | آکادمی ستاره - - + +
-

مسیرهای یادگیری

- - +

مسیرهای یادگیری

+ + \ No newline at end of file diff --git a/docs/frontend/angular/index.html b/docs/frontend/angular/index.html deleted file mode 100644 index 01e2f8e1..00000000 --- a/docs/frontend/angular/index.html +++ /dev/null @@ -1,279 +0,0 @@ - - - - - - - -Angular | آکادمی ستاره - - - - -
-

Angular

Web Frameworks​

یک فریمورک وب مجموعه‌ای از ابزارها، کتابخانه‌ها و الگوهای آماده است که برای توسعه سریع‌تر و کارآمدتر برنامه‌های وب -استفاده می‌شود. این فریمورک‌ها ساختار و چارچوبی مشخص فراهم می‌کنند که به توسعه‌دهندگان کمک می‌کند تا کدهای خود را به‌طور -سازمان‌یافته بنویسند، وظایف رایج مانند مسیریابی، مدیریت وضعیت، و تعامل با سرور را ساده کنند و همچنین از ابزارهای -بهینه‌سازی و تست برای بهبود کیفیت و عملکرد برنامه‌ها بهره‌مند شوند. -استفاده از فریمورک‌های وب مانند -React -و -Angular -به دلیل فراهم کردن ساختار و الگوی مشخص، افزایش بهره‌وری و سرعت توسعه، وجود جامعه‌ی کاربری بزرگ و پشتیبانی، و بهینه‌سازی -عملکرد کد توصیه می‌شود. این فریمورک‌ها مدیریت پروژه‌های بزرگ‌تر و پیچیده‌تر را آسان‌تر کرده و ابزارهای مناسبی برای تست و -نگهداری کد فراهم می‌کنند. در مقابل، جاوااسکریپت خام برای پروژه‌های کوچک مناسب‌تر است و در پروژه‌های بزرگ به سرعت پیچیده -می‌شود.

چرا Angular​

از این فریمورک استفاده می‌کنیم چون ساختار ماژولار و قابلیت‌های داخلی جامعی دارد که توسعه برنامه‌های پیچیده را ساده و -سریع می‌کند. همچنین، این فریمورک -قابلیت تست‌پذیری بالا و عملکرد بهینه‌ای ارائه می‌دهد که کیفیت و پایداری برنامه‌ها را تضمین می‌کند.

مقدمه‌ای بر Angular​

Angular یک فریمورک و پلتفرم برای ساخت برنامه‌های تک‌صفحه‌ای -(SPA -یا -Single Page Application) -با -استفاده از -HTML -و -TypeScript -است. این فریمورک توسط گوگل توسعه داده شده و نگهداری می‌شود و ابزارها و معماری محکمی را برای -ساخت برنامه‌های قابل گسترش ارائه می‌دهد.

ویژگی‌ها و مزایای کلیدی Angular​

  • TypeScript
    -Angular -با -TypeScript -نوشته شده است که یک -SuperSet -بر -JavaScript -است و ویژگی‌های زیادی از جمله تایپ استاتیک را به زبان اضافه می‌کند.

  • Templating
    -Angular -از یک سیستم طراحی -template -پیشرفته استفاده می‌کند که به شما این امکان را می‌دهد تا بتوانید به راحتی داده‌های پویا را به -template -متصل کنید.

  • Component / Directive
    -با استفاده از دایرکتیوها و کامپوننت‌ها می‌توانید رفتارها و نماهایی با قابلیت استفاده مجدد ایجاد کنید.

مرور کلی بر Angular

Angular -از مفاهیم و ابزارهای متعددی تشکیل شده که به توسعه‌دهندگان کمک می‌کند تا برنامه‌های وب پیچیده را به روشی ماژولار و -ساختاریافته توسعه دهند. در اینجا برخی از مفاهیم کلیدی و اجزای اصلی -Angular -آورده شده است:

  • ماژول‌ها (Modules) -هر برنامه -Angular -از یک یا چند ماژول تشکیل شده است. ماژول‌ها به سازماندهی کد و مدیریت وابستگی‌ها کمک می‌کنند.

  • کامپوننت‌ها (Components) -کامپوننت‌ها بلوک‌های ساختمانی اصلی یک برنامه -Angular -هستند. هر کامپوننت شامل یک کلاس -TypeScript، -یک قالب -HTML -و یک فایل -CSS -است.

  • دایرکتیوها (Directives) -دایرکتیوها به شما امکان می‌دهند تا رفتارهای خاصی را به المان‌های انگولار اضافه کنید.

  • سرویس‌ها (Services) -سرویس‌ها برای مدیریت منطق و تبادل داده‌ها بین کامپوننت‌ها استفاده می‌شوند.

  • تزریغ وابستگی (Dependency Injection) -تزریغ وابستگی یک -Design Pattern -است که در -Angular -برای مدیریت وابستگی‌ها استفاده می‌شود.

  • روتر (Router) -روتر به شما امکان می‌دهد تا بین نماهای مختلف در برنامه جابه‌جا شوید.

پیش‌نیازها​

پیش از هر چیزی برای یادگیری انگولار شما باید با ابزار -npm -(Node Package Manager) -آشنا شوید. -این ابزار، برای مدیریت بسته‌های پروژه شماست، -شما می‌توانید از ابزار‌های دیگری همچون -yarn،pnpm -برای مدیریت بسته‌ها استفاده کنید.

بعد از آشنایی با پکیج منیجرها نیاز است شما با نحوه ساخت و راه‌اندازی یک پروژه انگولار و سپس ساختار آن آشنا شوید.

مفاهیم اساسی Angular

Components​

کامپوننت‌ها بلوک‌های ساختمانی اصلی برنامه‌های -Angular -هستند. هر کامپوننت شامل یک کلاس -TypeScript، -یک قالب -HTML -و یک فایل -سبک -CSS -است. کامپوننت‌ها به شما امکان می‌دهند تا بخش‌های مختلف برنامه را به صورت مجزا توسعه داده و مدیریت کنید.

برای ساخت کامپوننت از -@Component -استفاده می‌کنیم. در این -decorator -مشخصه -selector -مشخص می‌کند که این کامپوننت با چه -تگی در HTML استفاده خواهد شد، -template -قالب HTML کامپوننت را تعریف می‌کند، و -styles -استایل‌های CSS مربوط به کامپوننت -را مشخص می‌کند.

مثال از یک کامپوننت ساده​

در این مثال، یک کامپوننت ساده به نام -HelloWorldComponent -ایجاد می‌کنیم که یک پیام -“Hello, World!” -را نمایش می‌دهد. -برای ایجاد یک کامپوننت جدید با استفاده از -Angular CLI، -دستور زیر را در ترمینال اجرا کنید:

ng generate component hello-world

یا به صورت مختصر:

ng g c hello-world

این دستور در هر دایرکتوری اجرا شود به صورت خودکار دایرکتوری جدید شامل فایل -HTML، CSS، TypeScript -و فایل تست تشکیل -می‌دهد. (برای نام گذاری -componentها -از قرارداد -name.component.ts -و برای تست از -name.component.spec.ts -استفاده -می‌شود)

فایل -hello-world.component.ts -به این صورت خواهد بود:

import {Component} from '@angular/core';

@Component({
    selector: 'app-hello-world',
    template: '<h1>Hello, World!</h1>',
    styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent {
}

در این مثال:

  • selector -مشخص می‌کند که این کامپوننت با استفاده از تگ -<app-hello-world> -در HTML استفاده خواهد شد.
  • template -قالب HTML کامپوننت را تعریف می‌کند.
  • styles -استایل‌های CSS مربوط به کامپوننت را تعریف می‌کند.

برای استفاده از این کامپوننت در برنامه، می‌توانید تگ -<app-hello-world> -را به قالب -app.component.html -اضافه کنید:


<app-hello-world></app-hello-world>

حال با اجرای مجدد پروژه، کامپوننت ساخته شده نمایش داده می‌شود.

برای مطالعه بیشتر به مستندات رسمی انگولار مراجعه کنید.

Dependency injection​

Dependency Injection -یا تزریق وابستگی‌ها یک تکنیک است که یک شئ وابستگی‌های شئ دیگر را تامین (تزریق) می‌کند. که این -فرآیند توسط انگولار انجام می‌شود

Services​

سرویس‌ها -(Services) -در انگولار یکی از اصول اصلی و مهم این فریم‌ورک هستند که برای مدیریت منطق و داده‌های اپلیکیشن استفاده -می‌شوند. سرویس‌ها به طور معمول برای انجام کارهایی مثل درخواست‌های -HTTP، -ذخیره و بازیابی داده‌ها، و به اشتراک‌گذاری -داده‌ها بین کامپوننت‌ها به کار می‌روند. این مفهوم به منظور تفکیک منطق کسب و کار از رابط کاربری -(UI) -به کار گرفته می‌شود.

تعریف سرویس​

برای ایجاد یک سرویس در انگولار، ابتدا باید یک کلاس ایجاد کرده و سپس این کلاس را با استفاده از دکوراتور -@Injectable -تزریق‌پذیر -(injectable) -کنید. به عنوان مثال، یک سرویس ساده برای مدیریت کاربران را در نظر بگیرید:

import {Injectable} from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class UserService {
    private users = ['Alice', 'Bob', 'Charlie'];

    constructor() {
    }

    getUsers() {
        return this.users;
    }

    addUser(user: string) {
        this.users.push(user);
    }
}

استفاده از سرویس در کامپوننت​

برای استفاده از این سرویس در یک کامپوننت، باید آن را در -constructor -کامپوننت تزریق -(inject) -کنید:

import {Component, OnInit} from '@angular/core';
import {UserService} from './user.service';

@Component({
    selector: 'app-user',
    template: `
    <div>
      <ul>
        <li *ngFor="let user of users">{{ user }}</li>
      </ul>
      <input [(ngModel)]="newUser" placeholder="Add user" />
      <button (click)="addUser()">Add</button>
    </div>
  `,
})
export class UserComponent implements OnInit {
    users: string[] = [];
    newUser: string = '';

    constructor(private userService: UserService) {
    }

    ngOnInit() {
        this.users = this.userService.getUsers();
    }

    addUser() {
        this.userService.addUser(this.newUser);
        this.newUser = '';
    }
}

توضیح:​

  1. ایجاد سرویس: یک کلاس با نام -UserService -ایجاد می‌شود و از دکوراتور -@Injectable -استفاده می‌کند تا انگولار -بفهمد این کلاس قابل تزریق است.
  2. متدهای سرویس: این سرویس دو متد -getUsers -و -addUser -دارد که به ترتیب کاربران را بازیابی و اضافه می‌کنند.
  3. تزریق سرویس در کامپوننت: در کلاس -UserComponent -سرویس -UserService -در -constructor -تزریق می‌شود.
  4. استفاده از سرویس: در متد -ngOnInit، -متد -getUsers -سرویس فراخوانی می‌شود تا لیست کاربران دریافت شود. همچنین، -متد -addUser -برای افزودن کاربر جدید به لیست استفاده می‌شود.

pipe​

پایپ -(Pipe) -در -Angular -یک ویژگی است که برای تبدیل داده‌ها قبل از نمایش در قالب نهایی استفاده می‌شود. این کاربرد اصلی آن -است که اطلاعات را به یک فرمت مشخص یا به صورتی خاصی نمایش دهد، مثلا تبدیل یک تاریخ به فرمت خاص، نمایش مقادیر اعشاری به -تعداد معین اعشار، تبدیل متن به حروف بزرگ یا کوچک و غیره.

برای استفاده از پایپ در -Angular، -ابتدا باید پایپ مورد نظر را ایجاد کنید یا از پایپ‌های تعریف شده پیش فرض استفاده کنید. -سپس آن را در قالب مورد نظرتان به صورت خاصی اعمال می‌کنید.

پایپ‌ها در -Angular -به طور گسترده‌ای برای فراهم کردن قابلیت‌های فرمت‌بندی و تغییر شکل داده‌ها استفاده می‌شوند و می‌توانند -به آسانی سفارشی‌سازی شوند یا از پایپ‌های پیش‌فرض -Angular -استفاده شود.

مثال:

پایپ زیر با توجه به ژانر ورودی لیست کتاب هارا فیلتر می‌کند.

import {Pipe, PipeTransform} from '@angular/core';
import {Book} from './book.model';

@Pipe({
    name: 'genreFilter',
})
export class GenreFilterPipe implements PipeTransform {
    transform(books: Book[], genre: string): Book[] {
        if (!genre) {
            return books;
        }
        return books.filter(book => book.genre === genre);
    }
}

در این پایپ،‌ متد -transform -لیست کتاب ها و ژانر را به عنوان ورودی دریافت کرده و لیست فیلتر شده شامل کتاب هایی که تنها دارای ژانر ورودی هستند برمی‌گرداند.

Decorators​

پیش از آنکه به توضیح بخش‌های اصلی -Angular -بپردازیم، بهتر است با مفهوم اساسی -Decorator -که به طور گسترده از آن در تعاریف -مختلف -Angular -استفاده می‌شود، آشنا شویم.

decorator -ها در -Angular -یک نوع خاص از توابع هستند که به شما امکان می‌دهند تا به کلاس‌ها، متدها، ویژگی‌ها یا پارامترها -متادیتا اضافه کنید و رفتار آنها را -Override -کنید. -Decorator -ها در -TypeScript -به طور گسترده‌ای برای تعریف ویژگی‌ها و -رفتارهای اجزای مختلف -Angular -استفاده می‌شوند. این توابع توسط -@ -فراخوانی می‌شوند و ورودی‌های خود را دریافت می‌کنند و -تغییرات لازم را بر روی هدف خود اعمال می‌کنند.

Angular Decorators​

دیکوریتورهای اصلی Angular عبارتند از:

  • @NgModule: -برای تعریف ماژول‌های -Angular -استفاده می‌شود.
  • @Component: -برای تعریف کامپوننت‌ها استفاده می‌شود.
  • @Directive: -برای تعریف دستورالعمل‌ها استفاده می‌شود.
  • @Pipe: -برای تعریف لوله‌ها (فیلترها) استفاده می‌شود.
  • @Injectable: -برای تعریف سرویس‌ها استفاده می‌شود.

هر کدام از این دیکوریتورها وظایف خاصی دارند و به شما کمک می‌کنند تا ویژگی‌های خاصی را به اجزای برنامه اضافه کنید.

Angular Modules​

انگولار یک فریم‌ورک ماژولار است. ماژولاریتی خاصیتی است که میزان جداپذیری اجزا درون یک سیستم را اندازه‌گیری می‌کند، به -طوری که این اجزا می‌توانند به عنوان یک واحد مستقل عمل کنند و بدون وابستگی به یکدیگر کار کنند. در انگولار، ماژول یک واحد -است که کامپوننت‌ها، پایپ‌ها، دایرکتیوها و سرویس‌ها را گروه‌بندی می‌کند. یک برنامه انگولار می‌تواند شامل چندین ماژول -باشد. در هر برنامه انگولار حداقل یک ماژول وجود دارد. -NgModule -پیش‌فرض -AppModule -است و در فایل -app.module.ts -قرار دارد. -وقتی برنامه را اجرا می‌کنید، این ماژول اجرا می‌شود. شما همچنین می‌توانید عملکردها را از یک ماژول به ماژول دیگر -import -و -export -کنید.

Templates and Data Binding​

Interpolation​

در -Angular، -Interpolation -به معنی نشان دادن داده‌های کامپوننت در قالب کامپوننت است. این کار با استفاده از -{{ }} -انجام -می‌شود.

<h1>{{ title }}</h1>

در این مثال، -title -یک -property -از کامپوننت است که مقدار آن در قالب نمایش داده می‌شود. لازم به ذکر است هر تغییر در -مقدار -title -به طور خودکار توسط -Angular -تشخیص داده شده و در نتیجه قالب به صورت خودکار بروز می‌شود. (البته این در صورتی -است که در -Change Detection -تغییری انجام نشده باشد که در بخش‌های آینده از آن صحبت خواهیم کرد)

Property Binding​

در Angular، -می‌توانید -Propertyهای -کامپوننت را به عناصر قالب متصل کنید. این کار با استفاده از -[ ] -انجام می‌شود.

<img [src]="imageUrl">

در این مثال، imageUrl یک property از کامپوننت است که به ویژگی src عنصر <img> متصل می‌شود.

Event Binding​

مفهوم Event​

در جاوااسکریپت، مفهوم "رویداد" -(Event) -به هر اتفاق یا کنشی که در مرورگر رخ می‌دهد اطلاق می‌شود. این رویدادها می‌توانند توسط کاربر (مثل کلیک کردن، فشردن کلید، -حرکت ماوس) یا توسط مرورگر (مثل بارگذاری صفحه، تغییر اندازه صفحه) رخ دهند.

در -Angular، -می‌توانید -eventها -را در template مدیریت کنید و به متدهارا به event ها متصل کنید. این کار با استفاده از -( ) -انجام -می‌شود.


<button (click)="handleClick()">Click me</button>

در این مثال، وقتی کاربر بر روی دکمه کلیک می‌کند، متد -handleClick() -کامپوننت فراخوانی می‌شود.

Two Way Binding​

Two Way Binding -به منظور اشتراک داده بین کامپوننت‌های انگولاری استفاده می‌شود، به صورتی که تغییر مقدار داده‌ها به صورت همزمان هم در -کامپوننت پدر و هم فرزند انجام می‌شود.

angular routing​

‌ابزار قدرتمند انگولار برای جابه‌جایی بین صفحات مختلف استفاده می‌شود.

تثبیت دانش​

برای تثبیت مطالبی که تا اینجا آموختید ، پیشنهاد می‌شود که پروژه Book Collection Manager را انجام دهد.

این پروژه شامل مدیریت یک مجموعه کتاب شخصی است که کاربران می‌توانند کتاب‌های خود را اضافه، مشاهده، ویرایش و حذف کنند. هر -کتاب دارای عنوان، نویسنده، تاریخ انتشار و ژانر است. در این پروژه، از مفاهیم و تکنولوژی‌های Angular از جمله کامپوننت‌ها، -سرویس‌ها و پایپ‌ها استفاده خواهد شد.

این پروژه به شما این امکان را می‌دهد تا تجربه عملی کسب کنید در:

ایجاد و مدیریت کامپوننت‌ها و ارتباط آنها با یکدیگر. -استفاده از سرویس‌ها برای مدیریت داده‌ها و انجام عملیات CRUD (ایجاد، خواندن، به روزرسانی، حذف). -اعمال پایپ‌ها برای فرمت‌بندی و فیلتر کردن داده‌ها. -این پروژه می‌تواند فرصتی عالی باشد تا مهارت‌های یادگرفته شده را در یک محیط عملی تثبیت کنید و آمادگی خود را برای -پروژه‌های واقعی و بزرگ‌تر افزایش دهید.

- - - - \ No newline at end of file diff --git a/docs/frontend/index.html b/docs/frontend/index.html index 365a59f3..15ccf62e 100644 --- a/docs/frontend/index.html +++ b/docs/frontend/index.html @@ -6,13 +6,13 @@ فرانت‌اند | آکادمی ستاره - - + +
-

فرانت‌اند

- - +

فرانت‌اند

+ + \ No newline at end of file diff --git a/docs/frontend/phase01-sandbox/index.html b/docs/frontend/phase01-sandbox/index.html new file mode 100644 index 00000000..5aa862fb --- /dev/null +++ b/docs/frontend/phase01-sandbox/index.html @@ -0,0 +1,78 @@ + + + + + + + +Sandbox | آکادمی ستاره + + + + +
+

Sandbox

این فاز، یکی از فازهای Sandbox است.

به فازهایی Sandbox می‌گوییم که به طور مستقیم به پروژه مربوط نمی‌شوند +و در کارگاهی که برای آن‌ها برگزار می‌شود، مدرس در یک محیط ایزوله به تدریس می‌پردازد. +البته این به آن معنا نیست که در این فازها نکات کم‌اهمیتی گفته می‌شود؛ +بلکه در آن‌ها نکات مهمی تعبیه شده که در فازهای دیگر قابل بیان نبودند.

مقدمه​

در این فاز قصد داریم قبل از شروع پروژه با برخی نکات ساده اما مهم آشنا شویم +که در ادامۀ کار به کمک ما خواهند آمد.

  • چرا برای تعریف متغیر می‌توان از سه عبارت var و let و const استفاده کرد؟
  • تفاوت Function با Arrow Function چیست؟
  • مفهوم و کاربرد this چیست؟
  • صفت type در تگ script چیست؟
  • چطور می‌توان از کدی که دیگران نوشته‌اند استفاده کرد؟
  • برای افزایش خوانایی کد چه کارهایی می‌توان انجام داد؟

یادگیری​

متغیرها​

قبل از سال 2015 میلادی، برای تعریف متغیر در JavaScript تنها می‌توانستیم از var استفاده کنیم. +اما با معرفی ES6 عبارت‌های let و const نیز به این زبان اضافه شدند که در اینجا توضیحات مختصری در مورد هر کدام ارائه می‌کنیم.

var​

زمانی که یک متغیر را با عبارت var تعریف می‌کنید، +آن متغیر در Global Scope یا نزدیک‌ترین Function Scope تعریف می‌شود.

به عنون مثال خروجی کد زیر:

function defineAndPrintName() {
    if (true) {
        var name = 'Bijan';
        console.log(`inner scope -> name: ${name}`);
    }

    console.log(`outer scope -> name: ${name}`);
}

defineAndPrintName();

به شکل زیر خواهد بود:

inner scope -> name: Bijan
outer scope -> name: Bijan

چرا که متغیر name داخل اسکوپِ تابعِ defineAndPrintName قرار می‌گیرد.

لازم به ذکر است که Scopeها در JavaScript با آکلاد مشخص می‌شوند +بنابراین نیازی به if (true) نداریم.

let​

برخلاف var، زمانی که از let برای تعریف یک متغیر استفاده کنیم، +آن متغیر در Scope فعلی محدود می‌شود.

به‌عنوان مثال خروجی کد زیر:

function defineAndPrintName() {
    {
        let name = 'Bijan';
        console.log(`inner scope -> name: ${name}`);
    }

    console.log(`outer scope -> name: ${name}`);
}

defineAndPrintName();

به شکل زیر خواهد بود:

inner scope -> name: Bijan
ReferenceError: name is not defined

const​

const +دقیقاً مانند let عمل می‌کند با این تفاوت که فقط یک بار می‌توان آن را مقداردهی کرد. +زمانی که احتیاج داشته باشیم مقداری را ذخیره کنیم که هیچ‌وقت نباید تغییر کند، +استفاده از const باعث جلوگیری از خطاهای احتمالی می‌شود؛ +همچنین زمانی که شخص دیگری کد را می‌خواند، +با دیدن const مطمئن می‌شود که مقدار آن تغییر نخواهد کرد. +ما پیشنهاد می‌کنیم همیشه به صورت پیش‌فرض برای تعریف متغیرها از const استفاده کنید +و تنها در صورت نیاز به let مراجعه کنید.

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

Regular Function vs Arrow Function​

در JavaScript به دو شکل می‌توان یک تابع را تعریف کرد:

function sayHello(name) {
    console.log(`hello, ${name}!`);
}

// or

const sayHello = (name) => {
    console.log(`hello, ${name}!`);
};

که به نوع اول Regular Function و به نوع دوم Arrow Function گفته می‌شود. +در اینجا به تفاوت این دو روش می‌پردازدیم.

this​

زمانی که از Regular Function استفاده می‌کنیم مقدار this با توجه به مکانی که تابع از آنجا صدا زده می‌شود، متفاوت است. +اما اگر از Arrow Function استفاده کنیم، این مقدار همواره برابر با شیئی است که تابع در آن تعریف شده.

const regularFunctionWrapper = {
    whatIsThis: function () {
        console.log(this); // regularFunctionWrapper
    },
};

const arrowFunctionWrapper = {
    whatIsThis: () => {
        console.log(this); // globalThis
    },
};

regularFunctionWrapper.whatIsThis();
arrowFunctionWrapper.whatIsThis();

Constructor​

قبل از اینکه کلاس‌ها به JavaScript بیایند، از Regular Function به‌عنوان Constructor استفاده می‌شد:

function Circle(radius) {
    this.radius = radius;

    this.printArea = function () {
        console.log('area', Math.PI * Math.pow(this.radius, 2));
    };
}

const small = new Circle(10);
const large = new Circle(100);

small.printArea();
large.printArea();

arguments & args​

در Regular Function یک کلیدواژه به نام arguments وجود دارد که درواقع آرایه‌ای از پارامترهای ورودی می‌باشد؛ +در Arrow Function هم می‌توانیم به این پارامترها دسترسی داشته باشیم اما باید صراحتاً در ورودی‌های تابع به آن اشاره کنیم:

function regularFunctionSum() {
    let result = 0;

    for (const n of arguments) {
        if (!isNaN(n)) result += n;
    }

    return result;
}

const arrowFunctionSum = (...args) => {
    let result = 0;

    for (const n of args) {
        if (!isNaN(n)) result += n;
    }

    return result;
};

console.log('Regular Function', regularFunctionSum(4, 8, 15, 16, 23, 42)); // 108
console.log('Arrow Function', arrowFunctionSum(4, 8, 15, 16, 23, 42)); // 108

return​

در Arrow Function اگر بدنۀ تابع فقط شامل یک Expression باشد، می‌توان آن را بدونِ استفاده از آکلاد و return نوشت:

const rand = (min, max) => Math.floor(Math.random() * (max - min) + min);

console.log(rand(4, 42));

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

Modules​

type​

یکی از صفاتی که می‌توان به تگ script اضافه کرد، type است؛ +این صفت همان‌طور که از اسمش پیداست، مشخص می‌کند که مرورگر چگونه با کد شما برخورد کند. +مقادیر متنوعی را می‌توان برای type در نظر گرفت اما در اینجا فقط به module اشاره می‌کنیم.

<script type="module"></script>

مزایا​

یکی از بزرگ‌ترین مزایای استفاده از module این است که می‌توانید کد خود را به چند فایل تقسیم کنید +و هر فایل را برای کار خاصی در نظر بگیرید. +به‌عنوان مثال فرض کنید بخواهیم دو کلاس با نام‌های Circle و Square داشته باشیم، +اشیائی با آن‌ها بسازیم و در نهایت محیط و مساحت هر کدام را محاسبه کنیم؛ +از سه راه می‌توانیم به هدف خود برسیم:

  1. قرار دادن تمام کدها در یک فایل
  2. قرار دادن کد هر قسمت در یک فایل جدا و استفاده از سه تگ script در HTML
  3. قرار دادن کد هر قسمت در یک فایل جدا و استفاده از module

واضح است که روش اول خوانایی کد را به‌شدت پایین می‌آورد +و اگر در آینده بخواهیم توسعه‌ای انجام دهیم، باید در میان حجم انبوهی از کدها به دنبال قسمت مورد نظر بگردیم.

روش دوم بهتر است اما مشکلی که وجود دارد این است که +همیشه باید به ترتیبِ کدها توجه کنیم. +به‌عنوان مثال اگر بخواهیم از کد Square داخل main استفاده کنیم، +باید حتماً تگ مربوط به Square، قبل از تگ مربوط به main باشد.

اما روش سوم هیچ‌کدام از معایب دو روش دیگر را ندارد. +به راحتی می‌توان هر زمان که به یک کد احتیاج داشتیم، آن را import کنیم +و فقط یک تگ script در HTML قرار می‌دهیم.

برای روشن‌تر شدن موضوع، در ادامه کد روش سوم را می‌بینیم:

index.html
<script src="./main.js" type="module"></script>
main.js
import {Circle} from './circle.js';
import {Square} from './square.js';

const main = () => {
    const circle = new Circle(10);
    const square = new Square(10);

    console.log(circle.toString());
    console.log(square.toString());
};

main();
circle.js
class Circle {
    #radius;

    constructor(radius) {
        this.#radius = Number.parseInt(radius) || 0;
    }

    calculatePerimeter() {
        return 2 * Math.PI * this.#radius;
    }

    calculateArea() {
        return Math.PI * this.#radius * this.#radius;
    }

    toString() {
        return `(Circle) perimeter: ${this.calculatePerimeter()}; area: ${this.calculateArea()}`;
    }
}

export {Circle};
square.js
class Square {
    #side;

    constructor(side) {
        this.#side = Number.parseInt(side) || 0;
    }

    calculatePerimeter() {
        return 4 * this.#side;
    }

    calculateArea() {
        return this.#side * this.#side;
    }

    toString() {
        return `(Square) perimeter: ${this.calculatePerimeter()}; area: ${this.calculateArea()}`;
    }
}

export {Square};

import & export​

همان‌طور که در کد قسمت قبل مشاهده کردید، +برای آنکه بتوانیم به یک موجودیت (متغیر، تابع، کلاس و ...) در قسمت‌های دیگر پروژه دسترسی داشته باشیم، +باید از کلیدواژه‌های import و export استفاده کنیم.

در قسمت قبل، یک Object را export کردیم که تنها شامل یک عنصر با کلید Circle یا Square بود؛ +بنابراین زمانی که بخواهیم فایل را import کنیم، دقیقاً همان Object را به همان شکل در دسترس خواهیم داشت. +همچنین این امکان را داریم که یک موجودیت را به‌عنوان شیء پیش‌فرض export کنیم +یا اسامی اشیاء را هنگام import عوض کنیم.

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

Node.js & npm​

با استفاده از import می‌توانید کتابخانه‌هایی را که دیگران توسعه داده‌اند، به کد خود اضافه کنید. +برای این کار مرسوم‌ترین روش استفاده از یک Package Manager است که معروف‌ترینِ آن‌ها npm می‌باشد.

Setup​

برای استفاده از npm باید ابتدا با مراجعه به +این لینک، +Node.js را نصب کنید.

Node.js +یک Runtime Environment است که به ما این امکان را می‌دهد که بتوانیم کد JavaScript را بدونِ نیاز به مرورگر اجرا کنیم. +از Node.js معمولاً برای برنامه‌نویسی سمت سرور استفاده می‌شود که ما در این دوره به آن نمی‌پردازیم +و صرفاً از npm استفاده خواهیم کرد.

Package Installation​

برای پیداکردن پکیج‌های مختلف می‌توانید به +سایت npm +مراجعه کنید.

برای نصب پکیج‌ها، کافی است دستوری مشابه دستور زیر را در ترمینال بنویسید:

npm i package-name

همچنین در صورتی که پکیج مورد نظر صرفاً توسط توسعه‌دهندگان مورد استفاده قرار می‌گیرد +و برای خروجی گرفتن از پروژه احتیاجی به آن نیست، +می‌توانید از پارامتر D هنگام نصب استفاده کنید:

npm i -D package-name

با این کار، زمانی که بخواهید پروژه را بر روی Production ببرید، +پکیج‌های غیرضروری نصب نخواهند شد و فرآیند Deploy سریع‌تر انجام می‌شود.

Prettier​

یکی از پکیج‌های بسیار محبوب Prettier است. +Prettier +به شما کمک می‌کند تا قواعدی را برای فرمت‌کردن کد تعریف کنید. +باید دقت داشته باشید که Prettier یک فرمترِ Opinionated است؛ +به این معنا که توسعه‌دهندگان آن، با توجه به Conventionهای موجود و سلیقۀ خود، قواعد را تنظیم کرده‌اند؛ +با این حال می‌توانید برخی از این قواعد را تغییر دهید.

برای تغییر قواعد کافی است یک فایل با نام prettierrc. را به پروژه اضافه کنید. +ما پیشنهاد می‌کنیم از تنظیمات زیر برای پروژه‌های خود استفاده کنید:

{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": false,
    "arrowParens": "always",
    "endOfLine": "auto",
    "overrides": [
        {
            "files": ["*.css", "*.scss"],
            "options": {
                "singleQuote": false
            }
        }
    ]
}

همچنین اگر نمی‌خواهید Prettier در برخی از فایل‌ها تغییر ایجاد کند، +می‌توانید یک فایل با نام prettierignore. به پروژه اضافه کنید. +این فایل دقیقاً مشابه با gitignore. است و ما پیشنهاد می‌کنیم محتوای gitignore. را داخل این فایل نیز اضافه کنید.

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

ESLint​

Prettier +تنها ظاهر کدهای شما را زیبا می‌کند؛ +اما اکثر اوقات، مخصوصاً زمانی که به صورت تیمی بر روی یک پروژه کار می‌کنید، +احتیاج دارید قواعدی برای تمیزی کد وضع کنید؛ +ESLint +یک پکیج استاندارد است که به شما این امکان را می‌دهد.

برای وضع قوانین کافی است یک فایل با نام eslintrc. را به پروژه اضافه کنید. +ما پیشنهاد می‌کنیم از قواعد پیش‌فرض ESLint استفاده کنید:

{
    "extends": "eslint:recommended"
}

برای آشنایی بیشتر با این قواعد می‌توانید از لینک زیر استفاده کنید:

+ + + + \ No newline at end of file diff --git a/docs/frontend/phase02-pilot/index.html b/docs/frontend/phase02-pilot/index.html new file mode 100644 index 00000000..6e3bc202 --- /dev/null +++ b/docs/frontend/phase02-pilot/index.html @@ -0,0 +1,107 @@ + + + + + + + +Pilot | آکادمی ستاره + + + + +
+

Pilot

مقدمه​

در این فاز برای شروع پروژه، Angular را معرفی می‌کنیم، +به برخی نکات مهم در HTML می‌پردازیم +و در نهایت چند منبع برای یادگیری flexbox و grid معرفی می‌کنیم.

  • تفاوت کتابخانه و فریمورک چیست؟
  • چرا به سراغ Angular می‌رویم؟
  • چگونه با Angular یک پروژه بسازیم؟
  • چرا از تگ‌های معنایی استفاده می‌کنیم؟
  • در استفاده از عکس‌ها چه نکاتی را باید رعایت کنیم؟

یادگیری​

Angular​

تفاوت کتابخانه و فریمورک​

کتابخانه مجموعه‌ای از ابزارها را در اختیار ما قرار می‌دهد +تا بتوانیم پروژه را راحت‌تر توسعه دهیم. +معروف‌ترین کتابخانه‌ای که در فرانت‌اند وجود دارد، React است. +React +شامل پکیج‌های زیادی است که تعدادی از آن‌ها توسط Facebook توسعه داده می‌شوند +و باقی آن‌ها توسط اشخاص حقیقی و حقوقی دیگر.

اما در مقابل، Framework یا چارچوب، همان‌طور که از اسمش پیداست، +علاوه بر ابزارهای مورد نیاز، شامل قواعد و دستورالعمل‌هایی برای کدنویسی است. +این قواعد از بدیهی‌ترین مسائل مانند زبان مورد استفاده تا پیچیده‌ترین مسائل مانند Performance را شامل می‌شود. +بزرگ‌ترین فریمورکی که در فرانت‌اند وجود دارد، Angular است. +Angular +توسط شرکت Google توسعه داده می‌شود. +در ابتدا AngularJS نام داشت اما بعد از تغییرات اساسی و اضافه‌شدن Typescript، +از نسخه 2 به بعد، به Angular تغییر نام داد. +در زمان نوشتن این مطلب، جدیدترین نسخه آن، Angular 14 است +و به طور منظم هر 6 ماه یک بار، نسخۀ جدید آن منتشر می‌شود.

خوشبختانه کدهای بنیادین React و Angular و همچنین اکثر کتابخانه‌ها و فریمورک‌های JavaScript، +به صورت Open-Source در اختیار عموم قرار دارند.

چرا Angular؟​

برای سایت‌های کوچک مانند فروشگاه‌های آنلاین، تماشای فیلم و سریال، اشتراک‌گذاری آهنگ و پروژه‌های دانشجویی، +قطعاً نیازی به Angular حس نمی‌شود. +این پروژه‌ها، همان‌طور که مرسوم است، اکثراً با کتابخانه‌هایی مانند React توسعه داده می‌شوند +و بدونِ آنکه توسعه‌دهنده کمبودی احساس کند، به نتیجۀ دلخواه خود می‌رسد.

اما زمانی که در مورد یک پروژه صنعتی بسیار بزرگ صحبت می‌کنیم، +مخصوصاً اگر ده‌ها بلکه صدها توسعه‌دهنده مشغول کار بر روی آن باشند، +قطعاً به یک چارچوب، مجموعه‌ای از قواعد و دستورالعمل‌ها، احتیاج پیدا خواهیم کرد.

این چارچوب می‌تواند توسط تیم فنی ایجاد شود و همراه با React یا به طور کلی هر کتابخانه‌ای مورد استفاده قرار گیرد؛ +ولی قطعاً Overhead زیادی خواهد داشت و ممکن است به اندازۀ یک فریمورک، محکم و قابل اطمینان نباشد. +استفاده از فریمورکی مانند Angular که بارها و بارها توسط هزاران توسعه‌دهنده مورد ارزیابی قرار گرفته، +باگ‌های احتمالی آن کشف و ثبت شده، +درخواست‌ها و فیچرهای جدید در آن پیاده‌سازی شده، +قطعاً بار سنگینی را از دوش توسعه‌دهنده برمی‌دارد و هزینه‌های غیرضروری تیم را کاهش می‌دهد.

نصب و راه‌اندازی​

Angular +یک Command-line Interface یا CLI دارد که با استفاده از آن می‌توانید پروژۀ خود را مدیریت کنید؛ +بنابراین قبل از هر کاری، ابتدا باید با دستور زیر ان را نصب کنیم:

npm i -g @angular/cli@12.2.17

با استفاده از پارامتر g مشخص می‌کنیم که می‌خواهیم CLI در اسکوپِ Global نصب شود؛ +بنابراین در هرکجا از سیستم می‌توانیم از آن استفاده کنیم.

همان‌طور که در کد بالا می‌بینید، +ما از نسخه 12.2.17 استفاده می‌کنیم و پیشنهاد می‌کنیم شما هم از همین نسخه استفاده کنید تا در روند آموزش مشکلی پیش نیاید.

از این پس می‌توانید با استفاده از دستور ng، از CLI استفاده کنید.

ساخت پروژه جدید​

با استفاده از دستور زیر می‌توانید یک پروژه جدید ایجاد کنید:

ng new my-project-name

سعی کنید اسمی خلاقانه و همچنین مناسب برای پروژه انتخاب کنید که بیانگر کاربرد آن باشد. +همچنین دقت داشته باشید که اسم انتخابی شما باید حتماً kebab-case باشد.

ESLint & Prettier​

در فاز قبل ESLint را معرفی کردیم؛ +حال می‌خواهیم آن را به پروژه‌ای که ساختیم اضافه کنیم. +برای این کار ابتدا باید پکیج مخصوص Angular را نصب کنیم:

ng add @angular-eslint/schematics

همان‌طور که می‌بینید به جای استفاده از npm i، از ng add برای نصب پکیج استفاده کردیم. +این قابلیت در بعضی از پکیج‌ها وجود دارد و در صورتی که به این شکل آن‌ها را به پروژه اضافه کنیم، +خودِ Angular ورژن مناسب را پیدا و نصب می‌کند؛ +همچنین در صورتی که احتیاج باشد، علاوه بر نصب پکیج، فایل‌های مربوطه را نیز تغییر می‌دهد.

حال به نصب Prettier می‌پردازیم:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

با اجرای دستور بالا، علاوه بر Prettier، تنظیمات مربوط به ESLint هم دانلود می‌شوند و می‌توانیم از آن‌ها در پروژه استفاده کنیم. +علت این کار آن است که تنظیمات ESLint و Prettier باهم تداخل نداشته باشند.

در ادامه محتوای پیشنهادی فایل‌های تنظیمات مربوط به ESLint و Prettier را می‌بینیم:

.eslintrc
{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
        {
            "files": ["*.ts"],
            "parserOptions": {
                "project": ["tsconfig.json"],
                "createDefaultProgram": true
            },
            "extends": [
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "prettier"
            ],
            "plugins": ["prettier"],
            "rules": {
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": ["app", "icon", "illustration"],
                        "style": "kebab-case"
                    }
                ],
                "@typescript-eslint/explicit-member-accessibility": ["error"],
                "@typescript-eslint/explicit-function-return-type": ["error"],
                "prettier/prettier": ["error", {"endOfLine": "auto"}]
            }
        },
        {
            "files": ["*.html"],
            "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
            "plugins": ["prettier"],
            "rules": {"prettier/prettier": ["error", {"endOfLine": "auto"}]}
        }
    ]
}
.prettierrc
{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": false,
    "arrowParens": "always",
    "endOfLine": "auto",
    "overrides": [
        {
            "files": ["*.html"],
            "options": {
                "parser": "html"
            }
        },
        {
            "files": ["*.component.html"],
            "options": {
                "parser": "angular"
            }
        },
        {
            "files": ["*.css", "*.scss"],
            "options": {
                "singleQuote": false
            }
        }
    ]
}

فراموش نکنید محتویات فایل +gitignore. +را به فایل +prettierignore. +هم اضافه کنید تا از تغییر فایل‌های ناخواسته جلوگیری شود.

زمانی که یک پروژۀ جدید انگولاری می‌سازید، به صورت خودکار یک فایل با نام +editorconfig. +در پوشۀ اصلی پروژه قرار می‌گیرد؛ +کارکرد این فایل مانند ESLint یا Prettier است و می‌توانید قوانینی وضع کنید که تمام اعضای گروه از آن‌ها پیروی کنند. +از آنجایی که ما از ESLint و Prettier استفاده می‌کنیم، دیگر نیازی به این فایل نیست +و برای جلوگیری از تداخل احتمالی باید آن را پاک کنید.

شما می‌توانید با استفاده از دستور زیر، ایراداتی که ESLint به کدهای شما وارد می‌کند را ببینید:

ng lint

همچنین با استفاده از این دستور می‌توانید به ESLint بگویید که به طور خودکار و هوشمند سعی کند ایرادات را برطرف نماید:

ng lint --fix

مطالعه بیشتر​

همان‌طور که احتمالاً حدس می‌زنید، Angular حاوی مباحث بسیار زیادی است که توضیح تک‌تک آن‌ها در قالب آموزش متنی بسیار دشوار است؛ +بنابراین این مباحث در قالب کارگاه ارائه خواهد شد؛ +اما در صورتی که تمایل دارید به منابع بیشتری دسترسی داشته باشید، می‌توانید از لینک‌های زیر استفاده کنید:

HTML​

تگ‌های معنایی​

در HTML تگ‌هایی وجود دارند که صرفاً برای یک کار خاص طراحی شده‌اند و با دیدن نام آن‌ها می‌توان کاربردشان را متوجه شد. به +این تگ‌ها، تگ‌های معنایی گفته می‌شود که لیستی از آن‌ها را به همراه توضیحات مختصری در اینجا مشاهده می‌کنید.

توصیه می‌کنیم همزمان با خواندن این مطلب، +صفحۀ دمو +را نیز مشاهده کنید تا به صورت دیداری و کاربردی با مفاهیم آشنا شوید.

معمولاً در بالاترین بخش صفحه یا المان مورد نظر قرار می‌گیرد و در اکثر مواقع شامل لوگو، nav و دکمه‌های +Call-to-Action می‌باشد.

مشاهده در صفحه دمو

شامل لینک‌هایی به قسمت‌های مختلف صفحۀ اصلی یا سایت می‌باشد.

مشاهده در صفحه دمو

main​

شامل محتوای اصلی سایت می‌باشد و در اکثر مواقع بیشترین حجم از صفحه را اشغال می‌کند.

مشاهده در صفحه دمو

aside​

شامل محتوایی غیر از محتوای اصلی می‌باشد به طوری که نمی‌توان آن را در main قرار داد. به‌عنوان مثال تبلیغات یا لینک +به قسمت‌های مختلف مقاله.

مشاهده در صفحه دمو

معمولاً در پایین‌ترین بخش صفحه یا المان مورد نظر قرار می‌گیرد و در اکثر مواقع شامل Copyright، توضیحات مختصری در +مورد سایت و شخص یا گروه سازنده می‌باشد.

مشاهده در صفحه دمو

article​

بخشی از محتواست که کاملاً از بخش‌های دیگر مستقل می‌باشد به گونه‌ای که می‌توان آن را به طور جداگانه استفاده یا +منتشر کرد. به‌عنوان مثال می‌توان به مقاله‌ای از یک مجله یا پستی از یک وبلاگ اشاره کرد.

مشاهده در صفحه دمو

section​

بخشی از محتوای اصلی سایت را مشخص می‌کند. معمولاً از این تگ برای ایجاد تمایز بینِ قسمت‌های مختلف استفاده می‌شود. +معمولاً در ابتدای هر بخش از heading یعنی تگ‌های h1 تا h6 استفاده می‌شود.

مشاهده در صفحه دمو

details​

شامل بخشی از محتواست که کاربر می‌تواند در صورت نیاز آن را نمایان یا پنهان کند.

مشاهده در صفحه دمو

summary​

همیشه داخل المان details استفاده می‌شود و باید شامل توضیحاتی دربارۀ آن باشد.

مشاهده در صفحه دمو

البته موارد بالا تنها بخشی از تگ‌های معنایی HTML می‌باشند. برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر +استفاده کنید:

Text Formatting Tags​

بعضی از تگ‌ها مانند b و i برای تغییر ظاهر بخشی از متن استفاده می‌شوند که لیست آن‌ها را در اینجا ذکر می‌کنیم:

b & strong​

عبارت مورد نظر را به صورت Bold یا پُررنگ نمایش می‌دهند.

i & em​

عبارت مورد نظر را به صورت Italic یا کج نمایش می‌دهند.

mark​

برای Highlight کردن بخشی از نوشته، استفاده می‌شود.

small​

عبارت مورد نظر را با اندازۀ کوچکتری نسبت به اندازۀ اصلی نمایش می‌دهد.

del​

برای نوشته‌های حذف‌شده استفاده می‌شود به طوری که معمولاً آن‌ها را به صورت خط‌خورده نمایش می‌دهد.

ins​

برای نوشته‌های اضافه‌شده استفاده می‌شود به طوری که معمولاً آن‌ها را با Underline نمایش می‌دهد.

sub​

معمولاً برای نمایش اندیس‌ها در پایینِ عبارت، استفاده می‌شود.

sup​

معمولاً برای نمایش شماره‌های پاورقی در بالای عبارت، استفاده می‌شود.

اما تمامِ این styleها را با استفاده از CSS نیز می‌توانیم داشته باشیم؛ پس علت وجود این تگ‌ها چیست؟ چرا برای بعضی از +استایل‌ها مانند Bold، دو تگ متفاوت داریم؟

کاربرد اصلی این تگ‌ها برای استفادۀ سریع هنگام نوشتن محتوای سایت است. به‌عنوان مثال هر وقت خواستیم یک کلمه را Bold کنیم +به جای اینکه از span در HTML و یک کلاس در CSS، می‌توانیم از b یا strong استفاده کنیم، بدونِ آنکه نیاز باشد +تغییری در کد CSS دهیم.

از طرفی در صورت نیاز می‌توانید ظاهر این تگ‌ها را مانند هر تگ دیگری تغییر دهید؛ +یعنی مثلاً به جای اینکه یک کلاس به اسم bold درست کنید +و هر بار مجبور باشید در HTML از آن استفاده کنید، می‌توانید صرفاً تگ b را استعمال کنید و در CSS فرمت دلخواه را +اعمال کنید.

تگ‌های b و strong در ظاهر تفاوتی باهم ندارند. اما زمانی که شما از strong استفاده کنید، علاوه بر اینکه عبارت مورد نظر به +شکل Bold نمایش داده می‌شود، اگر کاربر از Screen Reader استفاده کند، نرم‌افزار به این موضوع اشاره خواهد کرد. به طور کلی +زمانی که صرفاً بخواهید ظاهر کلمه پُررنگ باشد از b و زمانی که بخواهید مفهوم کلمه پُررنگ باشد از strong استفاده کنید. +همچنین در مورد تگ‌های i و em، اگر از em استفاده کنید، نرم‌افزار آن عبارت را با استرس بیشتری می‌خواند.

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

عکس‌ها​

alt​

حتما با alt در تگ img آشنا هستید. حتی شاید زمانی که از آن استفاده نکردید، متوجه هشدار IDE شده باشید. +اما کاربرد این Attribute چیست؟ +زمانی که از عکس استفاده می‌کنیم چرا باید توضیحی برای آن بنویسیم؟ مقدار این Attribute به کاربر نشان داده +نمی‌شود، پس نوشتن آن چه فایده‌ای دارد؟

alt +در اینجا مخفف عبارت Alternate Text یا متن جایگزین می‌باشد که دو کاربرد مهم برای آن می‌توان در نظر گرفت:

  1. همانطور که از اسم آن مشخص است، جایگزینی برای عکس می‌باشد به طوری که اگر به هر دلیلی امکان نمایش عکس وجود نداشت، +این نوشته به کاربر نشان داده می‌شود تا موضوع عکس را بفهمد.

  2. Screen Readerها متن مورد نظر را می‌خوانند بنابراین کاربرانی که نمی‌توانند عکس را ببینند، متوجهِ موضوع عکس می‌شوند.

بنابراین استفاده از alt برای عکس‌ها بسیار حائز اهمیت است. اما در موارد زیر بهتر است یک متن خالی را برای آن در نظر +بگیریم:

  • عکس مورد نظر صرفاً برای زیبایی ظاهری و دکوری باشد، به طوری که مفهوم خاصی به محتوا اضافه نکند.
  • عکس مورد نظر Caption داشته باشد.

دقت کنید که در موارد بالا حتماً باید تگ alt را استفاده کنید، اما متنی داخل آن ننویسید؛ به‌عنوان مثال:

<img src="https://totally-real-website.com/some-picture.png" alt="" />

علت این موضوع این است که اگر alt وجود نداشته باشد، Screen Reader نام فایل عکس را به‌عنوان توضیحات آن می‌خواند؛ +اما اگر متن خالی داخل alt باشد، عکس به کلی در نظر گرفته نمی‌شود.

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

Performance​

ما تقریباً در تمام سایت‌ها از عکس استفاده می‌کنیم؛ بنابراین همیشه باید به مبحث Performance توجه داشته باشیم، چرا که در +غیر این صورت تجربۀ بدی در انتظار کاربران ما خواهد بود.

یکی از بهترین راه‌ها برای افزایش Performance، استفاده از عکس‌های باکیفیت و در عینِ حال کم‌حجم است. برای این موضوع ما +سایت +Squoosh +را که توسط توسعه‌دهندگان Google ساخته شده، به شما پیشنهاد می‌کنیم. استفاده از آن بسیار آسان است، صرفاً کافی است عکس خود +را آپلود و عکس کم‌حجم شده را دریافت کنید. همچنین این سایت قابلیت تبدیل به انواع فرمت‌ها و استفاده از الگوریتم‌های +گوناگون را دارد.

در صورت امکان پیشنهاد می‌کنیم حتماً از فرمت svg استفاده کنید. +این فرمت برخلاف فرمت‌هایی مثل png و jpeg، به صورت Vector یا برداری می‌باشد، +به طوری که شما می‌توانید بدونِ افت کیفیت، به هر اندازه آن را کوچک یا بزرگ کنید. +فرمت svg همواره از باقی فرمت‌ها کم‌حجم‌تر است اما در عوض، جزئیات کمتری را می‌توانید در آن جای دهید. +بنابراین بهترین استفاده از svg در لوگوها، Illustrationها و آیکن‌هاست.

برای دانلود فایل‌های svg حرفه‌ای می‌توانید از لینک‌های زیر استفاده کنید:

Flexbox & Grid​

می‌توان گفت Flexbox و Grid جزء بهترین قابلیت‌هایی هستند که در طی چند سال گذشته به CSS اضافه شده‌اند؛ +اما متاسفانه خیلی از افراد در استفاده از آن‌ها دچار مشکل می‌شوند و نحوۀ کارکرد آن‌ها را به خوبی درک نمی‌کنند. +بنابراین در این قسمت به معرفی چند منبع برای رفع ابهامات احتمالی می‌پردازیم.

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

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

پروژه​

در این دوره قصد داریم یک فروشگاه آنلاین مانند Steam یا Epic برای خرید بازی بسازیم. +در این فاز شما باید با توجه به موارد آموزش داده شده، یک Landing Page برای سایت خود بسازید. +می‌توانید از نرم‌افزارهای مشابه ایده بگیرید اما اینکه چه قابلیت‌هایی در سایت شما وجود داشته باشد، کاملاً بستگی به خودتان دارد. +در صورتی که پیاده‌سازی قابلیتی ضروری باشد، در مستندات به آن اشاره خواهیم کرد.

+ + + + \ No newline at end of file diff --git a/docs/frontend/phase03-ui-ux/index.html b/docs/frontend/phase03-ui-ux/index.html index ec4afdb7..e448ca10 100644 --- a/docs/frontend/phase03-ui-ux/index.html +++ b/docs/frontend/phase03-ui-ux/index.html @@ -6,12 +6,12 @@ UI/UX | آکادمی ستاره - - + +
-

UI/UX

این فاز، یکی از فازهای Readonly است.

به فازهایی Readonly می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم.

مقدمه​

معمولاً در پروژه‌های بزرگ، وظیفۀ طراحی بر عهدۀ شخصی به جز توسعه‌دهندۀ فرانت‌اند است. +

UI/UX

این فاز، یکی از فازهای Readonly است.

به فازهایی Readonly می‌گوییم که کارگاهی برای آن‌ها برگزار نمی‌شود و صرفاً برای اموزش به مستندات اکتفا می‌کنیم.

مقدمه​

معمولاً در پروژه‌های بزرگ، وظیفۀ طراحی بر عهدۀ شخصی به جز توسعه‌دهندۀ فرانت‌اند است. اما در خیلی از مواقع ممکن است شما خودتان بخواهید این کار را انجام دهید. بنابراین در اینجا مواردی که باید در طراحی به آن‌ها توجه کنید را توضیح می‌دهیم.

  • تفاوت UI و UX چیست؟
  • کدام رنگ‌ها هم‌نشینی بهتری با یکدیگر دارند؟
  • چه فونت‌هایی برای استفاده در سایت پیشنهاد می‌شوند؟

توصیه می‌کنیم همزمان با خواندن این مطلب، صفحۀ دمو @@ -63,8 +63,8 @@ بنابراین در حالت کلی بهتر است از رنگ‌های Solid استفاده کنید.

از طرفی باید دقت کنید که طرح شما Over-simplified نباشد. این اتفاق بر سر بسیاری از لوگوها آمده و کاربران از آن بیزارند. همه چیز باید به اندازه باشد تا بهترین UI و UX حاصل شود.

Patreon&#39;s Logo - Before and After

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

پروژه​

سایتی که تا اینجا طراحی کرده‌اید را از منظر UI و UX بررسی کنید. -در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید.

- - +در صورتی که جایی از سایت مشکلی مشاهده می‌کنید، آن را برطرف کنید.

+ + \ No newline at end of file diff --git a/docs/frontend/phase04-css-and-sass/index.html b/docs/frontend/phase04-css-and-sass/index.html index 73ba6cf0..e5336e56 100644 --- a/docs/frontend/phase04-css-and-sass/index.html +++ b/docs/frontend/phase04-css-and-sass/index.html @@ -6,12 +6,12 @@ CSS & Sass | آکادمی ستاره - - + +
-

CSS & Sass

این فاز، یکی از فازهای Readonly است.

مقدمه​

در این فاز قصد داریم با مفاهیم نسبتاً ساده اما فراموش‌شدۀ CSS آشنا شویم +

CSS & Sass

این فاز، یکی از فازهای Readonly است.

مقدمه​

در این فاز قصد داریم با مفاهیم نسبتاً ساده اما فراموش‌شدۀ CSS آشنا شویم و همچنین کتابخانۀ Sass را معرفی کنیم.

  • Box Model چیست و از چه اعضایی تشکیل شده است؟
  • هر کدام از واحدهای مختلف CSS چه مفهومی دارند و در چه جاهایی باید استفاده شوند؟
  • انواع Selectorهای CSS چه چیزهایی هستند و چگونه می‌توان از آن‌ها استفاده کرد؟
  • کلاس‌های Pseudo چه چیزهایی هستند و چه کاربردی دارند؟

توصیه می‌کنیم همزمان با خواندن این مطلب، صفحۀ دمو را نیز مشاهده کنید تا به صورت دیداری و کاربردی با مفاهیم آشنا شوید.

یادگیری​

Box Model​

همه چیز در CSS به شکل یک جعبه یا Box است @@ -74,7 +74,7 @@ قابلیت‌های بی‌شماری دارد؛ اما زیاده‌روی نکنید! فقط از قابلیت‌هایی استفاده کنید که واقعاً به آن‌ها نیاز دارید.

- - + + \ No newline at end of file diff --git a/docs/frontend/phase05-animation/index.html b/docs/frontend/phase05-animation/index.html index 5c0a5bcc..bf890f1c 100644 --- a/docs/frontend/phase05-animation/index.html +++ b/docs/frontend/phase05-animation/index.html @@ -6,12 +6,12 @@ Animation | آکادمی ستاره - - + +
-

Animation

این فاز، یکی از فازهای Readonly است.

مقدمه​

Animation +

Animation

این فاز، یکی از فازهای Readonly است.

مقدمه​

Animation یکی از قدرتمندترین ابزارهای طراح برای ایجاد یک UX حرفه‌ای است. با Animation می‌توان جذابیت سایت را برای کاربر بالا برد و او را مجاب به استفاده از آن کرد. همچنین در صورتی که کاری برای به سرانجام رسیدن احتیاج به زمان زیادی داشته باشد، @@ -85,7 +85,7 @@ سعی کنید Animationهای جذابی را به Landing Page خود اضافه کنید.

توجه داشته باشید که در استفاده از Animation نباید زیاده‌روی کنید، در غیر این صورت نه تنها کاربران را جذب نمی‌کنید، بلکه باعث ریزش آن‌ها می‌شوید.

- - + + \ No newline at end of file diff --git a/docs/frontend/phase06-clean-code/index.html b/docs/frontend/phase06-clean-code/index.html index 7e18e79a..e90388a2 100644 --- a/docs/frontend/phase06-clean-code/index.html +++ b/docs/frontend/phase06-clean-code/index.html @@ -6,12 +6,12 @@ Clean Code | آکادمی ستاره - - + +
-

Clean Code

مقدمه​

در این فاز مجموعه‌ای از Best Practiceها و Anti-patternها را جمع‌آوری کرده‌ایم +

Clean Code

مقدمه​

در این فاز مجموعه‌ای از Best Practiceها و Anti-patternها را جمع‌آوری کرده‌ایم تا شما بتوانید از آن‌ها برای نوشتن کد تمیز کمک بگیرید. سعی می‌کنیم هم‌زمان با پیشرفت شما در این دوره و همچنین سپری‌شدن دوره‌های آینده، این مجموعه را توسعه دهیم تا با گذشت زمان تبدیل به مرجع مناسبی برای شما و دیگر توسعه‌دهندگان شود.

  • نوشتن کد تمیز چه مزایایی دارد؟
  • از چه اصول و از چه تکنیک‌هایی برای دست‌یابی به کد تمیز می‌توان استفاده کرد؟
  • کد تمیز به طور خاص در فرانت‌اند دارای چه ویژگی‌هایی است؟

یادگیری​

Clean Code​

شاید برای شما هم پیش آمده باشد که بعد از چند ماه به پروژه‌ای که خودتان آن را توسعه داده‌اید سر بزنید @@ -136,8 +136,8 @@ از هر دو عضوِ یکی از تیم‌ها درخواست کنید تا کد شما را جداگانه Review کنند؛ بعد از اینکه Approve کردند، به منتور عادی مراجعه کنید و پس از Approve او، به منتور سنیور بگویید تا کد شما را ببیند.

همچنین لازم است شما هم حداقل کد یک تیم دیگر را Review کنید. -سعی کنید تمام مواردی که در این فاز یاد گرفتید را هنگام Review مورد بررسی قرار دهید.

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

- - +سعی کنید تمام مواردی که در این فاز یاد گرفتید را هنگام Review مورد بررسی قرار دهید.

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

+ + \ No newline at end of file diff --git a/docs/frontend/phase07-ci-cd/index.html b/docs/frontend/phase07-ci-cd/index.html new file mode 100644 index 00000000..f175f16d --- /dev/null +++ b/docs/frontend/phase07-ci-cd/index.html @@ -0,0 +1,42 @@ + + + + + + + +CI/CD | آکادمی ستاره + + + + +
+

CI/CD

مقدمه​

زمانی که بر روی یک پروژۀ شخصی کار می‌کنیم، +معمولاً به ندرت احتیاج داریم آن را تست یا مستقر کنیم. +اما زمانی که پروژه به صورت تیمی توسعه داده شود، +نیاز است به طور مداوم تست‌های مختلف اجرا و فرآیند استقرار به‌طور خودکار انجام شود. +برای حل این مشکل می‌توانیم از روش‌های Continuous Integration و Continuous Deployment استفاده کنیم.

  • چگونه می‌توان تست‌ها را به‌طور خودکار اجرا کرد؟
  • چگونه می‌تواند فرآیندی جهت استقرار پروژه تنظیم کرد؟
  • چگونه می‌توان گزارشی از تمیزی کدهای جدید بدست آورد؟

یادگیری​

تعریف​

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

GitHub Actions​

یکی از ابزارهای CI/CD معروف، GitHub Actions است +که به کمک آن، می‌توانیم یک Pipeline شامل عملیات Build، اجرای Testها، استقرار پروژه +و دیگر عملیاتی که در دستهٔ CI/CD قرار می‌گیرد را به Repository خود اضافه کنیم.

Setup​

یک پوشه با نام github. در پوشۀ اصلی پروژه بسازید +و یک پوشه با نام workflows به آن اضافه کنید. +حال یک فایل که به پسوند yml ختم می‌شود را درون پوشۀ workflows قرار دهید؛ +به‌طور مثال ما از نام deploy.yml استفاده می‌کنیم.

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

name: Deployment Workflow

Conditions​

ممکن است بخواهید فقط زمانی Workflow اجرا شود که بر روی یک Branch خاص عملیات Push را انجام می‌دهید؛ +در این صورت محتوای زیر را به فایل خود اضافه نمایید:

on:
    push:
        branches:
            - main

اما اگر می‌خواهید بر روی تمام Branchها این اتفاق بیفتد؛ +از محتوای زیر استفاده کنید:

on:
    push:

همچنین می‌توانید شرایط دیگری را برای اجرا شدن Workflow در نظر بگیرید؛ +به‌عنوان مثال ایجاد یک Pull Request جدید یا عوض‌شدن وضعیت Issueها.

Test​

هر Workflow می‌تواند شامل چند Job باشد که به‌صورت موازی یا متوالی انجام می‌شوند.

برای تعریف کار Test می‌توانید از محتوای زیر استفاده کنید:

jobs:
    test:
        name: Test
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2

            - name: Setup Node
              uses: actions/setup-node@v1
              with:
                  node-version: '16.x'

            - name: Install Dependencies
              run: npm ci

            - name: ESLint
              run: npm run eslint:check

            - name: Stylelint
              if: success()
              run: npm run stylelint:check

            - name: Prettier
              if: success()
              run: npm run prettier:check

            - name: Angular
              if: success()
              run: npm run test:ci

در اینجا ابتدا نامی برای Job در نظر می‌گیریم تا بتوانیم آن را از سایر Jobها تشخیص دهیم؛ +در خط بعد سیستم‌عاملی که Job بر روی آن اجرا می‌شود را مشخص کنیم؛ +سپس مراحل کار را تعریف می‌کنیم که هر کدام را در ادامه به‌صورت مختصر توضیح می‌دهیم.

Checkout​

همان‌طور که شما برای انجام هر کاری احتیاج دارید ابتدا بر روی Branch مورد نظر عملیات Checkout را انجام دهید، +زمانی که از GitHub Actions استفاده می‌کنیم هم باید این عملیات انجام شود.

Setup Node​

در این مرحله Node.js بر روی سیستم عامل نصب می‌شود. +شما می‌توانید یک نسخۀ خاص از Node.js را که مطمئنید با پروژۀ شما سازگار است نصب کنید.

Install Dependencies​

با اجرای دستور npm ci در ترمینال به نصب Dependencyها می‌پردازیم.

ESLint​

با اجرای دستور npm run eslint:check از پاس‌شدن تست‌های ESLint اطمینان حاصل می‌کنیم.

Stylelint​

با اجرای دستور npm run stylelint:check از پاس‌شدن تست‌های Stylelint اطمینان حاصل می‌کنیم.

Prettier​

با اجرای دستور npm run prettier:check از پاس‌شدن تست‌های Prettier اطمینان حاصل می‌کنیم.

Angular​

با اجرای دستور npm run test:ci از پاس‌شدن تست‌های Angular اطمینان حاصل می‌کنیم.

Scripts​

این Scriptها را باید به فایل package.json اضافه نمایید:

{
    "name": "...",
    "version": "...",
    "scripts": {
        "eslint:check": "ng lint",
        "eslint:fix": "ng lint --fix",
        "stylelint:check": "stylelint \"**/*.scss\"",
        "stylelint:fix": "stylelint \"**/*.scss\" --fix",
        "prettier:check": "prettier . --check",
        "prettier:fix": "prettier . --write",
        "test:ci": "ng test --browsers=ChromeHeadless --watch=false"
    }
}

همچنین برای راحتی کار شما، نسخۀ fix: را برای هر Script قرار داده‌ایم +تا با استفاده از آن بتوانید خطاهای احتمالی را به‌صورت خودکار رفع کنید.

Build​

برای تعریف کار Build می‌توانید از محتوای زیر استفاده کنید:

jobs:
    test: ...
    build:
        name: Build
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2

            - name: Setup Node
              uses: actions/setup-node@v1
              with:
                  node-version: '16.x'

            - name: Install Dependencies
              run: npm ci

            - name: Build
              run: npm run build:prod

            - name: 404.html Hack
              if: success()
              run: cp dist/my-project-name/index.html dist/my-project-name/404.html

            - name: Upload Build
              if: success()
              uses: actions/upload-artifact@v1
              with:
                  name: deploy_dist
                  path: dist

با اجرای دستور npm run build:prod از پروژه Build تهیه می‌کنیم.

این Script را باید به فایل package.json اضافه نمایید:

{
    "name": "...",
    "version": "...",
    "scripts": {
        "build:prod": "ng build --base-href=/my-project-name/"
    }
}
caution

به جای my-project-name باید نام پروژۀ خود را قرار دهید.

404.html Hack​

زمانی که از GitHub Pages برای استقرار سایت استفاده می‌کنیم، +اگر به‌صورت دستی آدرس یکی از صفحات را در مرورگر وارد کنیم، +صفحۀ 404 نمایش داده می‌شود و از Routing خودِ Angular استفاده نمی‌کند. +برای حل این مشکل یک کپی از index.html می‌گیریم و نام آن را 404 می‌گذاریم.

Upload Build​

تنها در صورتی که نتیجۀ Build موفقیت‌آمیز بود، +آن را به طور موقت با نام deploy_dist ذخیره می‌کنیم تا در ادامه بتوانیم از آن استفاده کنیم.

Deploy​

برای تعریف کار Deploy می‌توانید از محتوای زیر استفاده کنید:

jobs:
    test: ...
    build: ...
    deploy:
        name: Deploy
        runs-on: ubuntu-latest
        needs:
            - test
            - build
        steps:
            - name: Checkout
              uses: actions/checkout@v1

            - name: Download Build
              uses: actions/download-artifact@v1
              with:
                  name: deploy_dist

            - name: Deploy to GitHub Pages
              uses: JamesIves/github-pages-deploy-action@releases/v3
              with:
                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                  BRANCH: gh-pages
                  FOLDER: deploy_dist/my-project-name
caution

به جای my-project-name باید نام پروژۀ خود را قرار دهید.

Download Build​

پوشه‌ای که در مرحلۀ قبل ذخیره کرده بودیم را در اینجا دانلود می‌کنیم.

Deploy to GitHub Pages​

محتویات پوشه را داخل برنچ gh-pages قرار می‌دهیم که GitHub بتواند از آن استفاده کند.

Monitor​

از این پس، بعد از آنکه بر روی Branch مورد نظر عملیات Push انجام دهید، +در صفحۀ Actions پروژۀ خود می‌توانید اجرا آن را مرحله به مرحله زیر نظر بگیرید +و در صورتی که خطایی رخ دهد از آن باخبر شوید.

پروژه​

با توجه به مطالبی که در این فاز یاد گرفتید، +فرآیند CI/CD را برای پروژۀ خود فراهم کنید.

+ + + + \ No newline at end of file diff --git a/docs/frontend/phase08-authentication/index.html b/docs/frontend/phase08-authentication/index.html index e9466b53..efbabcc6 100644 --- a/docs/frontend/phase08-authentication/index.html +++ b/docs/frontend/phase08-authentication/index.html @@ -6,12 +6,12 @@ Authentication | آکادمی ستاره - - + +
-

Authentication

مقدمه​

داده‌ها یکی از مهم‌ترین بخش‌های برنامه هستند +

Authentication

مقدمه​

داده‌ها یکی از مهم‌ترین بخش‌های برنامه هستند که باعث می‌شوند از حالت یکنواخت خارج شود و بتوان آن را برای هر کاربر شخصی‌سازی کرد؛ بنابراین باید بتوانیم این داده‌ها را در جایی ذخیره‌سازی کنیم و بعداً در صورت نیاز دوباره بازیابی کنیم.

  • چگونه می‌توان داده‌های کاربران را ذخیره کرد؟
  • چگونه می‌توان داده‌ها را به سرور فرستاد یا از آن دریافت کرد؟
  • چگونه می‌توان کاربر را احراز هویت کرد؟

یادگیری​

Storages​

Document.cookie​

کوکی‌ها می‌توانند هم در سمت سرور و هم در سمت کلاینت ذخیره‌سازی شوند؛ برای تغییر مقداری که در کوکی ذخیره شده، کافی است document.cookie را مقدار‌دهی کنیم. @@ -62,8 +62,8 @@ باید توکن خود را به‌همراه آن درخواست به سمت سرور ارسال کند.

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

پروژه​

در این فاز شما باید صفحات ورود و ثبت‌نام را به پروژه خود اضافه کنید. اگر هر یک از این عملیات با موفقیت انجام شود، کاربر باید به صفحۀ اصلی سایت منتقل شود. همچنین از Guard برای محافظت از صفحات خصوصی استفاده کنید. -برای این کار احتیاج به یک صفحه مانند Profile دارید که در حال حاضر صرفاً کافی است حاوی یک متن ساده باشد.

- - +برای این کار احتیاج به یک صفحه مانند Profile دارید که در حال حاضر صرفاً کافی است حاوی یک متن ساده باشد.

+ + \ No newline at end of file diff --git a/docs/frontend/phase09-test/index.html b/docs/frontend/phase09-test/index.html new file mode 100644 index 00000000..6a034064 --- /dev/null +++ b/docs/frontend/phase09-test/index.html @@ -0,0 +1,112 @@ + + + + + + + +Test | آکادمی ستاره + + + + +
+

Test

مقدمه​

تست‌نویسی در توسعه یک وب‌سایت فروش آنلاین، مانند چک‌آپ پزشکی برای سلامت نرم‌افزار است. این فرآیند به شما کمک می‌کند تا از صحت عملکرد بخش‌های مهم سایت مثل نمایش اطلاعات محصولات، مدیریت سبد خرید و انجام تراکنش‌های مالی اطمینان حاصل کنید. بدون تست کافی، ممکن است مشکلاتی مانند نمایش اطلاعات نادرست، از دست رفتن سفارش‌ها یا حتی مسائل امنیتی در پرداخت‌ها رخ دهد. این مشکلات می‌توانند به شدت بر رضایت مشتری و اعتبار کسب‌وکار شما تأثیر منفی بگذارند.

تست‌نویسی همچنین به شما کمک می‌کند تا تغییرات در نرم‌افزار را به خوبی مدیریت کنید. در دنیای سریع توسعه نرم‌افزار، تغییرات مداوم امری عادی است. با انجام تست‌های منظم در مراحل مختلف توسعه، می‌توانید مطمئن شوید که هر تغییری که اعمال می‌کنید، عملکرد کلی سایت را مختل نمی‌کند. این امر به خصوص در پروژه‌هایی که سرعت توسعه بالایی دارند، بسیار مهم است. با تست‌نویسی اصولی، نه تنها از کیفیت و امنیت وب‌سایت خود اطمینان حاصل می‌کنید، بلکه می‌توانید با اعتماد بیشتری تغییرات و بهبودها را اعمال کنید و در نهایت، تجربه خرید بهتری را برای مشتریان خود فراهم آورید.

آشنایی با تست​

تست نرم افزار بخش جدایی ناپذیر فرآیند توسعه نرم افزار است که به منظور شناسایی و رفع ایرادات و تضمین کیفیت نهایی محصول انجام می شود. این فرآیند شامل روش های مختلفی از جمله تست دستی و تست اتوماتیک می باشد.

تست اتوماتیک:​

تست اتوماتیک روشی برای بررسی و ارزیابی کیفیت نرم افزار به صورت خودکار است. در این روش، از اسکریپت‌ها و ابزارهای مخصوص برای شبیه‌سازی رفتار کاربر و انجام تست‌های مختلف بر روی نرم افزار استفاده می‌شود.

مزایای تست اتوماتیک:

  • سرعت بالا: تست های اتوماتیک می توانند به سرعت و به طور مکرر اجرا شوند، که این امر به شناسایی سریعتر ایرادات و ارتقای کارایی فرآیند تست کمک می کند.
  • دقت زیاد: تست های اتوماتیک با دقت بالایی انجام می شوند و احتمال خطای انسانی در آنها بسیار کم است.
  • صرفه جویی در زمان و هزینه: تست های اتوماتیک در بلندمدت می توانند در زمان و هزینه صرفه جویی قابل توجهی کنند، زیرا نیاز به تکرار تست های دستی را کاهش می دهند.
  • قابلیت تکرارپذیری: تست های اتوماتیک به طور کامل قابل تکرار هستند و می توان آنها را در هر زمان و به دفعات اجرا کرد.

انواع تست اتوماتیک:

  • Unit Testing: +تست واحد برای بررسی عملکرد اجزای بنیادی برنامه مانند توابع، کلاس ها و متغیرها استفاده می شود.
  • Integration Testing: +تست یکپارچه سازی برای بررسی تعامل بین اجزای مختلف برنامه استفاده می شود.
  • End-to-End Testing: +تست انتها به انتها برای بررسی عملکرد کلی برنامه از دیدگاه کاربر استفاده می شود.
  • Performance Testing: +تست کارایی برای سنجش سرعت، پاسخگویی و پایداری برنامه تحت بار استفاده می شود.
  • User Acceptance Testing: +تست پذیرش کاربر برای اطمینان از اینکه برنامه نیازهای کاربران را برآورده می کند استفاده می شود.

تست دستی:​

درست است که تست اتوماتیک مزایای زیادی دارد، اما هنوز هم به تست دستی به عنوان بخشی جدایی ناپذیر از فرآیند توسعه نرم افزار نیاز داریم.

مزایای تست دستی:

  • خلاقیت و قضاوت: تسترهای دستی می توانند با خلاقیت و قضاوت خود سناریوهای تستی را طراحی کنند که ممکن است توسط تست های اتوماتیک پوشش داده نشوند.
  • کاوش عمیق تر: تسترهای دستی می توانند به طور عمیق تر در نرم افزار کاوش کنند و ایراداتی را پیدا کنند که در تست های اتوماتیک سطحی قابل شناسایی نیستند.
  • یافتن ایرادات غیرمنتظره: تسترهای دستی می توانند ایرادات غیرمنتظره ای را که در تست های اتوماتیک پیش بینی نشده اند، پیدا کنند.
  • ارائه محصولی با کیفیت بالا: در نهایت، تست دستی می تواند به ارائه محصولی با کیفیت بالا که نیازهای کاربران را برآورده می کند، کمک کند.

تست‌نویسی در Angular​

Unit Testing در Angular​

خوشبختانه +Angular +به‌صورت پیش‌فرض از +Unit Testing +پشتیبانی می‌کند. +در +Angular +می‌توانید با استفاده از ابزارهای +Karma +و +Jasmine +به نوشتن تست بپردازید. +این تست‌ها برای اطمینان از عملکرد صحیح تمام قسمت‌های سامانه، +اعم از کامپوننت‌ها، سرویس‌ها، توابع و ... می‌توانند مورد استفاده قرار بگیرند.

برای راه‌اندازی این امکان، نیاز به انجام کار خاصی نیست؛ +صرفاً کافی است با اجرای دستور زیر در Terminal، تست‌های موجود را اجرا کنید:

ng test

با اجرای دستور بالا یک مرورگر باز خواهد شد که لیستی از تست‌ها را به شما نشان می‌دهد؛ +همچنین مشخص می‌کند کدام‌یک از آن‌ها موفق و کدام‌یک ناموفق بوده‌اند.

از آنجایی که سایت +Angular +به‌طور کامل در مورد تست‌نویسی توضیح داده است، +شما را به مطالعۀ مستندات مربوطه دعوت می‌کنیم +و از آوردن مطالب تکراری در این مستند می‌پرهیزیم.

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

Integration Testing در Angular​

Integration Testing +در +Angular +به شما امکان می‌دهد تا صحت و تعامل بین اجزا و ماژول‌های مختلف برنامه‌ را ارزیابی کنید. یکی از ابزارهای محبوب مورد استفاده برای این کار +Testing Library +است که برای تست‌هایی که اجزا و تعاملات آن‌ها با یکدیگر مهم هستند، بسیار مناسب است. با استفاده از +Testing Library +می‌توانید عملکرد درست ادغام اجزا را تأیید کنید و مطمئن شوید که برنامه‌ی شما به درستی کار می‌کند.

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

End-to-End Testing در Angular​

ما برای پیاده‌سازی تست‌های +E2E +از ابزار +Cypress +استفاده می‌کنیم. با استفاده از این ابزار به راحتی می‌توان رفتار کاربر واقعی را با استفاده از کد شبیه سازی کرد و آن را با اجرای تست‌ها به صورت دستی جایگزین کرد. +برای نصب و راه‌اندازی +Cypress +در +Angular +، ابتدا +Cypress +را به عنوان +Dev Dependency +به پروژه +Angular +خود اضافه کنید. برای این کار، از دستور زیر در ترمینال استفاده کنید:

ng add @cypress/schematic

بعد از اجرای دستور بالا +Cypress +به پروژه اضافه خواهد شد و +Config +ها و +Script +های مورد نیاز جهت کار با +Cypress +در پروژه ایجاد خواهد شد.

حالا می‌توانید +Cypress +را با اجرای دستور زیر از طریق ترمینال باز کنید:

npm run cy:open

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

Mocking​

زمانی که به تست‌کردن قسمتی از سامانه می‌پردازیم، +ممکن است این قسمت با قسمت‌های دیگر در ارتباط باشد و برای اجرای تست‌ها، +کدهای دیگری احتیاج به اجراشدن داشته باشند که ممکن باشد در عملکرد قسمت فعلی خلل ایجاد کنند. +به‌عنوان مثال فرض کنید بخواهیم سرویسی را تست کنیم که برای انجام عملیاتی احتیاج به فرستادن +Request +به سرور داشته باشد؛ +قطعاً منطقی نیست برای اجرای تست‌ها نیاز باشد چندصد میلی‌ثانیه منتظر دریافت پاسخ از سرور باشیم؛ +از طرفی ممکن است به هر علتی سرور دچار مشکل شده باشد و نتواند پاسخ درستی به ما برگرداند +و تست‌ها +Fail +شوند. +در چنین مواقعی از +Mocking +استفاده می‌کنیم؛ +به‌طوری که یک کلاس یا شیء غیرواقعی می‌سازیم و آن را جای کلاس یا شیء اصلی جا می‌زنیم.

در تست نویسی بیشترین حجم از +Mocking +در +Unit Testing +انجام می‌شود و هر چه به سمت تست‌های بزرگتر مانند +Integration Testing +می‌رویم از حجم +Mocking +کاسته می‌شود و از پیاده‌سازی‌های واقعی استفاده می‌شود تا اینکه در +E2E Testing +فرایند +Mocking +کاملا حذف می‌شود.

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

Mocking in Angular​

در +Angular +فرایند +Mocking +شامل +Component، Service، Directive +و ... می‌شود که برای اطلاعات بیشتر درباره آن می‌توانید از لینک‌های زیر استفاده کنید:

پروژه​

برای کامپوننت‌هایی که در قسمت +Angular +توسعه دادید به ترتیب برای هرکدام 2 عدد +Unit, Integration +و +E2E +تست بنوسید، پس از نوشتن به منتور خود تست‌های خود را نمایش دهید.

+ + + + \ No newline at end of file diff --git a/docs/frontend/phase09-unit-testing/index.html b/docs/frontend/phase09-unit-testing/index.html deleted file mode 100644 index 1c70dc08..00000000 --- a/docs/frontend/phase09-unit-testing/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - -Unit Testing | آکادمی ستاره - - - - -
-

Unit Testing

مقدمه​

پروژه‌های بزرگ از قسمت‌های مختلفی تشکیل شده‌اند که گاهی اوقات به یکدیگر وابسته‌اند -و بر حسب نیاز ممکن است بخواهید یکی از این بخش‌ها را تغییر دهید؛ -چگونه می‌توانید از صحت کارکرد قسمت‌های وابسته اطمینان حاصل کنید؟ -برای پاسخ به این سوال، در این فاز به بررسی راه‌های مختلف تست‌کردن سامانه می‌پردازیم.

  • چه راه‌هایی برای تست‌کردن سامانه وجود دارد؟
  • مزایا و معایب این روش‌ها نسبت به یکدیگر چیست؟
  • در Angular چگونه می‌توان تست نوشت؟
  • چگونه می‌توان فهمید چند درصد از کدهای موجود تست شده‌اند؟

یادگیری​

راه‌های مختلف تست‌کردن سامانه​

Manual Testing​

یکی از راه‌هایی که احتمالاً تا کنون از آن استفاده می‌کردید، تست‌کردن دستی سامانه است. -هرچند که این روش بسیار ساده و قابل‌فهم است اما معایبی دارد:

  • بسیار وقت‌گیر است.
  • پس از مدتی به کاری تکراری و خسته‌کننده تبدیل می‌شود.
  • ممکن است انسان اشتباه کند و متوجه عملکرد اشتباه سامانه نشود.
  • ممکن است انسان فراموش کند و بخشی از سامانه را تست نکند.

برای حل مشکلات بالا، از روش‌های تست خودکار استفاده می‌کنیم که در ادامه به توضیح آن‌ها می‌پردازیم.

End-to-End Testing​

در روش e2e برنامه‌ای می‌نویسیم که تمام عملیاتی که توسط کاربر انجام می‌شود را به ترتیب انجام دهد. -این برنامه خود را جای کاربر جا می‌زند و کوچک‌ترین اعمال انسان را نیز طبق یک الگوریتم، خط به خط اجرا می‌کند. -این روش نزدیک‌ترین روش به تست دستی است اما متاسفانه احتیاج به منابع زیادی از جمله زمان دارد.

Integration Testing​

ممکن است برنامۀ شما با چند برنامۀ دیگر در ارتباط باشد. -به‌عنوان مثال ممکن است شما قسمت فرانت‌اند یک پروژه را توسعه دهید و برنامه‌نویس دیگری قسمت بک‌اند آن را نوشته باشد. -برای اطمینان از یکپارچگی قسمت‌های مختلف و تعامل مناسب آن‌ها با یکدیگر از Integration Testing استفاده می‌کنیم.

Unit Testing​

همان‌طور که از اسم آن مشخص است، در Unit Testing به تست‌کردن کوچک‌ترین اجزاء یک برنامه یعنی توابع، کلاس‌ها و متغیرها می‌پردازیم. -در این روش معمولاً به ظاهر سایت یا تجربۀ کاربر توجه نمی‌کنیم و صرفاً کارکرد صحیح Unitها را مورد بررسی قرار می‌دهیم. -در ادامه به نحوۀ نوشتن Unit Test در Angular می‌پردازیم.

Unit Testing in Angular​

خوشبختانه Angular به‌صورت پیش‌فرض از Unit Testing پشتیبانی می‌کند. -در Angular می‌توانید با استفاده از ابزارهای Karma و Jasmine به نوشتن تست بپردازید. -این تست‌ها برای اطمینان از عملکرد صحیح تمام قسمت‌های سامانه، -اعم از کامپوننت‌ها، سرویس‌ها، توابع و ... می‌توانند مورد استفاده قرار بگیرند.

برای راه‌اندازی این امکان، نیاز به انجام کار خاصی نیست؛ -صرفاً کافی است با اجرای دستور زیر در Terminal، تست‌های موجود را اجرا کنید:

ng test

با اجرای دستور بالا یک مرورگر باز خواهد شد که لیستی از تست‌ها را به شما نشان می‌دهد؛ -همچنین مشخص می‌کند کدام‌یک از آن‌ها موفق و کدام‌یک ناموفق بوده‌اند.

از آنجایی که سایت Angular به‌طور کامل در مورد تست‌نویسی توضیح داده است، -شما را به مطالعۀ مستندات مربوطه دعوت می‌کنیم -و از آوردن مطالب تکراری در این مستند می‌پرهیزیم.

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

Mocking​

زمانی که به تست‌کردن قسمتی از سامانه می‌پردازیم، -ممکن است این قسمت با قسمت‌های دیگر در ارتباط باشد و برای اجرای تست‌ها، -کدهای دیگری احتیاج به اجراشدن داشته باشند که ممکن باشد در عملکرد قسمت فعلی خلل ایجاد کنند. -به‌عنوان مثال فرض کنید بخواهیم سرویسی را تست کنیم که برای انجام عملیاتی احتیاج به فرستادن Request به سرور داشته باشد؛ -قطعاً منطقی نیست برای اجرای تست‌ها نیاز باشد چندصد میلی‌ثانیه منتظر دریافت پاسخ از سرور باشیم؛ -از طرفی ممکن است به هر علتی سرور دچار مشکل شده باشد و نتواند پاسخ درستی به ما برگرداند -و تست‌ها Fail شوند. -در چنین مواقعی از Mocking استفاده می‌کنیم؛ -به‌طوری که یک کلاس یا شیء غیرواقعی می‌سازیم و آن را جای کلاس یا شیء اصلی جا می‌زنیم.

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

پروژه​

برای تمام کامپوننت‌ها و سرویس‌های پروژۀ خود Unit Test بنویسید -و مطمئن شوید حداقل 80درصد کدها تست شده باشند.

از هر دو عضوِ یکی از تیم‌ها درخواست کنید تا کد شما را جداگانه Review کنند؛ -بعد از اینکه Approve کردند، به منتور عادی مراجعه کنید -و پس از Approve او، به منتور سنیور بگویید تا کد شما را ببیند.

همچنین لازم است شما هم حداقل کد یک تیم دیگر را Review کنید. -سعی کنید تمام مواردی که در این فاز یاد گرفتید را هنگام Review مورد بررسی قرار دهید.

- - - - \ No newline at end of file diff --git a/docs/frontend/phase10-dom/index.html b/docs/frontend/phase10-dom/index.html new file mode 100644 index 00000000..13432bb8 --- /dev/null +++ b/docs/frontend/phase10-dom/index.html @@ -0,0 +1,67 @@ + + + + + + + +DOM | آکادمی ستاره + + + + +
+

DOM

DOM Structure

ساختار سلسله مراتبی سندهای HTML​

سندهای +HTML +به صورت سلسله مراتبی سازماندهی شده‌اند. این ساختار به برنامه‌نویسان و مرورگرها اجازه می‌دهد تا به راحتی عناصر مختلف سند را پیدا و دستکاری کنند. در این ساختار، هر عنصر +HTML +یک گره +(Node) +است و گره‌ها می‌توانند شامل گره‌های فرزند +(Child Nodes) +باشند. این روابط سلسله مراتبی به صورت یک درخت +(Tree) +نمایش داده می‌شود.

انواع گره‌ها:

  • Root Node: +گره ریشه در سند HTML معمولاً تگ +<html> +است که تمام عناصر دیگر سند به عنوان فرزندان آن قرار می‌گیرند.
  • Parent Nodes: +گره‌هایی که گره‌های فرزند دیگری را شامل می‌شوند. برای مثال، تگ +<body> +یک گره والد است که ممکن است شامل گره‌های فرزندی مانند تگ‌های +<div> +, +<p> +, +<a> +و غیره باشد.
  • Child Nodes: گره‌هایی که درون گره‌های والد قرار می‌گیرند. برای مثال، تگ +<li> +یک گره فرزند برای گره والد +<ul> +یا +<ol> +است.
  • Sibling Nodes: گره‌هایی که یک والد مشترک دارند. برای مثال، دو گره +<p> +که هر دو داخل یک +<div> +قرار دارند، گره‌های خواهر هستند.
  • Leaf Nodes: گره‌هایی که هیچ فرزندی ندارند، معمولاً گره‌های متنی یا گره‌های بدون محتوای داخلی مانند +<img>.

آشنایی با DOM​

DOM +یا +Document Object Model +یک رابط است که اجازه دسترسی و تغییر ساختار سند‌های HTML را به کاربر می‌دهد. این رابط توسط مرورگرها و به واسطه یک زبان برنامه‌نویسی مانند جاوااسکریپت در دسترس کاربر قرار می‌گیرد.

ساختار DOM:

DOM +شامل گره‌های مختلفی است که هر یک نوع خاصی از داده‌ها یا بخش‌های سند را نشان می‌دهند. انواع اصلی گره‌ها عبارتند از:

  • Document Node: ریشه درخت +DOM +که نمایانگر کل سند است.
  • Element Nodes: نمایانگر تگ‌های +HTML +مانند <div>, <p>, <a> و غیره.
  • Text Nodes: نمایانگر متن‌های داخل تگ‌ها.
  • Attribute Nodes: نمایانگر صفات تگ‌ها مانند +class, id.
  • Comment Nodes: نمایانگر نظرات موجود در سند

کاربردهای DOM:

  • دستکاری محتوا: DOM +به شما امکان می‌دهد محتوای +HTML +را به صورت پویا تغییر دهید، مانند اضافه کردن، حذف یا ویرایش عناصر و متن.
  • مدیریت استایل: DOM به شما امکان می‌دهد استایل عناصر +HTML +را به صورت پویا تغییر دهید، مانند تغییر رنگ، اندازه و موقعیت.
  • ایجاد رفتارهای تعاملی: +DOM +به شما امکان می‌دهد رفتارهای تعاملی به صفحات وب اضافه کنید، مانند کلیک کردن، کشیدن و رها کردن و تغییر ورودی کاربر.

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

+ + + + \ No newline at end of file diff --git a/docs/frontend/phase11-typescript/index.html b/docs/frontend/phase11-typescript/index.html new file mode 100644 index 00000000..dee9b592 --- /dev/null +++ b/docs/frontend/phase11-typescript/index.html @@ -0,0 +1,154 @@ + + + + + + + +TypeScript | آکادمی ستاره + + + + +
+

TypeScript

مقدمه​

تصور کنید در یک پروژه‌ی بزرگ جاوااسکریپت کار می‌کنید. همان‌طور که کد شما بزرگ‌تر و پیچیده‌تر می‌شود، مشکلات مختلفی پدیدار می‌شوند. +به دلیل نبود تایپ‌دهی ایستا، بسیاری از خطاها تنها زمانی مشخص می‌شوند که کد در حال اجرا است. این می‌تواند باعث بروز مشکلات جدی و غیرمنتظره‌ای شود. +فهمیدن کدها و نگهداری آن‌ها دشوارتر می‌شود، به‌ویژه اگر تایپ‌های متغیرها و توابع مشخص نباشند. +خطاهایی که در مراحل اولیه توسعه شناسایی نمی‌شوند، ممکن است به‌صورت ناگهانی در مراحل پایانی پروژه بروز کنند و زمان و هزینه بیشتری برای رفع آن‌ها نیاز باشد.

TypeScript +یک زبان برنامه‌نویسی است که بر روی جاوااسکریپت بنا شده +و انواع تایپ‌ها را برای مشخص کردن نوع داده در اخیار شما قرار می‌دهد. +این قابلیت‌ها به برنامه‌نویسان کمک می‌کند تا کدهای خود را خواناتر و قابل‌اعتمادتر بنویسند. +با مشخص کردن تایپ هر داده، کامپایلر قدرتمند +TypeScript +به کمک شما می‌آید و از بسیاری از خطاهایی که ممکن است به دلیل تایپ نامناسب داده در اجرا به آن بربخورید جلوگیری می‌کند و آن‌ها را در همان زمان کامپایل شناسایی می‌کند.

  • انواع تایپ‌ها در +TypeScript +کدام‌اند؟
  • interface +در +TypeScript +چه فایده‌ای دارد؟
  • Type Aliases +در +TypeScript +چه مزیتی دارد؟
  • Generics +در +TypeScript +چیست؟
  • Decorator +در +TypeScript +چه کاری برای ما انجام می‌دهد؟

یادگیری​

انواع تایپ‌های primitive​

در TypeScript، انواع ابتدایی +(Primitive Types) +به انواع داده‌ای ساده و پایه‌ای اشاره دارند که معمولاً به صورت مستقیم و بدون استفاده از ساختارهای پیچیده تعریف می‌شوند. انواع ابتدایی در +TypeScript +شامل موارد زیر هستند:

typeتعریف
numberبرای اعداد استفاده می‌شود، مانند اعداد صحیح و اعشاری.
stringبرای رشته‌ها یا متن‌ها استفاده می‌شود.
booleanبرای مقادیر صحیح و غلط (true و false) استفاده می‌شود.
nullبرای متغیرهایی که مقدار آن‌ها خالی یا نال باشد.
undefinedبرای متغیرهایی که مقدار آن‌ها تعریف نشده باشد.
symbolنوعی داده‌ی ابتدایی جدید که برای ایجاد شناسه‌های منحصر به فرد استفاده می‌شود.
bigintبرای اعداد بزرگ که نمی‌توانند در نوع داده‌ی number جای بگیرند.

این انواع داده‌های ابتدایی به شما امکان می‌دهند تا متغیرهای ساده و پایه‌ای را در +TypeScript +تعریف کنید و از آن‌ها در برنامه‌های خود استفاده کنید.

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره انواع ابتدایی در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

انواع داده‌های پیچیده‌تر در TypeScript​

در +TypeScript +، علاوه بر انواع داده‌های ابتدایی، انواع داده‌های پیچیده‌تری نیز وجود دارند که به شما امکان می‌دهند تا ساختارهای داده‌ای پیشرفته‌تری را تعریف کنید. این انواع عبارتند از:

typeتعریف
Arrayبرای ذخیره‌سازی مجموعه‌ای از مقادیر استفاده می‌شود.
Tupleبرای ذخیره‌سازی مجموعه‌ای ثابت از مقادیر با به ترتیب مشخص استفاده می‌شود.
Enumبرای تعریف مجموعه‌ای از ثابت‌ها استفاده می‌شود.
Union Typesبرای متغیرهایی که می‌توانند چند نوع مختلف داشته باشند استفاده می‌شود.
Intersection Typeبرای ترکیب چند نوع استفاده می‌شود.
Objectبرای تعریف ساختارهای داده‌ای که شامل مجموعه‌ای از ویژگی‌ها هستند استفاده می‌شود.
Function Typesبرای تعریف نوع تابع استفاده می‌شود.

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره انواع داده‌های پیچیده در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

تمرین​

  • یک تابع بنویسید که یک آرایه از اعداد دریافت کند و مجموع آن‌ها را برگرداند.
  • یک تابع بنویسید که می‌تواند هم یک رشته و هم یک عدد را به عنوان ورودی دریافت کند و نوع ورودی را برگرداند.
  • یک +Enum +برای روزهای هفته تعریف کنید و سپس یک تابع بنویسید که نام روز را به عنوان ورودی دریافت کرده و اگر روز جمعه باشد، پیامی برگرداند که تعطیل است.

Interfaces​

در +TypeScript +از +interface +برای تعریف قراردادها و قالب‌های داده‌ای استفاده می‌شوند. اینترفیس‌ها مشخص می‌کنند که یک شیء یا کلاس باید چه ویژگی‌ها و متدهایی را داشته باشد، بدون اینکه جزئیات پیاده‌سازی را تعیین کنند. اینترفیس‌ها به ساختاردهی کد و اطمینان از سازگاری بین اجزای مختلف کمک می‌کنند.

مثال ساده از یک +interface +:

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const personName: string = "John";

let user: Person = {
  name: personName,
  age: 30,
  greet() {
    console.log("Hello!");
  }
};

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره +interface +در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

تمرین​

  • یک اینترفیس به نام +Shape +تعریف کنید که دارای دو ویژگی +color +و +calculateArea +باشد. ویژگی +color +یک رشته است و ویژگی +calculateArea +یک تابع بدون ورودی بازگشتی عددی است.
  • یک کلاس به نام +Circle +بنویسید که ویژگی‌های +color +و +radius +را دارد و از اینترفیس +Shape +پیاده‌سازی شود.

Type Aliases​

در +Type Aliases +،
+TypeScript +به شما اجازه می‌دهند تا یک نام جدید برای یک نوع داده‌ای موجود تعریف کنید. این کار باعث می‌شود کد خواناتر و مدیریت انواع داده‌ها آسان‌تر شود.

مثال ساده از یک +Type Alias +:

type ID = string | number;
let userId: ID = 123;
userId = "abc123";

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره +Type Alias +در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

تمرین​

  • یک +Type Alias +به نام +Direction +تعریف کنید که انواع left +، +right +، +up +و +down +را به عنوان مقادیر مجاز دارد.
  • یک +Type Alias +به نام +BinaryOperation +تعریف کنید که نوع تابعی با دو ورودی عددی و یک خروجی عددی را نمایش دهد.
  • یک +Type Alias +به نام +Action +تعریف کنید که شامل یک شیء با دو ویژگی +type +به نوع رشته و +payload +به نوع عدد یا رشته باشد.

Generics​

در +Generics ،TypeScript +به شما اجازه می‌دهند تا توابع، کلاس‌ها و اینترفیس‌هایی بنویسید که با انواع مختلفی از داده‌ها کار کنند بدون اینکه نوع خاصی به آن‌ها محدود شود. این کار باعث می‌شود کد قابل استفاده مجدد و انعطاف‌پذیرتر شود.

مثال ساده از یک تابع +Generic +:

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(123);

در این مثال، تابع +identity +با هر نوع داده‌ای کار می‌کند و نوع ورودی و خروجی آن با +T +مشخص می‌شود.

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره +Generic +در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

تمرین​

  • یک تابع +Generic +به نام +reverseArray +بنویسید که یک آرایه از هر نوع داده‌ای را به عنوان ورودی دریافت کرده و آن را برعکس کند.
  • یک کلاس +Generic +به نام +Box +بنویسید که یک مقدار از هر نوع داده‌ای را ذخیره کند و این مقدار را برگرداند.
  • یک +Interface Generic +به نام +Pair +تعریف کنید که دو ویژگی +first +و +second +با نوع دلخواه +T +داشته باشد.

Decorators​

دکوریتورها +(Decorators) +در +TypeScript +یک ویژگی قدرتمند هستند که به شما امکان می‌دهند تا رفتار کلاس‌ها و اعضای آن‌ها را تغییر دهید یا به آن‌ها قابلیت‌های جدیدی اضافه کنید. دکوریتورها در حقیقت توابعی هستند که بر روی کلاس‌ها، متدها، ویژگی‌ها، یا پارامترهای متدها اعمال می‌شوند. دکوریتورها با استفاده از +@ +پیش از تعریف آن‌ها، مشخص می‌شوند.

برای اطلاعات بیشتر و یادگیری عمیق‌تر درباره دکوریتورها در +TypeScript +، می‌توانید از منابع زیر استفاده کنید:

+ + + + \ No newline at end of file diff --git a/docs/general/index.html b/docs/general/index.html index 48325a90..3355c9ac 100644 --- a/docs/general/index.html +++ b/docs/general/index.html @@ -6,13 +6,13 @@ عمومی | آکادمی ستاره - - + +
-

عمومی

فازهایی که به تمام کارآموزان مربوط می‌شود و مختص دورۀ خاصی نیست، در این قسمت قرار می‌گیرند.

- - +

عمومی

فازهایی که به تمام کارآموزان مربوط می‌شود و مختص دورۀ خاصی نیست، در این قسمت قرار می‌گیرند.

+ + \ No newline at end of file diff --git a/docs/general/phase01-presentation/index.html b/docs/general/phase01-presentation/index.html index a91b98e1..6c8b2ba9 100644 --- a/docs/general/phase01-presentation/index.html +++ b/docs/general/phase01-presentation/index.html @@ -6,19 +6,19 @@ Presentation | آکادمی ستاره - - + +
-

Presentation

مقدمه​

در این فاز مطالبی را به‌صورت تیتروار بیان می‌کنیم +

Presentation

مقدمه​

در این فاز مطالبی را به‌صورت تیتروار بیان می‌کنیم که به شما کمک می‌کند برای ارائه یا سخنرانی آماده شوید.

  • چگونه می‌توانیم شناخت خوبی از مخاطبان بدست آوریم؟
  • یک ارائه از چند بخش تشکیل شده است و هر کدام دارای چه قسمت‌هایی هستند؟
  • چگونه می‌توانیم مخاطبان را جذب کنیم؟
  • چگونه اضطراب خود را مدیریت کنیم؟

شناخت​

مخاطبان​

  • چه کسانی هستند؟
  • چه چیزهایی از قبل می‌دانند؟
  • هدفشان از شرکت در همایش و گوش‌دادن به صحبت‌های شما چیست؟

موقعیت​

  • آیا موقعیت رسمی است یا غیررسمی؟
  • همایش بزرگ است یا کوچک؟
    • تعداد شرکت‌کنندگان
    • ابعاد سالن
    • حامیان مراسم
  • چقدر زمان در اختیار دارید؟
    • قبل از شروع مراسم و برای آمادگی
    • هنگام سخنرانی
    • پرسش و پاسخ

هدف​

  • هدف شما ارتقاء سطح اطلاعات مخاطبان است؟
  • هدف شما متقاعدکردن مخاطبان برای انجام یا پذیرفتن امری است؟
  • هدف شما یاد دادن و انتقال دانش به مخاطبان است؟
  • هدف شما افزایش انگیزۀ مخاطبان است؟

ساختار و سخنرانی​

  • قسمت‌های شروع، میانی و پایان باید کاملاً مشخص و شفاف باشند.

شروع​

  • در 60 تا 90 ثانیۀ اول، نه تنها مبحثی که قرار است ارائه دهید، بلکه خودتان را نیز باید معرفی کنید.
  • کاری که قرار است انجام شود را توصیف کنید.
  • اهمیت مطلب را نشان دهید.
  • این کار به مخاطبان یک آشنایی اولیه می‌دهد.

میانی​

  • در قسمت میانی باید در یک ترتیب منطقی، مطلب را برای مخاطبان توضیح دهید.

پایانی​

  • در قسمت پایانی باید فقط نکات اصلی را خلاصه کنید.
  • معمولاً مخاطبان قسمت اول و آخر را به یاد می‌آورند.
  • علاوه بر خلاصه‌کردن نکات اصلی، باید اهمیت آن‌ها را هم به مخاطبان نشان دهید.
  • باید تمام تکه‌های مختلفی که ارائه دادید را در قالب یک Big Picture قرار دهید.

کمک‌های بصری​

اگر از Slideهایی استفاده کنید که به‌خوبی طراحی شده باشند، معمولاً مخاطبان آن‌ها را بهتر به یاد می‌آورند. فرقی نمی‌کند چه چیزی ارائه می‌دهید، در هر حال باید تصمیماتی اخذ کنید؛ مثلاً اینکه از چه قالبی استفاده کنید؟ به‌عنوان مثال Portrait یا Landscape؟ یا اینکه چه اطلاعاتی را درج کنید؟ نکتۀ مهمی که باید در نظر بگیرید این است که از قالبی استفاده کنید که به‌راحتی خوانده شود.

رنگ​

  • اگر در اتاق تاریکی ارائه می‌دهید، از قالب رنگی تیره، در غیر این صورت از قالب رنگی روشن استفاده کنید.
  • ترکیب رنگی که استفاده می‌کنید بر روی سرعت خواندن مخاطبان اثرگذار است.
    • سریع‌ترین ترکیب رنگی، مشکی روی زرد است.
    • خواندن ترکیب رنگ‌های قرمز، سبز و قهوه‌ای برای بسیاری از مخاطبان دشوار است.
  • حتماً به تضاد رنگی توجه کنید.
  • از رنگ‌های گرم، مانند قرمز یا نارنجی، به‌عنوان پس‌زمینه استفاده نکنید.

جزئیات​

  • از اسلایدهایی استفاده کنید که جزئیات مهم را برجسته می‌کنند.
  • از استعمال جزئیاتی که مخاطب نیاز ندارد بداند یا نمی‌تواند به‌خاطر بسپارد، بپرهیزید.
  • از اطلاعاتی که صرفاً برای پُر کردن صفحه استفاده می‌شوند، استفاده نکنید (Filler Content).
  • از لیست‌های طولانی استفاده نکنید.

ارائه​

ارائه به معنی تعامل سخنران با مخاطبان است. شما راه‌های مختلفی برای نحوۀ ارائه دارید که در ادامه مزایا و معایب هر کدام را ذکر می‌کنیم.

حفظ‌کردن سخنرانی​

مزایا​

  • امکان ارتباط چشمی را فراهم می‌کند.

معایب​

  • برای سخنرانی‌های طولانی سخت است.
  • امکان خطا وجود دارد.
  • قابل ارتقاء نیست.

روخوانی از متن​

مزایا​

  • دقت را بالا می‌برد.

معایب​

  • امکان ارتباط چشمی را حذف می‌کند.
  • به نظر طبیعی نمی‌رسد.
  • قابل ارتقاء نیست.

بداهه‌گویی​

مزایا​

  • به نظر طبیعی می‌رسد.

معایب​

  • بسیار امکان خطا وجود دارد.

استفاده از Slideها​

مزایا​

  • امکان ارتباط چشمی را فراهم می‌کند.
  • نظم را تضمین می‌کند.
  • قابل ارتقاء است.

معایب​

  • تا حدی امکان خطا وجود دارد.

قبل از ارائه​

ارائه‌ای تاثیرگذار است که نیازهای مخاطبان هنگام طراحی آن در نظر گرفته شده باشد.

  • تمام Slideها را تا جای ممکن دقیق و منطقی مرتب کنید.

خلاصه​

با یک Outline Slide شروع کنید که تیتر مطالبی را که قرار است ارائه شوند، در آن قرار داده‌اید.

  • مشکلی که وجود دارد را تعریف کنید (اهمیت، سختی و فرض‌ها).
  • کارهایی که قبلاً انجام شده و مرتبط با موضوع هستند را معرفی کنید (مزایا و معایب).
  • روشی که شما پیشنهاد می‌کنید را توصیف کنید (نمودار).
  • نتایج آزمایش‌هایی که انجام داده‌اید را در اختیار مخاطبان قرار دهید (کامل‌بودن، رعایت انصاف و پیچیدگی).
  • نتیجه‌گیری کنید (ایدۀ اصلی و برتری‌های آن).
  • مراجع را معرفی کنید (اطلاعات کامل).

جزئیات​

  • از قابل‌فهم‌بودن و خوانایی جلوه‌های بصری اطمینان حاصل کنید.
  • برای برجسته‌کردن نکات مهم از رنگ استفاده کنید (زیاده‌روی نکنید).
  • در یک Slide، مطالب زیادی قرار ندهید.
  • تمام مطالبی که در Slide است باید توضیح داده شوند.
  • فرمول و روابط ریاضی زیادی در Slideها قرار ندهید (فقط میزانی که مورد نیاز است).
  • تمرکز شما باید روی نتایج باشد.
  • از عکس یا نمودار برای تفهیم نکات خود بهره بگیرید.
  • به تغییرات ناگهانی موجود در نمودارها و جداول اشاره کنید.

محتوا​

  • حداقل یک Slide حاوی مشارکت‌های اصلی داشته باشید.
  • یک Slide که حاوی نتایج و جهت‌دهی برای آینده است، داشته باشید.
  • یک Slide برای لیست مقالات و مراجع داشته باشید.
  • چند Slide اضافه که حاوی جزئیات کار هستند، داشته باشید (برای زمانی که مخاطبان از شما در مورد آن‌ها سوال بپرسند).

پیشگیری​

  • برای مواقع اضطراری چند نسخۀ پشتیبان همراه خود داشته باشید (فرمت‌های مختلف مثل PDF یا ذخیره‌سازی ابری).
  • حداقل دو بار به‌صورت تمرینی ارائه دهید (برای مدیریت زمان و اعمال تغییرات مورد نیاز).
  • اگر ارائه حضوری است، قبل از آن به سالن همایش بروید و با محیط آشنا شوید.

لباس​

  • یک لباس تمیز و اتوکشیده‌شده فراهم کنید.
    • لباس یا کفشی که تنگ باشد نپوشید.
    • لباس یا کفش جدید نپوشید.

هنگام ارائه​

اضطراب​

  • ترس یا اضطراب خود را بپذیرید.
  • قبل از اینکه وارد سالن شوید چند نفس عمیق بکشید.
  • این نکته را در نظر بگیرید که شما برای ارائه بسیار تلاش کرده‌اید و تمرین داشته‌اید.
  • به جای آنکه بر روی خودتان تمرکز کنید، بر روی مطلبی که قرار است ارائه دهید متمرکز شوید.
  • در صورت امکان سعی کنید تعدادی از دوستان یا همکاران شما در جمعیت حضور داشته باشند.
  • به چهره‌های مهربان و دوستانه نگاه کنید.

سپاس‌گزاری​

  • سخنرانی خود را با تشکر از مخاطبان شروع کنید.
  • از تلاش و حمایت منتورها، مدیران و همکاران خود تشکر کنید.

نسبت​

  • چند دقیقه در مورد نسبت این ارائه با مخاطبان صحبت کنید.
  • نتایج را خلاصه‌وار توضیح دهید.
  • ارتباط این مطلب با مطالب دیگری که ارائه داده شده‌اند یا قرار است ارائه داده شوند، چیست؟
  • چرا این مطلب توجه شما را جلب کرد و می‌خواهید آن را ارائه دهید؟

جذب​

  • صدای خود را با توجه به محیط و مخاطبان تنظیم کنید.
  • سرعت ارائه را متوسط نگه‌دارید به گونه‌ای که مخاطبان خسته نشود و از طرفی مطلب قابل‌فهم باشد.
  • سرعت و تُنِ صدای خود را کم و زیاد کنید تا مطالب خسته‌کننده نشوند.
  • اگه ارائه حضوری است، در جایی نایستید که همواره جلوی دید فردی را بگیرید.
  • لزومی ندارد ارائه دقیقاً مانند آنچه فراهم کرده‌اید پیش برود اما از طرفی نباید بیش از حد از آن فاصله بگیرد.

ارتباط چشمی​

  • همواره ارتباط چشمی برقرار کنید.
  • به مخاطبان نگاه کنید، نه پرده نمایش.
  • به افراد مختلف نگاه کنید و سعی کنید با همه ارتباط بگیرید.

محتوا​

  • هدف، اهمیت مطلب، ایده‌های اصلی و برتری راه‌حل‌تان را تشریح کنید.
  • نکات اصلی را تکرار کنید.
  • به مخاطبان بگویید چه چیزی قرار است به آن‌ها گفته شود و در نهایت به آن‌هایی بگویید چه چیزی به آن‌ها گفتید.

پرسش و پاسخ​

  • حتماً بخشی از زمان را به پرسش و پاسخ اختصاص دهید (10 الی 15 دقیقه برای یک سخنرانی 45 دقیقه‌ای).
  • برای سوالات سخت و چالشی خودتان را آماده کنید.
  • در برابر سوالاتی که سخت هستند، بیش از حد حالت تدافعی نگیرید.
  • سوال را تکرار کنید.
  • یک سوال سخت می‌تواند تبدیل به یک ایده شود و در تحقیقات بعدی از آن استفاده کرد.
  • خیلی راحت بگویید نمی‌دانم.
  • در صورت لزوم به کسی که سوال را پرسیده پیشنهاد دهید بعد از سخنرانی با او گفت‌وگو کنید.
  • چیزی نگویید که از آن اطمینان ندارید.
- - + + \ No newline at end of file diff --git a/docs/general/phase02-grammar/index.html b/docs/general/phase02-grammar/index.html index 98f3edc2..439b3a57 100644 --- a/docs/general/phase02-grammar/index.html +++ b/docs/general/phase02-grammar/index.html @@ -6,12 +6,12 @@ Grammar | آکادمی ستاره - - + +
-

Grammar

مقدمه​

فرقی ندارد در چه قالبی و با چه لحنی متن را بنویسید؛ +

Grammar

مقدمه​

فرقی ندارد در چه قالبی و با چه لحنی متن را بنویسید؛ همواره باید نکاتی را در خصوص نگارش درست کلمات رعایت کنید. دستور زبان و قواعد نگارشی می‌توانند شخصی‌سازی شوند اما ما در اینجا به قوانین استاندارد آن‌ها می‌پردازیم.

  • چه نکاتی را باید در خصوص علائم نگارشی رعایت کنیم؟
  • از کلمات عربی و ترکیب‌ها چگونه به درستی استفاده کنیم؟
  • برای اطمینان از املای درست کلمات از چه ابزاری استفاده کنیم؟

علائم نگارشی​

نقطه​

  • از نقطه در آخر جمله‌های خبری، امری، غیرپرسشی و فاقد تعجب استفاده می‌کنیم.
  • نقطه را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

علامت سوال​

  • از علامت سوال در آخر جمله‌های پرسشی استفاده می‌کنیم.
  • برای نشان‌دادن تردید یا تمسخر می‌توان علامت سوال را داخل پرانتز گذاشت:
    • برو به مهندس (؟) بگو بیاد.
  • علامت سوال را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

علامت تعجب​

  • از علامت تعجب در آخر جمله‌هایی که حاوی محتوای احساسی هستند یا بعد از منادا استفاده می‌کنیم.
  • علامت تعجب را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

ویرگول​

  • از ویرگول در نقاط مختلفی می‌توان استفاده کرد:
    • ایجاد فاصله یا مکث کوتاه
    • جلوگیری از تکرار حرف ربط
      • کامپیوتر، لپ‌تاپ، موبایل و تبلت جزء دستگاه‌های دیجیتال معروف هستند.
    • بدل
      • فردوسی، یکی از شاعران بزرگ ایرانی، شاهنامه را در 30 سال سرود.
  • ویرگول را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

نقطه‌ویرگول​

  • از نقطه‌ویرگول در نقاط مختلفی می‌توان استفاده کرد:
    • بخواهیم بین دو جملۀ مرتبط، فاصله یا مکث کوتاهی ایجاد کنیم
    • بخواهیم جملۀ فعلی را تمام کنیم اما محتوای آن را در جملۀ بعدی ادامه دهیم
  • نقطه‌ویرگول را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

پرانتز​

  • از پرانتز در نقاط مختلفی می‌توان استفاده کرد:
    • ارائۀ توضیحات بیشتر برای قسمتی از متن
    • آوردن توضیحی که در ساختار جمله ضروری نباشد
    • معنی کلمۀ قبل
  • پرانتز باز را با یک Space از کلمۀ قبلی جدا می‌کنیم و به کلمۀ بعدی می‌چسبانیم.
  • پرانتز بسته را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

گیومه​

  • از گیومه در نقاط مختلفی می‌توان استفاده کرد:
    • بخواهیم یک واژۀ تخصصی یا اسم خاص را برای اولین بار ذکر کنیم
    • ذکر نقل قول
  • گیومه باز را با یک Space از کلمۀ قبلی جدا می‌کنیم و به کلمۀ بعدی می‌چسبانیم.
  • گیومه بسته را به کلمۀ قبلی می‌چسبانیم و با یک Space از کلمۀ بعدی جدا می‌کنیم.

نیم‌فاصله​

نیم‌فاصله کاربردهای زیادی دارد که در ادامه مثال‌هایی از آن‌ها را می‌آوریم:

  • بین می و ادامۀ فعل در ماضی استمراری و مضارع استمراری
    • می‌رفتم
    • می‌آیم
  • بین ریشۀ فعل و ضمیر در ماضی نقلی
    • آمده‌ام
    • رفته‌اید
  • بین کلماتی که به ه آخری که صدای ـِ بدهد ختم شوند و ضمایر ملکی (ام، ات، اش و ...)
    • خانه‌ام
    • پنجره‌ام
  • بین کلماتی که به ه آخری که صدای ـِ بدهد ختم شوند و ای نکره‌ساز
    • خانه‌ای
    • پنجره‌ای
  • جمع کلمات با ها
    • آن‌ها
    • کتاب‌ها
  • بین پیشوند بی و کلمۀ بعدی
    • بی‌دلیل
    • بی‌حوصله
  • ترکیب‌های وصفی عادی و مقلوب که به یک صفت واحد تبدیل شده‌اند
    • پاک‌دامن
    • گوشت‌تلخ
  • بین صفت و پسوندهای تفضیلی تر و ترین به جز بهتر و بهترین
    • بزرگ‌تر
    • قشنگ‌تر

اعداد​

حروف و ارقام​

به طور کلی اعداد یک‌تکه را باید با حروف بنویسیم. به اعداد کوچکتر از بیست و ضرایب دَه، اعداد یکتکه می‌گوییم. @@ -53,7 +53,7 @@ تا لیستی از کلمات مشابه را به شما نشان دهد؛ همچنین در صورتی که بر روی هرکدام از نتایج کلیک کنید، توضیحات مختصری را در مورد علت انتخاب املای مورد نظر به شما می‌دهد.

کلیدهای میانبر​

عبارتمیانبر
فتحهShift + ش
ضمهShift + س
کسرهShift + ی
تنوین فتحهShift + ض
تنوین ضمهShift + ص
تنوین کسرهShift + ث
ویرگولShift + ف
نقطه‌ویرگولShift + غ
گیومه بازShift + ن
گیومه بستهShift + م
کشیدن حروفShift + ت
نیم‌فاصلهCtrl + Shift + 2
- - + + \ No newline at end of file diff --git a/docs/intro/index.html b/docs/intro/index.html index 05d481b9..0c5bd295 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -6,13 +6,13 @@ مقدمات | آکادمی ستاره - - + +
-

مقدمات

آموزش‌های این بخش برای کارآموزان تمام دوره‌ها به صورت مشترک آماده شده است و قبل از شروع فازهای اختصاصی باید این بخش را مطالعه کنند.

- - +

مقدمات

آموزش‌های این بخش برای کارآموزان تمام دوره‌ها به صورت مشترک آماده شده است و قبل از شروع فازهای اختصاصی باید این بخش را مطالعه کنند.

+ + \ No newline at end of file diff --git a/docs/intro/phase01-onboarding/index.html b/docs/intro/phase01-onboarding/index.html index 9e4d84de..c26ca48a 100644 --- a/docs/intro/phase01-onboarding/index.html +++ b/docs/intro/phase01-onboarding/index.html @@ -6,12 +6,12 @@ Onboarding | آکادمی ستاره - - + +
-

Onboarding

خوش آمدی!​

ما خیلی خوشحالیم که در کداستار هستی! +

Onboarding

خوش آمدی!​

ما خیلی خوشحالیم که در کداستار هستی! در این دوره از ابزار GitHub برای مدیریت و اشتراک‌گذاری کار‌ها و همچنین از Microsoft Teams به‌عنوان پیام‌رسان استفاده می‌کنیم. اگه سوال یا فیدبکی داشتی می‌تونی به منتورهات تو Teams پیام بدی و مشکلت رو بر طرف کنی.

بخشی از فرآیند خوش‌آمدگویی‌‍ت خودآموزه تا برای ارتباط برقرار کردن با سایر هم‌دوره‌ای‌ها و منتور‌ها بتونی آماده شی. @@ -22,7 +22,7 @@ برو؛ اونجا لیستی از Issueهای باز رو می‌تونی ببینی؛ اسم خودت رو پیدا و Issue رو مطالعه کن.

- - + + \ No newline at end of file diff --git a/docs/intro/phase02-health/index.html b/docs/intro/phase02-health/index.html index 6cf4e97e..ae6c409a 100644 --- a/docs/intro/phase02-health/index.html +++ b/docs/intro/phase02-health/index.html @@ -6,12 +6,12 @@ Health | آکادمی ستاره - - + +
-

Health

حفظ سلامتی در کار طولانی با کامپیوتر​

استفاده طولانی مدت از کامپیوتر میتونه سبب مشکلات جسمی و دردهای مزمن بشه. +

Health

حفظ سلامتی در کار طولانی با کامپیوتر​

استفاده طولانی مدت از کامپیوتر میتونه سبب مشکلات جسمی و دردهای مزمن بشه. همچنین خستگی ناشی از کار طولانی مدت باعث کم شدن بازدهی میشه. با رعایت ارگونومی کار با کامپیوتر میتوان دو مورد بیان شده را به حداقل رسوند.

تنظیم میز کار​

هر کجا که کار می‌کنید، نکات ذکر شده تو تصویر زیر را رعایت کنید. مواردی مثل موقعیت مانیتور نسبت به چشم‌ها، موقعیت موس و کیبرد نسبت به دست‌ها و به خصوص مچ، موقعیت کف پا نسبت به زمین و صاف بودن کمر و گردن بسیار مهم هستند.

Ergonomic Workstation

پوستر با کیفیت‌تر عکس بالا با فرمت PDF

ارگونومی در استفاده از لپتاپ​

با وجود اینکه اکثر ما برای کار کردن از لپتاپ استفاده می‌کنیم، لپتاپا طراحی ارگونومیک ندارن. @@ -26,7 +26,7 @@ یک نمونه از این برنامه‌هاست که متن‌باز هست و برای هر سه سیستم‌عامل دسکتاپ وجود داره.

استفاده از فیلتر نور آبی​

نور آبی که از صفحه نمایش‌ها ساطع میشه ممکنه باعث بهم ریختن ساعت خواب شما بشه. خوشبختانه سیستم‌عامل‌ها برای جلوگیری از این امر قابلیتی در نظر گرفتن که تو ساعات مشخص نور آبی صفحه را فیلتر میکنن (نرم‌افزارهای Third Party زیادی هم برای این کار وجود داره). پیشنهاد میکنم این قابلیت را از چند ساعت قبل از خوابتون فعال کنید.

- - + + \ No newline at end of file diff --git a/docs/intro/phase03-non-tech/index.html b/docs/intro/phase03-non-tech/index.html index c3c0dd1b..cd577177 100644 --- a/docs/intro/phase03-non-tech/index.html +++ b/docs/intro/phase03-non-tech/index.html @@ -6,12 +6,12 @@ Non-Tech Meetings | آکادمی ستاره - - + +
-

جلسات غیرفنی

متاسفانه این روزا شیوع بیماری کرونا باعث شده از هم دور باشیم، اما ما یک سری برنامه چیدیم که بتونیم در همین دوران هم ارتباطات مونو حفظ کنیم و با بقیه بیشتر آشنا شیم و بتونیم اوقات خوشی داشته باشیم تا از کار خسته نشیم، چون کارمون تک بعدی نیست و جدا از اون باید در این شرایط روی روحیه خودمون هم کار کنیم.

جلسات دورهمی​

هدف این جلسات اینه که بیشتر با همدیگه آشنا شیم و توی یک فضای غیر کاری و دوستانه باهم دیگه صحبت کنیم. +

جلسات غیرفنی

متاسفانه این روزا شیوع بیماری کرونا باعث شده از هم دور باشیم، اما ما یک سری برنامه چیدیم که بتونیم در همین دوران هم ارتباطات مونو حفظ کنیم و با بقیه بیشتر آشنا شیم و بتونیم اوقات خوشی داشته باشیم تا از کار خسته نشیم، چون کارمون تک بعدی نیست و جدا از اون باید در این شرایط روی روحیه خودمون هم کار کنیم.

جلسات دورهمی​

هدف این جلسات اینه که بیشتر با همدیگه آشنا شیم و توی یک فضای غیر کاری و دوستانه باهم دیگه صحبت کنیم. همونطور که میدونین ما تو کداستار و ستاره تیم های مختلف داریم، ممکنه همدیگرو تا حدودی بشناسین، اما میخوایم که بیشتر دور هم جمع شیم و با هم بیشتر صحبت کنیم. بهتره این صحبت‌ها در مورد یک سری موضوع های مشخص باشه که از قبل هم بتونیم راجع بهش فکر کنیم و توی جلسه حرف @@ -29,7 +29,7 @@ بازی های کامپیوتری مثل کانتر(Counter-Strike)، اسم فامیلی، آوالون (Avalon)، پانتومیم، اسکریبل و ... و هم یک سری مسابقه های معمایی و پازلی که به لول آخر برسیم تا برنده شیم.

- - + + \ No newline at end of file diff --git a/docs/intro/phase04-git/index.html b/docs/intro/phase04-git/index.html index 9f31a7f8..a565a8d1 100644 --- a/docs/intro/phase04-git/index.html +++ b/docs/intro/phase04-git/index.html @@ -6,12 +6,12 @@ Git | آکادمی ستاره - - + +
-

Git

مقدمه​

VCS یا کنترلِ نسخه، سیستمی است که تغییرات را در فایل یا دسته‌ای از فایل‌ها ذخیره می‌کند +

Git

مقدمه​

VCS یا کنترلِ نسخه، سیستمی است که تغییرات را در فایل یا دسته‌ای از فایل‌ها ذخیره می‌کند و به شما این امکان را می‌دهد که در آینده به نسخه و نگارش خاصی برگردید.

اگر شما یک گرافیست یا طراح وب هستید و می‌خواهید نسخه‌های متفاوت از عکس‌ها و قالب‌های خود داشته باشید، استفاده از یک Version Control System یا سیستمِ کنترلِ نسخه انتخاب درستی است. VCS به شما این امکان را می‌دهد که فایل‌های انتخابی یا کل پروژه را به یک حالت قبلی خاص برگردانید، روند تغییرات را بررسی کنید، ببینید چه کسی آخرین بار تغییری ایجاد کرده که احتمالاً مشکل آفرین شده، @@ -64,7 +64,7 @@ همچنان که کامیت می‌سازید، یک برنچ master برایتان ساخته می‌شود که به آخرین کامیتی که ساخته‌اید اشاره می‌کند. هر بار که کامیت می‌کنید نشانگر برنچ master به طور خودکار به جلو حرکت می‌کند.

چگونه گیت می‌داند که روی چه شاخه‌ای کار می‌کنید؟​

گیت نشانگر خاصی به نام HEAD را در خود دارد. HEAD نشانگری است که به برنچ محلی که روی آن هستید اشاره می‌کند.

ساختن برنچ جدید​

برای ساخت یک برنچ جدید (اشاره‌گر به مکان کنونی HEAD) کافی است از دستور زیر استفاده کنید تا یک برنچ جدید با نام دلخواه برای شما ساخته شود:

git branch <branch-name>

تعویض برنچ‌ها​

برای تعویض یا جابه‌جایی به یک برنچ از پیش ساخته شده، می‌توانید دستور زیر را اجرا کنید:

git checkout <branch-name>

مزیت استفاده از برنچ‌ها​

عموماً از برنچ‌ها برای مدیریت دسترسی و حفاظت از شاخۀ اصلی استفاده می‌شود.

ادغام برنچ‌ها​

برای ادغام first-branch با second-branch ابتدا به second-branch میرویم و سپس با استفاده از دستور merge، محتویات شاخۀ first-branch را به شاخۀ second-branch نیز منتقل می‌کنیم:

git checkout second-branch
git merge first-branch

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

- - + + \ No newline at end of file diff --git a/docs/meetings/04-1-1/index.html b/docs/meetings/04-1-1/index.html new file mode 100644 index 00000000..f419594e --- /dev/null +++ b/docs/meetings/04-1-1/index.html @@ -0,0 +1,21 @@ + + + + + + + +جلسات یک به یک | آکادمی ستاره + + + + +
+

جلسات یک به یک

هدف​

جلسات یک به یک بستر مناسبی برای شنیدن دغدغه‌ها، انتقال تجربه و ایجاد همدلی بین ارشد و کارآموزان می‌باشد.

حاضرین​

حاضرین جلسه کارآموز و ارشد او می‌باشند.

مدت زمان​

مدت زمان جلسه بین 30 تا 45 دقیقه می‌باشد. بنا بر صلاحدید ارشد امکان تمدید مدت زمان جلسه وجود دارد.

پیشنیاز​

پیشنهاد می‌شود کارآموز پیش از برگزاری جلسه به دغدغه‌ها و اهداف خود فکر کرده باشد تا در طول جلسه با ارشد خود به اشتراک +بگذارد.

چارچوب​

به طور کلی جلسات یک به یک در کداستار از دو بخش اصلی تشکیل می‌شوند:

  1. دریافت بازخورد

    در این بخش کارآموز بازخوردهای خود را درباره کداستار به ارشد خود می‌دهد. +ارشد نیز برای بهبود عملکرد کارآموز به وی بازخوردهای لازم را ارائه می‌دهد.

  2. انتقال تجربه

    در این بخش کارآموز دغدغه‌های فنی و غیرفنی خود را برای ارشد مطرح می‌کند تا ارشد راهنمایی‌های مناسبی را در اختیار وی +قرار دهد.

+ + + + \ No newline at end of file diff --git a/docs/meetings/ama/index.html b/docs/meetings/ama/index.html new file mode 100644 index 00000000..93509a40 --- /dev/null +++ b/docs/meetings/ama/index.html @@ -0,0 +1,27 @@ + + + + + + + +جلسات AMA | آکادمی ستاره + + + + +
+

جلسات AMA(Ask Me Anything)

هدف​

هدف از جلسه +AMA +آشنایی بیشتر با مهیمن، شنیدن تجربیات فنی از زبان یک فرد باتجربه و پاسخ به سوالات کارآموزان درباره مهیمن و تکنولوژی‌های +مربوط به حوزه‌های کداستار می‌باشد.

حاضرین​

یکی از اعضای با تجربه مهیمن به عنوان مهمان و کارآموزان.

مدت زمان​

زمان جلسه‌ی +AMA +حدودا یک ساعت می‌باشد. بنا بر صلاحدید برگزارکنندگان جلسه، امکان تمدید زمان جلسه نیز وجود دارد.

پیش‌نیاز​

پیش از برگزاری جلسه، یک فرم منتشر می‌شود که کارآموزان سوالات خود را در آن وارد کنند.

چارچوب​

در جلسات +AMA +مهمان می‌تواند یک ارائه‌ی کوتاه (حداکثر 15 دقیقه) برای کارآموزان داشته باشد. در ادامه مهمان به سوالاتی که کارآموزان پیش +از جلسه در فرم مربوط به جمع‌آوری سوالات ثبت کرده‌اند پاسخ می‌دهد. پس از پاسخ به سوالات از پیش ثبت شده، مهمان می‌تواند به +صلاحدید خود به سایر سوالات کارآموزان نیز پاسخ دهد.

+ + + + \ No newline at end of file diff --git a/docs/meetings/coffee-chat/index.html b/docs/meetings/coffee-chat/index.html new file mode 100644 index 00000000..3f5b2e64 --- /dev/null +++ b/docs/meetings/coffee-chat/index.html @@ -0,0 +1,23 @@ + + + + + + + +جلسات غیررسمی | آکادمی ستاره + + + + +
+

جلسات غیررسمی (Coffee Chat)

هدف​

هدف از جلسات غیررسمی آشنایی کارآموزان با یکدیگر در یک فضای دوستانه و برقراری ارتباط صمیمانه بین کارآموزان می‌باشد.

حاضرین​

یک گروه حداکثر 4 نفره از کارآموزان که منتورهای متفاوتی دارند و تا کنون با هم در جلسه غیررسمی شرکت نکرده‌اند.

مدت زمان​

زمان جلسه غیررسمی حداقل 30 دقیقه می‌باشد. بنا بر صلاحدید حاضرین، امکان تمدید زمان جلسه نیز وجود دارد. پیشنهاد می‌شود +مدت زمان جلسه از 2 ساعت تجاوز نکند.

پیش‌نیاز​

حداکثر تا دو روز پیش از برگزاری جلسات غیررسمی، کارآموزان می‌بایست لیست افرادی که با آن‌ها جلسه خواهند داشت را در فرم +مربوط به جلسات غیررسمی وارد کند.

ارشدها نیز می‌بایست حداکثر تا روز پیش از برگزاری جلسات، زمان و افراد شرکت‌کننده در جلسات را تایید یا رد کنند. در صورتی +که بنا بر +صلاحدید ارشدها نیاز به تغییر زمان یا افراد جلسه بود، کارآموزان موظف به اعمال تغییر خواسته شده و دریافت تایید ارشدها +هستند.

چارچوب​

جلسات غیررسمی چارچوبی برای برگزاری ندارند، اما حفظ رفتار حرفه‌ای در این جلسات الزامی است.

عدم حضور در جلسه غیررسمی (به هر دلیل) شامل امتیاز منفی می‌شود.

+ + + + \ No newline at end of file diff --git a/docs/meetings/daily/index.html b/docs/meetings/daily/index.html new file mode 100644 index 00000000..1838b89b --- /dev/null +++ b/docs/meetings/daily/index.html @@ -0,0 +1,52 @@ + + + + + + + +جلسات روزانه | آکادمی ستاره + + + + +
+

جلسات روزانه

هدف​

هدف از جلسه روزانه دریافت فیدبک از کارآموزان، آگاهی منتور و ارشد از پیشرفت کارآموزان با توجه به چک‌‌‌لیست فازها، انتقال +اطلاعات درباره رویدادهای پیش‌رو در دوره به کارآموزان، انتقال دانش و تجربه به کارآموزان و پاسخ به سوالات کارآموزان +می‌باشد.

حاضرین​

ارشد و منتور هر گروه از کارآموزان به همراه کارآموزان.

مدت زمان​

زمان جلسه‌ی روزانه حدودا 30 دقیقه می‌باشد، بنا بر صلاحدید منتورها امکان تمدید زمان جلسه نیز وجود دارد، اما الزام به حضور +افراد پس از 30 دقیقه وجود ندارد.

چارچوب​

در ابتدای جلسه به رسم ادب، احوال پرسی اولیه‌ای انجام خواهد شد و پس از آن روند اصلی جلسه آغاز می‌شود.

دریافت بازخورد توسط ارشد و منتور​

ارشدها و منتورها موظف هستند، همواره از کارآموزان درباره فرایندهای دوره کارآموزی، کیفیت رویدادها، کیفیت مستندات و سایر +موضوعات عمومی +بازخورد دریافت کنند. هدف از دریافت بازخورد این است که در صورت مشاهده هرگونه عدم رضایت کارآموزان از دوره، برای بهبود +وضعیت اقدامات لازم صورت بگیرد.

طبیعتا بازخوردهایی که جنبه شخصی پیدا می‌کنند در +چارچوب جلسات روزانه انجام نمی‌شود و در قالب جلسات دیگری +(جلسات یک به یک) +به صورت خصوصی دریافت می‌شوند.

پیگیری کارها توسط منتور​

از کارآموزان پیگیری می‌شود، در هر فاز از دوره مطابق با چک‌لیست کارهای آن فاز چه میزان پیشرفت داشته‌اند و کارهای انجام +شده +توسط کارآموزان مطابق با تسک‌های تعریف شده در همان فاز، از جهت کیفی بررسی می‌شوند.

انتظار می‌رود هر فاز در چارچوب زمانی تعیین شده برای همان فاز توسط کارآموزان به اتمام برسد. +در صورتی که منتور پیش از خارج شدن از چارچوب زمانی هر فاز، پیش‌بینی کند که با توجه به سرعت پیشرفت، کارها مطابق +با ددلاین فاز انجام نخواهند شد، او موظف است برای افزایش سرعت پیشرفت کارآموزان راهکاری ارائه +دهد. منتور میبایست در صورت لزوم با ارجاع موضوع به ارشد، درخواست تغییر ددلاین فاز مربوطه را اعلام کند. در صورتی که ارشدها +بنا بر +صلاحدیدشان تصمیم به تغییر ددلاین فاز مربوطه گرفتند، این تصمیم باید در اسرع وقت به اطلاع سایر منتورها و کارآموزان +برسد.

در صورتی که +کارآموزان چک‌لیست مربوطه را بروز نکرده باشند؛ انتظار می‌رود که تذکرات لازم به کارآموزان داده شود و در صورت تکرار امتیاز +منفی به افراد تعلق گیرد.

بررسی کیفی تسک‌های انجام شده در فاز، بنا بر صلاحدید منتور و ارشد صورت می‌گیرد. به عنوان مثال در صورتی که تسک مربوطه، +مطالعه یک موضوع و پاسخ به مجموعه‌ای سوالات توسط کارآموزان است، منتور می‌تواند از کارآموزان بخواهد تا پاسخشان را بیشتر +توضیح بدهند یا با پرسش سوالات دیگری (درباره موضوع مورد مطالعه) عمق درک موضوع توسط کارآموز را بسنجد.

آگاه سازی کارآموزان از رویدادهای پیش‌رو​

منتور موظف است از رویدادهایی که طی یک یا دو روز آینده برگزار می‌شوند مطلع باشد و اطلاع‌رسانی و هماهنگی‌های لازم برای +حضور حداکثری کارآموزان را +انجام دهد. همچنین کارآموزان موظف می‌باشند تا وضعیت حضورشان طی حداقل سه روز آتی را به اطلاع منتورشان برسانند.

پاسخ به سوالات کارآموزان​

علاوه بر پاسخ به سوالات کارآموزان توسط منتورها که در طول روز به طور پیوسته انجام می‌شود، کارآموزان می‌توانند سوالات خود +را در حضور +ارشدشان مطرح کنند تا در صورت نیاز، علاوه بر منتور، از دانش ارشد نیز بهره‌مند شوند.

اشتراک دانش بین کارآموزان، منتور و ارشد (اختیاری)​

با توجه به سوالات مطرح شده و مدت زمان جلسه، منتور و ارشد به صلاحدید خودشان می‌توانند به اشتراک دانش با کارآموزان +بپردازند. +در صورت علاقه نیز منتور می‌تواند ارائه‌های کوچکی برای این قسمت از جلسات روزانه آماده کند و در چارچوب زمانی حداکثر 15 +دقیقه، مطلب +مذکور را ارائه دهد.

از موضوعات پیشنهادی برای این جلسات می‌توان به آموزش نحوه کار با ابزارها ( +Ide، +git/github +و ...)، آموزش برخی +tip and trickهای +تکنولوژی‌های مورد استفاده و انتقال موضوعات جذاب روز درباره حوزه مورد توجه کارآموزی اشاره کرد.

+ + + + \ No newline at end of file diff --git a/docs/meetings/gathering/index.html b/docs/meetings/gathering/index.html new file mode 100644 index 00000000..57cbf821 --- /dev/null +++ b/docs/meetings/gathering/index.html @@ -0,0 +1,21 @@ + + + + + + + +جلسات دورهمی | آکادمی ستاره + + + + +
+

جلسات دورهمی

هدف از جلسه​

هدف از این جلسات سرگرمی و شکل گیری رابطه صمیمانه بین کارآموزان و برگزار کنندگان کداستار می‌باشد.

حاضرین جلسه​

حضور در جلسات دورهمی برای همه‌‌ی افراد حاضر در کداستار آزاد است، البته همواره یکی از برگزارکنندگان کداستار در جلسات +دورهمی حاضر می‌باشد.

مدت زمان جلسه​

مدت زمان جلسه با توجه نظر برگزارکنندگان جلسه تعیین می‌شود.

چارچوب جلسه​

جلسات دورهمی با محوریت موضوعاتی مانند بوردگیم، صحبت درباره فیلم یا کتاب و یا موضوعات پیشنهادی برگزار می‌شوند. +موضوع هر جلسه بنا بر نظرسنجی، پیش از برگزاری آن جلسه اعلام می‌شود. +حفظ رفتار حرفه‌ای در این جلسات الزامی است.

+ + + + \ No newline at end of file diff --git a/docs/meetings/index.html b/docs/meetings/index.html new file mode 100644 index 00000000..fe38fe58 --- /dev/null +++ b/docs/meetings/index.html @@ -0,0 +1,18 @@ + + + + + + + +جلسات | آکادمی ستاره + + + + +
+

جلسات

sdhfjl

+ + + + \ No newline at end of file diff --git a/docs/project/index.html b/docs/project/index.html index e9753ea5..3de4c248 100644 --- a/docs/project/index.html +++ b/docs/project/index.html @@ -6,13 +6,13 @@ پروژه | آکادمی ستاره - - + +
-

پروژه

قبل از شروع پروژه نیاز است تمام کارآموزان به‌طور جداگانه داک‌های این بخش را مطالعه نمایند.

- - +

پروژه

قبل از شروع پروژه نیاز است تمام کارآموزان به‌طور جداگانه داک‌های این بخش را مطالعه نمایند.

+ + \ No newline at end of file diff --git a/docs/project/phase01-etl/index.html b/docs/project/phase01-etl/index.html index 722ec5c4..a9931ebc 100644 --- a/docs/project/phase01-etl/index.html +++ b/docs/project/phase01-etl/index.html @@ -6,12 +6,12 @@ ETL | آکادمی ستاره - - + +
-

ETL

مقدمه​

در دنیای واقعی، داده‌ها از منابع مختلف و با ساختارهای متفاوت جمع‌آوری می‌شوند. +

ETL

مقدمه​

در دنیای واقعی، داده‌ها از منابع مختلف و با ساختارهای متفاوت جمع‌آوری می‌شوند. در این فاز می‌خواهیم داده‌ها را مورد پردازش قرار دهیم و به یک خروجی مناسب برسیم؛ برای این کار باید تمام داده‌ها را جمع‌آوری کنیم، آن‌ها را تمیز کنیم، @@ -52,8 +52,8 @@ اطلاعات تکمیلی را می‌توانید در صفحۀ GitHub آن مشاهده کنید.

اشتراک‌گذاری​

توصیه می‌کنیم Pipeline خود را با اعضای تیم به اشتراک بگذارید، Pipeline آن‌ها را نیز بررسی کنید و روش‌های مورد استفاده را ببینید. -برای این کار می‌توانید از آیکن Export the pipeline استفاده کنید.

- - +برای این کار می‌توانید از آیکن Export the pipeline استفاده کنید.

+ + \ No newline at end of file diff --git a/docs/project/star-sprint-project/index.html b/docs/project/star-sprint-project/index.html new file mode 100644 index 00000000..94cf3a86 --- /dev/null +++ b/docs/project/star-sprint-project/index.html @@ -0,0 +1,60 @@ + + + + + + + +BI | آکادمی ستاره + + + + +
+

BI

مقدمه​

طبق تحقیقات انجام شده مشخص شده است که ذهن انسان‌ها با عناصر گرافیکی ارتباط بهتری برقرار می‌کند و عناصر گرافیکی را بهتر درک می‌کند. این مسئله باعث شده است که پلتفرم‌های گزارش‌ گیری و داشبورد ساز در بین تحلیلگران داده محبوبیت پیدا کند. +پلتفرم‌های گزارش‌گیری این امکان را به تحلیلگر می‌دهند که در یک نگاه وضعیت سازمان خود را ارزیابی کند و مسیر پیشرفت سازمان به سمت اهدافش را به صورت خیلی واضح به نمایش گذارد.

تعریف​

Dataset (مجموعه داده)​

به داده‌هایی که تحلیلگر به تحلیل و بصری سازی آن‌ها می‌پردازد +Dataset +می‌گوییم. +عموما در مرحله بصری‌سازی با داده‌های تمیز و ساختار یافته سر و کار داریم.

Chart (نمودار)​

نمودارها نمایش بصری داده هستند که در آن‌ها داده به وسیله عناصر بصری مانند ستون‌ها، خطوط، رنگ‌ها و .. نمایش داده می‌شوند. +عموما تحلیلگرها برای ساده سازی مفاهیم پیچیده و انتقال اطلاعات زیاد به صورت فشرده از نمودارها کمک می‌گیرند.

Aggregation (تجمیع سازی)​

به فرایند گرداوری، ترکیب و خلاصه سازی داده‌ها با هدف به دست آوردن داده‌ای که نماینده مجموعه بزرگتری از داده می‌باشد +Aggregation +می‌گوییم. در فرایند تجمیع سازی عموما روی داده‌های خام پردازش انجام می‌دهیم تا به داده‌های کمتری برسیم که امکان بصری سازی بهتری داشته باشند. از جمله تجمیع سازی‌های معروف می‌توان به محاسبه حداقل، میانگین، حداکثر و ... اشاره کرد.

مراحل پروژه​

ورود داده​

در این مرحله می‌بایست ساختار داده‌ی +Dataset +تعریف شده و داده متناسب با ساختار تعریف شده از کاربر دریافت شود.

به طور کلی عملکردهای زیر برای +Datasetها +در نظر گرفته شده است:

  • ایجاد +Dataset: +در هنگام ایجاد +Dataset +اطلاعاتی مانند نام، نوع (عدد صحیح یا متنی) و ترتیب ستون‌ها و نام +Dataset +از کاربر دریافت می‌شوند. +کاربر مجاز نیست +Datasetهای +همنام داشته باشد.
  • حذف +Dataset: +کاربر تنها می‌تواند +Datasetهایی +را حذف کند که مورد استفاده نیستند.
  • تغییر نام +Dataset: +در هنگام تغییر نام +Dataset +کاربر اجازه ندارد از نامی که به +Dataset +دیگری تعلق دارد استفاده کند.
  • بارگذاری داده در +Dataset: +در مرحله بارگذاری، کاربر یک فایل +csv +شامل داده‌های خود با ساختار تعریف شده برای +Dataset +بارگذاری می‌کند که در این فایل هر ستون با علامت کاما (,) و هر سطر با اینتر از یکدیگر تفکیک می‌شوند.

طراحی نمودار​

در این مرحله کاربر +Dataset +خود را انتخاب می‌کند و دو ستون را به عنوان ستون‌های گروهبندی و تجمیع سازی مشخص می‌کند.

کاربر محدودیتی برای انتخاب ستون گروه‌بندی ندارد ولی ستون تجمیع سازی تنها می‌تواند از میان ستون‌های عددی بجز ستون مورد استفاده برای گروهبندی انتخاب شود.

در نهایت داده‌های تجمیع شده از +Dataset +استخراج شده و نمودار نمایش داده می‌شود.

note

در این مرحله تنها تجمیع سازی‌ای که روی ستون تجمیع سازی صورت می‌گیرد میانگین می‌باشد.

تجمیع سازی پیشرفته​

در این مرحله کاربر علاوه بر میانگین می‌تواند از تجمیع سازی‌هایی مانند میانه، حداکثر، حداقل، تعداد و جمع روی ستون تجمیع سازی استفاده کند.

لاگ گیری و تحلیل لاگ​

ایجاد لاگ یکی از مهم‌ترین وظایف نرم‌افزار می‌باشد که با هدف ایجاد شفافیت روی فرایندهای انجام شده توسط نرم‌افزار صورت می‌گیرد که یکی از کاربردهای آن کمک به تیم توسعه در جهت بررسی کارکرد نرم‌افزار است. +نرم‌افزار می‌بایست لاگ‌های قابل تحلیل ایجاد کند تا تیم توسعه بتواند با مطالعه لاگ و تحلیل آن با استفاده از ابزارهای تحلیل لاگ بتواند از کیفیت عملکرد قسمت‌های مختلف نرم‌افزار مطلع شود. +تیم توسعه نیز باید با ابزارهای تحلیل لاگ آشنایی داشته باشد و پس از بارگذاری لاگ‌ها در این ابزارها به تحلیل و بررسی لاگ‌ها به وسیله ابزارها بپردازد.

+ + + + \ No newline at end of file diff --git a/docs/roadmaps/Backend/index.html b/docs/roadmaps/Backend/index.html index 669db516..dd1afa39 100644 --- a/docs/roadmaps/Backend/index.html +++ b/docs/roadmaps/Backend/index.html @@ -6,13 +6,13 @@ Backend | آکادمی ستاره - - + +
-

Backend

سلام!😊

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

انتخاب زبان برنامه‌نویسی

اولین قدم، انتخاب زبان برنامه‌نویسیه. پیشنهاد ما زبان‌های OOP مثل Java یا #C هستن. این زبان‌ها به دلیل شیءگرایی و ساختارمند بودن، در پروژه‌های بزرگ و سازمانی استفاده می‌شن. یادگیری اصول برنامه‌نویسی با این زبان‌ها به شما کمک می‌کنه تا پایه‌ای قوی برای یادگیری زبان‌های دیگر و مفاهیم پیشرفته‌تر داشته باشین.

فاز اول: تسلط بر زبان Java یا #C 👨‍💻

برای شروع، می‌تونین با Java یا #C کار کنین. اگه تصمیم به یادگیری Java گرفتی و بعدا خواستی به #C مهاجرت کنی، اصلا جای نگرانی نیست؛ مفاهیم OOP و بسیاری از اصول برنامه‌نویسی در هر دو زبان مشترکن. فقط کافیه سینتکس‌ها و کتابخانه‌های مخصوص #C رو یاد بگیری که با تمرین و استفاده از منابع آموزشی مثل مستندات مایکروسافت به راحتی ممکنه.

منابع پیشنهادی:

جاواکاپ: مجموعه‌ای از ویدیوها و تمرین‌های آموزشی به زبان فارسی. ویدیوها رو ببین و تمرین‌ها رو انجام بده تا از میزان پیشرفتت مطمئن بشی.

جاواکاپ

برنامه‌نویسی پیشرفته شریف (AP شریف): این دوره شامل منابع متنوعیه که پایه و اساس دانش یک مهندس نرم‌افزار رو تشکیل می‌ده. تمرین‌ها و پروژه‌ها رو انجام بده و کیفیت کارت رو بررسی کن.

AP شریف

ثبت‌نام در دوره

توصیه ما 🌟

اول جاواکاپ رو ببین و تمرین‌هاش رو حل کن، بعدش برو سراغ AP شریف و تمرین‌ها و پروژه‌های اون رو انجام بده. برای دسترسی به تمرین‌های بیشتر می‌تونی از سایت کوئرا یا موارد مشابه کمک بگیری.

سایت‌های مشابه کوئرا:

برای ارزیابی کدها و بررسی میزان پیشرفت، علاوه بر کوئرا، می‌تونین از سایت‌های مشابهی مثل Codeforces، HackerRank، و LeetCode استفاده کنین. این سایت‌ها بستری عالی برای تمرین و ارزیابی مهارت‌های برنامه‌نویسی فراهم می‌کنن.

فاز دوم: ساختمان داده و الگوریتم‌ها 📚

ساختمان داده و الگوریتم‌ها یکی از مهم‌ترین بخش‌های برنامه‌نویسی هستن. تسلط بر این مفاهیم به شما کمک می‌کنه تا مسائل پیچیده رو بهینه‌تر و کارآمدتر حل کنین. برای شروع، می‌تونین از پلی‌لیست یوتیوب GeeksForGeeks استفاده کنین و سپس سوالات الگوریتمی مختلف رو حل کنین تا این مفاهیم به خوبی در ذهنتون جا بیفته.

پلی‌لیست GeeksForGeeks

تمرینات الگوریتمی کوئرا

فاز سوم: فریمورک‌ها و تکنولوژی‌های کاربردی 🔧

حالا وقتشه که بریم سراغ فریمورک‌ها و تکنولوژی‌های کاربردی. فریمورک‌ها ابزارهایی هستن که توسعه نرم‌افزار رو سریع‌تر و کارآمدتر می‌کنن. یادگیری فریمورک‌ها و تکنولوژی‌های جدید به تو کمک می‌کنه تا در پروژه‌های واقعی و تجاری بهتر عمل کنی و مهارت‌های خودت رو به سطح بالاتری برسونی.

برای این کار می‌تونی از مستندات کارآموزی کداستار استفاده کنی. در مستندات کارآموزی کداستار تلاش کردیم علاوه‌بر سرنخ دادن به مطالب متنوع، پروژه‌هایی تعریف کنیم که حین انجامشون با کلی چالش فنی مختلف روبه‌رو بشیم و با حل این چالش‌ها، مهارت‌های فنی و تحقیقاتیمون رشد کنه.

مستندات کارآموزی کداستار

ممکنه یه جاهایی نیاز به ویدیو پیدا کنی. برای این کار میتونی از یوتیوب و آپارات کداستار کمک بگیری.

آپارات کداستار

فاز چهارم: پروژه‌های عملی و همکاری در تیم‌ها 👥

یکی از بهترین راه‌ها برای یادگیری و تثبیت مهارت‌ها، انجام پروژه‌های عملی و همکاری در تیم‌هاست. این کار باعث می‌شه با چالش‌های واقعی مواجه بشی و مهارت‌های تیمی و فنی‌ات رو ارتقا بدی. پیشنهاد می‌کنیم به پروژه‌های متن‌باز بپیوندی یا توی هکاتون‌ها و مسابقات برنامه‌نویسی شرکت کنی.

فاز پنجم: یادگیری مستمر و به‌روز رسانی دانش 📖

دنیای فناوری اطلاعات دائما در حال تغییر و به‌روزرسانیه. برای موفقیت در این حوزه، باید همواره به‌روز باشی و مفاهیم جدید رو یاد بگیری. مطالعه مقالات، کتاب‌ها و دوره‌های آنلاین مرتبط و شرکت در کنفرانس‌ها و وبینارهای حوزه IT بسیار مهمه.

منابع پیشنهادی:

دوره‌های Coursera: این پلتفرم دوره‌های متنوعی در حوزه مهندسی نرم‌افزار ارائه می‌ده که می‌تونی ازشون استفاده کنی.

کتاب‌های مرجع: کتاب‌هایی مثل "Clean Code" نوشته Robert C. Martin و "Design Patterns" نوشته Erich Gamma و همکارانش می‌تونن منابع بسیار خوبی باشن.

کنفرانس‌ها و وبینارها: شرکت در این رویدادها باعث می‌شه با جدیدترین تکنولوژی‌ها و روش‌ها آشنا بشی.

سخن‌آخر 🎓

امیدواریم این نقشه راه بهت کمک کنه تا مهارت‌های ضروری در حوزه مهندسی نرم‌افزار رو کسب کنی و به رشد فردی و حرفه‌ای خودت برسی.

موفق باشی، تیم کداستار⭐

- - +

Backend

سلام!😊

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

انتخاب زبان برنامه‌نویسی

اولین قدم، انتخاب زبان برنامه‌نویسیه. پیشنهاد ما زبان‌های OOP مثل Java یا #C هستن. این زبان‌ها به دلیل شیءگرایی و ساختارمند بودن، در پروژه‌های بزرگ و سازمانی استفاده می‌شن. یادگیری اصول برنامه‌نویسی با این زبان‌ها به شما کمک می‌کنه تا پایه‌ای قوی برای یادگیری زبان‌های دیگر و مفاهیم پیشرفته‌تر داشته باشین.

فاز اول: تسلط بر زبان Java یا #C 👨‍💻

برای شروع، می‌تونین با Java یا #C کار کنین. اگه تصمیم به یادگیری Java گرفتی و بعدا خواستی به #C مهاجرت کنی، اصلا جای نگرانی نیست؛ مفاهیم OOP و بسیاری از اصول برنامه‌نویسی در هر دو زبان مشترکن. فقط کافیه سینتکس‌ها و کتابخانه‌های مخصوص #C رو یاد بگیری که با تمرین و استفاده از منابع آموزشی مثل مستندات مایکروسافت به راحتی ممکنه.

منابع پیشنهادی:

جاواکاپ: مجموعه‌ای از ویدیوها و تمرین‌های آموزشی به زبان فارسی. ویدیوها رو ببین و تمرین‌ها رو انجام بده تا از میزان پیشرفتت مطمئن بشی.

جاواکاپ

برنامه‌نویسی پیشرفته شریف (AP شریف): این دوره شامل منابع متنوعیه که پایه و اساس دانش یک مهندس نرم‌افزار رو تشکیل می‌ده. تمرین‌ها و پروژه‌ها رو انجام بده و کیفیت کارت رو بررسی کن.

AP شریف

ثبت‌نام در دوره

توصیه ما 🌟

اول جاواکاپ رو ببین و تمرین‌هاش رو حل کن، بعدش برو سراغ AP شریف و تمرین‌ها و پروژه‌های اون رو انجام بده. برای دسترسی به تمرین‌های بیشتر می‌تونی از سایت کوئرا یا موارد مشابه کمک بگیری.

سایت‌های مشابه کوئرا:

برای ارزیابی کدها و بررسی میزان پیشرفت، علاوه بر کوئرا، می‌تونین از سایت‌های مشابهی مثل Codeforces، HackerRank، و LeetCode استفاده کنین. این سایت‌ها بستری عالی برای تمرین و ارزیابی مهارت‌های برنامه‌نویسی فراهم می‌کنن.

فاز دوم: ساختمان داده و الگوریتم‌ها 📚

ساختمان داده و الگوریتم‌ها یکی از مهم‌ترین بخش‌های برنامه‌نویسی هستن. تسلط بر این مفاهیم به شما کمک می‌کنه تا مسائل پیچیده رو بهینه‌تر و کارآمدتر حل کنین. برای شروع، می‌تونین از پلی‌لیست یوتیوب GeeksForGeeks استفاده کنین و سپس سوالات الگوریتمی مختلف رو حل کنین تا این مفاهیم به خوبی در ذهنتون جا بیفته.

پلی‌لیست GeeksForGeeks

تمرینات الگوریتمی کوئرا

فاز سوم: فریمورک‌ها و تکنولوژی‌های کاربردی 🔧

حالا وقتشه که بریم سراغ فریمورک‌ها و تکنولوژی‌های کاربردی. فریمورک‌ها ابزارهایی هستن که توسعه نرم‌افزار رو سریع‌تر و کارآمدتر می‌کنن. یادگیری فریمورک‌ها و تکنولوژی‌های جدید به تو کمک می‌کنه تا در پروژه‌های واقعی و تجاری بهتر عمل کنی و مهارت‌های خودت رو به سطح بالاتری برسونی.

برای این کار می‌تونی از مستندات کارآموزی کداستار استفاده کنی. در مستندات کارآموزی کداستار تلاش کردیم علاوه‌بر سرنخ دادن به مطالب متنوع، پروژه‌هایی تعریف کنیم که حین انجامشون با کلی چالش فنی مختلف روبه‌رو بشیم و با حل این چالش‌ها، مهارت‌های فنی و تحقیقاتیمون رشد کنه.

مستندات کارآموزی کداستار

ممکنه یه جاهایی نیاز به ویدیو پیدا کنی. برای این کار میتونی از یوتیوب و آپارات کداستار کمک بگیری.

آپارات کداستار

فاز چهارم: پروژه‌های عملی و همکاری در تیم‌ها 👥

یکی از بهترین راه‌ها برای یادگیری و تثبیت مهارت‌ها، انجام پروژه‌های عملی و همکاری در تیم‌هاست. این کار باعث می‌شه با چالش‌های واقعی مواجه بشی و مهارت‌های تیمی و فنی‌ات رو ارتقا بدی. پیشنهاد می‌کنیم به پروژه‌های متن‌باز بپیوندی یا توی هکاتون‌ها و مسابقات برنامه‌نویسی شرکت کنی.

فاز پنجم: یادگیری مستمر و به‌روز رسانی دانش 📖

دنیای فناوری اطلاعات دائما در حال تغییر و به‌روزرسانیه. برای موفقیت در این حوزه، باید همواره به‌روز باشی و مفاهیم جدید رو یاد بگیری. مطالعه مقالات، کتاب‌ها و دوره‌های آنلاین مرتبط و شرکت در کنفرانس‌ها و وبینارهای حوزه IT بسیار مهمه.

منابع پیشنهادی:

دوره‌های Coursera: این پلتفرم دوره‌های متنوعی در حوزه مهندسی نرم‌افزار ارائه می‌ده که می‌تونی ازشون استفاده کنی.

کتاب‌های مرجع: کتاب‌هایی مثل "Clean Code" نوشته Robert C. Martin و "Design Patterns" نوشته Erich Gamma و همکارانش می‌تونن منابع بسیار خوبی باشن.

کنفرانس‌ها و وبینارها: شرکت در این رویدادها باعث می‌شه با جدیدترین تکنولوژی‌ها و روش‌ها آشنا بشی.

سخن‌آخر 🎓

امیدواریم این نقشه راه بهت کمک کنه تا مهارت‌های ضروری در حوزه مهندسی نرم‌افزار رو کسب کنی و به رشد فردی و حرفه‌ای خودت برسی.

موفق باشی، تیم کداستار⭐

+ + \ No newline at end of file diff --git a/docs/roadmaps/DevOps/index.html b/docs/roadmaps/DevOps/index.html index 32c8dcb7..65f6685b 100644 --- a/docs/roadmaps/DevOps/index.html +++ b/docs/roadmaps/DevOps/index.html @@ -6,13 +6,13 @@ DevOps | آکادمی ستاره - - + +
-

DevOps

سلام!😊

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

💡 اگر می‌خوای تبدیل به یک متخصص DevOps بشی، اولین پیش‌نیاز شناخت چرخه تولید نرم‌افزاره. چون که به عنوان یک متخصص DevOps از تو انتظار می‌ره که این چرخه رو بفهمی و برای بهینه کردن هرچه بیشتر اون تلاش کنی.

💻 بعد از شناخت نرم‌افزار و چرخه تولیدش، نوبت به فهمیدن فرهنگ DevOps می‌رسه. این فرهنگ به ما یاد می‌ده که چطور در یک سازمان افرادی که تخصص‌های متفاوتی دارن رو برای رسیدن به یک محصول خوب در کنار هم جمع کنیم.

🔍 بعد از شناخت فرهنگ DevOps و چرخه تولید نرم‌افزار باید بریم سراغ ابزارهایی که به ما کمک می‌کنن این فرهنگ رو پیاده کنیم. اگر به علامت DevOps و چرخه نرم‌افزار دقت کنیم می‌بینیم که چند بخش مختلف مثل Build, Test, Release, Deploy, Operate و Monitor داره. یک متخصص DevOps خوب، برای هر کدوم از این بخش‌ها یک ابزار مناسب در جعبه‌ابزارش داره و می‌تونه در زمان نیاز از اون ابزار برای بهتر کردن روال کار کمک بگیره.

📌 اگر بخوایم دقیق‌تر بشیم، احتمالا شما باید لینوکس، برنامه‌نویسی با یک زبان، ابزارهای اتوماتیک‌سازی مثل Ansible، ابزارهای بیلد و تست یعنی یکی از پایپلاین‌های CI مرسوم مثل (GitHub Actions, Azure Pipelines, Gitlab CI یا Jenkins)، ابزارهای مدیریت کانتینر مثل Docker و Kubernetes و ابزارهای مانیتورینگ مثل ELK و Grafana و Prometheus رو بشناسید.

📂 برای یادگیری هر کدوم از این ابزارها، منابع خیلی زیادی وجود داره ولی احتمالا بهترین منبع، داک رسمی خود این ابزارها باشه. علاوه بر داک اون‌ها یوتیوب هم برای شناخت بهترشون منبع خوبیه. اما در نهایت مهمه که این یادگیری‌ها با تمرین همراه باشه.

🔗 همونطور که گفتیم بهترین منبع برای یادگیری این ابزارها داک اصلی خودشونه اما اگر می‌خواید برای یادگیریتون مسیر خاصی داشته باشید و اون رو دنبال کنید، https://roadmap.sh/devops و https://github.com/MichaelCade/90DaysOfDevOps منابع خوبی هستن.

موفق باشی، تیم کداستار⭐

- - +

DevOps

سلام!😊

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

💡 اگر می‌خوای تبدیل به یک متخصص DevOps بشی، اولین پیش‌نیاز شناخت چرخه تولید نرم‌افزاره. چون که به عنوان یک متخصص DevOps از تو انتظار می‌ره که این چرخه رو بفهمی و برای بهینه کردن هرچه بیشتر اون تلاش کنی.

💻 بعد از شناخت نرم‌افزار و چرخه تولیدش، نوبت به فهمیدن فرهنگ DevOps می‌رسه. این فرهنگ به ما یاد می‌ده که چطور در یک سازمان افرادی که تخصص‌های متفاوتی دارن رو برای رسیدن به یک محصول خوب در کنار هم جمع کنیم.

🔍 بعد از شناخت فرهنگ DevOps و چرخه تولید نرم‌افزار باید بریم سراغ ابزارهایی که به ما کمک می‌کنن این فرهنگ رو پیاده کنیم. اگر به علامت DevOps و چرخه نرم‌افزار دقت کنیم می‌بینیم که چند بخش مختلف مثل Build, Test, Release, Deploy, Operate و Monitor داره. یک متخصص DevOps خوب، برای هر کدوم از این بخش‌ها یک ابزار مناسب در جعبه‌ابزارش داره و می‌تونه در زمان نیاز از اون ابزار برای بهتر کردن روال کار کمک بگیره.

📌 اگر بخوایم دقیق‌تر بشیم، احتمالا شما باید لینوکس، برنامه‌نویسی با یک زبان، ابزارهای اتوماتیک‌سازی مثل Ansible، ابزارهای بیلد و تست یعنی یکی از پایپلاین‌های CI مرسوم مثل (GitHub Actions, Azure Pipelines, Gitlab CI یا Jenkins)، ابزارهای مدیریت کانتینر مثل Docker و Kubernetes و ابزارهای مانیتورینگ مثل ELK و Grafana و Prometheus رو بشناسید.

📂 برای یادگیری هر کدوم از این ابزارها، منابع خیلی زیادی وجود داره ولی احتمالا بهترین منبع، داک رسمی خود این ابزارها باشه. علاوه بر داک اون‌ها یوتیوب هم برای شناخت بهترشون منبع خوبیه. اما در نهایت مهمه که این یادگیری‌ها با تمرین همراه باشه.

🔗 همونطور که گفتیم بهترین منبع برای یادگیری این ابزارها داک اصلی خودشونه اما اگر می‌خواید برای یادگیریتون مسیر خاصی داشته باشید و اون رو دنبال کنید، https://roadmap.sh/devops و https://github.com/MichaelCade/90DaysOfDevOps منابع خوبی هستن.

موفق باشی، تیم کداستار⭐

+ + \ No newline at end of file diff --git a/docs/roadmaps/Frontend/index.html b/docs/roadmaps/Frontend/index.html index 6e5ca310..7a997554 100644 --- a/docs/roadmaps/Frontend/index.html +++ b/docs/roadmaps/Frontend/index.html @@ -6,12 +6,12 @@ Frontend | آکادمی ستاره - - + +
-

Frontend

سلام!😊

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

همینطور که می‌دونید دنیای امروز پُر شده از فریمورک‌ها و کتابخانه‌های مختلف جاوااسکریپت که هر کدوم ویژگی‌های خاص خودشون رو دارن و شرکت‌های مختلف با توجه به نیازمندی‌‌های پروژه‌هاشون، می‌رن سراغ یکی از اونا. طبیعتا برای ما این امکان وجود نداره(یا حداقل خیلی سخته) که تموم این فریمورک‌ها رو یاد بگیریم تا بتونیم شانس ورود به هر پروژه‌ای رو داشته باشیم! +

Frontend

سلام!😊

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

همینطور که می‌دونید دنیای امروز پُر شده از فریمورک‌ها و کتابخانه‌های مختلف جاوااسکریپت که هر کدوم ویژگی‌های خاص خودشون رو دارن و شرکت‌های مختلف با توجه به نیازمندی‌‌های پروژه‌هاشون، می‌رن سراغ یکی از اونا. طبیعتا برای ما این امکان وجود نداره(یا حداقل خیلی سخته) که تموم این فریمورک‌ها رو یاد بگیریم تا بتونیم شانس ورود به هر پروژه‌ای رو داشته باشیم! حالا چاره چیه؟ 🤔

خب راهش اینه که ما بیایم و پایه‌های برنامه‌نویسی فرانت‌اند، یعنی HTML،CSS و @@ -58,7 +58,7 @@ 🟥Decoded Frontend
🟥Web Dev Simplified
🟥Kevin Powell

موفق باشی، تیم کداستار⭐

- - + + \ No newline at end of file diff --git a/docs/software-engineering/index.html b/docs/software-engineering/index.html index a6ca19d9..b1798913 100644 --- a/docs/software-engineering/index.html +++ b/docs/software-engineering/index.html @@ -6,13 +6,13 @@ مهندسی نرم‌افزار | آکادمی ستاره - - + +
-

مهندسی نرم‌افزار

- - +

مهندسی نرم‌افزار

+ + \ No newline at end of file diff --git a/docs/software-engineering/phase03-c-sharp/index.html b/docs/software-engineering/phase01-c-sharp/index.html similarity index 60% rename from docs/software-engineering/phase03-c-sharp/index.html rename to docs/software-engineering/phase01-c-sharp/index.html index 54a49c24..fd36859b 100644 --- a/docs/software-engineering/phase03-c-sharp/index.html +++ b/docs/software-engineering/phase01-c-sharp/index.html @@ -1,91 +1,176 @@ - + -C# | آکادمی ستاره - - +C# | آکادمی ستاره + +
-

C#

مقدمه​

در این فاز با زبان #C -آشنا ‌می‌شوید. همچنین چند برنامۀ ساده با این زبان می‌نویسید.

نصب پیش‌نیازها​

در قدم اول برای کار با زبان #C +

C#

مقدمه​

در این فاز با زبان +#C +آشنا ‌می‌شوید. همچنین چند برنامۀ ساده با این زبان می‌نویسید.

نصب پیش‌نیازها​

در قدم اول برای کار با زبان +#C پیشنهاد می‌کنیم از VS Code استفاده کنید تا با Net CLI. بهتر آشنا شوید. -برای نوشتن کد به زبان #C -در VS Code -مراحل زیر را طی کنید:

  1. نصب NET SDK.
  2. نصب اکستنشن #C

پس از نصب موارد بالا دستور dotnet --info -را در ترمینال اجرا کنید تا نسخه‌های Net. +برای نوشتن کد به زبان +#C +در VS Code

مراحل زیر را طی کنید:

  1. نصب NET SDK.
  2. نصب اکستنشن #C

پس از نصب موارد بالا دستور +dotnet --info +را در ترمینال اجرا کنید تا نسخه‌های +Net. نصب شده را مشاهده کنید.

‌

برای کار با ترمینال نسخه جدید ترمینال ویندوز -را نیز نصب کنید.

آشنایی با مبانی زبان #C​

بهتر است ابتدا با Solution -و Project -در زبان #C -آشنا شوید که برای درک این مفاهیم ?What is a C# solution and how to use it -را مطالعه کنید؛ سپس در صورتی که با زبان Java -آشنایی دارید C# Crash Course for Java Developers -را مطالعه بفرمایید. در غیر این صورت از w3schools -جهت یادگیری مبانی #C -استفاده ‌‌‌‌‌‌‌کنید.

اولین برنامه​

ابتدا VS Code +را نیز نصب کنید.

آشنایی با مبانی زبان #C​

بهتر است ابتدا با +Solution +و +Project +در زبان +#C +آشنا شوید که برای درک این مفاهیم +?What is a C# solution and how to use it +را مطالعه کنید؛ سپس در صورتی که با زبان +Java +آشنایی دارید +C# Crash Course for Java Developers +را مطالعه بفرمایید. در غیر این صورت از +w3schools +جهت یادگیری مبانی +#C +استفاده ‌کنید.

اولین برنامه​

ابتدا VS Code را باز کنید و یک پوشه انتخاب کنید. سپس در ترمینال، برای ایجاد یک Console App -دستور زیر را اجرا کنید:

dotnet new console
‌

برای باز کردن ترمینال در محیط VS Code -می‌توانید از میانبر ctrl + ` (backtick) -استفاده کنید.

پس از اجرای دستور بالا چند فایل و یک پوشه ساخته می‌شوند. اگر فایل Program.cs -را باز کنید، مشاهده می‌کنید که یک کد ساده‌ی چاپ Hello world -در آن نوشته شده است. برای اجرای این برنامه درون ترمینال دستور زیر را اجرا کنید:

dotnet run

با اجرای دستور بالا باید عبارت زیر در ترمینال چاپ شود:

Hello World

NuGet​

توسعه‌دهندگان برای اشتراک گذاشتن و دریافت کدهای به اشتراک گذاشته شده از ابزارهایی تحت عنوان Package Manager -استفاده می‌‌کنند. در پلتفرم Net. -از NuGet -استفاده ‌می‌شود. NuGet -کدها را در قالب فایل‌هایی (Packageهایی) -با پسوند nupkg. -نگه‌داری می‌کند. این فایل یک فایل zip -حاوی کدهای کامپایل شده (dll)، -فایل‌های مورد نیاز برای استفاده از Package -و اطلاعات Package -می‌باشد. این ابزار، مکانیزم‌هایی برای ایجاد، نگهداری و استفاده از کدها ارائه می‌دهد که برای هرکدام از این مکانیزم‌ها ابزارهایی نیز فراهم کرده است. هنگام استفاده از NuGet -توسعه‌دهنده نگران دریافت و اشتراک کدها نمی‌باشد چرا که خود NuGet -این عملیات‌ها را مدیریت می‌کند.

پکیج System.Text.Json -امکان تبدیل اشیاء زبان #C -به Json -و برعکس را فراهم می‌کند. دستور زیر این پکیج را به برنامه اضافه می‌کند:

dotnet add package System.Text.Json

کد زیر یک شیء #C -را به Json -تبدیل کرده و در خروجی چاپ می‌کند:

using System;
using System.Text.Json;

namespace HelloWorld
{
    public class Person
    {
        public string FirstName {get; set;}
        public string LastName {get; set;}
    }

    class Program
    {
        static void Main(string[] args)
        {
            var item = new Person() { FirstName = "Foo", LastName = "Bar"};
            var serializedItem = JsonSerializer.Serialize(item);
            Console.WriteLine(serializedItem);
        }
    }
}

در #C -برای استفاده از کتابخانه‌ها باید با کلیدواژۀ using -کتابخانه را به کد اضافه کنید. کارایی using -مشابه با import -و include -در زبان‌های دیگر می‌باشد.

همچنین برای تعریف متغیر می‌توانید از کلیدواژۀ var -استفاده کنید. در این صورت کامپایلر از روی مقدار اولیه، نوع متغیر را مشخص می‌کند.

var i = 0;
// i is int
var s = "hi";
// s is string
var f = 1.5;
f = "hello";
// compile error

اگر دوست دارید بیشتر در مورد NuGet -بدانید می‌توانید مقاله An introduction to NuGet +دستور زیر را اجرا کنید:

dotnet new console
‌

برای باز کردن ترمینال در محیط +VS Code +می‌توانید از میانبر +ctrl + ` (backtick) +استفاده کنید.

پس از اجرای دستور بالا چند فایل و یک پوشه ساخته می‌شوند. اگر فایل +Program.cs +را باز کنید، مشاهده می‌کنید که یک کد ساده‌ی چاپ +Hello world +در آن نوشته شده است. برای اجرای این برنامه درون ترمینال دستور زیر را اجرا کنید:

dotnet run

با اجرای دستور بالا باید عبارت زیر در ترمینال چاپ شود:

Hello World

NuGet​

توسعه‌دهندگان برای اشتراک گذاشتن و دریافت کدهای به اشتراک گذاشته شده از ابزارهایی تحت عنوان +Package Manager +استفاده می‌‌کنند. در پلتفرم +Net. +از +NuGet +استفاده ‌می‌شود. +NuGet +کدها را در قالب فایل‌هایی +(Packageهایی) +با پسوند +nupkg. +نگه‌داری می‌کند. این فایل یک فایل +zip +حاوی کدهای کامپایل شده +(dll)، +فایل‌های مورد نیاز برای استفاده از +Package +و اطلاعات +Package +می‌باشد. این ابزار، مکانیزم‌هایی برای ایجاد، نگهداری و استفاده از کدها ارائه می‌دهد که برای هرکدام از این مکانیزم‌ها +ابزارهایی نیز فراهم کرده است. هنگام استفاده از +NuGet +توسعه‌دهنده نگران دریافت و اشتراک کدها نمی‌باشد چرا که خود +NuGet +این عملیات‌ها را مدیریت می‌کند.

پکیج +System.Text.Json +امکان تبدیل اشیاء زبان +#C +به +Json +و برعکس را فراهم می‌کند. دستور زیر این پکیج را به برنامه اضافه می‌کند:

dotnet add package System.Text.Json

کد زیر یک شیء +#C +را به +Json +تبدیل کرده و در خروجی چاپ می‌کند:

using System;
using System.Text.Json;

namespace HelloWorld
{
    public class Person
    {
        public string FirstName {get; set;}
        public string LastName {get; set;}
    }

    class Program
    {
        static void Main(string[] args)
        {
            var item = new Person() { FirstName = "Foo", LastName = "Bar"};
            var serializedItem = JsonSerializer.Serialize(item);
            Console.WriteLine(serializedItem);
        }
    }
}

در +#C +برای استفاده از کتابخانه‌ها باید با کلیدواژۀ +using +کتابخانه را به کد اضافه کنید. کارایی +using +مشابه با +import +و +include +در زبان‌های دیگر می‌باشد.

همچنین برای تعریف متغیر می‌توانید از کلیدواژۀ +var +استفاده کنید. در این صورت کامپایلر از روی مقدار اولیه، نوع متغیر را مشخص می‌کند.

var i = 0;
// i is int
var s = "hi";
// s is string
var f = 1.5;
f = "hello";
// compile error

اگر دوست دارید بیشتر در مورد +NuGet +بدانید می‌توانید مقاله +An introduction to NuGet را بخوانید.

کمی پیشرفته‌تر​

در این مرحله یاد می‌گیرید چگونه با کنسول کار کنید. -ابتدا سری به این آموزش -بزنید و سعی کنید تمام کارهای گفته شده را انجام دهید. سپس می‌توانید برحسب نیاز از آموزش‌های زیر نیز استفاده کنید:

نام‌گذاری‌ها در #C​

یکی از گام‌های مهم یادگیری هر زبان برنامه‌نویسی یادگیری اصول نام‌گذاری آن می‌باشد. شاید نام‌گذاری در وهله اول مورد مهمی به نظر نرسد اما این موضوع از جهتی اهمیت دارد که نباید کد شما نسبت به کدهای جامعه برنامه نویسان آن زبان تافته جدا بافته باشد. برای آشنایی با این قواعد صفحات زیر را مطالعه کنید:

C# Interactive​

گاهی نیاز داریم در محیطی تعاملی مانند زبان‌های مفسری (مثل javascript ،python یا ...) دستوراتی را اجرا کنیم. #C نیز این امکان را با نام Net Interactive. در اختیار ما قرار داده است. برای استفاده از این ابزار اکستنشن Net Interactive. را برای VS Code نصب کنید. -پس از نصب اکستنشن در محیط Net Interactive. این دستورات را اجرا کنید.

2 + 2
System.IO.Directory.GetCurrentDirectory()

Lambda Expressions​

عبارات لامبدا (Lambda expressions) -ساده شده متدهای بی‌نام (Anonymous Function) +ابتدا سری به این +آموزش +بزنید و سعی کنید تمام کارهای گفته شده را انجام دهید. سپس می‌توانید برحسب نیاز از آموزش‌های زیر نیز استفاده کنید:

نام‌گذاری‌ها در #C​

یکی از گام‌های مهم یادگیری هر زبان برنامه‌نویسی یادگیری اصول نام‌گذاری آن می‌باشد. شاید نام‌گذاری در وهله اول مورد مهمی +به نظر نرسد اما این موضوع از جهتی اهمیت دارد که نباید کد شما نسبت به کدهای جامعه برنامه نویسان آن زبان تافته جدا بافته +باشد. برای آشنایی با این قواعد صفحات زیر را مطالعه کنید:

C# Interactive​

گاهی نیاز داریم در محیطی تعاملی مانند زبان‌های مفسری (مثل +javascript ،python +یا ...) دستوراتی را اجرا کنیم. +#C +نیز این امکان را با نام +Net Interactive. +در اختیار ما قرار داده است. برای استفاده از این ابزار +اکستنشن +Net Interactive. +را برای +VS Code +نصب کنید. پس از نصب اکستنشن در محیط +Net Interactive. +این دستورات را اجرا کنید.

2 + 2
System.IO.Directory.GetCurrentDirectory()

Lambda Expressions​

عبارات لامبدا +(Lambda expressions) +ساده شده متدهای بی‌نام +(Anonymous Function) هستند. -برای اینکه با این مفهوم بیشتر آشنا شوید می‌توانید لینک‌های زیر را مطالعه کنید.

‌

این امکان یک Syntactic sugar -می‌باشد.

Extension Method​

برای اضافه کردن متد به کلاس‌های موجود بدون تغییر کلاس اصلی، تعریف کلاس فرزند یا کامپایل مجدد کتابخانه، از Extension Method -استفاده می‌شود. Extension methodها +برای اینکه با این مفهوم بیشتر آشنا شوید می‌توانید لینک‌های زیر را مطالعه کنید.

‌

این امکان یک +Syntactic sugar +می‌باشد.

Extension Method​

برای اضافه کردن متد به کلاس‌های موجود بدون تغییر کلاس اصلی، تعریف کلاس فرزند یا کامپایل مجدد کتابخانه، از +Extension +Method +استفاده می‌شود. +Extension methodها static هستند و خارج از کلاس مورد نظر پیاده سازی می‌شوند اما به نحوی صدا زده می‌شوند که گویا عضوی از آن کلاس می‌باشند. -مثلا می‌خواهیم یک عملکرد برای کلاس string -(به دلیل sealed +مثلا می‌خواهیم یک عملکرد برای کلاس +string +(به دلیل +sealed بودن قابل ارث‌بری نیست) پیاده‌سازی کنیم به صورتی که تعداد کلمات یک متن را برای ما شمارش کند:

namespace ExtensionMethods
{
    public static class MyExtensions
    {
        public static int WordCount(string str)
        {
            return str.Split(new char[] { ' ', '.', '?' }, StringSplitOptions.RemoveEmptyEntries).Length;
        }
    }
}

استفاده از کد بالا به صورت زیر می‌باشد.

var s = “Hello Extension Methods”;
var i = MyExtensions.WordCount(s);

حال اگر عبارت public static int WordCount(string str) را به public static int WordCount(this string str) -تغییر دهیم. می‌توانیم به این صورت از extension method -استفاده کنیم:

var s = "Hello Extension Methods";
var i = s.WordCount();

برای مطالعه‌ی بیشتر Extension Methods (C# Programming Guide) -را مطالعه کنید.

LINQ​

واژه LINQ (توجه داشته باشید که آن را Link تلفظ کنید) مخفف عبارت Language-Integrated Query است. LINQ یک راه یکسان را برای اتصال برقرار کردن به هر داده‌ساختار استاندارد فراهم می‌کند. -برای درک بهتر و تمرین بیشتر لینک‌های زیر را مطالعه کنید:

پروژه​

برنامه‌ای بنویسید که دو فایل دانشجویان -و نمرات -را بخواند و سپس نام، نام خانوادگی و معدل سه دانشجوی اول را چاپ کند.

‌

برای کار با زبان #C -می‌توانید IDEهای +تغییر دهیم. می‌توانیم به این صورت از +extension method +استفاده کنیم:

var s = "Hello Extension Methods";
var i = s.WordCount();

برای مطالعه‌ی بیشتر +Extension Methods (C# Programming Guide) +را مطالعه کنید.

LINQ​

واژه +LINQ +(توجه داشته باشید که آن را +Link +تلفظ کنید) مخفف عبارت +Language-Integrated Query +است. +LINQ +یک راه یکسان را برای +اتصال برقرار کردن به هر داده‌ساختار استاندارد فراهم می‌کند. +برای درک بهتر و تمرین بیشتر لینک‌های زیر را مطالعه کنید:

پروژه​

برنامه‌ای بنویسید که دو فایل +دانشجویان +و +نمرات +را بخواند و سپس نام، نام خانوادگی و معدل سه دانشجوی اول را چاپ کند.

‌

برای کار با زبان +#C +می‌توانید +IDEهای Visual Studio -یا Rider -را نصب کنید و از امکاناتشان بهره‌مند شوید.

برای کار روی پروژه‌ها از IDE استفاده ‌‌‌‌کنید.

- - +یا +Rider +را نصب کنید و از امکاناتشان بهره‌مند شوید.

برای کار روی پروژه‌ها از +IDE +استفاده ‌کنید.

‌

برای آشنایی با امکانات جدید زبان +#C +می‌توانید ویدئوهای زیر را مشاهده کنید.

+ + \ No newline at end of file diff --git a/docs/software-engineering/phase01-simple-project/index.html b/docs/software-engineering/phase01-simple-project/index.html deleted file mode 100644 index 24a6c64f..00000000 --- a/docs/software-engineering/phase01-simple-project/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - -Full-Text Search | آکادمی ستاره - - - - -
-

Full-Text Search

مقدمه​

در این بخش با مفاهیم جستجوی متنی آشنا می‌شوید و یک موتور جستجوی ساده پیاده‌سازی می‌کنید که بتواند تعدادی سند متنی به عنوان ورودی بگیرد و با انجام پردازش‌های لازم امکان جستجوی سریع روی متون را برای کاربر فراهم کند.

آشنایی با مفاهیم اولیه جستجوی متنی​

قبل از شروع مطالعه روی دو سوال زیر فکر کنید تا ذهن شما آماده شود.

  • به روز‌های اول تشکیل شرکت گوگل فکر کنید، فرض کنید متن‌های چند صد هزار صفحه‌ی وب را جمع آوری کرده‌اید و می‌خواهید بین آن صفحات جستجو کنید. چه راه حلی برای اجرای کوئری چند کلمه‌ای کاربران بین هزاران صفحه متن که از قبل آماده شده است به ذهنتان می‌رسد؟
  • چطور می‌شود این جستجو را از مرتبه‌ی یک یا همان (O(1 -انجام داد؟

یکی از داده‌ساختارهایی که برای پیاده‌سازی موتور جستجو قابل‌استفاده است، Inverted Index -می‌باشد. برای آشنایی با این داده ساختار Inverted Index - GeeksforGeeks -را مطالعه کنید؛ سپس برای فهم بهتر -ویدئوی The Inverted Index -را مشاهده نمایید.

تمرین​

Pair Programming​

از آنجایی که باید تمرینات و پروژه‌های تمام فازهای آموزشی را به صورت Pair Programming -انجام دهید، ابتدا جهت آشنایی با این سبک برنامه‌نویسی، On Pair Programming -را مطالعه کنید.

‌

ابزار Live Share -نرم‌افزار VS Code -یک ابزار جذاب جهت برنامه‌نویسی به سبک Pair Programming -است که می‌توانید از آن استفاده کنید.

تمرین اول​

برنامه‌ای به زبان Java -بنویسید که تعدادی Document -را بخواند و از روی آن‌ها یک Inverted Index -بسازد؛ -سپس در Console -از کاربر یک کلمه به عنوان ورودی بگیرد و نام Documentهایی -که شامل آن کلمه هستند را چاپ کند.

‌
  • پیشنهاد می‌کنیم از The 20 Newsgroups Dataset -برای تست برنامه استفاده کنید.
  • پیشنهاد می‌کنیم برای بالا بردن دقت جستجو تمام Documentهای ورودی را Uppercase -کنید.

تمرین دوم​

برنامه‌ای که در تمرین قبل نوشتید را به نحوی توسعه دهید که سه نوع ورودی از کاربر بگیرد:

  1. کلماتی که حتما باید در نتیجه وجود داشته باشند. این کلمات پیشوندی ندارند.
  2. کلماتی که حداقل یکی از آن‌ها باید در نتیجه وجود داشته باشند. این کلمات با پیشوند + مشخص می‌شوند.
  3. کلماتی که نباید در نتیجه وجود داشته باشند. این کلمات با پیشوند - مشخص می‌شوند.

ورودی نوع اول مانند And، نوع دوم مانند Or و نوع سوم مانند Not می‌باشد.

مثال
get help +illness +disease -cough

با استفاده از Query -بالا می‌توانیم Documentهایی -را پیدا کنیم که حتماً شامل عبارات get -و help -و همچنین حداقل یکی از عبارات illness -و disease -باشند و شامل عبارت cough -نباشند.

مطالعه بیشتر​

برای آشنایی بیشتر با نحوۀ کار موتور‌های جستجو دیدن ویدئوی How Google searches one document among Billions of documents quickly -توصیه می‌شود.

- - - - \ No newline at end of file diff --git a/docs/software-engineering/phase02-clean-code/index.html b/docs/software-engineering/phase02-clean-code/index.html deleted file mode 100644 index 2adf259e..00000000 --- a/docs/software-engineering/phase02-clean-code/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - -Clean Code | آکادمی ستاره - - - - -
-

Clean Code

مقدمه​

در این فاز با مفاهیم و تکنیک‌های مختلفی برای افزایش کیفیت کد آشنا می‌شوید و کد فاز قبل را به یک کد بسیار با کیفیت تبدیل می‌کنید. سپس کد خود را با سایر کارآموزان به اشتراک می‌گذارید و از آن‌ها می‌خواهید کدتان را Review کنند.

اهمیت Clean Code​

در ابتدا در مورد دو سوال زیر فکر کنید و با هم تیمی خود بحث کنید:

  1. چرا تمیز بودن کد و داشتن معماری خوب مهم است؟ چرا باید وقت و انرژی زیادی صرف طراحی و نوشتن کد تمیز شود؟
  2. چرا این موضوع در ابعاد صنعتی اهمیت بسیار بیشتری پیدا می‌کند؟
‌

تلاش کنید فقط با فکر خودتان و بحث با هم تیمی به جواب سوالات بالا برسید تا ذهن شما برای مراحل بعد آماده شود.

‌

لطفا قبل از فکر کردن به این سوالات به سراغ مراحل بعدی و خواندن مقالات نروید!

حال برای فهم دلایل اهمیت کد تمیز در صنعت، The Importance of Clean Code -را در جواب سوال اول و Why software maintainability is crucial - TechHQ -را در جواب سوال دوم مطالعه کنید.

Code Smell​

یکی از راه‌های افزایش کیفیت کد، پیدا کردن نشانه‌های کد کثیف در برنامه و سپس Refactor -کردن آن است، به صورتی که نشانه‌های کد کثیف از بین بروند. به این نشانه‌ها Code Smell -می‌گوییم. در این مرحله در مورد Code Smellهای -زیر مطالعه کنید و مشخص کنید کدام یک از موارد زیر در کدی که برای پروژه جستجو به وجود آمده است؟

اصول S.O.L.I.D​

یکی از مهم‌ترین مجموعه اصول در مهندسی نرم‌افزار، اصول پنج‌گانهٔ SOLID -می‌باشد.این اصول عبارت‌اند از:

  1. Single Responsibility
  2. Open for Extension/Closed for Modification
  3. Liskov Substitution
  4. Interface Segregation
  5. Dependency Inversion

برای آشنایی با اصول SOLID لینک‌های زیر را مطالعه کنید:

‌

برای مطالعه بیشتر می‌توانیدA Solid Guide to SOLID Principles -را مطالعه کنید.

Refactoring Techniques​

برای Refactor -کردن بخش‌های مختلف کدتان و رفع Code Smellها -خلاقیت به خرج دهید یا به مجموعۀ Refactoring Techniques -مراجعه کنید.

‌

مطالعۀ دقیق تمام موارد موجود در لینک مذکور نیاز نیست همین که به فهرست آن نگاه کنید و بعضی از آن‌ها را مرور کنید کافیست.

Code Review​

از یک تیم دیگر بخواهید Pull Request -شما که در مرحله‌ی Refactor -ساخته‌اید را Review -کنند و بر اساس لیست Code Smellها -به شما بازخورد بدهند (روی Pull Request -کامنت بگذارند)، در این مرحله حتما از تیم‌های دیگر هم سراغ شما می‌آیند و می‌خواهند کدشان را Review -کنید، قبل از Review -کد دیگران، راهنماهای زیر را مطالعه کنید و Review -خود را بر اساس این راهنماها انجام دهید:

‌

با توجه به این که در این فاز صحبتی در مورد انواع تست به خصوص Unit Test نکردیم قسمت‌هایی از لینک‌های بالا که در مورد تست است را نادیده بگیرید.

- - - - \ No newline at end of file diff --git a/docs/software-engineering/phase02-full-text-search-project/index.html b/docs/software-engineering/phase02-full-text-search-project/index.html new file mode 100644 index 00000000..6fbea394 --- /dev/null +++ b/docs/software-engineering/phase02-full-text-search-project/index.html @@ -0,0 +1,83 @@ + + + + + + + +Full-Text Search | آکادمی ستاره + + + + +
+

Full-Text Search

مقدمه​

در این بخش با مفاهیم جستجوی متنی آشنا می‌شوید و یک موتور جستجوی ساده پیاده‌سازی می‌کنید که بتواند تعدادی سند متنی به +عنوان ورودی بگیرد و با انجام پردازش‌های لازم امکان جستجوی سریع روی متون را برای کاربر فراهم کند.

آشنایی با مفاهیم اولیه جستجوی متنی​

قبل از شروع مطالعه روی دو سوال زیر فکر کنید تا ذهن شما آماده شود.

  • به روز‌های اول تشکیل شرکت گوگل فکر کنید، فرض کنید متن‌های چند صد هزار صفحه‌ی وب را جمع آوری کرده‌اید و می‌خواهید بین +آن صفحات جستجو کنید. چه راه حلی برای اجرای کوئری چند کلمه‌ای کاربران بین هزاران صفحه متن که از قبل آماده شده است به +ذهنتان می‌رسد؟
  • چطور می‌شود این جستجو را از مرتبه‌ی یک یا همان +(O(1 +انجام داد؟

یکی از داده‌ساختارهایی که برای پیاده‌سازی موتور جستجو قابل‌استفاده است، +Inverted Index +می‌باشد. برای آشنایی با این داده ساختار +Inverted Index - GeeksforGeeks +را مطالعه کنید؛ سپس برای فهم بهتر ویدئوی +The Inverted Index +را مشاهده نمایید.

Pair Programming​

از آنجایی که باید تمرینات و پروژه‌های تمام فازهای آموزشی را به صورت +Pair Programming +انجام دهید، ابتدا جهت آشنایی با این سبک برنامه‌نویسی، +On Pair Programming +را مطالعه کنید.

‌

ابزار +Live Share +نرم‌افزار +VS Code +یک ابزار جذاب جهت برنامه‌نویسی به سبک +Pair Programming +است که می‌توانید از آن استفاده کنید.

‌

برای آشنایی بیشتر با +Pair Programming +می‌توانید ویدئوی زیر را مشاهده کنید:

You Must Be CRAZY To Do Pair Programming

تمرین​

تمرین اول​

برنامه‌ای به زبان +C# +و با فریمورک +Dotnet +بنویسید که تعدادی +Document +را بخواند و از روی آن‌ها یک +Inverted Index +بسازد؛ +سپس در +Console +از کاربر یک کلمه به عنوان ورودی بگیرد و نام +Documentهایی +که شامل آن کلمه هستند را چاپ کند.

‌
  • پیشنهاد می‌کنیم از +The 20 Newsgroups Dataset +برای تست برنامه استفاده کنید.
  • پیشنهاد می‌کنیم برای بالا بردن دقت جستجو تمام +Documentهای +ورودی +را +Uppercase +کنید.

تمرین دوم​

برنامه‌ای که در تمرین قبل نوشتید را به نحوی توسعه دهید که سه نوع ورودی از کاربر بگیرد:

  1. کلماتی که حتما باید در نتیجه وجود داشته باشند. این کلمات پیشوندی ندارند.
  2. کلماتی که حداقل یکی از آن‌ها باید در نتیجه وجود داشته باشند. این کلمات با پیشوند + مشخص می‌شوند.
  3. کلماتی که نباید در نتیجه وجود داشته باشند. این کلمات با پیشوند - مشخص می‌شوند.

ورودی نوع اول مانند +And، +نوع دوم مانند +Or +و نوع سوم مانند +Not +می‌باشد.

مثال
get help +illness +disease -cough

با استفاده از +Query +بالا می‌توانیم +Documentهایی +را پیدا کنیم که حتماً شامل عبارات +get +و +help +و همچنین حداقل یکی از عبارات +illness +و +disease +باشند و شامل عبارت +cough +نباشند.

مطالعه بیشتر​

برای آشنایی بیشتر با نحوۀ کار موتور‌های جستجو دیدن ویدئوی +How Google searches one document among Billions of documents quickly +توصیه می‌شود.

+ + + + \ No newline at end of file diff --git a/docs/software-engineering/phase03-clean-code/index.html b/docs/software-engineering/phase03-clean-code/index.html new file mode 100644 index 00000000..4dd0b1e2 --- /dev/null +++ b/docs/software-engineering/phase03-clean-code/index.html @@ -0,0 +1,68 @@ + + + + + + + +Clean Code | آکادمی ستاره + + + + +
+

Clean Code

مقدمه​

در این فاز با مفاهیم و تکنیک‌های مختلفی برای افزایش کیفیت کد آشنا می‌شوید و کد فاز قبل را به یک کد بسیار با کیفیت تبدیل +می‌کنید. سپس کد خود را با سایر کارآموزان به اشتراک می‌گذارید و از آن‌ها می‌خواهید کدتان را +Review +کنند.

اهمیت Clean Code​

در ابتدا در مورد دو سوال زیر فکر کنید و با هم تیمی خود بحث کنید:

  1. چرا تمیز بودن کد و داشتن معماری خوب مهم است؟ چرا باید وقت و انرژی زیادی صرف طراحی و نوشتن کد تمیز شود؟
  2. چرا این موضوع در ابعاد صنعتی اهمیت بسیار بیشتری پیدا می‌کند؟
‌

تلاش کنید فقط با فکر خودتان و بحث با هم تیمی به جواب سوالات بالا برسید تا ذهن شما برای مراحل بعد آماده شود.

‌

لطفا قبل از فکر کردن به این سوالات به سراغ مراحل بعدی و خواندن مقالات نروید!

حال برای فهم دلایل اهمیت کد تمیز در صنعت، +The Importance of Clean Code +را در جواب سوال اول و +Why software maintainability is crucial - TechHQ +را در جواب سوال دوم مطالعه کنید.

Code Smell​

یکی از راه‌های افزایش کیفیت کد، پیدا کردن نشانه‌های کد کثیف در برنامه و سپس +Refactor +کردن آن است، به صورتی که نشانه‌های کد کثیف از بین بروند. به این +نشانه‌ها +Code Smell +می‌گوییم. در این مرحله در مورد +Code Smellهای +زیر مطالعه کنید و مشخص کنید کدام یک از موارد زیر در کدی که برای پروژه جستجو به وجود آمده است؟

اصول S.O.L.I.D​

یکی از مهم‌ترین مجموعه اصول در مهندسی نرم‌افزار، اصول پنج‌گانهٔ +SOLID +می‌باشد.این اصول عبارت‌اند از:

  1. Single Responsibility
  2. Open for Extension/Closed for Modification
  3. Liskov Substitution
  4. Interface Segregation
  5. Dependency Inversion

برای آشنایی با اصول +SOLID +لینک‌های زیر را مطالعه کنید:

‌

برای مطالعه بیشتر می‌توانید +Mastering SOLID Principles in C#: A Practical Guide +را مطالعه کنید.

‌

برای آشنایی بهتر می‌توانید این ارائه از +Uncle Bob +را نیز تماشا کنید: +SOLID Principles of Object Oriented & Agile Design

Refactoring Techniques​

برای +Refactor +کردن بخش‌های مختلف کدتان و رفع +Code Smellها +خلاقیت به خرج دهید یا به مجموعۀ +Refactoring Techniques +مراجعه کنید.

‌

مطالعۀ دقیق تمام موارد موجود در لینک مذکور نیاز نیست همین که به فهرست آن نگاه کنید و بعضی از آن‌ها را مرور کنید کافیست.

Code Review​

از یک تیم دیگر بخواهید +Pull Request +شما که در مرحله‌ی +Refactor +ساخته‌اید را +Review +کنند و بر اساس لیست +Code Smellها +به شما بازخورد بدهند (روی +Pull Request +کامنت بگذارند)، در این مرحله حتما از تیم‌های دیگر هم سراغ شما می‌آیند و می‌خواهند کدشان را +Review +کنید، قبل از +Review +کد دیگران، راهنماهای زیر را مطالعه کنید و +Review +خود را بر اساس این راهنماها انجام دهید:

‌

با توجه به این که در این فاز صحبتی در مورد انواع تست به خصوص +Unit Test +نکردیم قسمت‌هایی از لینک‌های بالا که در مورد تست +است را نادیده بگیرید.

‌

برای آشنایی بیشتر با موضوع +Code Review +می‌توانید ویدئوی زیر را مشاهده کنید:

How to Do Code Reviews Like a Human

+ + + + \ No newline at end of file diff --git a/docs/software-engineering/phase04-unit-test/index.html b/docs/software-engineering/phase04-unit-test/index.html index 21b8f58b..d7cf25af 100644 --- a/docs/software-engineering/phase04-unit-test/index.html +++ b/docs/software-engineering/phase04-unit-test/index.html @@ -6,42 +6,85 @@ Unit Test | آکادمی ستاره - - + +
-

Unit Test

مقدمه​

در این فاز با Unit Test -و مفهوم Code Coverage -آشنا می‌شوید. همچنین برای کدی که در فازهای قبلی نوشته‌اید، تست می‌نویسید و کیفیت کد خود را بیش از پیش افزایش می‌دهید.

مفهوم Unit Test و اهمیت آن​

برای آگاهی از اهمیت نوشتن Unit Test -در فرایند توسعۀ نرم‌افزار، لینک‌های زیر را مطالعه کنید:

مفهوم Code Coverage در Unit Testing و اهمیت آن​

پس از مطالعه و درک مفهوم Unit Testing -و اهمیت آن در توسعۀ‌ نرم‌افزار، برای درک مفهوم Code Coverage -و اهمیت آن لینک‌های زیر را مطالعه کنید:

نوشتن Unit Test در #C با استفاده از xUnit​

برای شروع کار با xUnit، پیشنهاد می‌شود Using xUnit to Test your C# Code -و Getting Started with xUnit.net را مطالعه کنید. همچنین می‌توانید نحوۀ مشاهدۀ Code Coverage -را برای IDEهای +

Unit Test

مقدمه​

در این فاز با +Unit Test +و مفهوم +Code Coverage +آشنا می‌شوید. همچنین برای کدی که در فازهای قبلی نوشته‌اید، تست می‌نویسید و کیفیت کد خود را بیش از پیش افزایش می‌دهید.

مفهوم Unit Test و اهمیت آن​

برای آگاهی از اهمیت نوشتن +Unit Test +در فرایند توسعۀ نرم‌افزار، لینک‌های زیر را مطالعه کنید:

‌

برای آشنایی بیشتر با مبحث +Unit Test +ویدیو زیر را مشاهده کنید.

Structure and Interpretation of Test Cases

مفهوم Code Coverage در Unit Testing و اهمیت آن​

پس از مطالعه و درک مفهوم +Unit Testing +و اهمیت آن در توسعۀ‌ نرم‌افزار، برای درک مفهوم +Code Coverage +و اهمیت آن لینک‌های زیر را مطالعه کنید:

‌

بعد از مطالعه مطالب بالا می‌توانید این مقاله که نگاه دقیقی به +Test Coverage +از زبان +Martin Fowler +است را مطالعه کنید

Test Coverage

نوشتن Unit Test در #C با استفاده از xUnit​

برای شروع کار با +xUnit، +پیشنهاد +می‌شود +Using xUnit to Test your C# Code +و +Getting Started with xUnit.net +را مطالعه کنید. همچنین +می‌توانید نحوۀ مشاهدۀ +Code Coverage +را برای +IDEهای Visual Studio -و Rider -از طریق لینک‌های زیر یاد بگیرید:

برای آشنایی بهتر با xUnit -مشاهده Writing tests in .NET using xUnit -پیشنهاد می‌شود.

تاثیر اصول SOLID بر Unit Tesing​

برای آگاهی از تاثیر رعایت اصول SOLID -بر تست‌نویسی SOLID, Object Oriented Design and Unit Testing -را مطالعه کنید.

آشنایی با Mock​

یک تکنیک تست‌نویسی، Mock -کردن است که در آن، قسمتی از کد را با یک پیاده‌سازی دلخواه جایگزین می‌کنیم که از آن برای شبیه‌سازی یک عملیات واقعی استفاده می‌شود. معمولا Mock -کردن زمانی استفاده می‌شود که یک متد یا کلاس، وابستگی یا وابستگی‌هایی دارد که در تست ما تداخل نامطلوبی ایجاد می‌کند.

مثلا فرض کنید می‌خواهید سرویسی را تست کنید که در آن از یک SmsSender -استفاده شده‌است. در نتیجه هر بار که آن تست را اجرا کنید، یک SMS -نیز ارسال می‌شود، که این برای ما مطلوب نیست.

در این صورت، باید SmsSender -را Mock -کرد که دیگر SMS -ارسال نکند، ولی خروجی مشخصی بدهد. در نتیجه می‌توانیم عملکرد همان متد را تست کنیم، به جای این که بخواهیم درگیر وابستگی‌های آن شویم.

برای آشنایی بهتر با Mock -و نحوۀ استفاده این تکنیک در زبان #C -از لینک‌های زیر کمک بگیرید:

‌

پیشنهاد می‌کنیم برای مطالعه بیشتر درباره تست‌نویسی در #C -مقالۀ Writing Unit Tests with xUnit, NSubstitute and FluentAssertions -را مطالعه کنید.

نوشتن تست برای ماشین حساب ساده​

در این مرحله، با استفاده از دانشی که در این فاز به دست آورده‌اید، برای قسمت business -پروژه ماشین حساب ساده +و +Rider +از طریق لینک‌های زیر یاد بگیرید:

برای آشنایی بهتر با +xUnit +مشاهده +Writing tests in .NET using xUnit +پیشنهاد می‌شود.

تاثیر اصول SOLID بر Unit Tesing​

برای آگاهی از تاثیر رعایت اصول +SOLID +بر تست‌نویسی +SOLID, Object Oriented Design and Unit Testing +را مطالعه کنید.

آشنایی با Mock​

یک تکنیک تست‌نویسی، +Mock +کردن است که در آن، قسمتی از کد را با یک پیاده‌سازی دلخواه جایگزین می‌کنیم که از آن برای شبیه‌سازی یک عملیات واقعی +استفاده می‌شود. معمولا +Mock +کردن زمانی استفاده می‌شود که یک متد یا کلاس، وابستگی یا وابستگی‌هایی دارد که در تست ما تداخل نامطلوبی ایجاد می‌کند.

مثلا فرض کنید می‌خواهید سرویسی را تست کنید که در آن از یک +SmsSender +استفاده شده‌است. در نتیجه هر بار که آن تست را اجرا کنید، یک +SMS +نیز ارسال می‌شود، که این برای ما مطلوب نیست.

در این صورت، باید +SmsSender +را +Mock +کرد که دیگر +SMS +ارسال نکند، ولی خروجی مشخصی بدهد. در نتیجه می‌توانیم عملکرد همان متد را تست کنیم، به جای این که بخواهیم درگیر +وابستگی‌های آن شویم.

برای آشنایی بهتر با +Mock +و نحوۀ استفاده این تکنیک در زبان +#C +از لینک‌های زیر کمک بگیرید:

‌

پیشنهاد می‌کنیم برای مطالعه بیشتر درباره تست‌نویسی در +#C +مقالۀ +Writing Unit Tests with xUnit, NSubstitute and FluentAssertions +را مطالعه کنید.

نوشتن تست برای Full Text Search​

در این مرحله، با استفاده از دانشی که در این فاز به دست آورده‌اید، برای پروژه +Full Text Search تست بنویسید. -سعی کنید code coverage -تست های خود را به 100% نزدیک کنید.

- - +سعی کنید +code coverage +تست های خود را به 100% نزدیک کنید.

‌

از اعضای دیگر تیم‌ها بخواهید تست‌های شما را +Review +کنند و همچنین شما نیز نگاهی به تست بقیه گروه‌ها داشته باشید. +آیا با دید یکسانی تست نوشته‌اید؟ +برای چه بخشی تست ننوشته بودید و دلیل آن چه چیزی بوده؟

+ + \ No newline at end of file diff --git a/docs/software-engineering/phase05-tdd/index.html b/docs/software-engineering/phase05-tdd/index.html index f592d3ba..ef3ec9bc 100644 --- a/docs/software-engineering/phase05-tdd/index.html +++ b/docs/software-engineering/phase05-tdd/index.html @@ -6,26 +6,29 @@ TDD | آکادمی ستاره - - + +
-

TDD

مقدمه​

در این فاز با مفاهیم Test-driven development -آشنا می‌شوید و پروژه جستجو را با این الگو بازنویسی می‌کنید.

آشنایی با مبانی TDD​

برای درک مفهوم TDD -و مراحل آن لینک‌های زیر را مطالعه کنید:

آشنایی بیشتر با اصول SOLID و تاثیر آن بر TDD​

در این مرحله، فکر کنید که هر یک از اصول SOLID، -چگونه می‌تواند بر ساده‌تر شدن روند TDD -تاثیر بگذارد. با هم‌تیمی خود در این مورد بحث کنید.

در ادامه برای درک این موضوع لینک‌های زیر را مطالعه کنید:

بازنویسی پروژهٔ سرچ با زبان #C و با رویکرد TDD​

در این مرحله، پروژهٔ سرچ خود را که قبلاً جاوا نوشته‌اید را بعنوان یک library -سرچ به زبان #C -بازنویسی کنید. در بازنویسی خود به طور کامل رویکرد TDD -را به کار ببرید و آموخته‌های خود از مرحلهٔ قبل را اعمال کنید.

همچنین مراحل زیر را برای ساختن پروژهٔ خود دنبال کنید.

ساختن solution​

با استفاده از دستور زیر در ترمینال یک solution -بسازید:

dotnet new sln -o SampleLibrary
cd .\SampleLibrary\

ساختن یک پروژهٔ Class Library​

در این مرحله یک پروژهٔ Net Class Library. -بسازید. سپس آن را به solution -خود اضافه کنید:

dotnet new classlib -o .\SampleLibrary
dotnet sln add .\SampleLibrary\
‌

کد شما، در این پروژه قرار می‌گیرد.

ساختن پروژه تست​

در این مرحله یک پروژه تست با فریم‌ورک xUnit -بسازید، آن را به solution -اضافه کنید و همچنین یک رفرنس به پروژهٔ Class Libraryای -که قبلاً ساخته‌اید بدهید:

dotnet new xunit -o .\SampleLibrary.Test
dotnet sln add .\SampleLibrary.Test\
dotnet add .\SampleLibrary.Test\ reference .\SampleLibrary\

تبریک! شما ساختار پروژهٔ خود را آماده کردید. حال می‌توانید شروع به کد زدن کنید.

با دستور زیر می‌توانید از طریق پروژهٔ تست، تست‌های خود را اجرا کنید:

dotnet test
- - +

TDD

مقدمه​

در این فاز با مفاهیم +Test-driven development +آشنا می‌شوید و پروژه جستجو را با این الگو بازنویسی می‌کنید.

آشنایی با مبانی TDD​

برای درک مفهوم +TDD +و مراحل آن لینک‌های زیر را مطالعه کنید:

‌

این دو ویدویو مربوط به +TDD +را نیز ببنید.

آشنایی بیشتر با اصول SOLID و تاثیر آن بر TDD​

در این مرحله، فکر کنید که هر یک از اصول +SOLID، +چگونه می‌تواند بر ساده‌تر شدن روند +TDD +تاثیر بگذارد. با هم‌تیمی خود در این مورد بحث کنید.

در ادامه برای درک این موضوع لینک‌های زیر را مطالعه کنید:

گسترش پروژه Full Text Search با رویکرد TDD​

در این مرحله به پروژه +Full Text Search +خود +قابلیتی اضافه کنید که امکان جستجوی عبارت نیز فراهم شود. +این ورودی به صورت زیر به برنامه در کنار ورودی های دیگر داده می‌شود :

get +disease -cough "star academy"
get +illness +disease -cough -"star academy"

تحلیل ورودی

get : حتما وجود داشته باشد
+illness +disease : حداقل یکی از این دو وجود داشته باشد
-cough : نباید وجود داشته باشد
"star academy" : این عبارت حتما وجود داشته باشد
-"star academy" : این عبارت وجود نداشته باشد
‌

این مرحله را سعی کنید کاملا با رویکرد +TDD +انجام دهید.

+ + \ No newline at end of file diff --git a/docs/software-engineering/phase06-cicd/index.html b/docs/software-engineering/phase06-cicd/index.html index c8956894..5c7776fb 100644 --- a/docs/software-engineering/phase06-cicd/index.html +++ b/docs/software-engineering/phase06-cicd/index.html @@ -6,12 +6,12 @@ CI/CD | آکادمی ستاره - - + +
-

CI/CD

مقدمه​

در این فاز با مفهوم CI/CD +

CI/CD

مقدمه​

در این فاز با مفهوم CI/CD و اهمیت استفاده از آن آشنا می‌شوید و سپس پروژهٔ خود را به CI/CD مجهز می‌کنید.

CI/CD چیست و چرا اهمیت دارد​

برای درک مفهوم CI/CD و اهمیت آن لینک‌های زیر را مطالعه کنید.

آشنایی با GitHub Actions و اضافه کردن CI/CD Pipeline به Repository​

یکی از ابزارهای CI/CD @@ -38,8 +38,8 @@ به نام actions/checkout@v3 استفاده کند:

steps:
    - uses: actions/checkout@v3
‌

برای مطالعه بیشتر Packaging an Action را بخوانید سپس سری به Repository -آن بزنید.

  • در قدم بعد مشخص می‌کنیم که .Net 6.0 -نصب شود:

    - name: Setup .NET
      uses: actions/setup-dotnet@v2
      with:
          dotnet-version: 6.0.x

  • سپس dependencyهای +آن بزنید.

  • در قدم بعد مشخص می‌کنیم که .Net 8.0 +نصب شود:

    - name: Setup .NET
      uses: actions/setup-dotnet@v2
      with:
          dotnet-version: 8.0.x

  • سپس dependencyهای پروژه restore شوند:

    - name: Install dependencies
      run: dotnet restore
      working-directory: <path to solution>
    ‌

    دقت کنید که به جای <path to solution> آدرس فولدر solution @@ -72,13 +72,13 @@ در Repository خود اضافه کنید. اکنون مشاهده خواهید کرد که در هر لحظه، وضعیت code coverage شما نیز نمایش داده می‌شود:

    • code cov badge

    تا به اینجای کار، کل فایل buildPipeline.yml -باید بصورت زیر باشد:

    name: build

    on:
        push:
            branches: [master]
        pull_request:
            branches: [master]

    jobs:
        build:
            runs-on: ubuntu-latest

            steps:
                - uses: actions/checkout@v3

                - name: Setup .NET
                  uses: actions/setup-dotnet@v2
                  with:
                      dotnet-version: 6.0.x

                - name: Install dependencies
                  run: dotnet restore
                  working-directory: <path to solution>

                - name: Build
                  run: dotnet build --configuration Release --no-restore
                  working-directory: <path to solution>

                - name: Test
                  run: dotnet test --no-restore --verbosity normal --collect:"XPlat Code Coverage"
                  working-directory: <path to solution>

                - name: Publish code coverage reports to codecove.io
                  uses: codecov/codecov-action@v1
                  with:
                      token: ${{ secrets.CODECOV_TOKEN }}
                      files: ./**/coverage.cobertura.xml
                      fail_ci_if_error: true

    انتشار package در NuGet.org​

    در این مرحله، می‌خواهیم یک Pipeline +باید بصورت زیر باشد:

    name: build

    on:
        push:
            branches: [master]
        pull_request:
            branches: [master]

    jobs:
        build:
            runs-on: ubuntu-latest

            steps:
                - uses: actions/checkout@v3

                - name: Setup .NET
                  uses: actions/setup-dotnet@v2
                  with:
                      dotnet-version: 8.0.x

                - name: Install dependencies
                  run: dotnet restore
                  working-directory: <path to solution>

                - name: Build
                  run: dotnet build --configuration Release --no-restore
                  working-directory: <path to solution>

                - name: Test
                  run: dotnet test --no-restore --verbosity normal --collect:"XPlat Code Coverage"
                  working-directory: <path to solution>

                - name: Publish code coverage reports to codecove.io
                  uses: codecov/codecov-action@v1
                  with:
                      token: ${{ secrets.CODECOV_TOKEN }}
                      files: ./**/coverage.cobertura.xml
                      fail_ci_if_error: true

    انتشار package در NuGet.org​

    در این مرحله، می‌خواهیم یک Pipeline جدید بسازیم که هنگام release یک ورژن در Repository، پکیج را در NuGet.org منتشر کند.

    ابتدا باید مشخصات package را در فایل csproj. -مربوط به پروژهٔ خود مشخص کنید. بدین منظور، این فایل باید به صورت زیر باشد:

    <Project Sdk="Microsoft.NET.Sdk">

      <PropertyGroup>
          <TargetFramework>net6.0</TargetFramework>
          <PackageId>StarAcademy.CodeStar[Year].Team[TeamNumber].[LibraryName]</PackageId>
          <Authors>[TeamMembers]</Authors>
          <Company>Star Academy</Company>
      </PropertyGroup>

    </Project>
    ‌

    در این فایل، به جای [Year] +مربوط به پروژهٔ خود مشخص کنید. بدین منظور، این فایل باید به صورت زیر باشد:

    <Project Sdk="Microsoft.NET.Sdk">

      <PropertyGroup>
          <TargetFramework>net8.0</TargetFramework>
          <PackageId>StarAcademy.CodeStar[Year].Team[TeamNumber].[LibraryName]</PackageId>
          <Authors>[TeamMembers]</Authors>
          <Company>Star Academy</Company>
      </PropertyGroup>

    </Project>
    ‌

    در این فایل، به جای [Year] سال شمسی، به جای [TeamNumber] شمارهٔ تیم خود و به جای [LibraryName] نام پروژهٔ خود را قرار دهید. شماره تیم به این خاطر باید قرار داده شود که اگر نام پروژه دو تیم یکسان بود، publish @@ -90,7 +90,7 @@ سپس مراحل زیر را به آن اضافه می‌کنیم:

    1. نام، trigger و OS مربوط به Pipeline -را مشخص می‌کنیم.

      name: publish

      on:
          release:
              types: published

      jobs:
          publish:
              runs-on: ubuntu-latest

    2. نصب .Net:

      steps:
          - uses: actions/checkout@v3

          - name: Setup .NET
            uses: actions/setup-dotnet@v2
            with:
                dotnet-version: 6.0.x

    3. گرفتن ورژن release +را مشخص می‌کنیم.

      name: publish

      on:
          release:
              types: published

      jobs:
          publish:
              runs-on: ubuntu-latest

    4. نصب .Net:

      steps:
          - uses: actions/checkout@v3

          - name: Setup .NET
            uses: actions/setup-dotnet@v2
            with:
                dotnet-version: 8.0.x

    5. گرفتن ورژن release کنونی:

      - name: Get current release version
        id: version
        uses: pozetroninc/github-action-get-latest-release@master
        with:
            repository: Star-Academy/<repository name>
      ‌

      تگ release بعنوان ورژن به NuGet داده می‌شود. در نتیجه، الگوهای قابل قبول ورژن را از @@ -116,7 +116,7 @@ پکیج به پروژه شما اضافه می‌شود و می‌توانید از کلاس‌های آن استفاده کنید. همچنین اگر پکیج خود را update کرده باشید، با اجرای این command، نسخه جدید پکیج به پروژه شما اضافه می‌شود.

      حال با استفاده از پکیج کتابخانه سرچ‌تان، یک نرم‌افزار سرچ تحت کنسول پیاده‌سازی کنید.

    - - + + \ No newline at end of file diff --git a/docs/software-engineering/phase07-SQL/index.html b/docs/software-engineering/phase07-SQL/index.html index f5b20276..2900f515 100644 --- a/docs/software-engineering/phase07-SQL/index.html +++ b/docs/software-engineering/phase07-SQL/index.html @@ -6,12 +6,12 @@ SQL | آکادمی ستاره - - + +
    -

    SQL

    مقدمه​

    در این فاز با یک پایگاه داده رابطه‌ای، نحوه‌ی کار کردن با آن و +

    SQL

    مقدمه​

    در این فاز با یک پایگاه داده رابطه‌ای، نحوه‌ی کار کردن با آن و queryهای آن آشنا می‌شوید.

    پایگاه داده چیست؟​

    پایگاه داده یا Database مجموعه‌ای از داده‌ها است که به صورت ساختارمند درون کامپیوتر نگهداری می‌شوند. @@ -181,7 +181,7 @@ می‌توان ستون‌ها را دسته‌بندی کرد. این دستور با Aggregate Funcitons به کار می‌رود. برای مثال دستور زیر تعداد آقایان و خانم‌ها را خروجی می‌دهد.

    SELECT IsMale, COUNT(IsMale) FROM Student GROUP BY IsMale;

    دستور زیر تعداد دروس ثبت‌نامی هر دانشجو را نشان می‌دهد.

    SELECT ParticipantStudentNumber, COUNT(ParticipantStudentNumber)
    FROM Enrollment
    GROUP BY ParticipantStudentNumber;
    - - + + \ No newline at end of file diff --git a/docs/software-engineering/phase08-EFCore/index.html b/docs/software-engineering/phase08-EFCore/index.html index 48708805..601811a0 100644 --- a/docs/software-engineering/phase08-EFCore/index.html +++ b/docs/software-engineering/phase08-EFCore/index.html @@ -6,12 +6,12 @@ EFCore | آکادمی ستاره - - + +
    -

    EFCore

    مقدمه​

    در این فاز با مفهوم ORM +

    EFCore

    مقدمه​

    در این فاز با مفهوم ORM و EFCore به عنوان یک ORM محبوب در زبان #C @@ -19,7 +19,7 @@ یک ORM چند سکویی است که به ما این فرصت را می‌دهد با یک بار نوشتن یک کد آن را بر روی پایگاه‌داده‌های مختلف اجرا کنیم. EFCore کاملا متن‌باز و در حال گسترش نیز می‌باشد.

    ORM​

    ORM -مخفف Object Reletional Mapping +مخفف Object Relational Mapping است که مترجم میان زبان‌های برنامه‌نویسی و پایگاه‌داده است و می‌تواند یک کد را به زبان‌های مختلف تبدیل کند. برای مطالعه بیشتر درباره این موضوع What is ORM? Object-Relational Mapping Explained را مطالعه کنید.

    روش‌های توسعه​

    دو روش ایجاد پایگاه داده EFCore وجود دارد یکی با استفاده از Code first @@ -38,7 +38,7 @@ داده‌ها را به روزرسانی کنید. برای آشنایی بیشتر با این مورد Update Records in Entity Framework Core را مطالعه نمائید.

    Delete​

    برای حذف داده‌ها در جدول به راحتی می‌توانید به وسیله EFCore داده‌ها را حذف کنید. برای آشنایی بیشتر با این مورد Delete Records in Entity Framework Core را مطالعه نمائید.

    - - + + \ No newline at end of file diff --git a/docs/software-engineering/phase08-optional01-Elasticsearch/index.html b/docs/software-engineering/phase08-optional01-Elasticsearch/index.html index b129cf0f..7be53813 100644 --- a/docs/software-engineering/phase08-optional01-Elasticsearch/index.html +++ b/docs/software-engineering/phase08-optional01-Elasticsearch/index.html @@ -6,12 +6,12 @@ Elasticsearch (اختیاری) | آکادمی ستاره - - + +
    -

    Elasticsearch (اختیاری)

    مقدمه​

    در این فاز با موتور جستجوی Elasticsearch +

    Elasticsearch (اختیاری)

    مقدمه​

    در این فاز با موتور جستجوی Elasticsearch و نحوه‌ی کار کردن با آن آشنا می‌شوید.

    Elasticsearch چیست؟​

    در سال‌های اخیر با توجه به رشد روزافزون خدمات مبتنی بر نرم‌افزار و تولید مقادیر زیادی داده، امکان جستجو در این داده‌ها اهمیت فوق‌العاده‌ای پیدا کرده است. هم‌چنین علاوه بر داده‌هایی که مربوط به فعالیت کاربران در بسترهای مجازی است، خود سیستم‌های نرم‌افزاری مقادیر زیادی log تولید می‌کنند که امکان جستجو در آن‌ها می‌تواند کار را برای مدیران سیستم و توسعه‌دهندگان بسیار ساده‌تر کند. در هر محصول نرم‌افزاری به احتمال قوی کاربر به امکان جستجو نیاز دارد که برای ایجاد این امکان می‌توان از موتورهای جستجو استفاده کرد. محصولات متفاوتی در این حوزه وجود دارند که در حال حاضر معروف‌ترین و محبوب‌ترین آن‌ها Elasticsearch @@ -245,7 +245,7 @@ آن است که در زیر لینک آن آمده است:

    اشعار از API وبسایت گنجور به دست آمده است.

    - - + + \ No newline at end of file diff --git a/docs/software-engineering/phase08-optional02-nest/index.html b/docs/software-engineering/phase08-optional02-nest/index.html index f1774cd2..ecd619cc 100644 --- a/docs/software-engineering/phase08-optional02-nest/index.html +++ b/docs/software-engineering/phase08-optional02-nest/index.html @@ -6,12 +6,12 @@ Nest (اختیاری) | آکادمی ستاره - - + +
    -

    Nest (اختیاری)

    مقدمه​

    در این فاز با کتاب‌خانه‌ی +

    Nest (اختیاری)

    مقدمه​

    در این فاز با کتاب‌خانه‌ی NEST آشنا می‌شوید.

    Nest چیست؟​

    همان‌طور که احتمالاً در فاز قبل متوجه شدید Elasticsearch با استفاده از REST API @@ -81,7 +81,7 @@ استفاده کنید. از Response Validatorی که در قسمت قبل نوشتید در این اپلیکیشن استفاده کنید.

    - - + + \ No newline at end of file diff --git a/docs/software-engineering/phase09-web/index.html b/docs/software-engineering/phase09-web/index.html index eacbb40d..4be4ac78 100644 --- a/docs/software-engineering/phase09-web/index.html +++ b/docs/software-engineering/phase09-web/index.html @@ -6,12 +6,12 @@ ASP.NET Core | آکادمی ستاره - - + +
    -

    ASP.NET Core

    مقدمه​

    در این فاز با فریم‌ورک ASP.NET Core +

    ASP.NET Core

    مقدمه​

    در این فاز با فریم‌ورک ASP.NET Core آشنا خواهید شد.

    برای آشنایی با تاریخچه و دلیل محبویت وب و مزایای آن نسبت به مدل‌های قدیمی ارتباط client-server مقاله From History of Web Application Development را مطالعه کنید.

    مفاهیم اولیه​

    قبل از آنکه به سراغ ASP.NET Core @@ -104,7 +104,7 @@ برگرداند.

    پی‌نوشت​

    جهت آشنایی با ASP.NET Core Web API می‌توانید از ویدئوهای آموزشی Web APIs for Beginners مایکروسافت نیز استفاده کنید.

    - - + + \ No newline at end of file diff --git a/docs/tags/index.html b/docs/tags/index.html index 3e26acb3..f3ba814f 100644 --- a/docs/tags/index.html +++ b/docs/tags/index.html @@ -6,13 +6,13 @@ برچسب‌ها | آکادمی ستاره - - + +
    -

    برچسب‌ها

    - - +

    برچسب‌ها

    + + \ No newline at end of file diff --git a/docs/tags/node-js/index.html b/docs/tags/node-js/index.html deleted file mode 100644 index 970a494b..00000000 --- a/docs/tags/node-js/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - -یک مطلب برچسب شده با "NodeJs" | آکادمی ستاره - - - - -
    -

    یک مطلب برچسب شده با "NodeJs"

    مشاهده تمام برچسب‌ها

    Angular

    انگولار، جایی که بایندینگ‌ها بیشتر از ستاره‌های آسمون می‌درخشن

    - - - - \ No newline at end of file diff --git a/docs/tags/readonly/index.html b/docs/tags/readonly/index.html index bc14e81c..4e6a7015 100644 --- a/docs/tags/readonly/index.html +++ b/docs/tags/readonly/index.html @@ -6,13 +6,13 @@ 3 مطلب برچسب شده با "Readonly" | آکادمی ستاره - - + +

    3 مطلب برچسب شده با "Readonly"

    مشاهده تمام برچسب‌ها

    Animation

    Sure, it looks stupid now. There's no music playing.

    UI/UX

    Oh, no wait; I'm sorry; That's "pretty dumb".

    - - + + \ No newline at end of file diff --git a/docs/tags/angular/index.html b/docs/tags/sandbox/index.html similarity index 67% rename from docs/tags/angular/index.html rename to docs/tags/sandbox/index.html index 22d2311d..a366dd65 100644 --- a/docs/tags/angular/index.html +++ b/docs/tags/sandbox/index.html @@ -5,14 +5,14 @@ -یک مطلب برچسب شده با "Angular" | آکادمی ستاره - - +یک مطلب برچسب شده با "Sandbox" | آکادمی ستاره + +
    -

    یک مطلب برچسب شده با "Angular"

    مشاهده تمام برچسب‌ها

    Angular

    انگولار، جایی که بایندینگ‌ها بیشتر از ستاره‌های آسمون می‌درخشن

    - - +

    یک مطلب برچسب شده با "Sandbox"

    مشاهده تمام برچسب‌ها

    Sandbox

    When I was a kid, my mom used to just throw me into a pile of broken glass!

    + + \ No newline at end of file diff --git a/index.html b/index.html index 11cd4744..baf5c830 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,13 @@ آکادمی ستاره - - + +

    آکادمی ستاره

    بزن بریم!

    مقدماتفرانت‌اندمهندسی نرم‌افزارعمومیپروژهمسیرهای یادگیری
    - - + + \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 64dbca7c..279a3b31 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://star-academy.github.io/codestar-documents/blogweekly0.5https://star-academy.github.io/codestar-documents/blog/archiveweekly0.5https://star-academy.github.io/codestar-documents/blog/first-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/long-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/mdx-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/tagsweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/docusaurusweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/facebookweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/helloweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/holaweekly0.5https://star-academy.github.io/codestar-documents/blog/welcomeweekly0.5https://star-academy.github.io/codestar-documents/docs/tagsweekly0.5https://star-academy.github.io/codestar-documents/docs/tags/angularweekly0.5https://star-academy.github.io/codestar-documents/docs/tags/node-jsweekly0.5https://star-academy.github.io/codestar-documents/docs/tags/readonlyweekly0.5https://star-academy.github.io/codestar-documents/docs/frontendweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/angularweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase03-ui-uxweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase04-css-and-sassweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase05-animationweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase06-clean-codeweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase08-authenticationweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase09-unit-testingweekly0.5https://star-academy.github.io/codestar-documents/docs/generalweekly0.5https://star-academy.github.io/codestar-documents/docs/general/phase01-presentationweekly0.5https://star-academy.github.io/codestar-documents/docs/general/phase02-grammarweekly0.5https://star-academy.github.io/codestar-documents/docs/introweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase01-onboardingweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase02-healthweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase03-non-techweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase04-gitweekly0.5https://star-academy.github.io/codestar-documents/docs/projectweekly0.5https://star-academy.github.io/codestar-documents/docs/project/phase01-etlweekly0.5https://star-academy.github.io/codestar-documents/docs/Roadmapsweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/Backendweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/DevOpsweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/Frontendweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineeringweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase01-simple-projectweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase02-clean-codeweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase03-c-sharpweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase04-unit-testweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase05-tddweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase06-cicdweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase07-SQLweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-EFCoreweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-optional01-Elasticsearchweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-optional02-nestweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase09-webweekly0.5https://star-academy.github.io/codestar-documents/weekly0.5 \ No newline at end of file +https://star-academy.github.io/codestar-documents/blogweekly0.5https://star-academy.github.io/codestar-documents/blog/archiveweekly0.5https://star-academy.github.io/codestar-documents/blog/first-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/long-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/mdx-blog-postweekly0.5https://star-academy.github.io/codestar-documents/blog/tagsweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/docusaurusweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/facebookweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/helloweekly0.5https://star-academy.github.io/codestar-documents/blog/tags/holaweekly0.5https://star-academy.github.io/codestar-documents/blog/welcomeweekly0.5https://star-academy.github.io/codestar-documents/docs/tagsweekly0.5https://star-academy.github.io/codestar-documents/docs/tags/readonlyweekly0.5https://star-academy.github.io/codestar-documents/docs/tags/sandboxweekly0.5https://star-academy.github.io/codestar-documents/docs/frontendweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase01-sandboxweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase02-pilotweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase03-ui-uxweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase04-css-and-sassweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase05-animationweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase06-clean-codeweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase07-ci-cdweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase08-authenticationweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase09-testweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase10-domweekly0.5https://star-academy.github.io/codestar-documents/docs/frontend/phase11-typescriptweekly0.5https://star-academy.github.io/codestar-documents/docs/generalweekly0.5https://star-academy.github.io/codestar-documents/docs/general/phase01-presentationweekly0.5https://star-academy.github.io/codestar-documents/docs/general/phase02-grammarweekly0.5https://star-academy.github.io/codestar-documents/docs/introweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase01-onboardingweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase02-healthweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase03-non-techweekly0.5https://star-academy.github.io/codestar-documents/docs/intro/phase04-gitweekly0.5https://star-academy.github.io/codestar-documents/docs/meetingsweekly0.5https://star-academy.github.io/codestar-documents/docs/meetings/04-1-1weekly0.5https://star-academy.github.io/codestar-documents/docs/meetings/amaweekly0.5https://star-academy.github.io/codestar-documents/docs/meetings/coffee-chatweekly0.5https://star-academy.github.io/codestar-documents/docs/meetings/dailyweekly0.5https://star-academy.github.io/codestar-documents/docs/meetings/gatheringweekly0.5https://star-academy.github.io/codestar-documents/docs/projectweekly0.5https://star-academy.github.io/codestar-documents/docs/project/phase01-etlweekly0.5https://star-academy.github.io/codestar-documents/docs/project/star-sprint-projectweekly0.5https://star-academy.github.io/codestar-documents/docs/Roadmapsweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/Backendweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/DevOpsweekly0.5https://star-academy.github.io/codestar-documents/docs/roadmaps/Frontendweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineeringweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase01-c-sharpweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase02-full-text-search-projectweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase03-clean-codeweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase04-unit-testweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase05-tddweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase06-cicdweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase07-SQLweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-EFCoreweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-optional01-Elasticsearchweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase08-optional02-nestweekly0.5https://star-academy.github.io/codestar-documents/docs/software-engineering/phase09-webweekly0.5https://star-academy.github.io/codestar-documents/weekly0.5 \ No newline at end of file