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. 👇

• Sign up for our R-Tips Newsletter and get the code.

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:

1. Mobile-First Approach: Designed specifically for mobile devices, it provides UI elements and animations that feel like native mobile applications.
2. 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).
3. 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.
4. Rich Interactive Components: Offers components like swipeable sliders, pull-to-refresh, infinite scroll, and floating action buttons that are essential for modern mobile applications.
5. 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:

1. f7Page() this sets up your mobile page
2. f7TabLayout() This is the type of mobile layout. I prefer the Tab layout.
   • f7Navbar() sets up the navigation bar for your mobile app
3. 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
4. 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:

1. Install Cordova:

   npm install -g cordova