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.
I assume that you:
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.
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;
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.
To be able to do all of this, I need to:
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.
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;
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.
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.
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:
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.
Loading...