Ember апп доторх дата хаанаас ирдэг вэ?

Single Page application нь өмнө нь хэлсэнчлэн интернет хөтөч дотор нэг удаа дуудагдаад дараа нь дахин хуудас ачааллахгүйгээр зөвхөн доторх дата-гаа л нааш цааш нь авдаг.

Тэгвэл тэр дата чухам хаанаас ирж, хаашаа явж байна вэ?

source: https://www.pexels.com/photo/coding-computer-data-depth-of-field-577585/

Хэрвээ та REST API гэж хариулсан бол таньд баяр хүргэе 👏. Хэрвээ та REST API гэж юу болохыг мэдэхгүй бол эндээс уншаарай.

Монолитк вэбийг авч үзье. Анхлан вэб хөгжүүлж, вэбтэй холбоотой код бичиж сурч байгаа хүн бүр эхлээд HTML, CSS, Javascript гэсэн дарааллаар сурч хэрэглэгчид харагдах хэсгийг хийдэг. Харин дараа нь арай илүү динамик хүнд хэсэг болох backend хэсгийн өгөгдлийн сан түүнтэй харьцах SQL, өгөгдлийн сангаас дата буюу мэдээллээ татах, өгөгдлийн сан руу бичих, өөрчлөх динамик хэл болох PHP, Java, C#, Python, Ruby аль нэгийг нь сурдаг. Эдгээрийн алийг нь ч сурсан байсан бүгд л яг адилхан зүйлийг хийдэг(Кодны бичиглэл, мөрны уртыг эс тооцвол :P ). Тэгвэл SinglePageApplication нэг ялгаатай юм нь өгөгдлийг REST API, эсвэл сүүлийн үед тренд болж байгаа GraphQL ээр өгөхийг шаарддаг. Мэдээж JSON форматтай байхыг бас давхар шаардана. Тэгэхээр REST API бичих талаар түр алгасаад бэлэн байгаа зүйлийг ашиглая. Олон public API байгаа ч түүнээс github-ыг сонголоо. Учир нь энэ чинь github шүү дээ /who doesn’t like github, right?/:D.

1. Эхлээд ember прожект үүсгэнэ. Үүсгэхдээ package manager -ээр yarn ашиглах, мөн default welcome -ыг ашиглахгүй гэж үүсгэнэ.

ember new gh_profile --yarn --no-welcome 

2. Одоо RestAPI -тай харьцах adapter болон serializer үүсгэнэ. Тѳслийн хавтасруу ороод:

ember g adapter application
ember g serializer application

Дээрх 2 команд нь adapters, serializers гэсэн 2 хавтас үүсгэж дотор нь application.js файлууд үүсгэнэ. Эхлээд adapter дээр host зааж ѳгнѳ.

/* adapters/application.js */
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
  host: 'https://api.github.com',
});

Serializer дээр

/* serializers/application.js */
import DS from 'ember-data';
export default DS.JSONSerializer.extend({})

Github нь яг json API форматтай дата буцаахгүй тул зүгээр л JSONSerializer ашиглав.

Одоо restAPI аас ирэх дата -д зориулж модель үүсгэнэ. Эхлээд https://api.github.com/users/zorig гэд ороод үзье.

https://api.github.com/users/zorig

Дээрхи response -ээс үүдэн доорхи командыг ажилуулж

ember g model user

models/user.js файл үүсэнэ. Дотор нь дараах field -үүдыг нэмнэ.

import DS from 'ember-data';
export default DS.Model.extend({
  name: DS.attr('string'),
  bio: DS.attr('string'),
  followers: DS.attr('string'),
  following: DS.attr('string')
});

харин одоо API аас татсан мэдээллээ харуулъя. Шинэ route үүсгэнэ.

ember g route index

Дээрхи команд routes/index.js , templates/index.hbs файлууд тус тус үүснэ.

routes/index.js файл нээж дараах кодыг хуулна.

import Ember from 'ember';                                                  
 
export default Ember.Route.extend({
  model() {
    return this.store.findRecord('user', 'zorig') 
  }
});

templates/index.hbs дотор

<h1>{{model.name}}</h1>                                                     
<h6>{{model.bio}}</h6>
<span>{{model.followers}}</span>
<span>{{model.following}}</span>

ember s гээд сервер ээ ажиллуулаад харах юм бол

headers tab

Энд index route, user моделыг ашиглан adapter дээрхи host руу хүсэлт явуулж байна.

Ирсэн хариуг харвал:

response tab

Ember -ын Chrome extension суулгаад харвал:

ember chrome extenstion: data

Хэрвээ хүсвэл зураг оруулж ирж болно. Үүний тулд models.js дээр нэмж бичиж ѳгнѳ. /API -аас ирэх хариуны key -тэй адилхан утга бичнэ./

import DS from 'ember-data';
export default DS.Model.extend({
  name: DS.attr('string'),
  bio: DS.attr('string'),
  followers: DS.attr('number'),
  following: DS.attr('number'),
  avatar_url: DS.attr('string') //api-с ирэх key адилхан байх ёстой
});

Одоо templates/index.hbs дээрээ зурагаа харуулъя.

<img src="{{model.avatar_url}}" alt="">
<h1>{{model.name}}</h1>
<h6>{{model.bio}}</h6>
<span>{{model.followers}}</span>
<span>{{model.following}}</span>

Мѳн styles/app.css бага зэрэг ѳѳрчлѳлт оруулъя.

img {
  width: 4rem;
}

Ингээд эцсийн үр дүн маань:

http://localhost:4200