Создание веб-приложения R NUXT и SPOUM

Соревнование

R Является ли языком программирования с открытым исходным кодом и программным обеспечением для статистических вычислений и графики. Сегодня R часто развиваются учеными, статистиками или аналитикой на рабочем столе с помощью сценариев. Это не сделано для веб-приложения в первую очередь. Тем не менее, есть всё необходимость в взаимодействии между обоими. Блестящий является популярным вариантом для доставки R в веб-приложениях в настоящее время. Хотя блестящая является самоуверенным каркасом, так как у него есть свой способ создавать HTML и CSS для вас. Кажется невозможным создать свой собственный интерфейс Frontend.

Растворы

Есть пара вариантов, если вы ищете микроформа Micro Framework вместо Flowstack Framework, таких как блестящие. Вы можете разработать стеки технологии самостоятельно, и это дает вам больше гибкости. Они Сантехник и кувшин Отказ Основная проблема с ними – отсутствие поддержки сообщества, и их документация кажется неполной и в развитии. Ниже приведены некоторые примеры кодов, как они работают.

Водопроводчик

# myfile.R

#* @get /mean
normalMean <- function(samples=10){
  data <- rnorm(samples)
  mean(data)
}

#* @post /sum
addTwo <- function(a, b){
  as.numeric(a) + as.numeric(b)
}

# index.R

#!/usr/bin/Rscript

library(plumber)
r <- plumb("myfile.R")  # Where 'myfile.R' is the location of the file shown above
r$run(port = 8000)

кувшин

# index.R

#!/usr/bin/Rscript

library(jug)

jug() %>%
  get("/", function(req, res, err){
    "Hello World!"
  }) %>%
  simple_error_handler_json() %>%
  serve_it()

Frontend

Теперь у вас есть основная идея, как вы можете использовать любой из них, как ваш стек Backenn. Что касается интерфейса, вы можете выбрать Nuxt , Следующий , Угловой универсальный или просто простой HTML + CSS. Я изучал NUXT, поэтому эта статья показывает вам, как вы можете интегрировать его с R для веб-приложения. Я выбрал сантехника для этого упражнения.

Вот пример приветственной страницы в шаблоне NUXT:

// pages/index.vue

Концепция

Идея этого решения использует NUXT для проведения в качестве представления для бэкэнда, R. Мы используем только маршруты NUXT для публичных пользователей. Axios Используется внутри страниц NUXT, чтобы позвонить в бэкэнд-маршруты. Затем бэкэнд выпускает данные JSON или изображения на страницы в NUXT, пример:

// home page

Магия здесь:

var {data} = await axios.get('/')

Axios Вытащит вывод от R/Walcher, когда домашняя страница загружена, и это то, что вы можете сделать в вашей стороне бэкэнда:

# app.R

#* @serializer unboxedJSON
#* @get /
function(){
  status <- 200
  message <- 'Hello World'

  list(
    status = 200,
    data = list(
      message = message
    )
  )
}

Если вы обслуживаете изображение в качестве вывода, например:

# app.R

#* Plot out data from the iris dataset
#* @serializer contentType list(type='image/png')
#* @post /iris
function(req, res) {
  dataset <- iris
  title <- 'All Species'
  
  # Filter if the species was specified
  if (!is.na(species) && !species == '') {
    title <- paste0("Only the '", species, "' Species")
    dataset <- subset(iris, Species == species)
  }
  
  plot(dataset$Sepal.Length, dataset$Petal.Length,
    pch=22, bg=c("red","green3","blue"),
    main=title, xlab="Sepal Length", ylab="Petal Length")
}

Тогда что вам нужно сделать в NUXT, например:

// page/iris/index.vue

...
...
let response = await axios({
  method: 'post',
  url: '/iris',

  // Stringify the object so you get: plot=scatter&species=setosa
  data: querystring.stringify(this.form),

  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  responseType: 'arraybuffer'
})

// Handle response image type.
var imageData = new Buffer(response.data, 'binary').toString('base64')

// Update the image data.
this.image = 'data:image/jpeg;base64, ' + imageData
...
...

В вашем шаблоне NUXT:

// page/iris/index.vue

Вот и все. Просто убедитесь, что у вас есть CORS включена в вашем приложении R, E.g.:

# app.R

#* @filter cors
function(res) {
  res$setHeader('Access-Control-Allow-Origin', '*') # Or whatever
  plumber::forward()
}

Используя приложение

Вы можете скачать или клонировать основные приложения выше в GitHub: Nuxt + Walumber Отказ

Убедитесь, что у вас есть R и эти пакеты установлены:

library(jsonlite)
library(ggplot2)
library(magrittr)
library(dplyr)
library(urltools)

Перейти к Сервер/ Справочник, установите пакеты и запустите приложение:

# Production build
$ ./index.R

Доступ к нему по адресу http://localhost: 8000/

Перейти к Client-Nuxt/ Справочник, установите пакеты и запустите приложение:

# Dependencies
$ npm install

# Development
$ npm run dev

# Production build
$ npm start

Доступ к нему на http://localhost: 3000/ Отказ Вы должны увидеть домашнюю страницу с помощью Hello World Message, исходящее из отдельный порт на http://localhost: 8000/ :

Если вы получите доступ к приложению в http://localhost: 3000/Iris , вы должны увидеть, что набор данных IRIS был построен в графику, который исходит из http://localhost: 8000/Iris :

Заключение

Ни одна из этих рамх не идеальна. Я искал сплошную каркас Micro Micro, которая похожа на Тонкий , Экспресс или Коа , но кажется, что сантехник или кувшин – самый близкий вариант, если вы боролись с блестящим, и я надеюсь, что эта статья помогает. Дайте мне знать, что вы думаете, и какие технологии вы будете использовать для ваших проектов. Любые предложения и исправления, пожалуйста, оставьте комментарий ниже.

Welcome!

{{ message }}