آشنایی با شاینی وب اپلیکیشن

بعد از اینکه اولین نوشته از سری نوشته های مربوط به آر رو پشت سر گذاشتیم، امروز اینجاییم تا قسمت های بیشتری از آر رو با هم بررسی کنیم. توی نوشته ی امروز به سراغ اجزای مختلف شاینی وب اپلیکیشن میریم. تا سعی کنیم توابع به درد بخور و حداقل های یک وبسایت ساده رو با هم بخونیم و یاد بگیریم.

اجزای شاینی

همونطور که توی تصویر هم میبینیم، کلا شاینی از دو بخش ui و server تشکیل شده. این دو بخش دقیقا همونکاری رو میکنه که front-end و back-end کنار هم برای توسعه یه وب سایت انجام میدن. توی بخش ui که همون front-end خودمونه، ویژگی های ظاهری وبسایت مشخص میشه. مثلا دکمه ها، نمودارها، عناوین یا selector ها اینجا قرار میگیرن. همینطور اضافه کردن css های دلخواه، تغییر فونت یا اعمال margin و padding از کاری این بخش محسوب میشن. بخش server ولی مثل back-end به ارتباط با سرور و دیتابیس اختصاص داره. توی این بخش کلی کار انجام میشه تا در آخر نتیجه زحماتش توی بخش ui برای کاربر دیده بشه. این دو بخش رو میتونیم توی دو تا فایل جدا هم ببینیم یا مثل اینجا همه رو با هم توی یه فایل استفاده کنیم.

library(shiny)

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

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

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

امکانات ui

همونطور که میبینیم، ui یه ورودی به اسم fluidPage میگیره. جوری که من تا به حال دیدم، ui میتونه دو نوع ورودی بگیره که شامل fluidPage یا dashboardPage هست. همونطور که از اسم ورودی‌ها هم مشخصه، fluid(به معنای سیال و روان) برای طراحی‌هایی استفاده میشه که ذاتا ریسپانسیون که در ادامه بیشتر باهاشون کار میکنیم. اما dashboardPage برای طراحی و توسعه‌ی پنل‌های مدیریتی استفاده میشه که یه نمونه ازش رو در شکل زیر میبینیم.

و اما fluidPage

برگردیم به اولین برنامه‌ای که با شاینی وب اپلیکیشن زدیم. توی این برنامه در بخش ui از دو تا تابع استفاده میشه به نام titlePanel و slidebarLayout که دوتا از پرکاربردترین توابع شاینی هستند. titlePanel یه عنوان برای برنامه مشخص میکنه و slidebarLayout هم برای توسعه‌ی وب اپلیکیشن هایی که اسلایدبار دارند، استفاده میشه. این تابع هم از دو زیرتابع main و slidebar تشکیل شده که main، محتوای اصلی و slidebar برای نمایش موقعیت کناری اسلایدر به کار میرن.

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

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

افزودن امکانات html به شاینی

شاینی وب اپلیکیشن فقط به توابع خودش محدود نمیشه و اصلا همینه که انقدر قدرتمندش میکنه. شاینی میتونه کاملا با html هماهنگ باشه و تمام تگ‌ها و استایل‌های اون رو میشناسه. تگ‌های h،p و حتی strong و em نمونه‌ای از کاربردهای html توی شاینیه که به راحتی اینجا استفاده میشه. شکل زیر نمونه‌ای از این هماهنگی و راحتی بین این دو رو نشون میده.

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.")
    )
  )
)

خب، تا به حال با اجزای پرکاربرد ui توی شاینی وب اپلیکیشن آشنا شدیم و از ارتباط این بخش با html هم چیزای زیادی دستگیرمون شد. توی نوشته‌ی بعدی به سرور میپردازیم و سعی میکنیم کم کم کارهای باحال تر مثل دیتابیس و ارسال و دریافت کوئری هم انجام بدیم. پس با من همراه باشین.