带格・达什博德・斯迪克
实例:
网易 (QQ ES5)
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
<script src="/bringg-dashboard-sdk.js"></script>
</head>
<body>
<!-- ... -->
<script>
BringgDashboardSDK.initWithEmail(email, password).then(bringgDashboardSDK => {
bringgDashboardSDK.merchant.get().then(console.log).catch(console.error);
bringgDashboardSDK.merchantConfiguration.get().then(console.log).catch(console.error);
});
BringgDashboardSDK.initWithAuthToken(region, authToken).then(bringgDashboardSDK => {
bringgDashboardSDK.merchant.get().then(console.log).catch(console.error);
bringgDashboardSDK.merchantConfiguration.get().then(console.log).catch(console.error);
});
</script>
</body>
</html>
节点.js(QQES5)
const BringgDashboardSDK = require("bringg-dashboard-sdk");
BringgDashboardSDK.initWithEmail(email, password).then(bringgDashboardSDK => {
bringgDashboardSDK.merchant.get().then(console.log).catch(console.error);
bringgDashboardSDK.merchantConfiguration.get().then(console.log).catch(console.error);
});
BringgDashboardSDK.initWithAuthToken(region, authToken).then(bringgDashboardSDK => {
bringgDashboardSDK.merchant.get().then(console.log).catch(console.error);
bringgDashboardSDK.merchantConfiguration.get().then(console.log).catch(console.error);
});
类型脚本 (\\ 2.6)
import BringgDashboardSDK = require("bringg-dashboard-sdk");
async function runAwait() {
try {
const bringgDashboardSDK = await BringgDashboardSDK.initWithEmail(email, password);
console.log(await bringgDashboardSDK.merchant.get());
console.log(await bringgDashboardSDK.merchantConfiguration.get());
} catch (e) {
console.error(e);
}
try {
const bringgDashboardSDK = await BringgDashboardSDK.initWithAuthToken(region, authToken);
console.log(await bringgDashboardSDK.merchant.get());
console.log(await bringgDashboardSDK.merchantConfiguration.get());
} catch (e) {
console.error(e);
}
}
runAwait();
正在测试
yarn test
以监视模式运行测试
yarn jest
用 tsLint 输入代码
yarn lint
用更美的代码修复您的代码
yarn prettier
修改您的代码, 并用一个命令修正它( 将会运行更漂亮和更漂亮)
yarn fix
编译你出色的代码制作
yarn prod
DashboardSDK - 编写新实体的准则 - 10/4/19
每个实体应有3个部分——公共API,实体商店,Http服务.
上一个状态
比如我们想揭露 VehicleType 我们的最终用户,
我们先到sdk再加 Actions 文件夹.
代码示例
export enum VehicleTypesActionTypes {
GET_VEHICLE_TYPES = 'GET_VEHICLE_TYPES',
MARK_VEHICLE_TYPES_FETCHED = 'MARK_VEHICLE_TYPES_FETCHED',
SAVE_REQUEST_ERROR = 'SAVE_REQUEST_ERROR',
}
export const Routes = {
GET_VEHICLE_TYPES: new Route('/vehicle_types', HttpMethod.GET),
};
export function storeVehicleTypesAction(vehicleTypes: VehicleType[]): Actions<VehicleTypesActionTypes> {
return {
type: VehicleTypesActionTypes.GET_VEHICLE_TYPES,
payload: vehicleTypes,
};
}
export function markVehicleTypesFetchedAction(isFetched: boolean): Actions<VehicleTypesActionTypes> {
return {
type: VehicleTypesActionTypes.MARK_VEHICLE_TYPES_FETCHED,
payload: isFetched,
};
}
export function saveRequestErrorAction(requestType: VehicleTypesRequests, error: Error): Actions<VehicleTypesActionTypes> {
return {
type: VehicleTypesActionTypes.SAVE_REQUEST_ERROR,
payload: {
requestType,
error,
},
};
}
export const vehicleTypessExtractor = (response: VehicleTypesResponse) => response.vehicle_types;
export const getVehicleTypesRequestAction = (sessionService: SessionBasedService): any => async (dispatch): Promise<Actions<VehicleTypesActionTypes>> => {
{
try {
const vehicleTypes: VehicleType[] = await sessionService.handleAuthorizedRequest<VehicleTypesResponse, VehicleType[]>(
Routes.GET_VEHICLE_TYPES,
vehicleTypessExtractor,
BringgException.serviceException('failed to get vehicles'),
);
dispatch(markVehicleTypesFetchedAction(true));
return await dispatch(storeVehicleTypesAction(vehicleTypes));
} catch (e) {
await dispatch(saveRequestErrorAction(VehicleTypesRequests.GET_VEHICLE_TYPES, e));
throw e;
}
}
};
我们继续下一个文件夹 Reducers。 。 。 .
代码示例
export const initState = fromJS({
items: {},
requests: {},
fetched: false,
});
type requestErrorLog = requestErrors<VehicleTypesRequests>;
export type vehicleTypesState = ImmutableMap<{
items: Map<number, VehicleType>;
requests: ImmutableMap<requestErrorLog>;
fetched: boolean;
}>;
export const storeVehicleTypes = (state: vehicleTypesState, vehicleTypes: VehicleType[]): vehicleTypesState =>
state.set('items', immutableKeyBy(vehicleTypes, 'id'));
export const markVehicleTypesFetched = (state: vehicleTypesState, isFetched: boolean = true) => state.setIn(['fetched'], isFetched);
export const logRequestError = (state, requestType: VehicleTypesRequests, error: Error) => {
return state.withMutations(state =>
state.setIn(['requests', requestType, 'error'], error.toString()).setIn(['requests', requestType, 'timestamp'], Date.now()),
);
};
export const vehicleTypesReducers = (state: vehicleTypesState = initState, action): vehicleTypesState => {
switch (action.type) {
case VehicleTypesActionTypes.SAVE_REQUEST_ERROR:
return logRequestError(state, action.payload.requestType, action.payload.error);
case VehicleTypesActionTypes.GET_VEHICLE_TYPES:
return storeVehicleTypes(state, action.payload);
case VehicleTypesActionTypes.MARK_VEHICLE_TYPES_FETCHED:
return markVehicleTypesFetched(state, action.payload);
default:
return state;
}
};
然后我们再加一个 Service 文件夹.
代码示例
export default class VehicleTypesService extends SessionBasedService {
private store: Redux.Store<CompleteStateStructure>;
constructor(session: Session) {
super(session.config.getApiEndpoint(), session);
this.store = session.state.store;
}
@singleConcurrent()
public async getAll(): Promise<VehicleType[]> {
if (!this.areVehicleTypesFetched()) {
await this.store.dispatch(getVehicleTypesRequestAction(this));
}
return this.getAllVehicleTypes();
}
private getAllVehicleTypes = (): VehicleType[] => {
return this.store
.getState()
.vehicleTypes.getIn(['items'])
.toList()
.toJS();
};
private areVehicleTypesFetched = (): boolean => {
return this.store.getState().vehicleTypes.getIn(['fetched']);
};
}
然后,我们终于可以暴露我们的 API 文件夹 :)
代码示例
export default class VehicleTypes {
private vehicleTypesService: VehicleTypesService;
constructor(session: Session) {
this.vehicleTypesService = new VehicleTypesService(session);
}
public async getAll(): Promise<VehicleType[]> {
return await this.vehicleTypesService.getAll();
}
}
近两百行的代码 只是为了揭露 getAll 联 合 国 VehicleTypes。 。 。 .
我们试图通过创建程序来简化程序 BaseStore 并且在每个新实体商店中使用,而不是每次重写.
实体存储
我们希望每个实体国家随时更新(http要求、实时事件), 所以我们用商店管理课来做.
从现在开始,我们可以用一个新班的名字 BaseStore 这将是我们每个实体的基础,并管理其国家.
示例:
export default class ChatConversationStore extends BaseStore<ChatConversation>
在这里,我们可以扩展我们的 BaseStore 并且无论我们认为它适合我们开发的新实体(如果存在,从商店取出,如果不是从服务器取出并存储它的话).
async getConversation(id: number): Promise<ChatConversation> {
const chatConversation = this.getItem(id) || this._fetchConversation(id);
return await chatConversation;
}
Http 服务
Http服务在sdk上几乎完全相同,这里就是简单的例子.
GET_CHAT_CONVERSATION: new Route('/chat_conversations/{:id}', HttpMethod.GET)
public async getChatConversation(id): Promise<ChatConversation> {
const chatConversationResponse: ChatConversationResponse = await this.handleAuthorizedRequest<ChatConversationResponse, ChatConversationResponse>(
Routes.GET_CHAT_CONVERSATION, //route
defaultExtractor, // extractor func can be passed here
BringgException.serviceException('Failed to get chat conversation'),
undefined, //payload
{ id }, //route params
{}, // query params
);
return chatConversationResponse.conversation;
}
公共 API
在这里,我们决定我们要向终端用户曝光的终点和事件,这将会从实体商店调用.
示例 ChatConversation
this.onItemRemoved = this.chatConversationStore.onItemRemoved; // remove event
public getConversation(id: number): Promise<ChatConversation> {
return this.chatConversationStore.getConversation(id); // get item endpoint
}
基地
我们在这里执行 RxJS 软件, (中文(简体) ),
我们有我们的主要物品流 $items 在每一个动作( 创建, 更新, remove) 上, 我们发送到流中, 并相应地汇总最更新的状态 .
每个商店扩展此类可以使用 $items stream to group what he wants data. (例如,从任务流中跳出只打开的任务. )
state$: Observable<Map<number, T>>; // aggregated state from main stream
protected items$: Subject<Action>; // 1 main stream of items
// Event Handlers
protected onItemUpdateEvent: (item: T) => void = _.noop;
protected onItemCreatedEvent: (item: T) => void = _.noop;
protected onItemRemovedEvent: (item: number) => void = _.noop;
protected onListUpdateEvent: (items: T[]) => void = _.noop;
getItem = (itemId): T // Get Item From Store By Id
addToStore(item: T) // Add item to store
updateInStore(item: T) // update item in store
getItems = (): T[] // get array of items of latest state in store
addItems(items: T[]) // add array of items
onItemCreated = (fn: (item: T) => void) => // set event handler for item removed
onItemUpdate = (fn: (item: T) => void) => // set event handler for item updated
onItemRemoved = (fn: (itemId: number) => void) // set event handler for item removed
onListUpdate = (fn: (item: T[]) => void) // set event handler for list update
实体 发电机
为了节省时间,让你的生活更加轻松,有一个脚本来生成基础 需要执行.
您可以使用: npm 运行实体生成器 [名][bringg-type-name] 运行它
脚本将在 src 文件夹内创建一个名为 [name] 的文件夹.
文件夹将包括 Service、 Store 和一些具有基本执行的文件 根据我们的公约.
下一步:
为了改进我们的SDK 和我们的发展过程.
- 将 Store 和服务合并为 . (而不是复制一直粘贴同样的服务)