Smartphones 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:
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.
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:
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:
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:
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:
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:
My Reactor demo site uses green colors, so let’s tweak a few of the color selections to better fit our brand:
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:
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:
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:
- App Name
- App ID
- App Version
- Splash Screen (multiple sizes)
- Assets (not sure what this is exactly)
- Google Analytics ID
- 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.