This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
There are lots of things I’m not; I’m not four years old, I’m not Alaskan, and I’m not a fan of eating tripe. Importantly for today’s tutorial, I’m not an iOS or Android developer either. But thanks to GoodBarber I’m still going to develop and publish an app.
GoodBarber is a browser-based app creator. Its design tools and point-and-click interface are ideally suited for beginners.
Beyond helping non-developers create apps, GoodBarber is also a support tool for agencies who want to add mobile apps to their portfolios at a low pricing point. Recently GoodBarber released a guide (in the form of a free ebook) for actually marketing and selling apps as an agency.
“There is still a lot to consider when launching your agency, and this ebook will be your companion in navigating through the process.”
Right then, let’s get started and see how GoodBarber helps you build apps.
1. Setup an Account
Visit goodbarber.com and fill in your new app details. I’ve decided to build an app called “random” which I’ll use to publish random stuff.
Hit create your account (which is free for thirty days) and watch things get built.
My project can now be found at random.goodbarber.com (where I can login).
This step is mandatory, even for an agency looking to subscribe to the reseller program. By creating a project, you will have access to a 30 day free trial period that will allow you to test all GoodBarber’s features, and make sure it’s the right partner for your entrance into the mobile market.
2. Get Designing
With our app created, we’re told there are a few easy steps between us and production. First up, we need to design something. We’ll be concentrating on customising our app’s navigation, header, body (content), splash-screen, and its icon.
This all happens in a very intuitive design interface, with a preview of what we’re building in the centre of the canvas. To the right of the browser window are more things I need to do, broken down into logical steps and checked off as I complete them.
The first step is to choose from one of the many themes on offer. I’ve gone for “Classic Blue” because of its simplicity, and I can preview it before applying it to my app.
These are just defaults; during the next stages of design I’ll be given the opportunity to change the font, colours and so on.
As a reseller, you can opt to create a few demo apps—as many as your client’s portfolio requires (eg: Restaurants, Beauty Salons, Shops, etc.) and then replicate the project as many times as you want. This will speed up the design process, while still giving you the chance to customize the details for each client.
Off the Shelf, or Custom?
Smashing your way through the build process is easy thanks to all the templates available at each step of the way, but you can also build things manually if you prefer. The navigation design process, for example, gives you the choice of full screen grid menus, off-canvas slide-in affairs, tabs along the bottom of the screen, and so on.
But if you’d rather take control and get your hands dirty, you can build everything yourself with modern HTML. Markup snippets are provided so that you can link between each part of the app and write things properly.
Having the freedom to exit the guided path is very important for agencies who have very specific client requests to respond to. Access to the API settings, the HTML section, as well as the Plugin Add-On allow for deep customisation of the app, and the option to offer extra features to keep customers smiling.
Crikey, already?! Yes, if you’ve finished designing the layout, colours, navigation, grid, plus other details of your app, at this point you can submit it to the app stores of your choice. In our case there’s still a ton of work to do, but we could try and submit it, if we wanted to.
Recent changes will be displayed on the Changelog dashboard, so you can update whenever you’re ready.
4. Don’t Submit
Alright, we’re getting ahead of ourselves here. We may well have changed some colours, designed the nav, added an icon here and there, but we haven’t yet given our app any content.
What’s our app actually going to do? Under the Content section of the design process we can decide that by assigning content sources for the various page types. In each of the standard section types (articles, images, Twitter, calendar etc.) we can plug content in directly from standard sources. Our articles page can be populated with data from a WordPress blog, an RSS feed, a custom source, you get the idea.
To demonstrate, I’ll use the Tuts+ Web Design RSS feed (https://webdesign.tutsplus.com/posts.atom) and enter that in the section creation form. We can add up to 60 such sections.
Okay, looks good.
RSS feeds are simple; the content has been published and made open to grab and inject into our app. Other sources are less open (understandably) so some more verification is needed. Using a Twitter feed, for example, requires that the account owner create an “app” in order to get a Consumer Key, Consumer Secret, Access Token, and Access Token Secret. With those details, a Twitter feed can be pulled into our app without issue.
Anyway, on with the show, let’s continue designing the various pages in our (very simplistic) app, including the tutorial page, accessible through the app tree here:
Again, we can apply a template, alter colours and fonts, customise, and be on our way.
This faux-device preview is all well and good, and checking how the design is going as we work is very useful, but what does this app look like on an actual device?
The Preview button on the main canvas offers a number of devices, plus a QR code for launching in the native app.
Alternatively, download the GoodBarber app (iOS or Android), login with your account credentials, then you’ll be able to enter your app drafts directly from your device. Here’s one of our tutorial pages, along with the native app controls:
Once you’ve actually built your app, and published it, you can use the app to send push notifications and get usage stats.
One of the most important parts of the sales process of an app is the product demo; there is no doubt that your client will want to preview the application that will be representing their company before it goes public. This can be done, as mentioned above, with the back office preview, or through the My GoodBarber app. However, for optimal showcasing of the app with all its features (and without GoodBarber branding) generating the AdHoc version and sending this file to your client is the best option.
Alright, back to the submit stage.
When all’s done, and you’ve covered all your design and content bases, you’re ready to fire it at app stores. Take a look at the Submission options and you’ll see some handy checklists which you’ll need to complete before you can submit anything.
For this example we’ve failed at the first hurdle; not enough sections.
But when everything’s green, the submission process can either be done manually (by yourself) or you can hand responsibility over to GoodBarber and they’ll do it for you, for a fee.
In order to distribute and use your app, you’ll be granted certificates by the app stores. This layer of security prevents your app from being altered and distributed without your knowledge.
This stage in the process won’t be relevant until you’ve submitted and had your app accepted, but when that’s sorted you can manage your certificates from GoodBarber’s dashboard.
Either way, you will have to get a developer account for the platform(s) on which you want your app to be available. For resellers, this is a very important element in the choice of an app building platform, because it’s important to be sure that you have as little of an exit barrier as possible, in order not to limit your business’ growth. Inside the Agency Guide Ebook, you will find all the elements and the strategies you can choose from in the case that you need to transition from one service to another.
This has been a quick demo, but illustrates how effortless app creation can be with GoodBarber. Admittedly, more time and energy actually spent on the app and its design will increase the odds of it being accepted for distribution, but you get the idea.
If you’re thinking about using an app builder, for yourself or a client, take a look at the GoodBarber Agency Guide to get a good idea about the business side of things.
Have you used GoodBarber? Let us know your experiences in the comments!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post