Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
За ингээд та бүхнийгээ удаан хүлээлт үүсгэсэн бас нэгэн супер backend сургалтандаа урьж байна! Өмнөх "Node.js Rest Api Backend эхнээс нь дуустал" сургалтаас ялгаатай нь энэхүү сургалтаар бид фэйсбүүк компаниас гаргасан GraphQL технологийг эхнээс нь дуустал эзэмшиж, жишээ хоёр ч бодит project хийж дуусгах юм.
Тэгэхээр GraphQL гэж юу вэ? GraphQL буюу Graph Query Language нь "Backend талын апинууд"-аас "query" хийдэг технологи гэж хэлж болох юм. Энэ нь өгөгдлийн сангийн сэрвэр дээр буй өгөгдлүүдээс query хийдэг SQL-тэй зарчмаараа төстэй. Гэхдээ qraphql query-ийг нь frontend талаас (апп, вэб) илгээх юм. Frontend апп хөгжүүлэгчдийн мөнхийн асуултуудын нэг нь "Яагаад frontend талаас өгөгдлийн сангийн сэрвэр рүү query илгээж болдоггүй юм бэ, тэгвэл хамаагүй амар байна шдээ?" гэдэг асуулт байдаг гэвэл та итгэх үү? Энэ нь болдоггүйн шалтгаан нь өгөгдлийн сан нь хүлээж авах query дээрээ хязгаарлалт хийдэггүй тул хакердуулсан frontend апп нь "Delete from users" гэх мэтийн query илгээж аппын бүх хэрэглэгчдийг устгах гэх мэт аюултай боломжууд нээлттэй байдагт оршино. Гэвч GraphQL нь энэхүү мөнхийн асуудлыг шийдэж frontend талаас backend тал рүү query илгээх боломж нээж өгчээ. Гэвч энэ query нь өгөгдлийн сангаас биш харин маш сайн хяналт шалгалттай grapqhl апинуудаас шүүдэг тул дээрх шиг хяналтгүй query нэвтрэх боломжгүйгээрээ давуу юм. Ийнхүү анх удаа frontend хөгжүүлэгчид backend хөгжүүлэгчдээс тусдаа ажиллах эрх чөлөө нээгдсэн байна! Backend, frontend хөгжүүлэгчдийн хамтдаа хийх төгсгөлгүй олон хурлуудаас салснаар төслийн хөгжүүлэлт ямар гайхалтай хурдтай болж хувирахыг та төсөөлөөд үзээрэй!
GraphQL нь 2012 онд Мета компани дотор төрсөн бөгөөд улмаар 2016 оноос албан ёсны хувилбар нь дэлхий нийтээр ашиглагдаж эхэлсэн backend технологи юм. 2012 онд фэйсбүүкийн Инстаграм iOS апп нь маш удаан ажилладаг байсан бөгөөд шинэ хурдтай хувилбарыг хөгжүүлэх гэж оролдсон гурван инжинер шинэ л апи технологи хийхгүй бол энэ нь бүтэшгүй зүйл болохыг олж мэджээ. Учир нь 2000-аад оноос хойш ашиглагдаж буй Rest api технологид том том асуудлууд байгааг тэд олж мэдсэн байна.
Фэйсбүүк шиг том компаны хувьд desktop вэб сайт болон ухаалаг төхөөрөмж дээрх аппуудад яг ижил backend-ийг рест апи технологи өгч чадахгүй байв. Өөрөөр хэлбэл desktop вэб-д зориулж бичсэн рест апиг удаан сүлжээтэй ухаалаг төхөөрөмж дээрх апп-д ашиглахад хэт их өгөгөдөл татаж апп хамаагүй удаан болж байлаа. Эндээс аппуудад зориулж бага өгөгөдөл өгдөг рест апи нэмж бичихээс аргагүй болсон боловч бүх төрлийн апп-д (tablet, утас, ухаалаг цаг, бусад ухаалаг төхөөрөмжүүд) хэрэглэж болохуйц нэгдсэн апи бичих боломжгүйг ухаарчээ. Чухам эндээс л тэд бүгдэд асуудалгүй хүссэн өгөгдлийг өгч чадах технологийг хийх санаа үүссэн түүхтэй. Улмаар тэд хэдхэн долоо хоногийн дотор уг технологийг бүтээж GraphQL гэдэг нэр өгчээ.
Улмаар 2015 онд open source болж дэлхийд танилцуулагдсан GraphQL нь frontend талаас backend апиг query хийж хүссэн өгөгдлөө гаргаж авах зориулалттай технологи юм. Уламжлалт рест апигаас ялгаатай нь өгөгдлийг дамжуулах арга нь ганц http протоколоор хязгаарлагдахгүй бөгөөд дамжуулалтын аргаас үл хамаарсан байдаг. GraphQL backend ашиглаж буй аппууд рест апи хэрэглэж буй аппуудаас эрс өндөр хурдаараа илт ялгардаг. Үүнээс болж хэрэглэгчдийн тоо ч өсч тухайн бизнестээ өндөр ашиг авчирдаг тул томоохон гэх бүх л дэлхийн компаниуд (Netflix, Github, Shopify, Airbnb, Paypal ...) backend талдаа GraphQL-ийг ашигладаг болжээ. Github компани л гэхэд олон жил хөгжүүлсэн рест апи-аа graphql рүү хэдхэн долоо хоногт хөрвүүлж ижил үр дүнд хүрснээ чадсанд нь удирдлагууд нь гайхсан тухай инжинер нь ярьсан байдаг.
GraphQL-ийг ашигласнаар танай системд дараах давуу тал үүснэ:
- frontend тал рүү илүү их өгөгдөл татахгүй (over-fetch)
- frontend талд хүссэнээс бага өгөгдөл өгөхгүй (under-fetch)
- Нэг graphql хүсэлтээр олон ялгаатай өгөгдлүүдийг татаж авчрах боломжтой
- Desktop вэб, утас, таблет, машин, хөргөгч, ухаалаг гэр, ухаалаг цаг ... бүгд нэг л graphql endpoint руу хандана.
- Апи хувилбар гэж тусдаа хөгжүүлэх авч явахгүй
- Documentation буюу баримтжуулалтыг апи доторх комментоосоо л гаргачихна
- Апи query хийх тусдаа вэб түүлтэй ирнэ (sql browser шиг)
- Шинээр ажилд орсон хөгжүүлэгч компаны бүх апиг ганц л хаягаар шууд судлах боломжтой
- Frontend талдаа graphql response өгөгдлүүдийг кэшлэдэг
- Рест апи апп нь нэг дэлгэц рендер хийх гэж 1- 30 request шиддэг бол graphql ашиглавал ердөө нэг л request илгээх тул илүү хурдтай, илүү найдвартай
- Найзын найзын найз... гэх мэт өгөгдлийг нэг л request-ээр маш хялбар татаж авчирна
- Query дээрээ өгөгдлийн төрөл ашигладаг тул буруу өгөгдөл дамжуулах зэрэг алдаа гарахгүй (type safe)
- Frontend хөгжүүлэгчид backend хөгжүүлэгчидтэй харилцах харилцаа улам байхгүй болж эрх чөлөөтэй хурдтай хөгжүүлнэ
Бид энэ хичээлээр graphql технологийг бүрэн ойлгож учрыг нь 100% ойлгохоос гадна сурсан мэдлэгээ баталгаажуулж хоёр бодит төслийг эхнээс нь дуустал гүйцэтгэх юм.
Энэ сургалтаар хийх төслүүд нь:
1) Ажлын зарын React вэб сайт. Админууд нь логин хийж орж зарууд тавьна. Ашигласан технологиуд React.js, Bulma css framework, SQLite, GraphQL, Express.js, Apollo server, Apollo client, JWT, Knex
2) Олон хэрэглэгчийн онлайн чатын сайт. Ашигласан технологиуд: Web Socket, Express.js, GraphQL, knex, nanoid, Apollo server, Apollo client, React, Bulma css framework, JWT
Хэн энэ сургалтыг үзвэл зохих вэ?
Хэрэв та орчин үеийн технологиос хоцрохгүй байя гэвэл энэ сургалтыг заавал авч үзээрэй. Энэхүү сургалтыг бүх төрлийн вэб сайт хөгжүүлэгч, ухаалаг төхөөрөмжний апп хөгжүүлэгч, интернэтэд холбоотой ухаалаг төхөөрөмж хөгжүүлэгч зэрэг бүхий л хөгжүүлэгчдийн үзэж эзэмшсэн байх ёстой орчин үеийн түлхүүр технологи юм.
Сургалтыг үзэхэд ямар мэдлэг танаас шаардагдах вэ?
Хэрэв та Javascript болон React талаар хялбар мэдлэгтэй бол сургалтыг үзэхэд хөнгөхөн байх болно. Хэдий тийм ч та React заавал мэддэг байх албагүй бөгөөд сургалтынхаа явцад би танд React технологийг маш хурдтай хөнгөхөн тайлбарлаад өгөх болно! Хэрэв React-ийг заавал эхлээд үзье гэвэл 1234.mn сайт дээр миний бэлтгэсэн "React эхнээс дуустал сургалтыг үзээрэй. Javascript-ийн хувьд мөн миний "Javascript эхнээс дуустал" сургалтыг мөн та судлах боломжтой.
За ингээд сургалт дээрээ уулзацгаая! Сургалт гайхалтай сонирхолтой байж таныг уйдаахгүй гэдэгт итгэлтэй байна!
Хичээлүүд :
-
15:29[эхлэл] Клиент/Сэрвэр архитектур болон API гэж юу вэ - RPC, SOAP, Rest болон GraphQL апинуудын тухай
-
15:56[эхлэл] REST API гэж юу вэ, node.js express.js дээр хийсэн rest api төсөлтэй танилцацгаая!
-
17:37[эхлэл] GraphQL гэж юу вэ, оддын дайн киноны (Starwars) graphql апи жишээн дээр танилцацгаая!
-
12:25[эхлэл] REST api дутагдал, GraphQL давуу тал - Нэгдүгээр хэсэг
-
13:18[эхлэл] REST api дутагдал, GraphQL давуу тал - Хоёрдугаар хэсэг
-
18:41[эхлэл] GraphQL үүсэх болсон түүх, Фэйсбүүкийн мобайл руу шилжих стратегийн алдааны тухай
-
12:58[эхлэл] GraphQL түүх, open source болж github, airbnb, twitter, medium компаниуд анх шилжсэн тухай
-
08:57[эхлэл] GraphQL сэрвэр ажиллагааны зарчимтай танилцацгаая - 1 хэсэг
-
07:41[эхлэл] GraphQL сэрвэр ажиллагааны зарчим - Бодит schema жишээ - 2 хэсэг
-
03:34[эхлэл] GraphQL сэрвэр ажиллагааны архитектур - бизнес логик - 3 хэсэг
-
06:08[schema] Шинээр project үүсгэж GraphQL Schema бичицгээе
-
08:47[schema] Apollo server дээр өөрсдийн GraphQL shema-аа ажиллуулцгаая!
-
07:51[schema] Apollo server дээр өөрсдийн GraphQL shema-аа ажиллуулцгаая - 2 хэсэгн
-
07:23[schema] GraphQL request, response мэссэжийг chrome dev tool дээр харцгаая
-
10:45[schema] Маш хялбархан GraphQL клиентийг javascript ашиглан бичиж туршицгаая!
-
13:44[schema] Command Line ашиглан GraphQL хүсэлтийг боловсруулж туршицгаая!
-
07:55[schema] Express сэрвэр ашиглан GraphQL сэрвэрийг бичиж graphiql түүлийг ажиллуулцгаая!
-
10:26[graphql] GraphQL бичихэд хэрэглэх таван төрлийн Scalar type тухай
-
09:58[graphql] GraphQL дээр анхаарлын тэмдгийг хэрэглэх, apollo сэрвэр рүү кодоо шилжүүлэх
-
05:24[graphql] CURL ашиглан GraphQL сэрвэр рүү request илгээх, authorization header тавьж өгөх
-
08:09[graphql] GraphQL query дээр параметер дамжуулж ажиллах, тоглогчийг ID-аар нь олох
-
04:41[graphql] GraphQL variable буюу хувьсагчийг query parameter рүү дамжуулж ашиглах
-
13:08[graphql] Enum type гэж юу вэ, хэрхэн хэрэглэх вэ, Player-т status гэсэн enum type оруулцгаая!
-
09:12[graphql] Interface гэж юу вэ? Interface хэрэглэн graphql api-ийг илүү найдвартай, уян хатан болгох нь
-
06:49[graphql] GraphQL query дотор Alias-ийг хэрэглэх нь, query нь async, mutation нь sync ажилладаг тухай
-
04:44[graphql] Fragment гэж юу вэ, interface-ээс ямар ялгаатай вэ, fragment дотор хувьсагч ашиглах
-
08:51[graphql] union type гэж юу вэ? Starwar api дээр глобаль хайлтыг union type ашиглан хэрэгжүүлэх
-
10:04[graphql] inline fragment ашиглан union type буцаах апинаас өгөгдлийг query хийж авах тухай
-
10:03[graphql] Field resolver гэж юу вэ? Түүнийг ашиглан create-date талбарыг Person type-д нэмж өгөх
-
16:15[graphql] Resolver chain буюу graphql resolver-ууд хэрхэн ажилладаг талаар танилцацгаая!
-
06:53[graphql] Recursive resolver ашиглах тухай, найзын найзын найз жишээг хийж харцгаая!
-
13:29[graphql] Directive гэж юу вэ, custom scalar type ашиглах, field-ийг deprecated болгох
-
12:21[graphql] Mutation гэж юу вэ, хэрхэн хэрэглэх вэ? Шинэ гариг нэмдэг Mutation resolver бичицгээе!
-
05:00[graphql] Mutation дээр InputType хэрхэн хэрэглэх вэ? AddNewPlanet дээр InputType хэрэглэе!
-
07:17[graphql] GraphQL error буюу алдаатай хэрхэн ажиллах вэ? GraphQLError классыг ашиглах
-
12:51[graphql Schema дээр хэрхэн documentation хийх вэ? Comment бичих аргууд
-
10:02[graphql] GraphQL апи нь versionless буюу тусдаа version авч явах шаардлаггүй байдаг!
-
03:58[project-client] Төсөл: Ажлын зарын сайт. Ямар технологи төсөлдөө ашиглах вэ?
-
07:59[project-client] Create-react-app ашиглан КЛИЕНТ react project үүсгэж bulma холбож ажиллуулцгаая!
-
17:53[project-client] Ажлын зар вэб сайтдаа HomePage, JobList, JobItem компонентуудыг бичиж өгцгөөе!
-
13:01[project-client] URL-аас ID салгаж авч JobPage, CompanyPage компонентуудыг бичицгээе!
-
15:28[project-client] LoginPage хуудсыг бичиж логин хийсэн хэрэглэгчийг state-д хадгалах
-
10:32[project-client] NavBar компонентийг бичиж логин хийх үед өөр цэс харуулах, Logout хийж тестлэх
-
05:26[project-client] Шинээр зар нэмдэг CreateJobPage хуудсыг бичицгээе!
-
07:42[project-client] React вэб апп болон GraphQL backend хооронд логин хийх зөв дизайны шийдэл
-
11:26[project-client] React вэб аппаас Express сэрвэр рүү логин хийх функцийг бичицгээе!
-
15:11[project-server] Express backend сэрвэрийг бичиж /login хүсэлтэд хариулдаг болгоцгооё! cors тохиргоог хийх нь
-
13:54[project-server] Өгөгдлийн сантай ажиллах Knex сантай танилцаж sqlite базаа скрипт бичин үүсгэцгээе!
-
12:01[project-server] handleLogin функц дээр имэйл болон нууц үгийг базаас шалгаж токен үүсгэх нь
-
08:36[project-server] Express сэрвэр дээрээ middleware ашиглан Apollo сэрвэр тохируулж ажиллуулцгаая!
-
06:10[project-server] GraphQL Schema дээр jobs query тодорхойлж ажиллуулж туршицгаая
-
05:56[project-server] Job type дээр date гэсэн field resolver тусд нь бичиж оруулцгаая!
-
08:13[project-server] Jobs заруудыг Company type-тай холбоцгооё, Job дээр Company resolver бичнэ
-
05:17[project-server] Job query шинээр нэмж зарыг ID-аар өгөх апи бичицгээе!
-
03:40[project-server] Company query-д ID дамжуулах замаар компанийг шүүх апи бичицгээе!
-
06:41[project-server] Ажлын зарын вэб дээр graphql backend-ээс заруудыг шүүж харуулцгаая!
-
05:06[project-server] useEffect hooks ашиглан graphql сэрвэрээс ирсэн заруудыг HomePage дээр харуулцгаая!
-
10:50[project-server] Сонгогдсон зарын мэдээллийг үзүүлдэг хуудсыг GraphQL сэрвэртэй холбох
-
04:34[project-server] Компаны дэлгэрэнгүйг үзүүлдэг хуудсыг graphql сэрвэртэй холбоцгооё!
-
09:57[project-server] Компаны дэлгэрэнгүй хуудас дээр уг компаны заруудыг мөн үзүүлдэг болгоцгооё!
-
09:00[project-server] Вэб сайт ажиллахад үүсч болох graphql алдаанууд, тэдгээртэй хэрхэн ажиллах тухай
-
08:55[project-server] GraphQLError классыг ашиглан өөрсдийн алдааг клиент руу шидэцгээе!
-
16:02[project-server] Клиент вэб дотроос GraphQL сэрвэрээс дамжуулсан алдааны мэдээллийг боловсруулах
-
10:15[project-server] Шинээр зар нэмэх createJob mutation бичиж ажиллуулж шалгацгаая!
-
07:50[project-server] Input Type гэж юу вэ? createJob mutation дээр input type хэрэглэх нь ямар хэрэгтэй вэ?
-
07:39[project-client] React аппын зар нэмэх формыг graphql сэрвэртэй холбон ажиллуулцгаая!
-
06:30[project-server] GraphQL дээрээ зарыг устгах апи нэмж өгөөд тестлэцгээе!
-
12:07[project-server] Өгөгдсөн зарыг засварлах апиг сэрвэр талдаа нэмцгээе!
-
15:56[project-client] React вэб апп дээр зарыг устгадаг хэсгийг хийж өгцгөөе!
-
04:21[project-client] React вэб дээрээс хэрэглэгч зөвхөн өөрийн компаны зарыг устгадаг болгоцгооё!
-
16:54[project-client] React вэб апп дээр зарыг ЗАСВАРЛАДАГ хэсгийг хийж өгцгөөе!
-
05:06[project-server] Клиент сэрвэр хооронд authentication ажиллах зарчим
-
10:56[project-server] Express middleware ажиллах зарчим, бидний бичих authenticationMiddleware хэрхэн ажиллах тухай
-
11:09[project-server] authenticationMiddleware бичиж клиентээс ирсэн токенийг parse хийж харцгаая!
-
08:28[project-server] Context ашиглан resolver функцүүд рүү логин хийсэн хэрэглэгчийн мэдээллийг дамжуулах нь
-
10:47[project-client] React вэб дээрээс токеноо graphql query хамт дамжуулах нь
-
16:31[project-server] Сэрвэр дээрээс зарыг устгах өөрчлөхөд authentiation болон authorization шалгалтыг хийх нь
-
17:22[apollo-client] Apollo client гэж юу вэ? Түүнийг ашиглахын давуу талууд
-
06:29[apollo-client] React вэб сайтдаа Apollo client суулгаж тохируулцгаая!
-
05:26[apollo-client] React вэб дээр query-үүдийг Apollo client руу шилжүүлж, кэш ажиллаж буй эсэхийг шалгацгаая!
-
12:17[apollo-client] Apollo Link гэж юу вэ? Хэрхэн request дээр нэмэлт боловсруулалтыг гүйцэтгэдэг вэ?
-
11:38[apollo-client] Mutation-уудыг apollo client руу шилжүүлэх, authenticationLink бичиж токенийг authorization header рүү бичих
-
09:10[apollo-client] Apollo client devtool суулгаж apollo кэштэй танилцацгаая!
-
13:05[apollo-client] Apollo client fetch policy буюу кэшээс эсвэл сэрвэрээс түрүүлж унших эсэхийг хэрхэн тохируулдаг вэ?
-
05:22[apollo-client] React вэбийг refresh хийхэд логин session-ийг алдагддаггүй болгоцгооё!
-
12:08[apollo-client] Apollo client кэшээс readQuery, readFragment ашиглан мэдээллийг уншиж авах нь
-
08:33[apollo-client] Apollo client кэш доторх зарын мэдээллийг writeQuery ашиглан өөрчилцгөөе!
-
13:19[apollo-client] Шинээр үүсгэсэн зарын мэдээллийг Apollo client кэшд бичих оптимизаци хийцгээе!
-
04:35[apollo-client] React вэб апп дотроо GraphQL Fragment ашиглан query давхардлыг арилгая
-
10:20[react apollo] React вэб аппаа useQuery hook ашиглан компаны хуудсыг сайжруулцгаая!
-
05:26[react apollo] useQuery hook дээр network-only policy тохируулах, home-page, job-page хуудсуудаа useQuery ашиглан хөрвүүлэх
-
04:14[react-apollo] Шинээр зар нэмдэг хуудсаа useMutation hook ашиглан сайжруулцгаая!
-
02:48[react apollo] Зар устгах хэсгийг useMutation hook ашиглан сайжруулцгаая!
-
08:15[react apollo] Зар ЗАСВАРЛАХ хэсгийг useMutation hook ашиглан сайжруулцгаая!
-
04:11[react apollo] useMutation hook-ээс буцах утгыг ашиглан олон давхар зар үүсгэхээс сэргийлцгээе!
-
07:54[DataLoader] GraphQL сэрвэрийн N + 1 проблем гэж юу вэ?
-
11:03[DataLoader] DataLoader ашиглан компаны мэдээллийг batch буюу бөөнд нь базаас авцгаая!
-
10:26[DataLoader] DataLoader глобаль кэшийг ашиглалгүй request бүрт DataLoader-ийн кэшийг ашиглахаар өөрчлөх
-
06:31[pagination] Data pagination хийхийн тулд баз руу 50ш зар нэмдэг скрипт бичиж эрэмбэлж харуулцгаая!
-
05:03[pagination] Limit параметерийг ашиглан шүүж авчрах зарын тоог хязгаарлацгаая!
-
03:25[pagination] Offset параметерийг ашиглан хаанаас эхлэн өгөгдлийг шүүхийг заах
-
08:48[pagination] frontend талд хялбар pagination нэмэх нь
-
09:55[pagination] totalJobCount апиг нэвтрүүлж бүх зарын тоог тооцоолж pagination хязгаарын нөхцлийг засцгаая!
-
16:32[pagination] Bulma Pagination компонентийг React руу хөрвүүлж өөрсдийн pagination ui-г сайжруулцгаая!
-
16:10[subscription] GraphQL чат төслийн СЭРВЭРийн хялбар кодтой танилцацгаая!
-
08:40[subscription] GraphQL чат төслийн React вэб аппыг ажиллуулж харцгаая!
-
25:25[subscription] Чат React вэб аппын кодтой танилцацгаая!
-
11:43[subscription] Update функц ашиглан Apollo cache өөрчлөх замаар шинээр бичсэн мэссэжийг чат цонхонд гаргаж ирцгээе!
-
11:02[subscription] Subscription operation болон Web Socket холбоосоор чат мэссэж илгээгдэх тухай ярилцацгаая!
-
14:30[subscription] GraphQL ЧАТ сэрвэр дээр Web Socket сэрвэр тохируулах
-
15:07[subscription] function* GENERATOR FUNCTION болон YIELD ашиглан AsyncIterator ашиглаж туршицгаая!
-
12:41[subscription] Publish-subscribe модел (pub/sub) ашиглан messageAdded resolver-ийг бичицгээе!
-
16:40[subscription] Чат клиентаа wsLink ашиглахаар тохируулах, dev үеийн алдааг loadDevMessages loadErrorMessages ашиглан харуулах!
-
08:44[subscription] useSubscription hook ашиглан чатаа бүрэн ажиллагаатай болгоцгооё!
-
07:18[subscription] Web Socket холболт болон мэссэжүүдийг хэрхэн debug хийх вэ?
-
05:06[subscription] Чат клиентаас ConnectionParam ашиглан логин токенийг web socket-оор сэрвэр рүү дамжуулцгаая!
-
12:54[subscription] Web Socket сэрвэр дээр клиентаас ирсэн токенийг шалгаж Чат төслөө бүрэн дуусгацгаая!
== Сурагчдын сэтгэгдлүүд ==