A newbie intro to WordPress development using WP App Studio – Part III

We are going to continue exploring the generated plugin focusing on the frontend and data import/export capabilities.

Bulk importing existing data

“Request a quote” app supports entity operations module since we enabled this feature in the app settings. If this module is enabled, WPAS creates an “Operations” button in app list screen next to the “Add New” button in the admin area. You must be logged in as administrator to access Operations screen.

The operations module is specifically designed for the generated app based on the app design and enforces data integrity by;

  • checking data rules such as required, unique attributes, auto-increment etc.
  • checking app rules such as data existence in term of relationships
  • checking compliance with WordPress API rules

That’s why using third party CSV importers is not recommended since they lack the logic to properly import your data compromising data integrity of your app.

One of our requirements was to import existing quotes we collected from a CSV file into the app. The most efficient and error-free way to do this using Google Docs Google Spreadsheet(GS). WP App Studio apps support the GS CSV file format. GS is part of Google Docs, free and easily accessible with a Google account.

Once you have your data in GS, you can modify the content in a spreadsheet format. I will start by manually entering a couple of records so that I can export app template after with some sample data . The exported file matches what the import process expects so it will be a lot easier to match the columns etc.

The recommend process for bulk imports:

  1. Insert a few records manually and publish
  2. Click on “Operations” button and switch to “Export” tab
  3. Click on Export All Contacts
  4. Open up a Google Spreadsheet and import the exported CSV file
  5. Fill out the rest of the sheet with your data making sure the required fields are not left blank, the data format is matching the sample data
  6. Click the File menu, then click Download as, then .CSV.
  7. Click on “Operations” button and switch to “Import ” tab
  8. Use the downloaded CSV file in import. If you used the same header names, it will automatically mapped.
  9. Follow the same process to bulk import more data

Pro tip: If you exceed the PHP upload limit and you do not want to/can not change php.ini file, try splitting the import file

Watch out for date or time attributes, the format of these attributes is very important. If you do not insert the required format, the data will not be displayed properly. Another issue is the usage of comas within strings. Make sure the data points with coma inside are wrapped with double quotes.

Let’s check out our default single view

Single views are designed to display single records. If you do not specify a custom view layout, WPAS creates a default layout. The default layout lists attribute label value combinations one after another excluding hidden attributes, based on the attribute order.

Pro tip: In a more complex case, you may want to create a single view with a custom view layout. You do not have to know how to code in HTML. You can use any post or page visual editor to create the outline of your view layout. After creating the layout, just put the app tags you need to the places you want.

Revisiting advanced filters

Since we uploaded some data, it is better now to show how advanced filter module helps us. Advanced filters is a powerful module which, you guessed it right, allows to filter out the data based on some criteria. For example, if I want to find out the bidders living New Jersey who also quoted me for more than $5000 for my car, I can create a filter for that.

In addition, if I want to track this criteria over time, I can save the filter. This feature allows me to see if the number increased, say a week from now without recreating the same criteria.

Contact form to get quotes

There are two types of forms in WPAS; submit and search. We did not create a search form for our app deciding to use Advanced Filters in the admin area instead. However, we created a submit form to collect quotes from the bidders.

Every WPAS form comes with its own shortcode. If you put this shortcode in a page, WordPress renders the form. Let’s think about a complex app with 20+ forms. How are we going to remember every shortcode? Well, good news! You do not have to. Since we enabled Visual Shortcode Builder(VSB) in the app design, it is available for our app.

Visual Shortcode Builder

 Visual Shortcode Builder allows us to create simple as well as complex shortcodes. A simple shortcode is the one without any parameters such as our contact form. A more complex one may have one to many parameters such as filtering attributes, taxonomies or relationships limiting the results to certain post ids. VSB can be accessed by clicking on the WPAS button any page.

Wrapping up

In this tutorial, I covered the very basics of a WPAS app. If you noticed, we did not write a single line of code, simply used the defaults. It is not the case for most commercial apps. As you learn more about WPAS WordPress development, you will more and more use custom HTML and JavaScript to enhance look and feel as well as functionality of your apps.

One way of learning how complex apps are developed is checking out at the available app designs. App designs allow us to document app requirements as well as simplifying how the generated code is structured. They are a great abstraction level for non-developer users. You can use app designs in your client walkthroughs or revisit how you developed a particular app.

In the upcoming tutorials, I will show creating more complex apps; adding a couple of taxonomies, relationships, and more sophisticated views.

 

A newbie intro to WordPress development using WP App Studio – Part I

In this tutorial, I am going to explain the basics of WPAS design and implementation workflow based on a mini project called “Give me a quote”. This article is a multi-part tutorial which aims to explain and incrementally build “Give me a quote” app, focusing on best practices of WPAS development life cycle.

Before we start

I assume that you:

  • have an active WordPress installation and can login as administrator.
  • downloaded and activated WP App Studio plugin.
  • joined a plan and have a valid development license
  • have experience using spreadsheets.
  • have some experience using WordPress.
  • have zero or some experience using WP App Studio.
  • have zero or some development experience.

Note: If you’re using FreeDev API access, some elements of the design(form and a couple of other things) will not be implemented in the generated code.

What I want to do

I want to sell my old car and decided to create a contact app to collect quotes from folks. Contacts are visitors who come to our “give me a quote” page and fill out the form. If I am lucky enough and get multiple quotes, I want to be able to pick the highest bidder and show his or her info on a page. The contact form will collect;

  • First name. It will store text. Required. Filterable.
  • Last name. It will store text. Required. Filterable.
  • Email. It will store text and should be a valid email. I want people submit one quote from the same email. Required. Filterable.
  • Mailing address(in case we want to ship the car). It’s collection of;
    • Street Address
    • City. Filterable.
    • State(two-letter state code). Filterable.
    • Zip code. Required. Filterable.
  • Phone number. I want to accept quotes from U.S only so it has to be a US phone. Required. Filterable.
  • Best time to call back; morning, noon, or evening. Filterable.
  • And off course the quote($). I will not accept values below $100. Required. Filterable.

I also have some existing quotes that I have collected through the phone and email. I want to be able to import these to my new app as well.

What I need to do

To be able to do all of this, I need to:

  • import the existing quotes and contact info into my new app
  • collect new contact information
  • store the collected contact information
  • display the collected information

How I should do it

Well, let’s start with the storing collected information. We need to store the contact info in a database and WordPress comes with one, .. or does it? Yes, it does. Database is the place that all the collected info will go and stay.

Does WP App Studio come with a database? The answer is yes and no. Yes, because it is part of WordPress so stores all the stuff in your app design in WordPress database. No, because it does not have a separate database. It is not relevant to our case because WP App Studio will create a plugin which will do the storing part for us and will not store the info itself. Just wanted to point out the difference between WP App Studio(WPAS) and the generated plugin.

Storing contact information

What do I need to complete this task in WPAS? The ones who answered “I need to create the app first” were correct. Yes, we need to create an app. I will name it “Request a quote” app. “Request a quote” will turn into a WordPress plugin which you will be able to download and activate, just like how you did with WP App Studio plugin.

Now, we need a place to store contact first name, last name etc. The info we are supposed to collect. As friendly reminder, this is the part we talked about “What I want to do(some people call this requirements)” section. What do we need for this? We need an storage place called entity.

Entities store information we care about. So let’s click on “Add new” and create one called “contacts”. We need provide 3 names; slug, singular, and plural of contacts. Ohh… click save as well, will you?

Pro tip: WPAS entities are implemented as custom post types and stored in wp_posts table of WordPress database. Attributes are stored in wp_postmeta table as meta_key/meta_value combinations.

Now, we got an entity called “Contacts”. Are we done? Not yet. Entities do not do anything for us, unless we define what they are all about. And we do that with attributes. Attributes give details of what the entity is going to store. So let’s hover on the contact entity and click on “Add attribute” quick link or click on “contact” and click on “Add New” button.

Let’s start with creating “First name” attribute. Put in name, label, pick type “Text”, and check “Visible in the admin list”.

Pro tip: It is a best practice to prefix name of the entity an attribute belongs to when defining its name such as contact_first_name. Why? It will be easier to find this info in post_meta table if you have tons of plugins.

Let’s go ahead and create the other attributes;

  • last name; the same first name. Required.
  • email; select “email” type since we want valid emails only. Let’s make it unique as well since we do not want people submit multiple quotes from the same email. Required.
  • address; text
  • city; text
  • zipcode; zipcode US. Required.
  • state; Select with two letter state codes in the values text area, separated with semi-colon.
  • phone; phone US. Required.
  • Callback time; Select with morning, noon, or evening in the values text area, separated with semi-colon.
  • Quote; Decimal with minimum of $100. Required.

Collecting contact information

We got our app, entity and entity attributes defined. The next step is to collect information from people. How do we do that? You guessed it right. We need to create a form. To be more specific; a submit form. We could have created a search form as well if we wanted people to see what other people quoted us.

In order to create a submit form, go Forms menu and click “Add New”. On the right hand side, put in “contact_submit” as the name, select “Submit” as type,  attach it to “Contacts” entity, and click Save.

This will create a submit form for us. We’re using the default form layout. The form field(attribute) order will be based on order of the entity attributes. If you’d like to change the order, just drag and drop the attribute to the location you want.

Pro tip: If you want to customize the form layout, click on “Edit Layout” quick link after hovering on the form name from the form list.

Displaying contact information

You know what…Let’s skip this and trust WPAS to give us a default layout. If we wanted to create, a specific layout, then we would have created a View. Views are used to display the collected information on your site’s frontend.

Wrapping up

I think we are done designing the first iteration of our project. Let’s go ahead and click on Settings menu > App info. We want to fill out the required(colored red) ones here. The info here will be used in coding and creating readme.txt file of our app.

The app name and text domain combo is exclusive to you meaning nobody can use the same combo. If you purchased ProDev account, your app name and text domain must match the ones you specified in the check out. Otherwise, you will end up will FreeDev version of your app. So double check these values not to unpleasantly surprised. See the screenshot for the values I put in.

We also need to modify Settings  > Misc tab to enable some features we want to use:

  • Uncheck “Remove Visual Shortcode Builder” – to enable Visual Shortcode Builder
  • Uncheck “Remove Filters” – to enable Advanced Filters
  • Uncheck “Remove PDF/CSV Export in Filters” – to enable PDF/CSV export of the selected records
  • Uncheck “Remove Operations” – to enable import/export from/to CSV

The next thing up is sending our design for code generation.  The green button on the top right screen with get you to the generation screen. You must have a valid license to be able generate code for your design. If you’ve not registered and got your license key, you should join a plan and activate your license key in Licenses page.

The next click on the “Generate” button.  If you got the green box saying that it will take “5- 10 minutes” to generate your app, you’re good to go. Sit back and relax because you were able to finish the first version of your WPAS app. I said the first version because software development is an iterative process and you may need to revisit the design add, delete or modify things to make it better.

In the next article, we will download the generated app(plugin), install,  and see what we ended up with.

Defining initial app settings

Settings page helps you define initial look and feel of your app as well as overall website. You add/remove specific modules such as operations, analytics, admin filters.

Based on the settings App info tab, a default readme.txt file generated. You can use this file to further add details of your app.



  • App Info: Create generic information about your app here.

  • Navigation: Enable or disable some navigation menus of WordPress.

  • Licensing: Set app license and optionally enable EDD licensing plugin configuration..

  • Dashboards: Enable or disable some dashboard widgets of WordPress.

  • Toolbar: Enable or disable some navigation menus on WordPress toolbar.

  • Login Screen: Customize login screen with your own logo.

  • Footer: Set backend footer sections; left and right.

  • Mail: Set system mail address and other related configuration

  • Misc: Set frontend and backend jQuery UI theme here. You can also remove operations screen, filters and columns block or enable custom reporting module(analytics), set app-wide css, and define app images.


Below are the configuration options provided in each tab. Click on the info icon for the field help.



Textdomain

Set a unique textdomain for your app. Textdomains are used in translations and plugin implementation. It can contain only letters and dashes, not more than 10 chars.

Site URL

Enter your the URL of site starting with http://

Site Name

Enter your blog’s title.

App Short Description

Enter a short description of the application

App Description

Enter a brief description of the application

Application Version

Enter the app’s version number.

Author

Name Of The Plugin Author

Author Site Url

URI of the application author.

Remove Filters

This option removes filters and columns bar on the post and page list screen. Unless you have a relationship, custom attributes,custom taxonomies or shortcodes attached to post or page.

Remove Operations

Allows to display or remove operations page and its button.

Remove Analytics

Allows to display or remove analytics module.

Customize Navigation menus

Allows to display or remove menus.

Display Dashboard menu

Allows to display or remove the dashboard menu.

Display Posts menu

Allows to display or remove the posts menu.

Display Media menu

Allows to display or remove the media menu.

Display Links menu

Allows to display or remove the links menu.

Display Pages menu

Allows to display or remove the pages menu.

Display Appearance menu

Allows to display or remove the appearance menu.

Display Tools menu

Allows to display or remove the tools menu.

Display Users menu

Allows to display or remove the users menu.

Display Comments menu

Allows to display or remove the comments menu.

Remove all default dashboard widgets

Allows to remove all the standard dashboard widgets.

Force the Number of Columns in Dashboard

Forces the number of columns in the admin dashboard widgets

Remove admin toolbar

Allows to remove admin toolbar

Remove all standard admin toolbar menus

Allows to remove all default admin toolbar menus.

Display backend only toolbar

Allows to display admin toolbar only in the backend.

Display toolbar for site visitors

Allows to display admin toolbar in the frontend.

Login logo image url

Enter login logo image url for the application. It is displayed above the login box. For best results, use an image that is less than 326 pixels wide.

Toolbar image url

Enter toolbar image url for the application. It is displayed in the admin toolbar. For best results, use an image that is 20×20 pixels.

Theme Type

Whether this entity is intended to be used publicly either via the admin interface or by front-end users. -false- Entity is not intended to be used publicly and should generally be unavailable in the admin interface and on the front end unless explicitly planned for elsewhere. -true – Entity is intended for public use. This includes on the front end and in the admin interface. Options are Smoothness, UI lightness, UI darkness, Start, Redmond, Sunny, Overcast, Le Frog, Flick, Pepper Grinder, Eggplant, Dark Hive, Cupertino, South Street, Blitzer, Humanity, Hot Sneaks, Excite Bike, Vader, Dot Luv, Choc, Black Tie, Trontastic, Swanky Purse

Left footer

Displays a message in the left hand side of the backend footer.

Right footer

Displays a short message such as application version number in the right hand side of the backend footer.

Mail FROM email address

Sets the FROM email address for the application wide emails

Mail FROM name

Sets the name of the sender for the application wide emails.

Set Admin Notice 1(WPAS 4.1)

Displays a primary admin notice to users upon plugin activation with a dismiss link.

Notice URL 1(WPAS 4.1)

Sets the url of the admin notice 1 linked to.

Notice Description 1(WPAS 4.1)

Sets the admin notice 1 message. Max 350 chars.

Set Admin Notice 2(WPAS 4.1)

Displays a secondary admin notice to users upon plugin activation with a dismiss link.

Notice URL 2(WPAS 4.1)

Sets the url of the admin notice 2 linked to.

Notice Description 2(WPAS 4.1)

Sets the admin notice 2 message. Max 350 chars.

Remove Visual Shortcode Builder (WPAS 4.3)

Visual Shortcode Builder allows to display or remove standard view filters in WPAS button list on admin edit page screen toolbar. Check to remove this capability.

Remove Filters (WPAS 4.3)

Allows to display or remove Filters and Columns component on admin entity list screens.

Remove PDF/CSV Export in Filters (WPAS 4.5.0)

Allows to remove PDF/CSV Export functionality in advanced filters.

Remove Operations (WPAS 4.3)

Allows to display or remove Operations page and its button. Operations page is used to visually import/export and reset content of a specific entity and available for admins only.

Remove Analytics (WPAS 4.3)

Allows to display or remove analytics component. Analtics component is used in WPAS button list on admin edit page screen toolbar. to produce summary calculations (SUM, COUNT, MEAN etc.) based on attributes, taxonomies, and relationships.

CSS (WPAS 4.3)

Adds app-wide css definitions. You can use this field to insert common CSS definitions.

Images (WPAS 4.4)

Enter semicolon separated image file urls starting with https. All files will available locally. You can point to the files using IMGDIR constant. Exp; IMGDIR/example.png.

Fonts (WPAS 4.6.0)

Enter semicolon separated font file urls starting with https. All files will available locally. You can point to the files using FONTDIR constant. Exp; FONTDIR/example.ttf.