當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

闪亮蔚蓝_在R中构建第一个闪亮的Web应用

發布時間：2023/12/15 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了闪亮蔚蓝_在R中构建第一个闪亮的Web应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

閃亮蔚藍

數據科學 (DATA SCIENCE)

Do you want to make your R code publicly available for others to use? If you answered yes, then this article is for you as I will be showing you how to build your very first web application in R using the Shiny package.

你想使你的R代碼里面公開提供給其他人使用？如果您回答“是”，那么本文適合您，因為我將向您展示如何使用Shiny包在R中構建您的第一個Web應用程序。

To supplement this article, you can also watch this tutorial video Building Your First Web Application in R that I made on my YouTube channel called the Data Professor.

作為本文的補充，您還可以觀看此教程視頻，該視頻是我在YouTube頻道上稱為Data Professor的R中構建您的第一個Web應用程序的。

數據科學生命周期 (Data Science Life Cycle)

The data science life cycle starts with the collection of data that will serve as the dataset and the core component of a data science project. Next, this dataset needs to be cleaned to void itself of missing data as well as any abnormalities. As the name implies, exploratory data analysis (EDA) will allow us to take a glimpse of the general characteristics of the dataset and this can be attained by performing descriptive statistics and data visualizations. Insights gained from EDA may provide starting points and ideas for building predictive models (e.g. classification, regression, clustering, association analysis, etc.). To complete the life cycle the best performing model can be deployed as an application programming interface (API) and web application.

數據科學生命周期始于收集數據，這些數據將用作數據集和數據科學項目的核心組成部分。接下來，需要清理此數據集以使自身丟失丟失的數據以及任何異常。顧名思義，探索性數據分析(EDA)將使我們了解數據集的一般特征，這可以通過執行描述性統計信息和數據可視化來實現。從EDA獲得的見解可以為構建預測模型(例如分類，回歸，聚類，關聯分析等)提供起點和思路。為了完成生命周期，可以將性能最佳的模型部署為應用程序編程接口(API)和Web應用程序。

Data Science Life Cycle. (Drawn by Chanin Nantasenamat)數據科學生命周期。 (由Chanin Nantasenamat繪制)

為什么要構建Web應用程序？ (Why Build a Web App?)

So the question is, why would you want to build a web application? That’s a great question!

所以問題是，為什么要構建一個Web應用程序？這是一個很好的問題！

The deployed web application provides a graphical front-end (user interface or UI) that allow users to enter input parameters that the back-end (the server) will process and send back for display on the web front-end. In the context of machine learning, the deployment of a trained machine learning model as a web application allow users to easily make predictions by simply entering the input parameters into the form provided on the web front-end that will serve as input features to the trained machine learning model where the model will make a prediction.

部署的Web應用程序提供圖形化的前端(用戶界面或UI)，允許用戶輸入后端(服務器)將處理并回傳以顯示在Web前端上的輸入參數。在機器學習的上下文中，將訓練有素的機器學習模型部署為Web應用程序使用戶可以通過簡單地將輸入參數輸入到Web前端提供的表單中來輕松地進行預測，該表單將用作訓練有素的輸入特征機器學習模型，該模型將進行預測。

All this at the convenience of a few clicks of the mouse as the user will not need to have any technical knowledge in coding for making such prediction. In this article, you’ll be learning how to make a web application in R using the Shiny package.

只需單擊幾下鼠標，所有這些便可以了，因為用戶在進行這種預測的編碼中將不需要任何技術知識。在本文中，您將學習如何使用Shiny包在R中制作Web應用程序。

Aside from deploying machine learning models, web applications can be created to host data-driven dashboard as well. These dashboards may provide useful summary data of interest that can essentially be used for real-time monitoring and assessment of metrics and performance.

除了部署機器學習模型之外，還可以創建Web應用程序以托管數據驅動的儀表板。這些儀表板可以提供有用的有用的摘要數據，這些摘要數據實際上可用于實時監視和評估指標和性能。

什么是閃亮？ (What is Shiny?)

Before we proceed further, perhaps a brief background about what exactly is Shiny.

在我們進一步進行之前，也許需要簡要介紹一下什么是Shiny。

Shiny is an R package that allows you to easily build interactive web applications. The benefit of using Shiny is that it makes it possible to extend your R code to the web that would essentially help to expand its usability to a wider community (i.e. from being used by a single user to being used by hundreds or thousands of users via the internet).

Shiny是一個R軟件包，可讓您輕松構建交互式Web應用程序。使用Shiny的好處是可以將R代碼擴展到Web，這實際上將有助于將其可用性擴展到更廣泛的社區( 即，從單個用戶使用到通過Web成為成百上千個用戶使用)互聯網)。

Aside from the functionalities provided by the Shiny package, there are several extension packages that supplements the functionality of Shiny such as shinythemes, shinydashboard, shinyjs, etc.

除了Shiny軟件包提供的功能外，還有一些擴展軟件包可以補充Shiny的功能，例如Shinythemes ， Shinydashboard ， Shinyjs等。

您可以使用Shiny構建什么？ (What Can You Build with Shiny?)

That’s a great question! The following are some starter ideas and I’m sure you can think of several more.

這是一個很好的問題！以下是一些入門點子，我相信您還會想到更多。

Machine learning powered web application
機器學習支持的Web應用程序
Data-driven dashboards
數據驅動儀表板
Data collection forms
數據收集表

There are tons of additional examples at the Shiny Gallery.

在Shiny Gallery有大量其他示例。

將Web應用程序部署到Internet (Deploying the Web Application to the Internet)

After testing the Shiny web apps on your own local computer and you are confident that it works and are ready to publish to the internet you can deploy it onto your own server (e.g. Digital Ocean) or via app hosting services such as Shinyapps.io and Heroku. So what’s the difference between the two?

在您自己的本地計算機上測試了Shiny Web應用程序之后，您確信它可以正常工作并準備發布到Internet上，您可以將其部署到自己的服務器 (例如Digital Ocean)上，也可以通過應用托管服務(例如Shinyapps.io和Heroku 。那么兩者之間有什么區別？

The benefit of having your own server is that you have total control on the computer and as a result you can install all softwares, modules and packages to your heart’s content. The downside of this is that you would need to have a great deal of knowledge to manage the server. For example, you may need to be proficient in BASH commands in order to manage a Ubuntu server on the cloud via service providers such as Digital Ocean ($100 Free Credit), Linode, Amazon Web Service or Google Cloud Platform.

擁有自己的服務器的好處在于，您可以完全控制計算機，因此可以安裝所有軟件，模塊和軟件包以符合您的內心需求。這樣做的缺點是您需要掌握大量知識來管理服務器。例如，您可能需要精通BASH命令才能通過服務提供商(例如Digital Ocean(100美元的免費信用) ，Linode，Amazon Web Service或Google Cloud Platform )在云上管理Ubuntu服務器。

The benefit of using an app hosting service is that you don’t have to worry about managing a server. That’s right, no more dealing with server updates, no more configuration of paths and complex compilation of softwares and libraries. These app hosting service providers allows you to focus your energy on building the application, period!

使用應用程序托管服務的好處是，您不必擔心管理服務器。沒錯，不再處理服務器更新，配置路徑和復雜的軟件和庫編譯。這些應用程序托管服務提供商可讓您將精力集中在構建應用程序上！

閃亮的Web應用程序的結構 (Structure of a Shiny Web App)

The Shiny web app is comprised of 3 components:

Shiny Web應用程序包含3個組件：

User interface (ui.R) — The UI is the frontend that accepts user input values.

用戶界面(ui.R)-UI是接受用戶輸入值的前端。

Server function (server.R) — The Server is the backend that process these input values to finally produce the output results that are finally displayed on the website.

服務器功能(server.R) -服務器是處理這些輸入值以最終產生最終顯示在網站上的輸出結果的后端。

shinyApp function — The app itself that combines the UI and server components together.

ShinyApp函數 -將UI和服務器組件組合在一起的應用程序本身。

Schematic illustration of how a Shiny web app works. (Drawn by Chanin Nantasenamat)閃亮的Web應用程序如何工作的示意圖。 (由Chanin Nantasenamat繪制)

閃亮的Web應用程序代碼 (Code of the Shiny Web App)

Now, comes the fun part and let’s have a look at the code of the Shiny web app that we are going to be building today (shown below).

現在，有趣的部分來了，讓我們看一下今天將要構建的Shiny Web應用程序的代碼(如下所示)。

閃亮的Web應用程序如何工作？ (How Does the Shiny Web App Works?)

A cartoon illustration of what is going on under the hood as we use the Shiny web app is summarized below in 3 simple steps.

下面通過3個簡單的步驟總結了我們使用Shiny Web應用程序時引擎蓋下發生的事情的卡通插圖。

運行閃亮的Web應用程序 (Running the Shiny Web App)

Now, let’s run the web application.

現在，讓我們運行Web應用程序。

Step 1. Go ahead and fire up your RStudio.

步驟1.繼續并啟動RStudio。

Step 2. Click on File → New File → R Script and paste the entire block of code shown above and save it as app.R (or you can download the app.R file).

步驟2.單擊File→New File→R Script，然后粘貼上面顯示的整個代碼塊并將其保存為app.R (或者您可以下載app.R文件 )。

Step 3. Click on the Run App button (shown below by the white circle below) that is located at the top right of the File Panel.

步驟3.單擊“ 文件面板”右上角的“ 運行應用程序”按鈕(下面用白色圓圈顯示)。

Screenshot of the app.R file containing the Shiny Web App inside RStudio.app.r文件的屏幕快照，其中包含RStudio中的Shiny Web App。

After a few moments, you will see a pop-up window displaying the Shiny web app as shown below. Notice that the web app has empty output value because the input parameters are still empty.

片刻之后，您將看到一個彈出窗口，顯示Shiny Web應用程序，如下所示。請注意，Web應用程序的輸出值是空的，因為輸入參數仍然是空的。

Screenshot of the executed app.R file (after hitting on the Run App button).已執行的app.R文件的屏幕截圖(單擊“運行應用程序”按鈕后)。

Let’s fill in the values into the two input box (Given Name and Surname) and you will see that the Output box (the Main Panel) will now display the concatenated Given Name + Surname. For example, we use “Machine” as the Given Name and “Learning” as the Surname. Under the hood, the UI component accepts the input arguments from the 2 text box for Given Name and Surname. Next, we concatenate the two variables to produce an output of “Machine Learning”. Finally, the UI displays this output on the Main Panel (the gray box).

讓我們將值填寫到兩個輸入框中(給定名稱和姓氏)，您將看到“輸出”框(主面板)現在將顯示串聯的給定名稱+姓氏。例如，我們用“機器”為給定的名稱和“學習”為姓。在內部，UI組件從2文本框中接受給定名稱和姓氏的輸入參數。接下來，我們將兩個變量連接起來以產生“機器學習”的輸出。最后，UI在主面板(灰色框)上顯示此輸出。

Screenshot of the web app with input parameters entered.輸入了輸入參數的Web應用的屏幕截圖。

代碼的逐行說明 (Line-by-Line Explanation of the Code)

The code shown above has been commented to label the major sections of the code as follows:

上面顯示的代碼已被注釋，以將代碼的主要部分標記如下：

# Load R packages (Line 1),
# Load R packages (第1行)，
# Define UI (Line 5),
# Define UI (第5行)，
# Define server function (Line 31)
# Define server function (第31行)
# Create Shiny object (Line 39)
# Create Shiny object (第39行)

Now, we will be covering the above 4 sections in more depth in the forthcoming sub-sections.

現在，我們將在接下來的小節中更深入地介紹上述4個部分。

裝入R個包裝(第1-3行) (Load R packages (Lines 1–3))

Line 2 — Load the shiny package
第2行 -加載shiny包裝
Line 3 — Load the shinythemes package
第3行 -加載shinythemes程序包

定義用戶界面(第5–29行) (Define UI (Lines 5–29))

Line 6 — The fluidPage() function creates fluid page layouts whereby the elements can scale to occupy the available width of the browser. All UI elements are contained within the fluidPage() function. The first input argument that we use is the theme option where we define the use of the cerulean theme from the shinytheme R package.
第6行 fluidPage()函數創建流暢的頁面布局，由此元素可以縮放以占用瀏覽器的可用寬度。所有UI元素都包含在fluidPage()函數內。的第一個輸入參數，我們使用的是theme我們定義使用的選項cerulean從主題shinytheme ?包。

(Note: The closing parenthesis is on Line 29).
(注意：右括號在第29行)。
Line 7 — As the name implies, the navbarPage() function creates a page with a top level navigation bar.
第7行 -顧名思義， navbarPage()函數創建一個帶有頂級導航欄的頁面。

Line 7 — As the name implies, the navbarPage() function creates a page with a top level navigation bar. Line 9 — The name of the web app is defined to be “My first app”.
第7行 -顧名思義， navbarPage()函數創建一個帶有頂級導航欄的頁面。 第9行 -Web應用程序的名稱定義為“My first app” 。

Line 7 — As the name implies, the navbarPage() function creates a page with a top level navigation bar. Line 9 — The name of the web app is defined to be “My first app”. Line 10 — Here we define the tab panel using the tabPanel() function. This represents the first of three tab panels and thus we define the tab panel to be “Navbar 1”.
第7行 -顧名思義， navbarPage()函數創建一個帶有頂級導航欄的頁面。 第9行 -Web應用程序的名稱定義為“My first app” 。 第10行 -在這里，我們使用tabPanel()函數定義選項卡面板。這代表三個選項卡面板中的第一個，因此我們將選項卡面板定義為“Navbar 1” 。
Line 11 — Here we make use of the sidebarPanel() function (closing parenthesis is on Line 16) so that the web app can have a sidebar panel on the left of the web app that accepts user input parameters. Line 12 — The HTML tag tags$h3 is used to provide the sidebar panel the subsubheading title of “Input:”.
第11行 -在這里，我們使用sidebarPanel()函數(第16行帶有右括號)，以便Web應用程序可以在Web應用程序的左側具有一個側欄面板，該面板接受用戶輸入的參數。第12行-HTML標簽tags$h3用于為側邊欄面板提供副標題為“Input:”的子標題。

Line 11 — Here we make use of the sidebarPanel() function (closing parenthesis is on Line 16) so that the web app can have a sidebar panel on the left of the web app that accepts user input parameters. Line 12 — The HTML tag tags$h3 is used to provide the sidebar panel the subsubheading title of “Input:”. Lines 13-14— The textInput() function is used to accept input values from users in the form of a text field. The input arguments contained within the textInput() function includes the (1) variable name (e.g. txt1 or txt2), (2) heading that is displayed above the text field (e.g. “Given Name:” and “Surname:”) and (3)
第11行 -在這里，我們使用sidebarPanel()函數(第16行帶有右括號)，以便Web應用程序可以在Web應用程序的左側具有一個側欄面板，該面板接受用戶輸入參數。第12行-HTML標簽tags$h3用于為側邊欄面板提供副標題為“Input:”的子標題。 第13-14行 textInput()函數用于接受來自用戶的文本字段形式的輸入值。 textInput()函數中包含的輸入參數包括(1)變量名稱(例如txt1或txt2 )，(2)顯示在文本字段上方的標題(例如“Given Name:”和“Surname:” )和( 3)

(Note: The closing parenthesis is on Line 28).
(注意：右括號在第28行)。
Line 17 — Here we make use of the mainPanel() function (closing parenthesis is on Line 22).
第17行 -這里我們使用mainPanel()函數( mainPanel()括號在第22行)。

Line 17 — Here we make use of the mainPanel() function (closing parenthesis is on Line 22).Line 18 — Displays the heading of “Header 1” by using the h1() tag function.
第17行 -這里我們使用mainPanel()函數( mainPanel()括號在第22行)。 第18行 —使用h1()標記函數顯示“Header 1”的標題。

Line 17 — Here we make use of the mainPanel() function (closing parenthesis is on Line 22).Line 18 — Displays the heading of “Header 1” by using the h1() tag function. Line 20 — Displays the subsubsubheading (not a typo but to signify the hierarchy of the headings) of “Output1” by using the h4() tag function.
第17行 -這里我們使用mainPanel()函數( mainPanel()括號在第22行)。 第18行 —使用h1()標記函數顯示“Header 1”的標題。 第20行 -顯示subsubsubheading(不是筆誤，而是表示標題的層次)的“Output1”使用h4()標簽功能。

Line 17 — Here we make use of the mainPanel() function (closing parenthesis is on Line 22).Line 18 — Displays the heading of “Header 1” by using the h1() tag function. Line 20 — Displays the subsubsubheading (not a typo but to signify the hierarchy of the headings) of “Output1” by using the h4() tag function. Line 21 — Displays the output value which is obtained by combining the input values (Given Name and Surname) together.
第17行 —這里我們使用mainPanel()函數( mainPanel()括號在第22行)。 第18行 —使用h1()標記函數顯示“Header 1”的標題。 第20行 -顯示subsubsubheading(不是筆誤，而是表示標題的層次)的“Output1”使用h4()標簽功能。 第21行 —顯示通過將輸入值(給定名稱和姓氏)組合在一起而獲得的輸出值。
Lines 25–26 — The two remaining tab panels are displayed via the tabPanel() function on these 2 lines. The first input argument is the name of the tab panel which is “Navbar 2” or “Navbar 3” while the second input argument is “This panel is intentionally left blank”. As a result, upon clicking on these 2 tab panels we will see the message “This panel is intentionally left blank” which are the content of these 2 tab panels.
第25–26行 -剩下的兩個選項卡面板通過tabPanel()函數在這兩行上顯示。第一個輸入參數是選項卡面板的名稱，即“Navbar 2”或“Navbar 3”而第二個輸入參數是“This panel is intentionally left blank” 。結果，單擊這兩個選項卡面板后，我們將看到消息“This panel is intentionally left blank” ，這是這兩個選項卡面板的內容。

定義服務器功能(第31–37行) (Define server function (Lines 31–37))

Line 32 — Defines the server whereby the input and output variables are essentially connected via reactivity (i.e. changes in the input value will instantaneously or reactively lead to updating of the output value).
第32行 -定義服務器，通過該服務器，輸入和輸出變量基本上通過React性進行連接( 即，輸入值的更改將立即或React性地導致輸出值的更新)。
Line 34–36 — As shown in the above cartoon illustration, input values coming from input$txt1 and input$txt2 (i.e. corresponding to the Given Name and Surname, respectively) as entered by the user are assigned to the output$txtout variable (i.e. the processed output value) that will be sent back to the UI for display in the Output text box (Line 21). Particularly, the Given Name and Surname will be combined together via the paste() function whereby the input arguments are the txt1 and txt2 variables from the text input of UI (i.e. the input$txt1 and input$txt2 on Line 35)
第34–36行 —如上圖所示，用戶輸入的來自input$txt1和input$txt2輸入值( 即分別對應于Given Name和Surname )被分配給output$txtout變量( 即已處理的輸出值)，該值將發送回UI，以顯示在“輸出”文本框中(第21行)。特別是， Given Name和Surname將通過paste()函數組合在一起，從而輸入參數是UI文本輸入中的txt1和txt2變量(即第35行的input$txt1和input$txt2 )

Make note that
請注意

output$txtout on Line 34–36 (from the Server function) is the same variable as txtout on Line 21 (from the UI function). Likewise, txt1 and txt2 on Lines 13 and 14 (from the UI function) are the same variables as input$txt1 and input$txt2 (from the Server function).
第34–36行的output$txtout (來自Server函數)與第21行的txtout (來自UI函數)相同。同樣，第13行和第14行上的txt1和txt2(來自UI函數)與input$txt1和input$txt2 (來自Server函數)相同。

創建有光澤的對象(第39-40行) (Create Shiny object (Lines 39–40))

Line 40 — The shinyApp() function takes as input argument the ui and server variables defined above and fuses them together to build the actual Shiny web app that we finally see.
第40行 shinyApp()函數將上面定義的ui和服務器變量作為輸入參數，并將它們融合在一起以構建最終看到的實際Shiny Web應用程序。

恭喜你！您現在已經在R中成功創建了您的第一個Shiny Web App！ (Congratulations! You have now successfully created your very first Shiny Web App in R!)

關于我 (About Me)

I work full-time as an Associate Professor of Bioinformatics and Head of Data Mining and Biomedical Informatics at a Research University in Thailand. In my after work hours, I’m a YouTuber (AKA the Data Professor) making online videos about data science. In all tutorial videos that I make, I also share Jupyter notebooks on GitHub (Data Professor GitHub page).

我是泰國研究大學的生物信息學副教授兼數據挖掘和生物醫學信息學負責人，全職工作。在下班后，我是YouTuber(又名數據教授 )，負責制作有關數據科學的在線視頻。在我制作的所有教程視頻中，我也在GitHub上共享Jupyter筆記本( 數據教授GitHub頁面 )。

在社交網絡上與我聯系 (Connect with Me on Social Network)

? YouTube: http://youtube.com/dataprofessor/? Website: http://dataprofessor.org/ (Under construction)? LinkedIn: https://www.linkedin.com/company/dataprofessor/? Twitter: https://twitter.com/thedataprof? FaceBook: http://facebook.com/dataprofessor/? GitHub: https://github.com/dataprofessor/? Instagram: https://www.instagram.com/data.professor/

?的YouTube： http://youtube.com/dataprofessor/ ?網站： http://dataprofessor.org/ (在建)?LinkedIn： https://www.linkedin.com/company/dataprofessor/ ?的Twitter： HTTPS： //twitter.com/thedataprof ?Facebook的： http://facebook.com/dataprofessor/ ?GitHub的： https://github.com/dataprofessor/ ?Instagram： https://www.instagram.com/data.professor/

翻譯自: https://towardsdatascience.com/build-your-first-shiny-web-app-in-r-72f9538f9868