Familiarity with Shiney web application

After that first post We have completed the series of articles related to R, today we are here to review more parts of R together. In today's article, we will go to the different components of Shini web application. To try to read and learn useful functions and minimums of a simple website together.

Shiny components

As we can see in the picture, Shaini is made up of two sections: ui and server. These two parts do exactly what front-end and back-end do together to develop a website. In the ui section, which is the front-end itself, the appearance features of the website are specified. For example, buttons, charts, titles or selectors are placed here. Also, adding the desired css, changing the font, or applying margin and padding are part of the work of this section. The server part, like the back-end, is dedicated to communicating with the server and database. In this section, the general work is done so that the user can see the result of his efforts in the ui section. We can see these two parts in two separate files or use them all together in one file like here.

library(shiny)

# Define UI ----
ui <- fluidPage(
  
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

ui features

As we can see, ui takes an input called fluidPage. As far as I have seen, ui can take two types of input, including fluidPage or dashboardPage. As it is known from the name of the inputs, fluid (meaning fluid) is used for designs that are responsive in nature, which we will work with in the following. But dashboardPage is used to design and develop management panels, which is an example Figure below we see

And but fluidPage

Let's go back to the first program we created with Shiny Web App. In this program, in the ui section, two functions are used, named titlePanel and slidebarLayout, which are two of the most used Shiny functions. titlePanel specifies a title for the program and slidebarLayout is used to develop web applications that have a slide bar. This function consists of two sub-functions, main and slidebar, which main, main content and slidebar are used to display the side position of the slider.

ui <- fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel("sidebar panel"),
    mainPanel("main panel")
  )
)

Adding html features to Shiny

Shiny web application is not only limited to its own functions and that is what makes it so powerful. Shiny can be fully compatible with html and recognizes all its tags and styles. h, p and even strong and em tags are examples of html applications in Shiny that are easily used here. The figure below shows an example of this harmony and comfort between the two.

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
      strong("strong() makes bold text."),
      em("em() creates italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text similar to computer code"),
      div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
      br(),
      p("span does the same thing as div, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
)

Well, so far we have learned about the most used ui components in Shiny web application and we learned a lot about the connection of this part with html. In the next article, we will talk about the server and we will try to do cool things like database and sending and receiving queries. So stay with me.