Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel hizmet ekleme

Makale
10/02/2018

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine nasıl yeni bir hizmet ekleneceği gösterilmektedir. Makalede şunlar açıklanmaktadır:

Yerel geliştirme ortamını hazırlama.
Web kullanıcı arabirimine yeni bir hizmet ekleme.

Bu makaledeki örnek hizmet, Uzaktan İzleme çözümü hızlandırıcısına özel kılavuz ekleme web kullanıcı arabirimi nasıl yapılır makalesinin nasıl ekleneceğini gösterdiği bir kılavuza ilişkin verileri sağlar.

React bir uygulamada, bir hizmet genellikle bir arka uç hizmetiyle etkileşim kurar. Uzaktan İzleme çözüm hızlandırıcısı örnek olarak IoT hub yöneticisiyle etkileşim kuran hizmetler ve yapılandırma mikro hizmetleri verilebilir.

Önkoşullar

Bu nasıl yapılır kılavuzundaki adımları tamamlamak için yerel geliştirme makinenizde aşağıdaki yazılımların yüklü olması gerekir:

Git
Node.js

Başlamadan önce

Devam etmeden önce Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir sayfa ekleme makalesindeki adımları tamamlamanız gerekir.

Hizmet ekleme

Web kullanıcı arabirimine bir hizmet eklemek için, hizmeti tanımlayan kaynak dosyaları eklemeniz ve mevcut bazı dosyaları değiştirerek web kullanıcı arabiriminin yeni hizmeti tanımasını sağlamanız gerekir.

Hizmeti tanımlayan yeni dosyaları ekleme

Başlamak için src/walkthrough/services klasörü basit bir hizmeti tanımlayan dosyaları içerir:

exampleService.js


import { Observable } from 'rxjs';
import { toExampleItemModel, toExampleItemsModel } from './models';

/** Normally, you'll need to define the endpoint URL.
 * See app.config.js to add a new service URL.
 *
 * For this example, we'll just hardcode sample data to be returned instead
 * of making an actual service call. See the other service files for examples.
 */
//const ENDPOINT = Config.serviceUrls.example;

/** Contains methods for calling the example service */
export class ExampleService {

  /** Returns an example item */
  static getExampleItem(id) {
    return Observable.of(
      { ID: id, Description: "This is an example item." },
    )
      .map(toExampleItemModel);
  }

  /** Returns a list of example items */
  static getExampleItems() {
    return Observable.of(
      {
        items: [
          { ID: "123", Description: "This is item 123." },
          { ID: "188", Description: "This is item ONE-DOUBLE-EIGHT." },
          { ID: "210", Description: "This is item TWO-TEN." },
          { ID: "277", Description: "This is item 277." },
          { ID: "413", Description: "This is item FOUR-THIRTEEN." },
          { ID: "789", Description: "This is item 789." },
        ]
      }
    ).map(toExampleItemsModel);
  }

  /** Mimics a server call by adding a delay */
  static updateExampleItems() {
    return this.getExampleItems().delay(2000);
  }
}

Hizmetlerin nasıl uygulandığı hakkında daha fazla bilgi edinmek için bkz. Eksik olduğunuz Reaktif Programlamaya giriş.

model/exampleModels.js

import { camelCaseReshape, getItems } from 'utilities';

/**
 * Reshape the server side model to match what the UI wants.
 *
 * Left side is the name on the client side.
 * Right side is the name as it comes from the server (dot notation is supported).
 */
export const toExampleItemModel = (data = {}) => camelCaseReshape(data, {
  'id': 'id',
  'description': 'descr'
});

export const toExampleItemsModel = (response = {}) => getItems(response)
  .map(toExampleItemModel);

exampleService.jssrc/services klasörüne kopyalayın ve exampleModels.jssrc/services/models klasörüne kopyalayın.

Yeni hizmeti dışarı aktarmak için src/services klasöründeki index.js dosyasını güncelleştirin:

export * from './exampleService';

Yeni modeli dışarı aktarmak için src/services/models klasöründeki index.js dosyasını güncelleştirin:

export * from './exampleModels';

Mağazadan hizmete yapılan çağrıları ayarlama

Başlamak için src/walkthrough/store/reducers klasörü örnek bir azaltıcı içerir:

exampleReducer.js

import 'rxjs';
import { Observable } from 'rxjs';
import moment from 'moment';
import { schema, normalize } from 'normalizr';
import update from 'immutability-helper';
import { createSelector } from 'reselect';
import { ExampleService } from 'walkthrough/services';
import {
  createReducerScenario,
  createEpicScenario,
  errorPendingInitialState,
  pendingReducer,
  errorReducer,
  setPending,
  toActionCreator,
  getPending,
  getError
} from 'store/utilities';

// ========================= Epics - START
const handleError = fromAction => error =>
  Observable.of(redux.actions.registerError(fromAction.type, { error, fromAction }));

export const epics = createEpicScenario({
  /** Loads the example items */
  fetchExamples: {
    type: 'EXAMPLES_FETCH',
    epic: fromAction =>
      ExampleService.getExampleItems()
        .map(toActionCreator(redux.actions.updateExamples, fromAction))
        .catch(handleError(fromAction))
  }
});
// ========================= Epics - END

// ========================= Schemas - START
const itemSchema = new schema.Entity('examples');
const itemListSchema = new schema.Array(itemSchema);
// ========================= Schemas - END

// ========================= Reducers - START
const initialState = { ...errorPendingInitialState, entities: {}, items: [], lastUpdated: '' };

const updateExamplesReducer = (state, { payload, fromAction }) => {
  const { entities: { examples }, result } = normalize(payload, itemListSchema);
  return update(state, {
    entities: { $set: examples },
    items: { $set: result },
    lastUpdated: { $set: moment() },
    ...setPending(fromAction.type, false)
  });
};

/* Action types that cause a pending flag */
const fetchableTypes = [
  epics.actionTypes.fetchExamples
];

export const redux = createReducerScenario({
  updateExamples: { type: 'EXAMPLES_UPDATE', reducer: updateExamplesReducer },
  registerError: { type: 'EXAMPLE_REDUCER_ERROR', reducer: errorReducer },
  isFetching: { multiType: fetchableTypes, reducer: pendingReducer }
});

export const reducer = { examples: redux.getReducer(initialState) };
// ========================= Reducers - END

// ========================= Selectors - START
export const getExamplesReducer = state => state.examples;
export const getEntities = state => getExamplesReducer(state).entities || {};
export const getItems = state => getExamplesReducer(state).items || [];
export const getExamplesLastUpdated = state => getExamplesReducer(state).lastUpdated;
export const getExamplesError = state =>
  getError(getExamplesReducer(state), epics.actionTypes.fetchExamples);
export const getExamplesPendingStatus = state =>
  getPending(getExamplesReducer(state), epics.actionTypes.fetchExamples);
export const getExamples = createSelector(
  getEntities, getItems,
  (entities, items) => items.map(id => entities[id])
);
// ========================= Selectors - END

exampleReducer.jssrc/store/reducers klasörüne kopyalayın.

Azaltıcı ve Epic'ler hakkında daha fazla bilgi edinmek için bkz. redux-observable.

Ara yazılımı yapılandırma

Ara yazılımı yapılandırmak için src/store klasöründeki rootReducer.js dosyasına azaltıcıyı ekleyin:

import { reducer as exampleReducer } from './reducers/exampleReducer';

const rootReducer = combineReducers({
  ...appReducer,
  ...devicesReducer,
  ...rulesReducer,
  ...simulationReducer,
  ...exampleReducer
});

Epic'leri src/store klasöründeki rootEpics.js dosyasına ekleyin:

import { epics as exampleEpics } from './reducers/exampleReducer';

// Extract the epic function from each property object
const epics = [
  ...appEpics.getEpics(),
  ...devicesEpics.getEpics(),
  ...rulesEpics.getEpics(),
  ...simulationEpics.getEpics(),
  ...exampleEpics.getEpics()
];

Sonraki adımlar

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısında web kullanıcı arabirimine hizmet eklemenize veya özelleştirmenize yardımcı olacak kaynaklar hakkında bilgi edindi.

Şimdi bir hizmet tanımladığınıza göre, sonraki adım Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine hizmet tarafından döndürülen verileri görüntüleyen özel bir kılavuz eklemektir .

Uzaktan İzleme çözüm hızlandırıcısı hakkında daha fazla kavramsal bilgi için bkz. Uzaktan İzleme mimarisi.

Share via