Turning a Prototype into a real app
Hi. If I export my prototype as a HTML file, could a developer use this file as the basis for creating the real app? ie, are all the images, icons and Events code exported with the HTML file, which could then be included in the codebase for the actual workable app?
Is the HTML file the best way to export this information?
thanks
Justinmind provides several options to get you on your way to creating a real, working application from your prototype.
Option 1: Export your prototype to a native app using PhoneGap. Learn more about this here.
Option 2: Use the API/SDK to generate some interface code. Learn about this here.
Option 3: Export your prototype to HTML (File -> Export to HTML), which will generate a document with folders including HTML, javascript, and CSS.
Option 4: Use Developer Mode. Your developer can check out the CSS and other assets within the prototype.
Justinmind provides several options to get you on your way to creating a real, working application from your prototype.
Option 1: Export your prototype to a native app using PhoneGap. Learn more about this here.
Option 2: Use the API/SDK to generate some interface code. Learn about this here.
Option 3: Export your prototype to HTML (File -> Export to HTML), which will generate a document with folders including HTML, javascript, and CSS.
Option 4: Use Developer Mode. Your developer can check out the CSS and other assets within the prototype.
You can try phonegap or you can try to code your own export plugin as well https://www.justinmind.com/api-sdk
You can try phonegap or you can try to code your own export plugin as well https://www.justinmind.com/api-sdk
Hey Victor,
Not sure about about writing own plugin but can you please explain about how to use PhoneGap to get this done ? as i need a ready made skeleton converted from html clickables into android supportable format so that i can fedd directly into android setup in eclipse to get started for further app development, this way i can at least eliminate rework creating android support UI. Please help.
Hey Victor,
Not sure about about writing own plugin but can you please explain about how to use PhoneGap to get this done ? as i need a ready made skeleton converted from html clickables into android supportable format so that i can fedd directly into android setup in eclipse to get started for further app development, this way i can at least eliminate rework creating android support UI. Please help.
I'm sorry but I don't know how to use PhoneGap.
I'm sorry but I don't know how to use PhoneGap.
No problem, thank you very much.. I found it.
No problem, thank you very much.. I found it.
You need a developer. That developer can also create a plug-in to export all prototype's information into the technology they like https://www.justinmind.com/api-sdk so they don't have to start from scratch.
You need a developer. That developer can also create a plug-in to export all prototype's information into the technology they like https://www.justinmind.com/api-sdk so they don't have to start from scratch.
so i couldnt just export to html then use phone gap to distribute on all platforms? What would i have to change in the html file to use phonegap? Thank you
so i couldnt just export to html then use phone gap to distribute on all platforms? What would i have to change in the html file to use phonegap? Thank you
Sure, you can use phonegap if you like. You just have to export the HTML of your prototype without the comments panel and then use it in phonegap.
Sure, you can use phonegap if you like. You just have to export the HTML of your prototype without the comments panel and then use it in phonegap.
i tried exporting the prototype to html then uploading it to phonegap. is there something im missing its not working correctly
i tried exporting the prototype to html then uploading it to phonegap. is there something im missing its not working correctly
Hello kushal i am having the same problem may i ask what is your solution? Thank you
Hello kushal i am having the same problem may i ask what is your solution? Thank you
Well, you need to learn a bit about how to use phonegap.
Well, you need to learn a bit about how to use phonegap.
Hi Todd,
The purpose of the 'Export to HTML' feature is to share your prototype with other people without the need of Justinmind Prototyper, but not to create a final working application. Remember that Justinmind Prototyper is a prototyping tool, a communication tool to define your application. The development should be another process.
Hi Todd,
The purpose of the 'Export to HTML' feature is to share your prototype with other people without the need of Justinmind Prototyper, but not to create a final working application. Remember that Justinmind Prototyper is a prototyping tool, a communication tool to define your application. The development should be another process.
You can also generate your own code using our API: https://www.justinmind.com/api-sdk
You can also generate your own code using our API: https://www.justinmind.com/api-sdk
What do you mean by generate my own code? Anyway, I think it is high time JIM exports production ready semantic codes that can be transferred to the business logic guy (back-end developer) to plug in necessary dynamic data to replace ui placeholders.
Prototyping takes a long time to create, plan, review, get approval from client then start recreating all over again. It doesn't make sense , cost too much time, manpower and money. Please kindly look into this. It would make the whole prototyping, UI market happy.
What do you mean by generate my own code? Anyway, I think it is high time JIM exports production ready semantic codes that can be transferred to the business logic guy (back-end developer) to plug in necessary dynamic data to replace ui placeholders.
Prototyping takes a long time to create, plan, review, get approval from client then start recreating all over again. It doesn't make sense , cost too much time, manpower and money. Please kindly look into this. It would make the whole prototyping, UI market happy.
In fact, you guys should be leading the pack by revolutionizing prototyping instead of giving some lame excuses that ' Remember that Justinmind Prototyper is a prototyping tool, a communication tool to define your application. The development should be another process.'
In fact, you guys should be leading the pack by revolutionizing prototyping instead of giving some lame excuses that ' Remember that Justinmind Prototyper is a prototyping tool, a communication tool to define your application. The development should be another process.'
It's not an excuse. You must know Justinmind started that way, as a tool to generate web applications. The thing is nobody wants a code generated by a machine because it's too hard to maintain and understand. The problem is not the first time you generate that code but if you want to regenerate after doing manual changes on that code. Furthermore we can't just generate in any kind of technology you want nor any kind of framework. Some people would like to generate for Twitter Bootstrap, others for Android 4.2, others for Struts and Oracle database, etc. So, the only thing we can do in that way is to give an option to all the users to generate in any technology they want to using our tools for developers: https://www.justinmind.com/api-sdk
It's not an excuse. You must know Justinmind started that way, as a tool to generate web applications. The thing is nobody wants a code generated by a machine because it's too hard to maintain and understand. The problem is not the first time you generate that code but if you want to regenerate after doing manual changes on that code. Furthermore we can't just generate in any kind of technology you want nor any kind of framework. Some people would like to generate for Twitter Bootstrap, others for Android 4.2, others for Struts and Oracle database, etc. So, the only thing we can do in that way is to give an option to all the users to generate in any technology they want to using our tools for developers: https://www.justinmind.com/api-sdk
I have to mostly agree with Todd. Over a decade ago, Codecharge would generate 7 different web languages from an application prototype/mockup. I know, because I wrote a VBscript to traverse an Access database and generate the Codecharge XML file for it...around Y2K,
JIM does a lot of cool stuff...like responsiveness, multi-device, etc., but it is too labor intensive. If I have a sample database for a CRM system, for example, I should be able to import that SQL dump and get a working prototype...not manually create 15 "Data Masters" and manually import the data, then manually drag them onto the canvas....just working, so that I can start tweaking colors and menus, etc.
I could just plug that SQL or DB into a PHP code generator, but then I wouldn't get the JIM features above, or documentation generation, etc. I would also have to program all the validations and interactions in PHP, not in the GUI.
I LIKE JIM, maybe more the idea of it than the reality, but I like it nonetheless.
I think that you guys are slacking a bit. If you produced a plugin to do what I did for Codecharge, you'd be well on your way to a truly revolutionary product. Now...well I want to LOVE it, but I only LIKE it.
Update: To be fair, a lot of Axure users are frustrated about almost exactly the same issue: http://www.axure.com/forum/repeater-w... , and it looks like they only got copy and paste of data in a recent build.
I have to mostly agree with Todd. Over a decade ago, Codecharge would generate 7 different web languages from an application prototype/mockup. I know, because I wrote a VBscript to traverse an Access database and generate the Codecharge XML file for it...around Y2K,
JIM does a lot of cool stuff...like responsiveness, multi-device, etc., but it is too labor intensive. If I have a sample database for a CRM system, for example, I should be able to import that SQL dump and get a working prototype...not manually create 15 "Data Masters" and manually import the data, then manually drag them onto the canvas....just working, so that I can start tweaking colors and menus, etc.
I could just plug that SQL or DB into a PHP code generator, but then I wouldn't get the JIM features above, or documentation generation, etc. I would also have to program all the validations and interactions in PHP, not in the GUI.
I LIKE JIM, maybe more the idea of it than the reality, but I like it nonetheless.
I think that you guys are slacking a bit. If you produced a plugin to do what I did for Codecharge, you'd be well on your way to a truly revolutionary product. Now...well I want to LOVE it, but I only LIKE it.
Update: To be fair, a lot of Axure users are frustrated about almost exactly the same issue: http://www.axure.com/forum/repeater-w... , and it looks like they only got copy and paste of data in a recent build.
We have used your tool to create a prototype that clicks through the pages and lets you navigate the whole website. We aren't interested in any physical appearance, but more the page structure and where links and buttons navigate to throughout the site. Is any of this usable into the development of the final site?
We have used your tool to create a prototype that clicks through the pages and lets you navigate the whole website. We aren't interested in any physical appearance, but more the page structure and where links and buttons navigate to throughout the site. Is any of this usable into the development of the final site?
My colleague made a prototype using Justinmind.
Now I added some little Javascript in the generated code to execute a server side event and get some data in one field in the UI.
I succedeed in adding the Javascript - it does not yet update the finld (textarea or what ever) but does the server side event and gets the meassge.
I think this kind of doing some small changes in the generated HTML is still in the scope of using Justinmind.
My colleague made a prototype using Justinmind.
Now I added some little Javascript in the generated code to execute a server side event and get some data in one field in the UI.
I succedeed in adding the Javascript - it does not yet update the finld (textarea or what ever) but does the server side event and gets the meassge.
I think this kind of doing some small changes in the generated HTML is still in the scope of using Justinmind.
PHPRunner does a great job at generating the working CRUD (and a bit more) functionality for a given database, automatically. Perhaps there's a way to combine the two outputs.
PHPRunner does a great job at generating the working CRUD (and a bit more) functionality for a given database, automatically. Perhaps there's a way to combine the two outputs.
You can hire one of these Justinmind specialists as well https://www.justinmind.com/experts
You can hire one of these Justinmind specialists as well https://www.justinmind.com/experts
So I'm a designer who wants everything on the table, and then I start figuring out the puzzle. I have ''the formula'' in mind (object of web site, supporting events, and so on) but having the logo, content, graphics and videos to be used is how the design appears... and knowing what device it will be viewed on is most important now-a-days. Having said that, these wireframes seem like a wrong approach to me. Designing without content is a pretend scenario. Its like buying a template and then spending hours and hours undoing the code so everything the customer wants can fit. I would rather it be a custom design all the way, so I need the pieces of the whole enchilada before I can figure out the puzzle. So far wireframe means double the work. God gave me a mouth and a brain to find out from the customer what they need, what their goals are, and what their content management is. I'm excited about responsive web design, but it seems there's a few steps missing from wireframe to finished web presence -- Am I wrong in this perception? Looking for advice and answers!
So I'm a designer who wants everything on the table, and then I start figuring out the puzzle. I have ''the formula'' in mind (object of web site, supporting events, and so on) but having the logo, content, graphics and videos to be used is how the design appears... and knowing what device it will be viewed on is most important now-a-days. Having said that, these wireframes seem like a wrong approach to me. Designing without content is a pretend scenario. Its like buying a template and then spending hours and hours undoing the code so everything the customer wants can fit. I would rather it be a custom design all the way, so I need the pieces of the whole enchilada before I can figure out the puzzle. So far wireframe means double the work. God gave me a mouth and a brain to find out from the customer what they need, what their goals are, and what their content management is. I'm excited about responsive web design, but it seems there's a few steps missing from wireframe to finished web presence -- Am I wrong in this perception? Looking for advice and answers!
If you are doing websites, it's pretty trivial to do mockups in WordPress using Visual Composer. See my previous post regarding mockups of database apps.
Using JIM does provide the ability to document what was agreed upon, and generates those documents pretty quickly. This alone can save a lot of grief with certain clients who like to change their minds a lot, but not pay for revisions.
There's no one set of tools that's perfect for every user or situation- that's probably why there are so many.
If you are doing websites, it's pretty trivial to do mockups in WordPress using Visual Composer. See my previous post regarding mockups of database apps.
Using JIM does provide the ability to document what was agreed upon, and generates those documents pretty quickly. This alone can save a lot of grief with certain clients who like to change their minds a lot, but not pay for revisions.
There's no one set of tools that's perfect for every user or situation- that's probably why there are so many.
Believe it or not your answer has really relieved me of a lot of stress. I have been obsessing about responsive web design because I think its so important. I started seeing the need some years ago, when i saw my family's love affair with cell phones and how rapidly they advanced. Now, I think any business that does not have a responsive web site is out to lunch: over 50% of people and probably more use them, tablets, laptops and desktops... the consumers have gone mad! [finally... that leaves room for us to help them more!] I have tried hand coding (way to much time for this non-programmer gal and too much room for error) and I've been investing these programs: MACAW, Coffeecup Responsive Design, Foundation -- there are missing pieces to the work flow I'm just not grasping. Your answer put a lid on that and put it in perspective. Thanks for your quick answer!!!
Believe it or not your answer has really relieved me of a lot of stress. I have been obsessing about responsive web design because I think its so important. I started seeing the need some years ago, when i saw my family's love affair with cell phones and how rapidly they advanced. Now, I think any business that does not have a responsive web site is out to lunch: over 50% of people and probably more use them, tablets, laptops and desktops... the consumers have gone mad! [finally... that leaves room for us to help them more!] I have tried hand coding (way to much time for this non-programmer gal and too much room for error) and I've been investing these programs: MACAW, Coffeecup Responsive Design, Foundation -- there are missing pieces to the work flow I'm just not grasping. Your answer put a lid on that and put it in perspective. Thanks for your quick answer!!!
sooo even if i develop a kick ass prototype that contains a highly categorized search engine and customer relationship management tools for both users and clients, it won't be easy to transfer it into actual development?
sooo even if i develop a kick ass prototype that contains a highly categorized search engine and customer relationship management tools for both users and clients, it won't be easy to transfer it into actual development?
Hi Evan,
Justinmind will generate either .vp files or .png files of your screens. You can use those .png files in an app you create, but they won't have any default functionality or events.
Best,
Danielle
Hi Evan,
Justinmind will generate either .vp files or .png files of your screens. You can use those .png files in an app you create, but they won't have any default functionality or events.
Best,
Danielle
Thanks Danielle. I also noticed you have an API. Would this be a better resource for a developer to use when developing an app from a JustInMind proto?
Thanks Danielle. I also noticed you have an API. Would this be a better resource for a developer to use when developing an app from a JustInMind proto?
Hi Daniella. Did you have any thoughts on the significance of your API for developers when turning a proto into the real thing?
Hi Daniella. Did you have any thoughts on the significance of your API for developers when turning a proto into the real thing?
Hi there,
The API can help with seeing how the events and dialogs work out with code within Justinmind. The HTML, CSS, and the API will all be helpful for developers to turn their prototypes into real working applications.
Best,
Danielle
Hi there,
The API can help with seeing how the events and dialogs work out with code within Justinmind. The HTML, CSS, and the API will all be helpful for developers to turn their prototypes into real working applications.
Best,
Danielle
@victor! thanks for this answer..!! It has been a while since this post.. Do you have any tutorial on how to export to xml?
@victor! thanks for this answer..!! It has been a while since this post.. Do you have any tutorial on how to export to xml?
This tool exports valid HTML for use in Chrome via the extension, but it's not allowed to have it lose the JIM prototype menu UI?
We're not trying to be harsh or mean - we're saying you have a serious product on your hands if you can add an extra, 'Export to Production HTML' option with stripped down options for the backend guys.
This tool exports valid HTML for use in Chrome via the extension, but it's not allowed to have it lose the JIM prototype menu UI?
We're not trying to be harsh or mean - we're saying you have a serious product on your hands if you can add an extra, 'Export to Production HTML' option with stripped down options for the backend guys.
Hi Charlie,
Thank you for your suggestion. I will add your idea on our product backlog so our engineers can take into account for future updates.
Best,
Sonia Durán
Hi Charlie,
Thank you for your suggestion. I will add your idea on our product backlog so our engineers can take into account for future updates.
Best,
Sonia Durán
Hi Danielle
Are there any tools to use the same prototype elements and help the developers to use the same in building the actual apps? Is there a way to use these prototypes into real files for UI screens.
Thanks
Hi Danielle
Are there any tools to use the same prototype elements and help the developers to use the same in building the actual apps? Is there a way to use these prototypes into real files for UI screens.
Thanks
You can use this service https://gonative.io/
You can use this service https://gonative.io/
hi this is mugesh , can we convert the justinmide prototype into the Javascript ?
for android app development..
hi this is mugesh , can we convert the justinmide prototype into the Javascript ?
for android app development..
Justinmind provides several options to get you on your way to creating a real, working application from your prototype.
Option 1: Export your prototype to a native app using PhoneGap. Learn more about this here.
Option 2: Use the API/SDK to generate some interface code. Learn about this here.
Option 3: Export your prototype to HTML (File -> Export to HTML), which will generate a document with folders including HTML, javascript, and CSS.
Option 4: Use Developer Mode. Your developer can check out the CSS and other assets within the prototype.
Justinmind provides several options to get you on your way to creating a real, working application from your prototype.
Option 1: Export your prototype to a native app using PhoneGap. Learn more about this here.
Option 2: Use the API/SDK to generate some interface code. Learn about this here.
Option 3: Export your prototype to HTML (File -> Export to HTML), which will generate a document with folders including HTML, javascript, and CSS.
Option 4: Use Developer Mode. Your developer can check out the CSS and other assets within the prototype.
Replies have been locked on this page!