WordPress Web Application Part 2 - Planning

October 3, 2014 by

Obviously we need a plan! Until now I really haven’t thought about building a web application or trying to offer software as a service or SaaS as you may seen or heard it being called. Even though this a great exercise and a way to showcase the things you can accomplish with WordPress as well as my own skills as a WordPress developer I don’t want to give away too much information. I not only want go through the process, I want to actually try to build something with some value to see if I can actually market and sell the service. So at this point we are going to call this app WebApp.

Now for WebApp to be viable and realistically make any kind of profit I need either, a) a really good idea or b) improve upon a successful app in a non competitive niche market. I have read  about idea extraction and target marketing, etc.. But for this app (there is more behind my decision here that I won’t reveal) I want to  go with b. This something that has definitely been done before and the market I am choosing only has 2 very successful web apps and there is plenty of room to offer something better and gain some of that market share. You may want to approach this differently. For me even if it doesn’t work out so well I have still accomplished the goal of this post.

So I have my idea, project name (WebApp). Since I know my general idea and the niche market I want to target it’s time to get more specific, well, as specific as I can. For the purposes of this series you will get the generic version pretty common to a lot of different apps.

What does WebApp need to do?

This functionality is pretty general to most web apps once I have proven that WordPress can actually be used to build a web application I will build out the functionality more specific to my particular app.

WebApp Todos:

  1. Member Management  – Not only does it need to manage the users of the app but authorized users as well.
  2. Client Management – For this app members will need to add and manage their own clients.
  3. Event Management – Members will need to manage events and be alerted to those events. We will need some sort of calendar and alert system.
  4. Email Services – Members will need to be able to send and receive emails directly from our system.
  5. Client Billing – Members will need to be able to create invoices and collect payments directly from our system.
  6. Member Billing – Lastly we will need to bill our members for using the app. This will be a monthly subscription and we will need to collect it from the site as well.

As I said before I have some pretty specific plans for WebApp that will be added after all this is said and done but this is comprehensive enough to prove if WordPress can be used for this type of service. This will also give you enough info to make your own WebApps with WordPress if you so choose.

WebApp Design and Performance

The UI of our app is important and it needs to be easy to use and understand while providing quality and performance. What if WebApp becomes a success? Will it scale to meet the demand? We definitely don’t wan’t to put a ton of work into this only to have to rewrite it completely. We also don’t want to design the app only to redesign it later because our users are confused about it’s functionality and they need to go to some specialized school just to learn how to use it. You may not want to write a 300 page wiki about it either. So every part of our app needs to be self explanatory. You want your users to be able to log in and start using your application right away just by what they see on the screen, That means no text that anywhere that says “Click here”!

To be honest there are so many great designers out there that you could Google an admin dashboard template or pick one up on ThemeForest to get you up and running pretty quickly. I don’t want that personally but I do want to speed things up a bit so after a little Google search for inspiration I decided to use bootstrap with bootflat for the UI elements. There are other frame works you could use it’s just a matter of choice and opinion. Everything else I will do on my own so for design I want to follow the kiss methodology (keep it simple stupid).

For performance it may be a good idea to make our app a single page app.  As of WordPress 3.5 the core ships with backbone.js so if your a front end dev with heavy JavaScript skills you may want to go this route. It would definitely benefit you to learn it if you haven’t because backbone scales well and you shouldn’t have to worry about it for the long term unless you have a crappy host. I know there are a lot of WordPress guys that may not have much experience with backbone and want to get started right away so we are going to use the WordPress’s built in Ajax capabilities instead.

Head Start

So to get started I used my favorite theme framework (the one I built myself) I don’t recommend using a pre-made theme. You’ll want to start fresh with as little bloat as possible. Keep in mind that not only will your app run on this install of WordPress but we will also want to have our apps landing page, sign ups, documentation, maybe a blog, and whatever other content you want to include. So we want WordPress to run it all in one installation!  So let’s get started with the layout!

I want to get to the meat of it all and go ahead and start with my application. So we need to load up the dependencies for our app. This may vary depending on what you decided to use. Since I am using bootstrap I uploaded all the files bootstrap and bootflat needed and enqueued them in my functions file. I used the built in WordPress nav menus for my application menu and some basic styling. I also added some functionality for breadcrumbs. So far I have not used a plugin and this is what I got:

appBegining-Layout

 

I’m using font awesome for the icons and bootstrap with bootflat for the ui. Even though my application is going to be a single page application I need to build this out for every page and add ajax at the end that way in the rare chance the user doesn’t have JavaScript enabled the app will still work so I framed this out as a page template. I will use get_template_part() to structure the different parts of my application.

Now I have my application framed out I can start working on the content. I saved a lot time using bootstrap and will continue to save time because all my ui is already styled consistently and I just need to focus on the functionality.

I hope you enjoy following along with me and if you have any ideas or suggestions please leave them in the comments!