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

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 и как это тестировать - это отдельная большая история.

? Offline

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

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

sergerdn

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

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

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

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

? Offline

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

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

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

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

sergerdn

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

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

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

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

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

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

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

? Offline

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

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

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

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

sergerdn

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

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

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

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

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

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

? Offline

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

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

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

sergerdn

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

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

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

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

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

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

Bablosoft

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

BrowserAutomationStudio 29.8.0 has been released

BrowserAutomationStudio 29.6.0 has been released

BrowserAutomationStudio 29.4.0 has been released

BrowserAutomationStudio 29.3.0 has been released

Конструктор интерфейса.