Быстрый старт
Получите данные студии на вашем сайте за несколько минут.
1. Найдите ID вашей студии
ID вашей студии отображается в Настройки → Студия в панели управления BailaYa, или в URL при просмотре вашей студии: https://www.bailaya.com/studio/{studioId}.
2. Установите SDK
- npm
- yarn
npm install @bailaya/core
yarn add @bailaya/core
3. Получите ваши занятия
import { BailayaClient } from '@bailaya/core';
const client = new BailayaClient({ studioId: 'your-studio-id' });
const classes = await client.getClasses();
classes.forEach(cls => {
console.log(`${cls.name} on ${cls.date.toDateString()} at ${cls.startTime}`);
});
4. Отобразите с помощью компонента фреймворка
- React
- Vue 3
- Angular
npm install @bailaya/react
import { BailayaProvider, ClassSchedule } from '@bailaya/react';
export default function App() {
return (
<BailayaProvider config={{ studioId: 'your-studio-id' }}>
<ClassSchedule locale="en" currency="USD" />
</BailayaProvider>
);
}
npm install @bailaya/vue
// main.ts
import { createApp } from 'vue';
import { createBailaya } from '@bailaya/vue';
import App from './App.vue';
const app = createApp(App);
app.use(createBailaya({ studioId: 'your-studio-id' }));
app.mount('#app');
<!-- YourComponent.vue -->
<template>
<ClassSchedule locale="en" currency="USD" />
</template>
<script setup>
import { ClassSchedule } from '@bailaya/vue';
</script>
npm install @bailaya/angular
// app.config.ts
import { provideBailaya } from '@bailaya/angular';
export const appConfig = {
providers: [
provideBailaya({ studioId: 'your-studio-id' }),
],
};
<!-- your.component.html -->
<bailaya-class-schedule locale="en" currency="USD" />
Следующие шаги
- Изучите Справочник API, чтобы увидеть все доступные данные
- Прочитайте документацию SDK для подробных опций конфигурации