SkiddleBop: My Latest Project

Since the beginning of April this year I’ve been working on a new app under the working title, ‘SkiddleBop’.

SkiddleBop is designed to be a high-functioning configurable ‘business starter template’ that takes care of managing users, subscriptions, and recurring payments right out of the box.

Designed specifically with subscription-based ventures in mind, the app will handle demos, trials, subscriptions, payments, plans, coupons, discounts, user authorization and authentication, transactional emailing, and more.

As sole practitioner on this project, my role covers the entire development life-cycle from concept development through operational deployment. The project is slated for completion by October 2017.

Core technologies include:

  • Cakephp 3.4
  • Php 7/MySQL5
  • Javascript/jQuery
  • HTML5/CSS/LESS
  • Bootstrap 3 w/ BeyondAdmin theme
  • Stripe API
  • Sparkpost API
  • Apache 2.4.18
  • Ubuntu 16.04.3

The entire month of April was spent on gathering requirements and developing an object-oriented design for the app. The following first two weeks in May were spent transforming this design into a database and application architecture.

Since then, roughly three weeks were spent on building out the core platform in CakePHP 3 to the point where app development can actually get moving. In late May, I was pulled away from the project to deal with a bunch of other things.

It’s now late June and I’m finally getting back in the saddle.

So, basically, much of the app’s core framework has been engineered and implemented. There’s still plenty to do but most is stuff I’ve done before, so I expect things should go somewhat smoothly.

To build out the app from here, I think it makes sense to:

  1. Implement the email messaging capabilities (done)
  2. Set up authorization & authentication stuff
  3. Set up the user management stuff
  4. Implement the login stuff (anonymous & known)
  5. Implement plans
  6. Implement subscriptions
    1. Anonymous demos
    2. Sign-ups & trials
    3. Coupons & discounts
    4. Up/downgrade
    5. Cancel/Reinstate
  7. Implement account management
    1. Invoices & payments
    2. Card replacement
  8. Finish implementing the app configurator
  9. Tidy up the landing site

Implementing Stripe in CakePHP

Here’s a very rough sketch of the steps involved in bringing Stripe into a CakePHP application:

Step 1.

Update composer.json to require stripe, then run ‘composer update’.

(FYI, Composer failed first time because I didn’t have Curl installed on my server. Once this was fixed, all went smoothly.)

Step 2.

Manually install Hashmode’s Stripe component in the /Controller/Component directory.

(NOTE, doing this with composer borks on my install since this component is still in dev mode and conflicts with the update policies set for the app in composer.json.)

Step 3.

Change the default nameSpace in the new component to ‘/app/…’.

Step 4.

Set up a Stripe account

Step 5.

Add the Stripe keys to bootstrap.php

Step 6.

Create the ‘add card’ form

Step 7.

Create a ‘form-submit-button’ element, and include in the add-card form

Step 8.

Include links to jQuery & the Stripe JS in the app

… etc.

Learning CakePHP 3 – Part 4

Part 4: Upgrading the Default UI

Implementing Bootstrap

First step was to implement Bootstrap and Less into the framework. For this, I followed the basic instructions in the Packt book titled Bootstrap Site Blueprints. While this involved a bit of research and tinkering, it all went quite easily and predictably.

Basically, this involved adding a Less folder, and then setting up a working folder arrangement for files that modify Bootstrap.

I also replaced the existing base.css file with another of the same name but with booststrap.min.css as the contents, which includes normalize.css. This replaces the default cake version which included normalize and foundation.

I used WinLess on my desktop to compile the Less files.

Installing beyondAdmin

Next, I implemented the beyondAdmin Bootstrap template that I bought last year.

This also went well, but did involve making some changes to the defaults to accommodate the Cake-centric folder structure already implemented.

Also, I initially installed using the default compiled CSS and JS files that came with the template. Once all was up and running, I implemented the LESS files. Basically, I left all of the files as-is to make updates easy, and then created new files with mods and set these to compile.

The only real gotcha that will show up when upgrading the template is that I hacked the URL address for the FontAwesome font files in font-awesome.css.

Installing CakePHP

I started out at http://cakephp.org with reading the cookbook. After skimming the intro, I went to the install instructions as recommended.

First thing, I needed to install was Composer. Although easy, I’ve never used Composer. So, it took me a while to figure out what I was doing (and why). In the end, I opted for the easy route by installing Composer directly into the public html folder:

curl -s https://getcomposer.org/installer | php

Next, I installed CakePHP by using composer to create a new project for the bookmarks tutorial in the html folder, like so:

composer create-project --prefer-dist cakephp/app bookmarker

This is where I ran into my first glitch. The installation wouldn’t complete properly because my Php installation did not include the ‘intl’ or ‘mbstring’ modules. The (simple) solution was to install these modules like so:

 apt-get install php-intl

 apt-get install php-mbstring

… Then reload the server:

service apache2 reload

… And then confirm the installation succeeded:

php -m

Once the needed modules were installed, the previous ‘create-project’ instruction worked perfectly and Composer successfully set up the tutorial project as promised.

FYI, I let Composer set permissions automatically

Well, almost as promised. The default home page showed up in my browser, but the CSS files couldn’t be found.

It turns out that ‘URL rewriting’ wasn’t properly configured on my server. As a result, the server was looking for the ‘/css’ folder in the project’s root directory, instead of the ‘/webroot’ folder.

At this point, I switched to the manual installation instructions on the CakePHP site for more precise guidance. It turns out that I had two issues to resolve.

The first issue related to allowing .htaccess files to overwrite the server’s default configuration settings. The fix for this was easy enough:

# Each directory to which Apache has access can be configured with respect
# to which services and features are allowed and/or disabled in that
# directory (and its subdirectories).
#
<Directory /var/www />
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

The second issue was that mod_rewrite was turned off in apache by default, so the .htaccess files were not being read. The fix was easy too:

a2enmod rewrite

service apache2 restart

With these fixes behind me, everything showed up in my browser just as promised, including a message to tell me the app couldn’t connect to the database (as expected).

I now went back to the quick start guide and followed the instructions to create a database and add some tables for the tutorial by copying and pasting the code provided. Then I modified the installation’s config/app.php file by setting the user, password, and database name defaults so the app could make the connection.

Another browser refresh and, WooHoo, the oven is hot!

A New Project

I’ve decided to start a new project.

A short while ago, I started tinkering with a portfolio site as a means of becoming more familiar with Bootstrap and Less. As these sorts of things do, this led to lots of project ideas.

Cutting to the chase, I want to build an online business application template that runs ‘out-of-the-box’ and is ready for skinning.

My goal is to create a production-ready asset to be used as the basis for several possible revenue streams.

On a more personal level, I want to progress from being a ‘skilled amateur’ to a ‘skilled professional’: a level where I can earn a viable income.

My game-plan is to leverage what I’ve already done with mystudioassistant.com and camperella.com rather than to start from scratch. My biggest challenge is that I’ll need to learn a lot of complicated technologies which will push me well beyond my comfort zone.

I’m not sure about timelines yet. This will need to come as I step further in… something about laying down the path as you walk.

Anyway, here goes.