Исходник мануала веб интерфейса

[Fox]

По веб интерфейсу BAS есть мануал: https://wiki.bablosoft.com/web-interface/#/

Но в текущем виде он имеет ряд проблем:

• Поиск не находит некоторые методы

• Некоторые примеры имеют опечатки

• Пример готового интерфейса вызывает ошибку https://wiki.bablosoft.com/web-interface/#/examples

• Отсутствует целый блок описания api планироващика

• Можно добавить описание функций сгенерированного веб интерфейса
• Можно добавить перевод текста

---

К сожалению ни у кого из команды bablosoft на исправление\дополнение мануала нет времени, мне выдали исходник мануала только под предлогом, что я не буду тратить на него своё время.

По этому выкладываю исходник мануала веб интерфейса здесь: web-interface.zip

Если кто-то из пользователей полноценно дополнит или исправит мануал, я передам исправленный вариант разработчику

[sergerdn]

@Fox

spoiler

[Fox]

@sergerdn said in Исходник мануала веб интерфейса:

Вероятно, оффтопик, но может, не надо уже использовать jQuery? На календаре 2023 год.

Не используйте

[sergerdn]

Очень не хватает мануала, как подключать готовое Vue.js приложение к кастомному интерфейсу BAS.
Весь код, который я видел - это портянка кода Vue.js прямо в интерфейсе, включая и html. Делать так, конечно можно, но как это тестировать хотя бы отдельно приложение Vue.js - вообще не понятно.

Подразумевается, что приложение Vue.js уже есть и оно лежит готовое в папке dist. Необходимо подготовить static хостинг, например https://surge.sh/

Что надо сделать:

• отредактировать vite.config.ts

import { defineConfig, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath } from 'url'

import dotenv from 'dotenv'

dotenv.config()

// create .env file with  HOSTING_URL=https://yourdomain.com/
const baseUrl = process.env.HOSTING_URL || '/'

// Production build configuration
const productionConfig: Partial<UserConfigExport> = {
  plugins: [vue()],
  // Base public path when served in development or production. Valid values include:
  // Absolute URL pathname, e.g. /foo/
  // Full URL, e.g. https://foo.com/
  // Empty string or ./ (for embedded deployment)
  base: baseUrl,

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    target: 'chrome78', // Set the target to 'chrome78' since the BAS embedded browser is based on Chromium 78
    minify: 'terser', // Enable minification using the 'terser' plugin
    terserOptions: {
      //compress: { drop_console: true },
      //parse: { html5_comments: false }
    },

    rollupOptions: {
      output: {
        // Set the output file names for entry, chunk, and assets using a specific format
        // https://rollupjs.org/configuration-options/#output-entryfilenames
        // Disable hashing of output file names for better performance
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
        // Inline dynamic imports for better performance
        // https://rollupjs.org/configuration-options/#output-inlinedynamicimports
        inlineDynamicImports: true
      }
    }

  }
}

// Development build configuration
const developmentConfig: Partial<UserConfigExport> = {
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}

export default defineConfig({
  // Use the productionConfig if NODE_ENV is 'production', otherwise use the developmentConfig
  ...(process.env.NODE_ENV === 'production' ? productionConfig : developmentConfig)
})

• изменить тип роутинга на createWebHashHistory:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL), // <<== CHANGE THIS
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

• загрузить приложение Vue.js на хостинг
• в админке (https://bablosoft.com/bas/editmaininterface/тут_id_приложения_bas) отредактировать код. Данные нужно взять из dist/index.html Vue.js .

// eslint-disable-next-line no-undef
if (window.Api === undefined) {
  throw new Error('BAS Api is not defined')
}

class BasSettingsClass {
  constructor() {
    this.baseUrl = 'https://your_domain.surge.sh'
    this.username = localStorage.getItem('Username')
    this.password = localStorage.getItem('Password')
    // Editing file in https://bablosoft.com/bas/editmaininterface/ ?
    if (!this.password) {
      console.error('Password in localStorage not found')
    }
    if (!this.username) {
      console.error('Username in localStorage not found')
    }
  }

  logCredentials() {
    console.log('[auth] ' + this.username + ';' + this.password)
  }
}


function setupBAS() {
  window.BasSettings = new BasSettingsClass()
  window.BasSettings.logCredentials()
  // eslint-disable-next-line no-undef
  window.BasApi = Api
}


function loadMainInterface() {
  console.log('loadMainInterface')

  // Create the script element
  var script = document.createElement('script')
  script.type = 'module'
  script.crossOrigin = 'anonymous'
  script.src = window.BasSettings.baseUrl + '/assets/index.js'

  // Create the link element
  var link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = window.BasSettings.baseUrl + '/assets/index.css'

  // Append the script and link elements to the head
  document.head.appendChild(script)
  document.head.appendChild(link)

}


document.addEventListener('DOMContentLoaded', function() {
  setupBAS()

  /////Api event handler
  // eslint-disable-next-line no-unused-vars,no-undef
  Api.SetEventHandler(function(EventType, EventData) {

    /////Script started
    if (EventType === 'start') {
      console.log('Script started')
    }

    /////Script stopped
    if (EventType === 'stop') {
      console.log('Script stopped')
    }

    /////More events: https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime

  })
  loadMainInterface()

  /////Automatically start script https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime?id=method-acceptresources
  // eslint-disable-next-line no-undef
  Api.AcceptResources(true)

  /////Events

})

/////Resource values are obtained through this function when hitting run button, you can change it.
/////For example, you can edit value entered by user, make custom validation, or replace resource system completely
/////More info: https://wiki.bablosoft.com/web-interface/#/managingscriptlifetime?id=method-acceptresources
// eslint-disable-next-line no-unused-vars
function GetResourceValue(ResourceName) {
  if (ResourceName === 'USERNAME') {
    return window.BasSettings.username
  }
  if (ResourceName === 'PASSWORD') {
    return window.BasSettings.password
  }
  //Unknown resource name
  return ''
}


//Interface editor has no connection to BAS and therefore can't execute BAS functions.
//If you try to call function from interface editor,
//you will get a random string as result in a several seconds.
//This behavior is not acceptable in several cases: if your function return a list,
//not a string, or string in specific format, if you want to test error handling, etc.
//In order to circumvent this limitation. you need to define "EmulateFunctionRun"
//function inside web interface.
//More info: https://wiki.bablosoft.com/web-interface/#/callbasfunction?id=debugging-bas-function-call

// eslint-disable-next-line no-unused-vars
function EmulateFunctionRun(FunctionName, FunctionParameters, Resolve, Reject) {
  //Generate random data
  var RandomTime = Math.floor(Math.random() * (5000 - 3000)) + 3000
  var RandomResult = Math.floor(Math.random() * (1000))

  //Return result in RandomTime milliseconds
  setTimeout(function() {
    //Generate result string
    Resolve('Test result ' + RandomResult)
  }, RandomTime)

}

<!-- VueJs --> 
<div id="app"></div>

P.S.
Как интегрировать Vue.js и BAS API и как это тестировать - это отдельная большая история.

[UserTrue]

@sergerdn Ничего специального не требуется, просто webpack-ом собираете все в один js, css и загружаете на сервер. Я даже делал чтобы все это само загружалось на сервер бас

Как это выглядит тут значения не имеет разрабатываю то я в vscode

[sergerdn]

@UserTrue said in Исходник мануала веб интерфейса:

@sergerdn Ничего специального не требуется, просто webpack-ом собираете все в один js, css и загружаете на сервер. Я даже делал чтобы все это само загружалось на сервер бас

Да, так можно. Даже плагин есть https://github.com/richardtallent/vite-plugin-singlefile.
Но где пост твой об этом как ты делал?

В моем варианте, приложение обновляется при выкладке обновления на сервер с хостингом, разработчику даже не надо давать доступ в админку BAS.

[UserTrue]

@sergerdn said in Исходник мануала веб интерфейса:

Но где пост твой об этом как ты делал?

Нет и не будет xD Я только хотел сказать, что ничего особенного в создание интерфейса для БАС

Конечно можно сделать и через хостинг, сути не меняет, что на сервер БАС идет билд а не рабочий код

[sergerdn]

@UserTrue said in Исходник мануала веб интерфейса:

@sergerdn said in Исходник мануала веб интерфейса:

Но где пост твой об этом как ты делал?

Нет и не будет xD Я только хотел сказать, что ничего особенного в создание интерфейса для БАС

Если знаешь и умеешь никогда и ни с чем нет сложностей.

Судя по коду который я видел, народ фигачит портянки кода Vue.js прямо в интерфейсе редактирования https://bablosoft.com/bas/editmaininterface/. Как писал выше - так делать можно, но не нужно. Так как в случае с полноценным приложением в классическом варианте, можно хоть как-то минимально протестировать его.

Вопрос тестирования связки Vue.js с BAS это отдельный вопрос, но можно протестовать хотя бы часть приложения, а вопрос интеграции BAS можно и mock, что не самый плохой вариант.

[UserTrue]

@sergerdn said in Исходник мануала веб интерфейса:

Вопрос тестирования связки Vue.js с BAS это отдельный вопрос, но можно протестовать хотя бы часть приложения, а вопрос интеграции BAS можно и mock, что не самый плохой вариант.

БАС позволяет мокать свои функции.

А что касается народа, то тут проблема в не знание веб разработки в целом. Пускай идут изучают кому нужно. Но думаю большинству это просто не надо.

[sergerdn]

@UserTrue said in Исходник мануала веб интерфейса:

БАС позволяет мокать свои функции.

Мокать можно всё и вся, это же javascript.

А что касается народа, то тут проблема в не знание веб разработки в целом.

Да. Но все когда-то были новичками, и ты и я. Может быть, иногда и надо делиться своим опытом и, может быть, относиться к новичкам с пониманием.

А не как некоторые делают, не буду тыкать пальцем 😄

[UserTrue]

@sergerdn said in Исходник мануала веб интерфейса:

Да. Но все когда-то были новичками, и ты и я. Может быть, иногда и надо делиться своим опытом и, может быть, относиться к новичкам с пониманием.

Я просто не вижу смысла, потому что эти вопросы касаются веб разработки, а не БАС. Курсов по vue, webpack и тд хватает в сети, кому это нужно изучит.

[sergerdn]

@UserTrue said in Исходник мануала веб интерфейса:

@sergerdn said in Исходник мануала веб интерфейса:

Да. Но все когда-то были новичками, и ты и я. Может быть, иногда и надо делиться своим опытом и, может быть, относиться к новичкам с пониманием.

Я просто не вижу смысла, потому что эти вопросы касаются веб разработки, а не БАС. Курсов по vue, webpack и тд хватает в сети, кому это нужно изучит.

Нет, я про то, что иногда некоторые пишут "я вот это делал и это", но я не скажу как. Жадины, наверное, такие люди 😄

P.S.
оффтоп прекратил, цель поста была моего - чтобы можно было найти по информацию по поиску, так как на форуме и в доках информации считай нет вообще.