Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
Hey guys, welcome back to my R-tips newsletter. It’s no secret that modern businesses run on mobile apps. Today, I’m going to share how to turn your R Shiny web apps into Mobile-First business applications.
Table of Contents
Here’s what you’re learning today:
- What is shinyMobile? You’ll discover what is is and why use it versus Shiny
- How to create mobile apps with
shinyMobile
I’ll explain how to make your first . - A Business Science Mobile Investment App. This is an app idea that I have for managing my Interactive Brokers algorithmic trading performance and portfolio risk analytics.
Get the Code (In the R-Tip 079 Folder)
SPECIAL ANNOUNCEMENT: ChatGPT for Data Scientists Workshop on April 24th
Inside the workshop I’ll share how I built a Machine Learning Powered Production Shiny App with ChatGPT
(extends this data analysis to an insane production app):
What: ChatGPT for Data Scientists
When: Wednesday April 24th, 2pm EST
How It Will Help You: Whether you are new to data science or are an expert, ChatGPT is changing the game. There’s a ton of hype. But how can ChatGPT actually help you become a better data scientist and help you stand out in your career? I’ll show you inside my free chatgpt for data scientists workshop.
Price: Does Free sound good?
How To Join: 👉 Register Here
R-Tips Weekly
This article is part of R-Tips Weekly, a weekly video tutorial that shows you step-by-step how to do common R coding tasks. Pretty cool, right?
Here are the links to get set up. 👇
What is shinyMobile?
The shinyMobile
package is an R package that integrates the Framework7 mobile app framework that’s designed for Mobile-First applications.
Why Mobile-First Shiny Apps (vs Normal Shiny Apps)?
Chances are you’re interested in making R Shiny web applications that are specifically designed for use on mobile apps. But why not use just regular old Shiny for this task?
Shiny uses Bootstrap Responsive Mobile Design
Shiny is built on top of a web framework called Bootstrap
. Bootstrap is ideal for Shiny developers looking to create responsive websites quickly that look great on all devices without the need to write much CSS or JavaScript from scratch. It’s less focused on providing a “mobile app” experience and more on being mobile-responsive.
shinyMobile uses Framework7 for actually putting your app on your iPhone
Framework7 is better suited for developers who want to build an application that feels and behaves like a native mobile application rather than a website that is simply responsive. It’s especially powerful when used in conjunction with platforms like Cordova or Capacitor to build hybrid mobile apps.
Key Features:
- Mobile-First Approach: Designed specifically for mobile devices, it provides UI elements and animations that feel like native mobile applications.
- Native Look and Feel: Includes styles for iOS and Android that mimic the design language of these platforms (like iOS’s rounded buttons and Android’s Material Design ripple effects).
- Integration with Mobile Frameworks: Often used with PhoneGap or Cordova for creating apps that can be deployed on app stores and access native device features.
- Rich Interactive Components: Offers components like swipeable sliders, pull-to-refresh, infinite scroll, and floating action buttons that are essential for modern mobile applications.
- Router Integration: Comes with a built-in router for managing page transitions and loading new pages efficiently, which is critical for single-page applications that mimic a native app.
A key ingredient is deployment, which I’ll cover basic instructions with Cordova
in the second part of this tutorial.
shinyMobile Tutorial: How I built the Business Science Mobile Investment App
This is a proof-of-concept that I’m working on to connect my Interactive Brokers API that manages all of my algorithmic trading.
To get the code: Join R-Tips Newsletter
The code is in the R-Tip 079 Folder. Download the code and run it:
Anatomy of a shinyMobile App
The important thing to understand is the key differences between a standard R Shiny App and shinyMobile App.
User Interface (UI)
Key Differences:
f7Page()
this sets up your mobile pagef7TabLayout()
This is the type of mobile layout. I prefer the Tab layout.f7Navbar()
sets up the navigation bar for your mobile app
f7Tabs()
These expose tabs at the bottom of the mobile screen. They are swipeable so the app actually feels like a mobile app.f7Tab()
: Each tab can be added that includes shiny content like inputs and outputs
f7Card()
: I use cards to house pieces of content like plots (in this case my portfolio growth plot)
Server
The server operates much like a normar R Shiny application. One of the key differences is that instead of using Plotly plots like I normally use, I’ve made the switch to Apex Charts.
Apex Charts
Why Apex Charts via apexchartr
? These are super fast and great for mobile or web applications.
Installing Your Framework7 App with Cordova
Adding a Framework7 app to your iPhone typically involves creating a hybrid app that can be installed like a native app. Framework7 itself is designed to provide mobile-app-like experiences using web technologies (HTML, CSS, JavaScript), but to install it as an app on an iPhone, you’ll need to wrap it in a native container. This is commonly done using tools like Cordova or Capacitor. Here’s a step-by-step guide on how to do it:
Step 1: Develop Your Framework7 App
First, create your Framework7 app on your development machine. Ensure it’s fully functional as a web application and ready for conversion into a mobile app.
# Example of setting up a Framework7 project npm install -g cordova cordova create myapp cd myapp cordova platform add ios
Step 2: Set Up Cordova or Capacitor
Cordova and Capacitor are popular tools to convert web apps into native apps that can be deployed on mobile operating systems like iOS and Android.
Using Cordova:
- Install Cordova:
npm install -g cordova