reactor-featured-imageSmartphones and tablets have become an integral part of our everyday life. There are now more than 143 million smartphones in use in the US, and 71 million tablets (ref). The rise of mobile browsing is here. Is WordPress prepared for the tide?

Introducing Reactor by AppPresser

The guy’s over at WebDevStudios, led by Scott Bolinger, have been hard at work on Reactor: A SaaS-based service that aims to ease the headache of building a mobile app for your WordPress site. While they’re not the first to market a solution for creating an app for your WordPress site, their approach of utilizing a service that leverages WordPress’ API rather than a stand-alone plugin with a complex series of shortcodes is a breath of fresh air.

When choosing a platform for turning your WordPress site mobile it’s important to consider who built it and how well it integrates with WordPress. WebDevStudios has been around a long time and actively develop and support the product. Reactor doesn’t appear to be a fly-by-night product that will leave you high in dry within a year.

Who is Reactor For?

Reactor may not be for everyone. I say this mainly due to their monthly pricing model being a bit high for the average WordPress user. Although, when compared to other similar services their pricing appears in line with the market. Looking at the Reactor site, their obvious target is the business running WordPress. They also market heavily to successful WooCommerce shops with their shop integration and store locator feature. Deciding to go with Reactor is a business decision you’ll have to justify. If the results pay off, it could be well worth it.

Building Mobile Apps with WordPress is Easy using Reactor

Let’s build an App together with Reactor! The two things you will need to get started is a WordPress website and Reactor account. For this demonstration, I will be using a snapshot site of our Quick Checkout demo site which heavily utilizes WooCommerce. I’m going to build an App of this demo site using Reactor that will enable user to purchase products. Let’s get started!

Your First Login to Reactor

Once you have an account with Reactor the first time you login you are presented with some helpful instructions to get started:

Reactor Dashboard Welcome Screen
Reactor Dashboard Welcome Screen

Step 1: Installing the Reactor Core Plugin

Step 1 instructs the user to install the Reactor Core plugin on your WordPress website. Find it, install and activate. Bazaam. Step 1 complete.

reactor-plugin-view

Step 2 is where the magic starts to happen and where you will most likely spend the most time. Reactor allows you to pull your site’s content such as page and post content into the app you’re building. This is cool because I don’t want to have to deal with duplicate content wherever possible. Reactor leverages the WordPress JSON API just how it should. You can also create your own app-specific pages as well. Pretty neat.

Step 2: Creating the App’s Pages

Let’s start creating some pages for our application. The App I’m creating will be primarily focused on making my products available to purchase but I do need a few static pages that don’t exist on the site currently, such as an “About” page.

When you go to add your first page in Reactor you will notice that there are many “Page Types” available to choose from:

Reactor Page Types
Reactor Page Types

The first page I will be creating will be the “Products” page. Therefore, after I provide the page a title I will select “WooCommerce” from the Page Type dropdown. Immediately upon making the selection you will see that the fields below change depending on the type selected. Now it’s just a matter of completing the remaining fields with your preferences. Do I want a slider or social sharing buttons?

One cool feature worth noting is the “Full Page View” field which control how content is displayed within the app. You can display them in several pre-formatted layouts:

Reactor Full Page View Options
Reactor Full Page View Options

I find this feature powerful yet currently lacking enough selection. I’m hoping they expand the options in the future because everyone likes having more variety. For now, I’ll choose the “WooCommerce” option and move on to creating more pages.

Let’s create another page in Reactor and this time use the “Custom Text/HTML” default Page Type. Now it’s up to me to go in and build my page using the WYSIWYG editor:

custom-text-reactor-page

I’m glad the Reactor team kept everything very native WP feeling. There’s no clunky page builder or re-invented UI. When creating your content the thing you have to keep in mind is all the content you create is to be viewed on mobile. So don’t add any huge image sizes, four column layouts, or Flash players!

I found the process of creating content in Reactor both fun and easy. They provide helpful videos such as this one that walks through the process from beginner to advanced:

Beginners will feel just fine working with the native builder. Advanced users can also go to town creating complex layouts using their own methods or elements from the ionic framework, which Reactor supports.

Step 3: Creating a Menu for the App

After we have created the initial content for our app we need to create an app-only menu within our WordPress site so users can navigate our app. After clicking on “App Menus” in the admin we can easily add our menu items the WordPress way:

reactor-app-menus

Add the pages you want to appear, order them how you’d like, and press “Save Menu”. With that, it’s time to move on to Step 4.

Step 4: Customizing the App Design

Every brand has their own unique color scheme. My demo site is no different. Reactor’s handy “App Designs” feature makes customizing colors to different elements simple. It includes a “Preview” panel which allows you to see how the design looks without having any unnecessary complications. By default, the app is blue:

Reactor's Default App Design
Reactor’s Default App Design

My Reactor demo site uses green colors, so let’s tweak a few of the color selections to better fit our brand:

A Customize App Design
A Customize App Design

Reactor’s app design process is a really neat feature but lacks some a features I would love to see in the future. It would be great to customize the navigation menu style, where it slides from (left or right), the ability to add a custom logo, and customize font faces.

When I asked Scott Bolinger, head of the Reactor team, about their plans for the future of the design process he stated more customization features are indeed coming soon:

We just added several more color pickers, customizing logos is coming soon, lots of more options are coming soon…

All the bells and whistles aside, it’s still pretty kick ass for it’s early age. I can’t wait to see how it’s going to be in a year.

Step 5: Putting it All Together

Now that we have setup our app’s content, menu, and design it’s time to “put it all together”. This is done via the “Apps” tab in the Reactor dashboard:

app-build-screen-reactor

The fields on this screen are pretty self explanatory. Simply enter the information for the site you added the Reactor Core plugin in Step 1 and you’ll be ready to move on.

I experienced an issue where my “Product” page demo wasn’t displaying properly in the “App Preview” screen even though Reactor said it had connected to my site. Besides that, the app preview gives you a much more realistic preview on how the final app will function:

Reactor App Preview
Reactor App Preview

Step 6: Building the App with Phonegap

Everything has been pretty easy to this point. We’ve pulled in our site content, created a few app-specific pages, designed the app, and added a menu. Now after we confirmed our preview it’s time to “build” the app so that it’s ready for Android and iOS stores. This is where the process can get a bit hairy. To build your App you will need to provide quite a bit of information and create a number of graphics:

  1. App Name
  2. Description
  3. Company
  4. App ID
  5. App Version
  6. Splash Screen (multiple sizes)
  7. Assets (not sure what this is exactly)
  8. iAd
  9. Admob
  10. Google Analytics ID
  11. Google Map API Key

If you want to utilize push notifications then you will be asked to fill in even more information. Also, it goes unmentioned, but to even publish an App on the Google Play Store and App Store you are required to pay $25 or $99 respectively.

Bolinger recognizes this process can be tough for some new users:

Honestly apps are complicated and we are doing our best to help make it easier. There are still parts that can be confusing, but we are here to help

In response, they are offering assistance for users who purchase a yearly plan:

With a free Phonegap Build account, you can test your app on a device in seconds. We offer free submission to the app stores with the purchase of a yearly plan

The Good, The Bad, and Everything in Between

After getting hands on with Reactor I’m overall very impressed with the features and functionality. Here’s what I liked and disliked about the App of the date of this article:

What I like about Reactor:

  • Multiple sites, multiple apps, one dashboard
  • Support for iOS and Android
  • It is built atop WordPress
  • Zero hassle Reactor Core plugin setup
  • Superb integration via WP JSON API
  • Users aren’t required to use shortcodes
  • Easily modify app design colors
  • Built-in push notifications
  • Google analytics integration

What I don’t like about Reactor:

  • Customizing app designs lacks real functionality
    • No easy way to modify app font faces
    • Adding a custom logo to the app isn’t straightforward
  • The App Design Preview should sticky scroll down as user makes selections further down the page
  • Lackluster integration with Ionic framework snippets (have to copy-paste HTML into WYSIWYG)
  • Confusing app build process with many touch points
  • No price point for the little guys (lowest plan is $49/mo)

My Final Reaction to Reactor

When AppPresser was released I was a bit skeptical. The barrier to entry seemed a bit high for the average user. It required a number of plugins to be installed and configured via multiple shortcodes. Reactor takes the pain out of that process. It’s a joy to build an app in Reactor. They’ve done everything in the service the WordPress way and it shines.

Despite this, at the end of that app creation process some users may hit an “app build roadblock”. It’s not Reactor’s fault. It’s simply the process Google and Apple have put in place to publish an app on their markets. That aside, Reactor is a intuitive, powerful, and doing a wonderful job leading WordPress into an ever increasing mobile world.

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

8 Responses to “Building Mobile Apps with WordPress: A Reactor Overview”

  1. Ginger Coolidge

    Great detailed review Devin, appreciate it! I know the folks behind this at Web Dev do a great job. My question is more overall, why separate app vs a mobile responsive theme?

    Reply
    • Devin Walker

      Hi Ginger, I’m going to get Scott from Reactor to respond to this as well but I can give you my take. First, the native app vs responsive is a great question that doesn’t have a definitive answer. The real answer is “it depends”. Native applications have offline capabilities, push notifications, camera access, and other features which just aren’t possible in responsive development. As well, the touch user experience can also be much smoother natively. Responsive design can do a lot, and in the future hopefully a lot more… but we still can’t do even close to what a native app can.

      Reply
      • Ginger Coolidge

        Thank you both for the quick response! That makes sense, I will have to check it out.

        Reply
      • Soumitra Mishra

        Hi Devin. I built an android app using Reactor. I built an app with Reactor, using the authentication token from Phonegap Build. The preview is perfect on my laptop with Google Chrome but shows up a blank screen on my device. It shows the flash image initially for a few seconds and then the screen turns blank. I even tried the manual uploading of the zipped folder collected from Reactor and uploaded to Phonegap Build. Same problem here too. I am struggling for sometime to fix it but to no avail. The app is available on Google Play Store https://play.google.com/store/apps/details?id=in.navodayatimes.app I am not a developer but a publisher with little knowledge of coding, and not able to identify the fault. Can you help me please. Thanks

        Reply
    • Scott Bolinger

      Hi Ginger, good question. A mobile app doesn’t replace a mobile website, they work together. Like Devin said, the app can do things that the website can’t, and it can be on the app stores. For example, if you have an online store, you can have a website and an app to get in front of your customers as many ways as possible. Here’s an article that also might help: http://apppresser.com/mobile-strategy/

      Cheers!

      Reply
      • Soumitra Mishra

        I am not a developer but a publisher. I was excited after I discovered Reactor. I thought it would be easy for people like me with little knowledge on coding, to turn a WordPress blog into a web app. I built an android app both ways: used Reactor to build the app automatically using the authentication token from phonegap build and manually uploading the zipped folder from Reactor library. In both cases, the preview of the app is fine on Google Chrome. But it returns a blank screen after showing up the flash image for few seconds initially. I have been struggling for sometime to fix it but to no avail. I installed the app from Google Play Store and manual scan of the QR code from Reactor a number of times. Every time it shows up a blank screen on my device instead of the preview I see on my laptop with Chrome. https://play.google.com/store/apps/details?id=in.navodayatimes.app

        Can you be of any help, please. Being a non-techie it’s too difficult to identify the exact problem. I appreciate the hard work done by the Reactor team even though it was meant for site owners like me with little knowledge on coding. Thanks to all.

        Reply
  2. Soumitra Mishra

    I am not a developer but a publisher. I was excited after I discovered Reactor. I thought it would be easy for people like me with little knowledge on coding, to turn a WordPress blog into a web app. I built an android app both ways: used Reactor to build the app automatically using the authentication token from phonegap build and manually uploading the zipped folder from Reactor library. In both cases, the preview of the app is fine on Google Chrome. But it returns a blank screen after showing up the flash image for few seconds initially. I have been struggling for sometime to fix it but to no avail. I installed the app from Google Play Store and manual scan of the QR code from Reactor a number of times. Every time it shows up a blank screen on my device instead of the preview I see on my laptop with Chrome. https://play.google.com/store/apps/details?id=in.navodayatimes.app
    Can you be of any help, please. Being a non-techie it’s too difficult to identify the exact problem. I appreciate the hard work done by the Reactor team even though it was meant for site owners like me with little knowledge on coding. Thanks to all.

    Reply

Leave a Reply