Home > UI Design and Prototyping > Turn your prototype into a native app

What you’ve been waiting for – build native apps in just a few clicks from your Justinmind prototypes using PhoneGap

Ever wondered what it would be like to create a real, living and breathing app from that prototype that you’ve put so much work into? Well at Justinmind we’re delighted to say you can now do this.

In conjunction with Adobe PhoneGap, you can turn your prototype into a fully stand-alone native mobile app that you can save on your device, upload to Google Play and the App Store, as well as share it with whoever you want.

To learn the benefits of generating a mobile app with our prototyping tool in little over a minute, read on.

What exactly is a native app?

In short, it’s the best type of app, because it’s coded in the developer language of your device’s operating system and can be made available on Google Play and the App Store, making it easier to reach your audiences.

PhoneGap Android and iOS native apps can be created - just export a prototype from Justinmind

But not only does their design mirror the iOS, Android or Windows platforms, they are also integrated with the device’s main utilities such as a phone’s contacts, camera and accelerometer (something that detects the phone’s location, tilt angle and position).

Native apps are far more effective in terms of speed than their cousins, the web apps. This is because they don’t need to rely on a browser’s load times and their assets are stored directly on the device. Web apps also don’t have access to the phone’s utilities mentioned above.

Lastly, native apps which connect to the internet generally tend to be much more secure than their browser-file cousins as they can avail of multi-factor authentication, according to David Bressler.

What’s great about generating native apps with Justinmind?

Well if we had to choose, we’d probably say the best thing is that you get a minimum viable product immediately!

“Woah”, you might exclaim with disbelief, “but creating a native app requires special developer skills, in addition to a lot of time and money”. We know. In fact, according to Comentum, a minimum ball park estimate of getting a small MVP native app could rack you up a bill of $9,000.

The idea, however, is that you’re not creating a native mobile app, you’re just creating a prototype of your app and generating – wait for it – “a free native app” and in turn gaining a minimum viable product. What’s more is, you can do it in just a few clicks. Read on to learn the major benefits of generating an MVP with Justinmind.

Get a native app from your prototype today with Justinmind

Download free

What is a minimum viable product?

An MVP is the most basic concept behind your idea generated into a real app. It provides the raw necessities needed to tackle the main problem you intend to solve. You can think of it as being a working, but incomplete version of your final intended product.

Get a minimum viable product immediately with PhoneGap after creating your prototype in Justinmind

Building an MVP is crucial to determining whether your product can actually be a success and what tweaks it needs in order for this to happen. Having this facility available to you at the start has many benefits if you’re using the Lean Startup methodology, designed to get your product off the ground in the quickest, most efficient way possible.

Cheaper, faster building and testing

Eric Ries, in his book The Lean Startup talks about the Feedback Loop as part of the Lean Startup methodology. In terms of app development it consists of three stages: learning, building and measuring.

If you’d like to learn more about this methodology, head on over to our Complete Guide to Lean UX post.

The learning stage of the process is where you do your research; you gather all your data and create your user personas. The next stage involves building your MVP and the final stage involves testing that product on people called “early adopters” who are a reflection of your user personas.

Generating native PhoneGap apps allows you to get through the Feedback Loop faster

This process can be repeated indefinitely until you get your product right. Eric states that the faster you can get through this process, the likelier your app is to succeed.

Generating a mobile app in Justinmind helps give you a head start on this process because it gives you an MVP instantly, saving the extra time and cost that it would normally take in development.

Imagine you have a lightbulb moment for an app that will plug a hole in the current market. You have ambitious plans with this app; it will solve one main problem in addition to having a plethora of other features.

Test out your app ideas by generating native PhoneGap apps with Justinimind

You’ve followed through on this idea and thoroughly researched the market. With this data you’ve created a user persona that represents the demographic your app will solve problems for. This is the pre-seed stage of the process, the learning phase.

With your user persona in mind, you start designing the perfect app to suit their needs. You see your idea coming to life – your prototype is evidence that your app design works. Now you’re at the seed stage and what you need is an MVP, which can be quite costly and time consuming as they require specialist programming skills and are consequently more expensive to build.

Normally, having an MVP at this stage depends on the amount of funding you can afford up to this point and it can have its risks. Consider that most of your funding at this stage would normally go into achieving that initial MVP, but Justinmind allows you to generate one in little over a minute.

This means breezing through the “build” stage and getting your product straight to your early adopters, who typically reflect your user personas and who care enough about the problem to give you honest feedback about your app.

Then, if there are changes that need to be made, or you need to pivot the product, it means that you haven’t squandered time and money getting your minimum viable product off the ground and can go straight back into Justinmind and change it.

Not only will this great feature save you time and money in getting your MVP off the ground, it can also work towards your investment pitch.

Bolster your investment pitch

According to the folks over at Appster, in today’s app market, there is a lot of money floating around but it’s very difficult to obtain. This is understandable given that in the third quarter of 2018 there were over 2.1 million apps on Google Play and over 2 million on the App Store.

Competition is fierce and ideas grow scarcer by the minute. Instead of investing small amounts into many different startups, investors prefer to inject larger amounts into those with more substance. As well as having done the necessary research into market needs, having a prototype can go a long way towards convincing investors. Having an MVP at this stage that you can test on early adopters can be what seals the deal.

According to YCombinator, a team of just five developers in Silicon Valley can set you back up to a million dollars or more, depending on the project. Being able to create a native app from a prototype offers you a safety net – instead of sinking all your funds into something that just can’t gain traction, you can create an MVP right off the bat at no extra cost and persist or pivot until you get your product right.

You can use your MVP to get financing for your app - Justinmind

Whatever funding avenue you choose to go down, whether it’s crowdfunding, angel investors, venture capitalists or even just funding obtained from friends and family, having an MVP to hand that has already been tested out is the ultimate step you can take to giving your idea that Teflon coat.

Native apps minus the hassle

As developing a native app from scratch can be quite costly and lengthy, many developers use a combination of PhoneGap and hybrid app development. Don’t worry – we’ll keep the coding talk short and sweet!

Hybrid apps are a variation of natives. They typically consist of HTML wrapped in some native developer code. Having this native developer shell allows the app to enjoy the full benefits of a native and qualifies it to be downloaded from Google Play or the App store.

Justinmind, however, doubles that benefit. How? By allowing you to create native-like experiences immediately, at zero cost. Using hybrid technology alone can take longer and cost more as developers have to mirror the design of each platform you want your app to be available on, without the relevant developer tools. Comentum estimates the damages for getting a small MVP out of hybrid development would normally sit in the range $10,000.

However, when creating your app prototype in Justinmind, you can avail of both full and up-to-date widget libraries for iOS and Android, rendering a large chunk of this process unnecessary. How awesome is that?

Justinmind prototypes for both iOS and Android can be quickly and easily assembled from iOS and Material Design 2 widgets and components that can are exported in HTML. They are then automatically converted to real iOS and Android code. Who said you can’t have your cake and eat it?

Get native PhoneGap apps from Justinmind prototypes

All you have to do is design your prototype in Justinmind and PhoneGap takes care of the rest. You simply export your finished prototype from Justinmind to the Build section of the PhoneGap website to get a freshly minted app.

How to get a native app from PhoneGap

Converting a prototype into a fully functioning native PhoneGap app with Justinmind is easy. After creating a prototype of your app in Justinmind, simply go to Files > Export to Native App. This will export the prototype to a file of your choosing on your computer (the default location being the desktop). When exporting a prototype from Justinmind, you’re essentially creating a .zip file of it in HTML.

After signing in to PhoneGap you can then upload your file which will be converted to the developer code of your choice, such as iOS or Android. You’ll have the option of downloading your native PhoneGap app in the form of an .apk or .ipa file using a QR code that gives you a link to download to your device, or if you’re more hardware inclined – with a USB cable.

For further details, see our user guide on Justinmind’s integration with PhoneGap.

Another cool feature in Justinmind allows you to generate an icon that fully encapsulates the personality of your app and brand identity. To do this, when viewing your prototype, go to the Simulation settings and you’ll see an option to change the icon, otherwise it will remain as the default icon (the PhoneGap image).

Once you’ve created your PhoneGap app, you can update it as often as you like. You’ll just need to repeat the straight-forward steps above. Obviously though, each time before exporting your prototype, a wise move would be to simulate the app as this will closely represent what will be reproduced in the PhoneGap app.

Start building native PhoneGap apps with Justinmind today!

As you can see, there are many benefits to generating a native PhoneGap iOS or android app out of a prototype. It can help get you through the feedback loop faster as it allows you to skip several steps in order to get your MVP, saving you time and money in the process.

It is also more likely to help your app idea succeed as you’ll be able to test out a real product on real users, in addition to having a more positive effect on investors.

What are you waiting for? Download Justinmind today and start creating your native app now!

Download free