FORUMS
Remove All Ads from XDA

How to create an Android app using HTML, CSS and JavaScript

13 posts
Thanks Meter: 1
 
By ali20142014, Junior Member on 18th May 2014, 08:28 PM
Post Reply Email Thread
Hello, I have a question on Android development. Personally, I know web development but I do not know JAVA programming because I am not into software development.

I want to develop an android app by using HTML5, CSS3 and JQuery Mobile. The app will be simple, it will be just an app on poetry where users will click some categories and read poems, and also search. That's all. It will be free, no registration, no ads and no server side. I want to use JQuery Mobile for this or even pure HTML5 and CSS3. In fact, HTML and CSS will be used of course.

Bear in ind that I am NOT converting an existing website into an app, but rather creating an app through HTML, CSS and JavaScript. So, the Web View tool is not appropriate here.



My questions are:

1/ Can we really create an APK with obly HTML, CSS or JavaScript?
2/ If we can create, what software (which is free) can I use to create the APK by compiling/converting my web pages?

Thank!
The Following User Says Thank You to ali20142014 For This Useful Post: [ View ] Gift ali20142014 Ad-Free
 
 
19th May 2014, 11:25 AM |#2  
Archer's Avatar
Inactive Recognized Developer / Retired Senior Moderator / (Un)recognised Pole Dancer
Flag Manchester
Thanks Meter: 4,241
 
10
More
Quote:
Originally Posted by ali20142014

Hello, I have a question on Android development. Personally, I know web development but I do not know JAVA programming because I am not into software development.

I want to develop an android app by using HTML5, CSS3 and JQuery Mobile. The app will be simple, it will be just an app on poetry where users will click some categories and read poems, and also search. That's all. It will be free, no registration, no ads and no server side. I want to use JQuery Mobile for this or even pure HTML5 and CSS3. In fact, HTML and CSS will be used of course.

Bear in ind that I am NOT converting an existing website into an app, but rather creating an app through HTML, CSS and JavaScript. So, the Web View tool is not appropriate here.



My questions are:

1/ Can we really create an APK with obly HTML, CSS or JavaScript?
2/ If we can create, what software (which is free) can I use to create the APK by compiling/converting my web pages?

Thank!


You'll need to go through the (sometimes painful) installation of Eclipse/Android Developer Tools and the Android SDK...

https://developer.android.com/sdk/in...ng/bundle.html


After that you can then do exactly what you are asking for with this...

http://cordova.apache.org/


I'm using that technology to create professional apps (as in, commercial apps for customers) using HTML5 & CSS, Javascript, jQuery and I opt for Bootstrap over jQuery Mobile as it's a lot lighter, but jQuery Mobile works fine with it too.

There's also PhoneGap, but that's just a rebranding of Cordova at the moment. They may branch out in different directions at some point, but at the moment there's no difference. The only advantage to PhoneGap is that you can point it at your source on GitHub and it will build online for you. Very handy if you want to do pure online development, but a bit messy.
19th May 2014, 12:18 PM |#3  
OP Junior Member
Thanks Meter: 1
 
More
Thank you for replying. I think I will try with the PhoneGap and Eclipse as you suggested. I have other questions:

1/ Even the APK will be developed using just HTML, CSS and JavaScript, how to notify the user an update is available through a notification method? I am not asking for tutorials, but just the steps.
2/ As you know, to view the source code of a website, a user will right click and view. As the APK will be developed using client side languages, will they be able to view the source codes in any other way apart decompiling?
20th May 2014, 04:17 PM |#4  
Archer's Avatar
Inactive Recognized Developer / Retired Senior Moderator / (Un)recognised Pole Dancer
Flag Manchester
Thanks Meter: 4,241
 
10
More
Quote:
Originally Posted by ali20142014

Thank you for replying. I think I will try with the PhoneGap and Eclipse as you suggested. I have other questions:

1/ Even the APK will be developed using just HTML, CSS and JavaScript, how to notify the user an update is available through a notification method? I am not asking for tutorials, but just the steps.

Your best bet is to let Google Play Store do all that for you. It means paying for a developer account, but it's not expensive and it means that people can get your app from the Play Store, which looks a lot more credible than a link and instructions how to allow 3rd party apps. Also, you push an update to the Play Store, and that pushes the update to all your users. You can't really ask for better than that.


Quote:
Originally Posted by ali20142014

2/ As you know, to view the source code of a website, a user will right click and view. As the APK will be developed using client side languages, will they be able to view the source codes in any other way apart decompiling?

They can't do anything as simple as "View source" as all the files are embedded in the application, but they can decompile it and get at your source that way, but there's nothing to stop someone doing that with an APK anyway. They best thing would be to develop your app till your happy with it, and then obfuscate the crap out of the html, css & js files. Sure someone could decompile the app and get your source, but they'd really struggle to do anything with it.

Have a play with it and see if it's any good for you. It really does make it simple for a developer with web experience to make apps.

Also, if this is of any use, I made a guide for developing and building Phonegap Android apps purely online, without any SDK or IDE installation. It's not ideal as debugging would be a nightmare. I mostly made it as reference for myself, but check it out anyway...

http://johncmolyneux.blogspot.co.uk/...ps-online.html
The Following 2 Users Say Thank You to Archer For This Useful Post: [ View ] Gift Archer Ad-Free
30th May 2014, 09:44 AM |#5  
OP Junior Member
Thanks Meter: 1
 
More
Sorry for the late reply. Can I know where is the APK file is stored?
2nd June 2014, 05:51 AM |#6  
opssemnik's Avatar
Senior Member
Flag Porto Alegre,Rio Grande Do Sul,Brasil
Thanks Meter: 1,035
 
More
Quote:
Originally Posted by ali20142014

Sorry for the late reply. Can I know where is the APK file is stored?

/data/app/packagename-1.apk
14th June 2014, 05:04 AM |#7  
Junior Member
Thanks Meter: 1
 
More
You tube is your friend
Just do a youtube search with these key words "html5 webview android" and you should be able to find everything you need to know on how to build your html5 powered app

Google offers a "ProGuard" solution on how to mask your code by obfuscation. Good luck!
17th June 2014, 12:52 AM |#8  
Senior Member
Thanks Meter: 38
 
More
You can also use phonegap build to build your web apps without using eclipse.
22nd June 2014, 12:47 PM |#9  
arun483's Avatar
Senior Member
Thanks Meter: 176
 
Donate to Me
More
You can't make an app using HTML and all these web developing languages but you can simply make a responsive website (I hope you know that) and then integrate that website into the android app. You may also add something like that once a user opens app once his app will connect to your website and then download the files offline for future offline use.
23rd June 2014, 12:05 AM |#10  
Senior Member
Thanks Meter: 38
 
More
You can make fully functional games and apps with HTML + Javascript. Once you learn a the basic's you can use the framework I posted here to make a quiz game. As you learn more you can make small puzzle games and action games but that takes time to learn. Start by using this framework to build a game.

http://forum.xda-developers.com/show....php?t=2785378

And if you dont know how to use eclipse then use phonegap build it will build the game for you and the 1st game is free with their service.
4th July 2014, 10:26 PM |#11  
Member
Flag Bangkok
Thanks Meter: 4
 
More
Sorry, just saw this now... i could have saved you a bit of hassle

If you really dont want to make a deep dive and stay with your current skills theres a really great way to do so (no, im not involed in the project and wanna advertise it i just use it and love it).

Theres really great tool from Intel, named Intel XDK. This thingy lets you easyly use either the Intel based framework (thats really fast and depending on how you "build" the app at the end you get native code, not just an simple AKP that displays content in a webview.).

The above mentioned Cordova is also a build option, so if you already learned about that, you can still use it in here. You can also make the userinterface of your app in a drag&drop IDE that saves you TONS of time.

Check here for some easy examples:
http://app-framework-software.intel.com/components.php

The very best comes at the end, you dont have to care ONE BIT about installing anything on your machine, all build stuff is done on Intel servers. You code the app, decide on a way to build it (Cordova, Android, iOS or whatever) and you get an APK out of it. Whats more, you can test/debug directly on device, in browser or any other possible way.

If you dont want to learn the appfraework (whats is basically just like jquery, you dont really have to "learn" it if your familiar with javascript) or use other known frameworks like jQuery mobile. Best is, you can still use the IDE-Designer even with jQuery. So you can for example choose jquerymobile framework and but in a nvigation layout just with drag&drop. Of course you als have a standard Code-View with autocompletion and all if you want.

Take alook, its awesome...

The reason why i post this here that tere is one flaw (in my opinion), the documentation is not the best (its there of course, full API guides and all) and the Intel foum is not really active, since noone really knows about it it seems. If more ppl use it the community could be great and starters have a really easy tool at hand to get into the world of mobile-development.
The Following 2 Users Say Thank You to Saenchai For This Useful Post: [ View ] Gift Saenchai Ad-Free
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes