Developing new iPad app with HTML5/CSS3/JavaScript

[dssource]

Hi all,

I'm a noob to the forums and to ios development. I've got a lot of experience in creating standalone web apps and have created on the blackberry platform. I have a new tablet idea that I want to be able to create across all major platforms and I want to create it using HTML5/CSS3/JavaScript.

I have started to look into the apple developer program, but man do they make it confusing. I don't want to use any of their software, other than to compile. It seems like I can't access their forums until I sign up for a license which i don't want to do until the app is finished or close to it. I'd like to be able to test on a simulator without having to pay the $99/year first. Blackberry makes it so much easier to develop web apps.

My questions: Can i create a standalone web app solely using HTML5? Is there a way to test in a simulator without signing up (The app is pretty complicated and if it takes a year I don't want to waste $99)? I want to create a base app that will work cross-platform then I'll tweak it slightly to optimize it per platform - is this possible with apple?

Thanks.

 

[chown33]

When you say "web app", exactly what do you mean? Do you mean "presented in the web browser"? Because if that's the case you don't need anything other than a text editor and a web server.

You can create a web app using nothing but plain HTML, CSS, and JavaScript. It runs in the web browser app (Safari) on every iOS platform. No simulator required, because it's all done in Safari directly. You can use all the standard techniques for detecting platform identity from JavaScript, and adjust your presentation accordingly.

https://developer.apple.com/devcenter/safari/index.action
https://developer.apple.com/library...plications/Conceptual/Safari_Developer_Guide/

There are also a bunch of different JS frameworks that can help.

 

[Darth.Titan]

You can download XCode from the App store for free. It includes the iOS simulator.

You don't have to be a paid developer to use or purchase XCode.

 

[fig]

You can download XCode from the App store for free. It includes the iOS simulator.

You don't have to be a paid developer to use or purchase XCode.

Beat me to it, but correct.

You might also check out PhoneGap, it lets you build a wrapper around HTML5 code to create an app (though chown33's comments apply as well).

 

[dssource]

I don't mean a website that's surfed to using the browser, no. It would be an app. A self contained app launched just like any other app. Needs no internet connection to run properly. It's written in the languages specified above.

I should have been more specific about the programs. I don't want to use xcode for anything other than for the final compilation before submitting it to Apple for review and to the app store. Plus, BIG plus, I don't have any kind of Mac device that can run xcode or any of these other programs that are Mac only. For the final compilation I would borrow a buddy's lappie and do what I need.

Developer forums also seem to be for paid programmers only as well.

 

[jtara]

Your development plan doesn't sound practical. Your friend is going to be unhappy when he never gets his Macbook back.

You can develop a webapp without needing XCode or an iPhone Developer account. The user can "Add to home screen". The app will run full-screen without browser controls, and will have an icon. It just won't be downloadable from the App Store. It is possible to write a webapp that doesn't need to access a web server, once it is loaded.

If you want to develop a true native app using HTML UI, then you will need to use PhoneGap, or something similar. And, as a practical matter, you are going to need a Mac to do development on. You won't be able to test without the Mac. I don't know anybody who can write code blindly and then just borrow a computer for a day for the "big compile".

Plus, your app will likely be rejected the first time you submit it, and then you will need another go-around, and probably another. And you will need the support forums that are only available to registered developers. Once you do submit your app, you need to pay the $99/year as long as your app remains in the store (it will be removed if you stop) so might as well start now.

And buy a Mac.

Yes, there are services that will build your app for you online. They are a royal pain in the kiester.

 

[jpine]

Hi all,

I'm a noob to the forums and to ios development. I've got a lot of experience in creating standalone web apps and have created on the blackberry platform. I have a new tablet idea that I want to be able to create across all major platforms and I want to create it using HTML5/CSS3/JavaScript.

I have started to look into the apple developer program, but man do they make it confusing. I don't want to use any of their software, other than to compile. It seems like I can't access their forums until I sign up for a license which i don't want to do until the app is finished or close to it. I'd like to be able to test on a simulator without having to pay the $99/year first. Blackberry makes it so much easier to develop web apps.

My questions: Can i create a standalone web app solely using HTML5? Is there a way to test in a simulator without signing up (The app is pretty complicated and if it takes a year I don't want to waste $99)? I want to create a base app that will work cross-platform then I'll tweak it slightly to optimize it per platform - is this possible with apple?

Thanks.

If you want to develop apps for iOS, you can't do it on the cheap by not signing up as a developer. Signing up is not a waste. You will need to develop using the mantra "Test early, test often." You can't do that if you don't test on an iOS devices (early and often). Simulators have their place, but don't bet the farm on them. There is no substitute for testing on a device. If you want to us HTML5, etc, you can look into PhoneGap and also Dreamweaver which can use PhoneGap to create iOS apps. BTW, Adobe now owns PhoneGap.

 

[dssource]

So here is my development plan.
Create all aspects of the app including images, coding, styles, etc. (the app is complicated so this will take a lot of time, maybe a full year, and I always make sure my apps are stable and thoroughly tested before distributing them) – this is why I don’t want to buy into the developer program now. I’d rather wait a year or until it’s close to complete. I will buy a license though, I’m not saying it’s a waste to buy, I mean it’s a waste to buy it now as I have no need for it now.
I will be constantly testing the app in a webkit browser like chrome (is Safari available for PC?). Also, doesn’t the ripple emulator have a phoneGap simulator? In my experience using ripple, they’ve done a pretty good job simulating.
Once the app is fully functional is the point where I would like to do some testing on an iPad simulator (other than ripple) and use the Apple tools like xcode to optimize the app for iPad.
After working out any tweaks (if any are found) I would then apply for the developer license through Apple, borrow my buddies lappie (who will be helping to build the app) and compile and submit for store inclusion.

-I’m an indie developer who does most of this stuff for fun. I can’t afford to buy a new Mac AND a tablet to create and test on. The simulator and webkit browser will have to do.
-You say that the app would likely get rejected the first time around, why is that? I’ve submitted plenty of apps and have never gotten rejected. I have solid expertise as a developer. I’ve been in the business for ten years so I know what I’m doing. I also have created and distributed a bunch of HTML5 standalone apps.

Would this work?

Jpine, jtara: Are you 2 developers?

Thanks for you responses.

 

[msharp]

Sorry to be raining on your parade, but having your own Mac is a must in this case. Without your own (or dedicated) Mac for development and testing, you'll either end up with a poorly-written/-tested app, or keeping your buddy's laptop forever. It's just a very time consuming work and you can't develop quality things without a dedicated computer for dev and test.

You'll have to have a guitar first to play guitar. Right?

Oh and yes, I am a developer.

 

[jtara]

-You say that the app would likely get rejected the first time around, why is that? I’ve submitted plenty of apps and have never gotten rejected.

Have you ever submitted an app to the Apple App Store?

Almost all apps are rejected on the first go-round. Based on your development plan, I suspect the first several.

Yes, I've been a software developer for 30 years.

----
If you're dealing with a lot of content that will take time to develop, sure, go ahead and do it first as a web app, and then you will be able to largely drop it into PhoneGap. But you aren't going to learn PhoneGap or how to build AND get it ready for the App Store in a day, or a week.

You could develop for Android using Windows or Linux, and then port to iOS later.

But saving $99 on the Developer Program is a false economy.

You don't need a new computer. I develop on a 2008 13" Aluminum Macbook with souped-up RAM - 16GB). You could develop on a Mac Mini which you can probably get for a couple hundred bucks.

You're going to spend a year on this, and you're not willing to spend $300?

I would get both now, because you are going to need them, and you are going to need time to get familiar with both the OS and the tools. This isn't going to happen in a day as you hope.

If the app is complicated, you might want to reconsider Phonegap. I don't know what kind of "complication" you are talking about, but a single-threaded Javascript environment may not be the most ideal. It depends, though, on what you are doing. You may find you need to write some native extensions. If so, you will need a Mac and XCode to write them.

FWIW, I use Rhodes (open source, from Motorola Solutions). It's an MVC framework that is similar to a Rails environment. It uses HTML/CSS/javascript for UI, and an embedded server with controllers and models written in Ruby. (The Ruby gets compiled-down to bytecode.) So, it is very similar to writing a Rails/HTML backend/frontend website. I can use threads (not on Android, unfortunately, but on iOS yes), import/adapt most RubyGems, etc.

 

[dssource]

msharp - I have a guitar, it's a PC. A $300 HP laptop. I am the only one working in the household of wife and 2 small children. I would have to register a business which would cost hundreds on top of the apple registration. So I will not be doing so until the app is just about ready for submission.

jtara - Why are most apps rejected on the first go? My apps are all well thought out, very well structured and simple to use. It would help to know what/why Apple is rejecting apps.

I feel my plan is solid, so there's really no reason it won't work other than the fact that a web app cannot standalone in the apple store and must have other pieces which must be created through xcode. You say create for Android and port over to iOS, that's exactly what I want to do.

I never said i would compile it in a day. Learning the RIM compiler system took a couple weeks. I expect similar for Apple.

A year being spent is only b/c my partner isn't available for a while so I figure if i create it slowly until he's ready; there's no harm in that.

I actually thought PhoneGap was just a simulator. I'll look further into it. Thanks for letting me know.

I don't know Ruby or Rails so that won't help me. The app idea will run fine with HTML5/CSS/JavaScript though.

So ignoring all the other stuff, can a standalone web app built solely with HTML5/CSS/JavaScript work on the iOS platform?

Thank you all for your help.

EDIT: BTW just checked ripple emulator and they do have a PhoneGap platform iPad simulator.

 

[jtara]

jtara - Why are most apps rejected on the first go? My apps are all well thought out, very well structured and simple to use. It would help to know what/why Apple is rejecting apps.

Apple has very specific requirements. You must meet every single one of them. Some relate to content/policy, some are technical (don't use private APIs, use backgrounding appropriately), some relate to UI, some relate to labeling/disclosure requirements, legal requirements in specific jurisdictions etc. There are requirements for your App Store listing. For trademark issues (want to get bounced fast? Use the Myriad Pro typeface. It's Apple's marketing typeface) or use an unauthorized photo of an Apple product. There are certain categories of apps that they simply will not accept ("we have enough fart apps already"). They will run some automated tests (mainly looking for use of private APIs). And there is a degree of individual descretion.

Nobody gets it the first time. They will tell you what you have to correct, and then you re-submit. When you re-submit, that's another opportunity for them to find something else wrong that they missed on the first pass. It's not just a matter of correcting what was found wrong. They are not simply going to check that you corrected what was asked. Your app is re-reviewed from scratch.

Do your research. If this is news to you, you haven't done any research.

I feel my plan is solid, so there's really no reason it won't work other than the fact that a web app cannot standalone in the apple store and must have other pieces which must be created through xcode. You say create for Android and port over to iOS, that's exactly what I want to do.

I actually thought PhoneGap was just a simulator. I'll look further into it.

Well, once again you haven't done your research. So, you are planning on using PhoneGap, and you have no clue what it is?

It is bascially a wrapper app for a UIWebView, which additionally exposes a number of device capabilities through Javascript. It supports iOS, Android, and maybe some other platform(s). You could write your own wrapper, with fewer capabilities, and then you would need to write native code to interface to any native capabilities you need to use.

So ignoring all the other stuff, can a standalone web app built solely with HTML5/CSS/JavaScript work on the iOS platform?

As I previously stated, you can load Webapps onto an iOS device. All you have to do is select "Save to Home Screen" from the browser. You need to write a manifest file so that it knows how to find all the pages on the server. (But if not, it will still cache pages as they are encountered.) The user will have an icon on the screen they can start the webapp from. They embed your pages in a little wrapper that gives you a full-screen UIWebView.

But these are not App Store apps.

 

[jpine]

So here is my development plan.
Create all aspects of the app including images, coding, styles, etc. (the app is complicated so this will take a lot of time, maybe a full year, and I always make sure my apps are stable and thoroughly tested before distributing them) – this is why I don’t want to buy into the developer program now. I’d rather wait a year or until it’s close to complete. I will buy a license though, I’m not saying it’s a waste to buy, I mean it’s a waste to buy it now as I have no need for it now.
I will be constantly testing the app in a webkit browser like chrome (is Safari available for PC?). Also, doesn’t the ripple emulator have a phoneGap simulator? In my experience using ripple, they’ve done a pretty good job simulating.
Once the app is fully functional is the point where I would like to do some testing on an iPad simulator (other than ripple) and use the Apple tools like xcode to optimize the app for iPad.
After working out any tweaks (if any are found) I would then apply for the developer license through Apple, borrow my buddies lappie (who will be helping to build the app) and compile and submit for store inclusion.

-I’m an indie developer who does most of this stuff for fun. I can’t afford to buy a new Mac AND a tablet to create and test on. The simulator and webkit browser will have to do.
-You say that the app would likely get rejected the first time around, why is that? I’ve submitted plenty of apps and have never gotten rejected. I have solid expertise as a developer. I’ve been in the business for ten years so I know what I’m doing. I also have created and distributed a bunch of HTML5 standalone apps.

Would this work?

Jpine, jtara: Are you 2 developers?

Thanks for you responses.

Yes! I'm a 53 year-old psychologist who took to developing when the economy went into the toilet. Best decision I've made in a long time.

 

[dssource]

Apple has very specific requirements. You must meet every single one of them. Some relate to content/policy, some are technical (don't use private APIs, use backgrounding appropriately), some relate to UI, some relate to labeling/disclosure requirements, legal requirements in specific jurisdictions etc. There are requirements for your App Store listing. For trademark issues (want to get bounced fast? Use the Myriad Pro typeface. It's Apple's marketing typeface) or use an unauthorized photo of an Apple product. There are certain categories of apps that they simply will not accept ("we have enough fart apps already"). They will run some automated tests (mainly looking for use of private APIs). And there is a degree of individual descretion.

Thanks for this. This is me doing my research btw. Talking to actual developers who have gone through the process is the best way to get a first hand experience and knowledge I find.

As I previously stated, you can load Webapps onto an iOS device. All you have to do is select "Save to Home Screen" from the browser. You need to write a manifest file so that it knows how to find all the pages on the server. (But if not, it will still cache pages as they are encountered.) The user will have an icon on the screen they can start the webapp from. They embed your pages in a little wrapper that gives you a full-screen UIWebView.

But these are not App Store apps.

Again, not what I want or was asking. It MUST be an app in the web store. It will be self-contained with no need to access the internet. All resources will be self-contained. Picture a small colour game that has images and calls on some form of local storage and uses javascript to create different scenarios for the user. You download it from the app store. It sits on your machine and starts up like any other app. It requires no internet connection to use. Just click the icon and it starts up.

Yes! I'm a 53 year-old psychologist who took to developing when the economy went into the toilet. Best decision I've made in a long time.

I was in another field before entering this field as well over a decade ago. Like a sales field. Hated it! Provided no sense of accomplishment. Now I love my job. I look into improving my skills all the time and always push my limits to do more and more. Not many people say they like their job and I can say I honestly LOVE mine! Glad you are liking it too.

 

[jtara]

Again, not what I want or was asking. It MUST be an app in the web store. It will be self-contained with no need to access the internet. All resources will be self-contained. Picture a small colour game that has images and calls on some form of local storage and uses javascript to create different scenarios for the user. You download it from the app store. It sits on your machine and starts up like any other app. It requires no internet connection to use. Just click the icon and it starts up.

It's called the App Store, not the Web Store.

A webapp will get you everything you want except for distribution through the App Store. Once it is initially loaded (when the user selects "add to home screen") all assets are copied to local storage. (Assuming you have written a manifest file.) Once it is initially loaded, the user can open it from an icon, and it can run without any Internet access. Internet access is needed only for the initial loading (just like an App Store app).

It would be a reasonable first step toward a real App Store app.

 

[dssource]

Unfortunately your still not understanding my requirement. It MUST be a NATIVE app sold through the app store.

I've been doing more reading and found some helpful resources online and books to find what I needed to know. http://html5formobile.com/ is a good book for those interested. Chp. 12, 13, 14 provide information on how to convert a web app to a native app sold through either the apple app store or the android app store. I'm sure its complicated the first time, but like everything else, practice makes perfect. No java or objective-c native coding experience needed.

Thanks all.

 

[960design]

Good luck!

IMHO ( worthless words follow ):
It seems to me that you are determined to fit the square peg in the round hole. I really do wish you good luck, but there are better ways of accomplishing your goals. I could get to Grandma's house several ways: skydiving from a dirigible, riding a horse, walking, crawling, but I choose the best method -> drive. Sure it's not free and I had to take a stupid test to be allowed to drive, but sometimes the effort pays for itself.

Again, you can absolutely accomplish all you are hoping for on your current path ( walking ), or you could drive ( learn a little objective c, lynda.com has a great tutorial and a free trial period, 30 days if I remember right, that should get you headed in the right direction ).

Please let us know when you get it finished, I'll try to be the first to congratulate you. 90% of all projects fail to complete. Be a 10% and try to make it easy on yourself.

just wishing you luck and rambling

PS testing has shown that html5/javascript converted to mobile apps take a huge performance hit

 

[Fugitivo]

I\'m sorry dssource but I really think you haven\'t thought this through. For what I understood you wanted to use languages and techs you already know to do a iOS app.

The thing is the \"Standalone iOS apps\" are built in Objective C, using the frameworks that apple made available for developers. So I think this is the general opinion here, there isn\'t a tool that would let you develop for iOS devices like Xcode, and since Xcode, as far as I know is only available for Mac os, it is mandatory for you to get a Mac os capable machine to be able to build and test.

My advice is, get a mac device, mac mini, older macbook, whatever you can put your hands on to develop. You can test your app on the device and simulate an iPad or an iPhone, you don\'t need to buy the iPad to test your app.

When you are finally happy with your app, then drop the 99$ and try to get the aproval. And really don\'t expect to get aproval on the first run. Even if you are the most perfectionist coder in the universe.

Good luck and again... buy a Mac.

 

[jpine]

I don't go the HTML5 route. I use the Corona SDK which developers use extensively for developing games. http://www.coronalabs.com It uses the Lua language. It's a free download to play with but hobbled. I don't use it for games, but for developing educational apps for mental health professionals. There is a great PhotoShop plugin for it from Kwiksher. So I actually create all my apps in PhotoShop. I rarely ever hand code any part of an app. Each PS layer is assigned a property such as a text layer to play a QT video, sprite sheet, or audio file. My point is that there ARE other options to HTML/JS. even if I wanted to hand code, Lua is much easier and faster than OC.