Information based on AppIndex.com and Wikipedia:

Xamarin Inc..zpoh_xamarin-logo-hexagon-blue

With a C# shared codebase, developers can use Xamarin tools to write native iOS, Android, and Windows apps with native user interfaces and share code across multiple platforms.[4] Xamarin has over 1 million developers in more than 120 countries around the world as of May 2015.[5] 

http://xamarin.com/

In software development, PhoneGap is a mobile development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011.[3][4] It enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in iOS, Windows Phone, or Android.[5] It enables wrapping up of HTML, CSS, and Javascript code depending upon the platform of the device. It extends the features of HTML and Javascript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via web views instead of the platform’s native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs). Mixing native and hybrid code snippets has been possible since version 1.9.

The software underlying PhoneGap is Apache Cordova.[6] The software was previously called just “PhoneGap”, then “Apache Callback”.[7][8] Asopen-source software, Apache Cordova allows non-Adobe wrappers around it, such as Intel XDK or Appery.io.

http://phonegap.com/

appc-logo-landscape-light

Appcelerator is a privately held mobile technology company based in Mountain View, California. Its main products are Titanium, an open-source software development kit for cross-platform mobile development, and the Appcelerator Platform, a mobile engagement platform that provides cross-platform native mobile app development using JavaScript, mobile backend as a service (MBaaS), mobile test automation, crash detection and performance management, and mobile analytics.

http://www.appcelerator.com/

ifactrbrandwhite

iFactr provides the only mobile platform that supports both legacy and modern Windows as well as iOS and Android. Whether building new apps or modernizing existing systems, iFactr was designed from the ground-up for mission-critical enterprise line-of-business apps, providing rich, native experiences for every platform and support for critical sensors on rugged devices like barcode scanning and geolocation.

http://ifactr.com/

Qt is a cross-platform application development framework for desktop, embedded and mobile. Supported Platforms include Linux, OS X, Windows, VxWorks, QNX, Android, iOS, BlackBerry, Sailfish OS and others.

https://wiki.qt.io/Main_Page

 

Based on:

http://appindex.com/blog/ten-best-cross-platform-development-mobile-enterprises/

http://wp.flash-jet.com/2015/08/12/qt5-what-is-it/

Build Android App with PhoneGap

01 – Install JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

02 – Install Android Studio

http://developer.android.com/sdk/index.html#top

03 – Install Node.JS

http://nodejs.org/download/

04 – Install PhoneGap

Open command prompt and write there:

C:> npm install -g phonegap

05 – Install Cordova

 C:>npm install -g cordova

06 – Create new phonegap project :

Open command prompt and write there:

phonegap create [Path]+[Package Name]+Project name

For example:
phonegap create c:androidphonegap_test com.phonegap.test001 phonegaptest001

07 – Enter to directory of created project:

If you created a project at c:androidphonegap_test then change directory to there by command prompt:
c:
cd
cd androidphonegap_test

08 – Run command prompt again:

At command prompt write:
c:> phonegap platform add android

This will install phonegap android at local directory of our example: c:androidphonegap_test

09 Import project to Android Studio:

Select "import Non-Android Studio project"
Click Point to project directory and click on Next->Next...

10 – Place you HTML/Javascript code under Assetswww folder.

11 – That’s it

JQuery Mobile – Lesson 05 – Navbar – Buttons and more

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05


1. At this lesson we will continue from Lesson 03.

2. Here is the HTML Code from Lesson 03 with changes marked with RED color:

A navbar will appear with two buttons.

You can also download the following content as a file from HERE.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="b">
       <div data-role="header">
       <h1>Page 1 header</h1>
          <div data-role="navbar">
             <ul>
                <li><a href="#page1">Home</a></li>
                <li><a href="#page2">Contact</a></li>
             </ul>
          </div>             
       </div> 
       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="b">
       <div data-role="header">
       <h1>Page 2 header</h1>
          <div data-role="navbar"> 
            <ul>
               <li><a href="#page1">Home</a></li>
               <li><a href="#page2">Contact</a></li>
            </ul>
           </div>
    </div>        
    <div data-role="main" class="ui-content">
        <h1>Page 2 Main</h1>        
           <a href="#page1" data-transition="flow">page 1</a>        
    </div>        
    <div data-role="footer">        
      <h1>Page 2 footer</h1>        
   </div>     
</div> 
</body> 
</html>

3. Now let’s add icons to the navbar by adding to the following line, we will see buttons with icon of grid:

<li><a href="#page1" data-icon="grid">Home</a></li>

Click on this link for list of icons
4. At this point we can remove the following lines under data-role=”main”:

<a href=”#page1″ data-transition=”flow”>page 1</a>

5. Now let’s add the following block code under data=role=”main”:

<div data-role="collapsible">
  <h1>Click here to view what is under this button</h1>
  <p>There is nothing here</p>
</div>

Here is an example of collapsible:

6. At this point add the code mark with RED color, you code suppose to be look like the following:

Copy & Paste the following and see what is the output:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="page1" data-theme="a"> 
<div data-role="header"> 
<h1>Page 1 header</h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#page1" data-icon="action">Home</a></li> 
<li><a href="#page2" data-icon="alert">Contact</a></li> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<h1>Page 1 Main</h1> 
 <div data-role="collapsible">
 <h1>Click here to view what is under this button</h1>
 <p>There is nothing here</p>
 </div>
</div> 
<div data-role="footer"> 
<h1>Page 1 footer</h1> 
</div> 
</div> 
 <div data-role="page" id="page2" data-theme="a"> 
 <div data-role="header"> 
 <h1>Page 2 header</h1> 
 <div data-role="navbar"> 
 <ul> 
 <li><a href="#page1" data-icon="grid">Home</a></li> 
 <li><a href="#page2" data-icon="grid">Contact</a></li> 
 
 </ul> 
 </div> 
 </div> 
 <div data-role="main" class="ui-content"> 
 <h1>Page 2 Main</h1> 
 <form>
 <textarea></textarea>
 <input type="range" min="0" max="10">
 <input type="submit" value="submit button">
 </form>
 </div> 
 <div data-role="footer"> 
 <h1>Page 2 footer</h1> 
 </div> 
 </div> 
</body> 
</html>

JQuery Mobile – Lesson 04 – Themes

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05


1. Here We will learn about JQuery Mobile Themes.

2. Browse to http://themeroller.jquerymobile.com/

3. Select a Theme or click on Add Swatch to create new theme, looks at the rights side of the following picture:

4. Drag colors from colors plate directly to the new created swatch, theme.

5. Once finished designing the theme then click of download button, then you will see the following picture:

6. At picture at #5 copy and paste the two lines that starts with <link rel=.

7. Download the ZIP file.

8. Open the downloaded ZIP file and copy the directory THEME from there and place it next to index.html file.

9. At index.html file replace the line that starts with  <link rel=, replace it with the two lines from #6.

10. Index.html should look like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<!--
1. Remove The css/.
2. Change my-custom-theme to the name that you selected at http://themeroller.jquerymobile.com/
3. Add to page div data-theme with the swatch leffter that you selected.
-->
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
 <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="d">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="d">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

11. At the lines that starts with <link rel.., remove “css/”, as shwon at #10.

12. Change my-custom-theme.css to a theme name that you selected at :

http://themeroller.jquerymobile.com/

13. Add data-theme to the page div as shown at #10.

JQuery Mobile – Lesson 03 – Transitions

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05


1. In continuation to Lesson 02, here you will see a demo of transitions.

2. We will use the last HTML file that has been created at the last lesson with addition of the red tags below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. Replace the transition with the transitions below:

fade Default. Fades to the next page
flip Flips to the next page from back to front
flow Throws the current page away and comes in with the next page
pop Goes to the next page like a popup window
slide Slides to the next page from right to left
slidefade Slides from right to left and fades in the next page
slideup Slides to the next page from bottom to top
slidedown Slides to the next page from top to bottom
turn Turns to the next page
none No transition effect

JQuery Mobile – Lesson 02 – Switching between pages

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05


1. In continuation to Lesson 01, We will learn how to switch between div pages.

2. Let’s give each page an different ID:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. After adding the tags (marked red) below, you should browse from one page to the other:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

JQuery Mobile – Lesson 01 – Basic page Template

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05


1. <Optional> Download JQuery Mobile from http://jquerymobile.com/download/.

2. Or just the use the following code between <head> tags of HTML document:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. Use the following HTML5 template:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Page title</title>
 </head>
 <body>
</body>
</html>

4. Add data-role div for page, header, main and footer to every page at your application according to the following template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       </div>

       <div data-role="main" class="ui-content">
       </div>

       <div data-role="footer">
       </div>
    </div>
</body>
</html>

5. Try the following code which is the same as #4 but with two divs of page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

6. As you can see, div of page 2 is not visible.

Native

Android
01 - 77  videos (Dec/2014) https://www.thenewboston.com/videos.php?cat=278
02 - 200 videos (Aug/2011) https://www.thenewboston.com/videos.php?cat=6
03 - 25 videos Android Development for Beginners 
04 - 42 videos Android Development Tutorial
05 - 29 videos How to Make Android Apps
Apple
01 - https://www.thenewboston.com/videos.php?cat=28

Multi Platform

01 - MS Visual Studio - Apache Cordova Template
02 - PhoneGap
03 - Intel XDK
04 - Link a: Ionic - Link b: Ionic Code samples

General

01 - http://wp.flash-jet.com/the-five-best-ways-to-develop-enterprise-mobile-apps
02 - https://www.youtube.com/user/cogee/playlists - HTML / JavaScript / JQuery Mobile / Many more
03 - http://www.w3schools.com/jquerymobile/default.asp
04 - http://demos.jquerymobile.com/1.4.5/
05 - http://www.codenutz.com/getting-started-phonegap-android-studio/ - how to install and run App on android studio with phoneGAP
06 - http://wp.flash-jet.com/build-android-app-with-phonegap/

THE FIVE BEST WAYS TO DEVELOP ENTERPRISE MOBILE APPS

With the advancement of technology, the way to build enterprise apps and mobile apps is changing. There is no right or wrong way to develop mobile apps, and the way you choose to develop your app will depend on your needs, like how many backend systems you need to integrate, is your app going to be Native, HTML5, or a hybrid of the two, and so forth.

FIVE WAYS ENTERPRISES ARE BUILDING MOBILE APPS

1. CUSTOM NATIVE APPS

We’ve found most enterprise mobile apps are custom built. For years, this has been the only way to develop an app for a specific business need. One of the fastest ways to custom build native apps is using a device-side SDK like iOS SDK or Android SDK.

If you need an app to run in iOS, Android, Blackberry, and Windows, you have to basically develop the app 4 times, once for each OS. Obviously, this is a time consuming way to develop a mobile app. More important than the time it takes to replicate the code for each SDK is the inevitable error and bug list that follows trying to morph code into different platforms.

Once the app is completed, backend integration is required, which opens a lot of security concerns. The backend integration with user authorizations and connectivity is complicated, not only because of the complex work, but also because all enterprise systems, whether on-premise or cloud apps, were never built for mobile consumption.

Enterprise systems have traditionally been designed for data exchange between two applications. However, mobile apps need small subsets of data, and often context-aware data. To integrate mobile apps requires modifications to the backend application, or hand-coding and building logic for the integration between the mobile app and the backend application.

The integration can take from 50% to 70% of the development effort. Even with a dedicated set of developers it can literally take months to build a single app.

2. CROSS-PLATFORM DEVELOPMENT

Most companies have realized the long cycles in traditional development and have started taking advantage of cross-platform development tools to build mobile apps. It’s possible to build Native apps, as well as HTML5 apps, and Hybrid apps using cross-platform tools.

HTML5 apps by nature are cross-platform, but HTML5 lacks the ability to leverage all the capabilities and sensors of mobile devices. Native apps, on the other hand, can effectively use all the capabilities of the mobile device it runs on.

Cross-platform tools like Xamarin and Titanum/Appcelerator allows a developer to write code once, and then generate code for all 4 smartphone operating systems. This allows a developer to cut down the time spent writing 4 versions of the app, while still being able to execute native apps across all devices.

While this speeds up the development time considerably, it still doesn’t solve the bigger problem of enterprise integration and security.

There is a third alternative, called hybrid apps. It’s a combination of native apps and HTML5. In Hybrid apps, device specific containers are used to communicate to each device and leverage the native sensors and capabilities of that device while keeping the user interface in HTML5.

The most well-known tool for developing cross-platform hybrid apps is Apache Cordova, or PhoneGap. Using PhoneGap, the code is written once and executed in all four operating systems without generating separate code for each device.

Hybrid apps provide all the advantages of native apps without the hassle to maintain seperate code-bases for every device. However, like we mentioned before, no matter which approach you take, the larger problem is still data integration, security, and authentication with enterprise applications.

3. MOBILE APPLICATION DEVELOPMENT PLATFORM (MADP)

A third option for building enterprise apps is to use an integrated application development platform. MADP’s are specifically built for enterprise apps and provide an integrated environment to build apps as well as provide integration and security between the mobile app and enterprise applications.

MDAP provides a one-stop solution for enterprises to build integrated mobile apps. However, the main problem we’ve found with using MADP’s is they are built on legacy software architectures. They almost always use proprietary technologies that never keep up with mobile device capabilities. Most MDAP’s are not nearly as sophisticated in capability as the cross-platform development kits.

Probably the most negative aspect of MDAP’s is their integration capability are limited to their proprietary technology. This means, customers are forever locked in to that vendor’s technology. MADP typically requires an IT procurement of servers and an army of developers trained to build and maintain apps. This has turned out to be very expensive for customers and usually resulted in lengthy development and deployment cycles.

4. BACKEND-AS-A-SERVICE (BAAS)

In the last few years, another alternative has become available which solves enterprise integration problems for cross-development platforms, called Backed-as-a-Service. Because MDAP was very expensive and laborious to maintain, many vendors switched to BaaS services to augment their cross-platform development tools.

BaaS provides various enterprise integrations along with security and user authentication. Developers can leverage BaaS services along with their cross-platform tools to develop integrated enterprise mobile apps that can run on any device. Developers can now simply call BaaS services to integrate their apps into enterprise applications without worrying about the backend.

However, there is no perfect solution and even BaaS has it’s problems to overcome. With BaaS, it’s easy to integrate with cloud systems, but it’s still super-difficult to integrate to an on-premise enterprise application. In the real world, most of these backend enterprise applications are either customized or do not have the right API’s for integration. They need enhancements to mobile-enable them. This is what makes mobilizing traditional, on-premise applications difficult.

Also, a customer must buy and maintain at least 2 tools, the cross-platform development tool, and a BaaS service in order to develop and roll out each app. This means 2 teams of developers, maintenance, and the list goes on.

5. MODEL-DRIVEN PLATFORM-AS-A-SERVICE (PAAS)

The 5th way to build integrated enterprise mobile apps is with a model-driven platform, which is the newest of all five development methods. This is the system appsFreedom was built to provide.

Essentially, a model-driven platform with complete app lifecycle management capabilities enables non-professional programmers, or citizen developers, to build integrated enterprise mobile apps by modeling the business logic, and allowing the platform to generate the code in the background.

The most obvious benefits of using the appsFreedom platform is:

It Requires Less Resources

Because the platform is model-driven, it generates the code in the background. This allows any tech-savvy person, like an analyst or citizen developer, to build full-featured, fully-integrated apps without any coding.

IT departments can do away with many of the backlog projects without bogging down their developer resources, + Add New Categoryallowing them to leverage developers for complex and sophisticated projects.

It Makes Integration Easy

The appsFreedom platform is engineered to seamlessly integrate with enterprise applications, both on-premise and in the cloud. This can be accomplished, literally, in days where other methods of app development can take months just on the integration.

Which Method is Best For You?

Figuring out which method is best for you really depends on your requirements and what you want the app to do.