Using HTML to build phone application - android

I have tried some App Builder to build the mobile application such as Seattle Cloud, now I want try to build an android application without using the App Builder, but I figured out the page's extension is .HTML in the App Builder, but when I using Android Studio to build the app, the layout is using XML. I have experience to develop web application using PHP and now I want try to build an Android Application to view information from my web application, I feel confused, How should I start?

You can use Phonegap for hybrid app development using web technologies such as CSS, HTML, JavaScript and jQuery.
Other similar options available are Titanium SDK and Sencha Touch, but you will take time to get well with them. They are better than Phonegap in some areas, also device api support is available.
Whatever framework you use to build hybrid apps, you will have their respective js files and css to achieve functions. Some combine with PhoneGap in the end to use device api's, so it is better to go with PhoneGap or something like Titanium or Sencha. You may also have a look at Ionic framework, it uses AngularJS, HTML and CSS.

Use WebView. It's a view that displays web pages. You can use local html files as well as a URL. For more information:
http://developer.android.com/guide/webapps/webview.html

Android works in a very different compared to web apps. the design of the application is done in XML which will create native UI components and will be much faster the HTML counterparts.
There are different frameworks for developing an android app based on HTML/JavaScript
Sencha touch
Phonegap
Appcelerator Titanium (Although this may not be a pure HTML framework)
see: How to create an android app using HTML 5
But compared to apps based on HTML frameworks, native apps will be faster, consumes lower memory.
Visit http://developer.android.com/training/index.html to get started.

Related

How does Cordova convert my code to mobile

I have some questions.
Question 1) I know that Cordova is written in plain js. Ionic team stood up and decided to wrap the Cordova plugin and usage of that by writing typescript code and also in Angular. so ionic sits on top of Cordova. both are frameworks, but Cordova is much deeper. Am I right?
Question 2) which one really can convert my code to mobile code? I know mobiles can't understand js/html/css without browsers. So something converts my Ionic code to something. a) what does my code get converted into? b) what really converts my code?
I'm starting ionic development and really wanted to know this first.
Ionic its just a mobile development framework so that you can use design components as well as other plugins for developing an application.
When we refer term Cordova its a main core It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.
Architecture
There are several components to a cordova application. The following diagram shows a high-level view of the cordova application architecture
Web view
The Cordova-enabled WebView may provide the application with its entire user interface. On some platforms, it can also be a component within a larger, hybrid application that mixes the WebView with native application component
Web App
This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.
For more understanding please visit this article
https://cordova.apache.org/docs/en/latest/guide/overview/

Multiple questions about the process of converting a website to an app

I have a simple test website and I want to convert it to an app using some software.
Which converter is good to use? cordova, framework7, PhoneGap and...? I myself prefer to use cordova, what's your idea?
If I want not to use above converters and program it myself using Android Studio, how much time do I need to learn (not completely) to have a simple app?
Can I use jQuery and bootstrap instead of jQuery mobile for just styling and some Ajax call which is using only json? because I think I can do what animation/transition I want with jQuery and the styling with bootstrap. Is there any need for jQuery mobile?
Is jQuery excess when we can use JavaScript? Doesn't it load lots of data not needed?
Phonegap is based on Cordova, so both are similar. either you pick up gonna be similar.
If you're going to learn from scratch native Android and depending of complexity of the app, this could take a considerable time.
I've tested jQuery (not jQuery Mobile) in cordova applications, making AJAX callings and it worked well. So I don't see any problem to use it together with bootstrap for your project.
jQuery mobile gives you elements to make your app looks like a real native app, and if you download the whole package this is not so light, there is other option like ionic (this works with Angular).

Have difficulty understanding phonegap android vs webview

I have a problem understanding how phonegap works and i cannot find the answer in docs.
I installed phonegap on windows and phone device and played around with codes in www/* folder.
However, when I use phonegap-build to make my android app it extracted the files from platforms/browser but not the www/*
I know it sounds stupid but should i make different apps for different devices in different folders?, i know this cannot be true. so my question is:
If I make an app inside www/index.html how can I convert them to android .apk app?
Android WebView used to display web pages in native applications. But, Phonegap is a tool which is used to develop hybrid applications using html and javascript. Don't confuse with Android webview and phonegap. Both used for different purpose. You have to use separate folder for each projects.
Converting Your Phonegap App to an Android App w/ PhoneGap
Difference between a native application and a cross-platform mobile application

Building the app for Web also

Can Nativescript build apps for web as well?
As Ionicframework and similar uses Cordova to build Android and iOS the same code there can be served by an HTTP server to the mobile or desktop browsers.
Will that be possible with the apps built with Nativescript, using same code base for web version of the app?
Nowadays Angular integration is on the way, and using Angular for the mvc kind of things (like data bindings, events etc.) and using Native for the device apis, platform apis and native gui would help in an unequaled way.
Angular parts can be used in the browser as well when built for it. What to do with the xml written for the gui templates in Nativescript, they could be converted to proper html for web built of the app, as Nativescript itself already uses a unified gui api for different platforms, that could be possible. And lastly, native calls made in NativeScript would be ignored in the web build.
It would be great to build for Android, iOS, and Web with the same exact code base.
tl;dr: No
Longer: The big difference between the Cordova/Phonegap based technologies (such as Ionic and Supersonic) and the Dynamic Runtime based technologies (such as NativeScript, React Native and Titanium) is that the first uses a HTML approach where the application is run by WebKit/Blink in a WebView. Looking on the Dynamic Runtime technologies there's no HTML Engine running your app, but rather native views and widgets. The framework (in this case NativeScript) is "just" a bridge between Javascript and the native language of the device.
However, depending of how you architecture your code, you can create Javascript which will be usable in both a NativeScript environment as well as in a browser environment.
Edit: The above means that you could reuse some of your code. There'll still be NativeScript specific code.
Edit2: There's an ongoing project to enable usage of Angular 2 in NativeScript. Please see current status in the issue: https://github.com/NativeScript/NativeScript/issues/103 Also note that the Telerik NativeScript core developer Valentin Stoychev is saying
The idea [is] to enable as much code reuse as possible between your web and mobile apps.
So: Yes on code reuse - no on exact same codebase.
Adding to the (correct) response of Emil - I do not think it is possible to have any significant portion of the app shared (even for the logic part) since {N} apps mostly utilize the Nativscript observable implementation which would probably 'leak' into your models / view models.
Having said that, I suggest you to monitor the work happening on integrating Angular2, which would probably mean a larger code sharing potential (with Angular2 web apps)

Is it possible to develop pure HTML5 applications with PhoneGap?

Even after searching PhoneGap's website and their support group, I still cannot find an answer to my question:
Currently, I'm planning on developing an application that should exists as a pure HTML5 application, being able to run in any modern browser (Google Chrome, Safari, etc.) as well as on Android/iPad as native mobile applications.
So my question is:
Is it possible to use the same code base to develop both pure HTML5 applications as well as native mobile applications with PhoneGap?
PhoneGap is in effect a runtime environment for HTML, javascript, and any CSS that may accompany your code. So in short:
Yes, but it is recommended that you have some knowledge of Objective-C if you want to develop any iPhone app with extended functionality. If you have the right dimensions/proportions for the code there is no reason why you cannot simply copy that code into PhoneGap and compile it.
See, the support for #HTML5 varies from browser to browser, and varies a lot from a desktop browser to mobile browser. If one has to convert web-portal to a mobile application that can easily be done through Phonegap, you can refer to this link also. https://build.phonegap.com/ It worked fine for me.
Now lets come to Phonegap, what phonegap does is it has created wrapper through javascript that calls the native apis. Now to show content they use WebView object which renders your html5 page in your app. And you can create your own wrappers too. Not that much difficult.
So if your app is only a web based portal, that does not need much native access, you can easily reuse one codebase make #cross-platform apps using Phonegap. Else you need to go for hybrid apps.

Categories

Resources