In Part I of this collaboration project start, I introduced the idea of building an app built with AngularJS, WP-API and WordPress. It stemmed from my post and WordCamp LAX talk about using WordPress as a faux MVC type framework to build web applications.

Since no new ideas came, I have decided to build out my social style guide creator app using that build stack.

The whole build

  • WordPress –  Model layer that deals with handling saving and getting data from the database
  • WP-API – Controller Layer which deals with doing any data manipulation that it receives from the front end. It sends all data to the model for saving (or in query’ing case, getting)
  • WP-APP-PLUGIN –  This is also a control layer, in its most basic form it is just a way to define out functionality that should not be in the theme (Custom Post Type declarations, Taxonomy Declarations, etc.) It may also be a great way to extend the WP-API for new endpoints, etc.
  • WP-APP-THEME – This is our view layer, all the code here will be built for the soul purpose of the view and what the client machine (browsers) see, and how they interact with the website. This is where all the AngularJS magic happens to build the Single Page Application.

Part II – The Scope / Dev Roadmap

Even though I have started to put the basics of the theme and app together, the most important step before you even start, is this one. When I built CodingOfficeHours.com, I did not make a roadmap of my endpoints, controllers, etc. I just wanted to build it and I thought of functionality as I went along, and since the core was not built modular enough it became a hodgepodge of code that I am now re-factoring for v1 release. It is not pretty, and for that reason I cannot iterate how important this next step is. Don’t worry, we’ll get to code soon enough.

What are we building? Scope?

First before we talk about technical details, lets get more specific about what we are building, and what we want it to do. Feel free to add comments for additional functionality

We are building a social style guide creator, basically taking the functionality of my plugin SG-60 and making it an app that users can register, create style guides, comment on other style guides, and share style guides. Besides the social aspect sharing across the internet, it would also be nice to add functionality in that would allow a user to comment, rate, and copy a style guide as a base point (to create a new one). Lastly, there will have to be a single or multiple taxonomies that categorize each style guide that users will be able to choose from so that styles are easily found based on categorization.

In the future, I also want a way to easily download a CSS, LESS or SASS file that has al the colors and fonts set up as variables (or in CSS, just a class). Ideally I would also like to be able to have them download a plug and play file for Twitter Bootstrap, Foundation, and any other UI frameworks that people think are going to be used a lot.

Lets break that down outline style (not getting too technical yet)

  • Style Guides
    • Social sharing
    • Commenting & Rating
    • Duplicate to new draft
    • Taxonomy Categorization
      • TBD
    • Download
      • CSS
      • LESS
      • SASS
      • UI Frameworks
        • Twitter Bootstrap
        • Foundation
        • More TBD
  • Users
    • Registration open
    • Registration required to make a new style guide
    • Profile page with all of their guides
  • View / Sort Guide Page
    • Sortable by categories
    • Sortable by ratings
    • Sortable by most comments
  • Single Guide Page
    • SG-60 type layout
    • Able to copy color codes
    • Link to correct font

Lets get technical, what are we building in each layer?

Model

Luckily we are using WordPress core, so we won’t touch that. It is awesome enough as-is.

Controller

I know “MVC” but as you can see I’m more of a MCV guy, it makes more sense to go in order from the database to client.

  • WP-API EndPoints
    • /users – built into WP-API
      • get user data and create users
    • /guides – will be a duplicate of “/posts” with the post_type=”style-guides” already set
      • get and create guides
    • /taxonomy – passing the taxonomy
      • get all guides from a certain tax (faster then getting all guides and sorting)

View

This will be built with Roots.IO and AngularJS

  • Roots
    • styles (LESS) – to define out all site styling
    • page template – for any non-app pages
    • front-page – for home (maybe will be part of APP)
  • AngularJS
    • Routes – the URL paths available
      • /user/:id
        • user profile
        • all users (if no ID passed)
      • /users/new
        • Create new user
      • /guides/:id
        • single guide template (if ID passed)
        • sort/view guide page (if no ID passed)
      • /guides/new/:id
        • Create new guide (duplicate if ID passed)
    • Factories – AngularJS Factories (or Providers) – used to easily control endpoints on the front end
      • Guides
      • Users
    • Controllers – AngularJS Controller, this sits between the view layer and the WP-API, a lot of typical jQuery commands will go here but using AngularJS directives.
      • Users
        • Maybe New User
      • Guides
        • Maybe New Gudes
    • Views – the templates, I am going to do a semi-WP naming convention
      • single-user.html
      • archive-users.html
      • new-user.html
      • archive-style-guides.html
      • single-style-guides.html
      • new-style-guide.html (will pass ID through route if duplicating)

I am probably forgetting something.. but will update as need be.

Note: As I am not sure about how to achieve the custom download content, I am not sure where to put them. Most likely they will get custom API endpoints and AngularJS controllers/factories, however since they are tightly coupled (and rely on) the style guide, it may make sense to put them in there.

Enqueues

  • JS
    • AngularJS
      • Core
      • Controllers
      • Factories
    • jQuery (built into WP)
  • CSS/LESS
    • Base style.css
    • Bootstrap LESS/CSS
    • Custom LESS
      • users.less
        • maybe users-new.less
      • guides.less
        • maybe guides-new.less

I think that completes it.. that is our roadmap, an overview of what we are going to build, and how we are going to build it.. I am going to let it be organic as it grows. ADD TO IT by making comments below, for things I missed, additions you want to see, etc.

Questions? Comments? Leave feedback below as we continue our journy

 

Join the build

Remember you can join, fork, contribute to the build using the GitHub repo — https://github.com/Build-WordPress-Application/

I will be adding to it regularly as we move along.

There are 3 comments

Comments are closed.