Dodawanie usługi niestandardowej do internetowego interfejsu użytkownika akceleratora rozwiązania do monitorowania zdalnego
W tym artykule pokazano, jak dodać nową usługę do internetowego interfejsu użytkownika internetowego akceleratora rozwiązania do monitorowania zdalnego. W tym artykule opisano:
- Jak przygotować lokalne środowisko programistyczne.
- Jak dodać nową usługę do internetowego interfejsu użytkownika.
Przykładowa usługa w tym artykule zawiera dane siatki, którą zawiera artykuł Jak dodać siatkę niestandardową do internetowego interfejsu użytkownika internetowego akceleratora rozwiązania do monitorowania zdalnego .
W aplikacji React usługa zazwyczaj współdziała z usługą zaplecza. Przykłady w akceleratorze rozwiązania do monitorowania zdalnego obejmują usługi, które współdziałają z menedżerem centrum IoT i mikrousługami konfiguracji.
Wymagania wstępne
Aby wykonać kroki opisane w tym przewodniku z instrukcjami, potrzebne jest następujące oprogramowanie zainstalowane na lokalnej maszynie programistycznej:
Przed rozpoczęciem
Przed kontynuowaniem wykonaj kroki opisane w artykule Dodawanie strony niestandardowej do internetowego interfejsu użytkownika internetowego akceleratora rozwiązania do monitorowania zdalnego .
Dodawanie usługi
Aby dodać usługę do internetowego interfejsu użytkownika, należy dodać pliki źródłowe definiujące usługę i zmodyfikować niektóre istniejące pliki, aby interfejs użytkownika sieci Web był świadomy nowej usługi.
Dodawanie nowych plików definiujących usługę
Aby rozpocząć pracę, folder src/walkthrough/services zawiera pliki definiujące prostą usługę:
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);
}
}
Aby dowiedzieć się więcej na temat implementowania usług, zobacz Wprowadzenie do programowania reaktywnego, którego brakuje.
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);
Skopiuj exampleService.js do folderu src/services i skopiuj exampleModels.js do folderu src/services/models .
Zaktualizuj plik index.js w folderze src/services , aby wyeksportować nową usługę:
export * from './exampleService';
Zaktualizuj plik index.js w folderze src/services/models , aby wyeksportować nowy model:
export * from './exampleModels';
Konfigurowanie wywołań do usługi ze sklepu
Aby rozpocząć pracę, folder src/walkthrough/store/reducers zawiera przykładowy reduktor:
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
Skopiuj exampleReducer.js do folderu src/store/reducers .
Aby dowiedzieć się więcej na temat redukcji i epików, zobacz redux-observable.
Konfigurowanie oprogramowania pośredniczącego
Aby skonfigurować oprogramowanie pośredniczące, dodaj reduktor do pliku rootReducer.js w folderze src/store :
import { reducer as exampleReducer } from './reducers/exampleReducer';
const rootReducer = combineReducers({
...appReducer,
...devicesReducer,
...rulesReducer,
...simulationReducer,
...exampleReducer
});
Dodaj epiki do pliku rootEpics.js w folderze src/store :
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()
];
Następne kroki
W tym artykule przedstawiono zasoby dostępne w celu ułatwienia dodawania lub dostosowywania usług w internetowym interfejsie użytkownika w akceleratorze rozwiązania do monitorowania zdalnego.
Teraz zdefiniowano usługę, następnym krokiem jest dodanie niestandardowej siatki do internetowego interfejsu użytkownika internetowego akceleratora rozwiązania do monitorowania zdalnego , który wyświetla dane zwrócone przez usługę.
Aby uzyskać więcej informacji koncepcyjnych na temat akceleratora rozwiązania do monitorowania zdalnego, zobacz Architektura monitorowania zdalnego.