Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,154,050 members, 7,821,616 topics. Date: Wednesday, 08 May 2024 at 03:45 PM

creating your first Html5 hybrid app - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / creating your first Html5 hybrid app (2713 Views)

Factors To Bear In Mind While Investing In Hybrid App Development / Best Way To Detect An Hybrid App ? / Why Do HTML5 Mobile Apps Have A Bad Reputation (cordova / Phonegap)? (2) (3) (4)

(1) (Reply) (Go Down)

creating your first Html5 hybrid app by Nobody: 7:02pm On Dec 29, 2015
I need a good response , I am thinking just thinking about database connection and creation . Database connection in Html5 hybrid app .
To view project related to Html5 database visit
www.java2s.com/Open-Source/Javascript_Free_Code/Database/List_of_Free_code_Database.htm
Re: creating your first Html5 hybrid app by Nobody: 12:15pm On Dec 30, 2015
HTML 5 Web storage are grouped into 4

1. Local Storage.
2. Web SQL Storage.
3. Session Storage
4. Indexed DB
There are various ways like mysql or Sql database by connecting it using HTML table format or json or Asp.net using ajax request remotely to acess db or mongo db or cloud database . This could be achieved but which of the following is the most efficient and reliable to hold a large database system .

http://stackoverflow.com/questions/22828109/intel-xdk-connecting-your-mobile-app-to-a-database
Re: creating your first Html5 hybrid app by Nobody: 11:33am On Jan 19, 2016 

see more about cordova  https://cordova.apache.org/docs/en/3.0.0/cordova/storage/storage.html
Re: creating your first Html5 hybrid app by Nobody: 4:48pm On Jan 20, 2016 
download  sqlite  db for   cordova  or phonegap  plugin
Re: creating your first Html5 hybrid app by Nobody: 5:14pm On Jan 20, 2016
That means to create an interaction between the interface you the are various rules to follow .
To create a cross platform application you need knowledge of angular js ,ionic framework,Dojo Mobile, jquery mobile and ui ,boostrap ,open source Kendo UI framework with Telerik Platform and other javascript libraries , framework ,to make your app interface . We may call it material design . html apps needs components to make it responsive like a website . The components are material design read the full documentation you can implement them by the listed frameworks and ui like boostrap or jquery ui to establish the components.

The next step is how can you make an interaction between the the database and the interface using phonegap or cordova . I strongly recommend material design for html apps using the above solutions.

I would like template and app themes contribution on github but some html5 app template may be paid to use with licence .

Some other db forms are parse , Firebase,CouchDB, DB2, IMS DB, Neo4J , Memcached PL/SQL, PostgreSQL and Redis
who is in support of team Html5 ?
Re: creating your first Html5 hybrid app by Nobody: 6:25pm On Jan 20, 2016
Let's create a simple map using angular js

Tools
or visual studio with cordova
or netbean with cordova for javascript or Html5 or xcode with cordova
or eclipse with cordova


or phonegap or intel xdk or Cocoon


https://cordova.apache.org/
To install Cordova, make sure you have js.node
installed, then run
$ sudo npm install -g cordova

install ionic framework

To install it, simply run:
$ sudo npm install -g ionic
Re: creating your first Html5 hybrid app by Nobody: 1:13pm On Jan 21, 2016
www.java2s.com/Open-Source/Javascript_Free_Code/AngularJS/Download_angular_google_maps_Free_Java_Code.htm

download the code and import this code to any of the html5 builder . put the icon and splash screen .
Re: creating your first Html5 hybrid app by Nobody: 1:29pm On Jan 21, 2016
for huge project go to http:// console.developers.google.com to get your api key


< script src= "http://
maps.googleapis.com/maps/
api/js? key=YOUR_KEY " >< /
script>
Re: creating your first Html5 hybrid app by Nobody: 1:48pm On Jan 21, 2016
map.js





 <!DOCTYPE html>
 <html>
 <head>
 <script
 src="http://maps.googleapis.com/maps/api/js">
 </script>

 <script>
 function initialize() {
   var mapProp = {
     center:new google.maps.LatLng(51.508742,-0.120850),
     zoom:5,
     mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   var map=new google.maps.Map(document.getElementById("googleMap"  ), mapProp)  ;
 }
 google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>

 </html>
Re: creating your first Html5 hybrid app by Nobody: 2:03pm On Jan 21, 2016
maps.css



 body {
 font: bold 12px Times New Roman;
 }
 a {
 text-decoration: none;
 }

 #map{
 height: 600 px;
 width: 500px;
 box-shadow: 3 px 3 px 10px gray;
 }
 #repeat{
 display: inline;
 }
 #container {
 width: 1000px;
 margin: 13px 3 px 3 px 0 px;
 text-align: center;
 width: 85px;
 padding: 4 px;
 display: inline-table;
 color: white;
 background-color: black;
 font-size: 12px;
 cursor: pointer;
 border: 1 px solid black;
 border-radius: 13px;
 }
Re: creating your first Html5 hybrid app by Nobody: 2:12pm On Jan 21, 2016
Google-map.html




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<link rel= "stylesheet" href= "css/maps.css" >
<script
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" ></script>
<script
src= "http://maps.googleapis.com/maps/api/js?sensor=false&language=en" ></script>
<script type= "text/javascript" src= "js/maps.js" ></script>

<body>

<div id= "map" ></div>
<div id= "repeat" ng-repeat= "marker in markers | orderBy : 'title'" >
<a id= "container" href= "#" ng-click= "openInfoWindow($event, marker)" ></a>
</div>

</body>
</html>
Re: creating your first Html5 hybrid app by Nobody: 3:41pm On Jan 21, 2016
Assignment
create a simple gpa calculator using javascript , Html and css . The next step is to learn UI and framework in html5 listed above . Qnimate is the best site on Html 5 .
Re: creating your first Html5 hybrid app by Nobody: 5:08pm On Jan 21, 2016
I recommend you use Intel xdk with ionic framework with ng cordova plugin to use the framework you have to add this code to the head tag of Html folder 
 < link href= "http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel = "stylesheet" >
< script src = "http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js" ></ script>




copy the code of the components you want on your app . don't forget to read the javascript documentation .
read more www.ionicframework.com/docs/components/

if you don't want to do more coding use ionic creator for prototype and copy the codes and import them to Intel xdk or cordova .
Re: creating your first Html5 hybrid app by nnamdiosu(m): 9:51pm On Jan 21, 2016
proxy20:
I recommend you use Intel xdk with ionic framework with ng cordova plugin to use the framework you have to add this code to the head tag of Html folder 
 < link href= "http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel = "stylesheet" >
< script src = "http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js" ></ script>




copy the code of the components you want on your app . don't forget to read the javascript documentation .
read more www.ionicframework.com/docs/components/

well done bro. pls continue. can I pm you ?
Re: creating your first Html5 hybrid app by Nobody: 9:39am On Jan 22, 2016
Run the cli in js.node

$ ionic start myApp tab

to start a project


index.html

 
<!DOCTYPE html>
< html ng-app = "ionicApp" >
< head>
< meta charset = "utf-8" >
< meta name= "viewport" content= "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" >
< title>Interface</ title>
< link href= "http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel = "stylesheet" >
< script src = "http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js" ></ script>
< script src = "js/app.js" ></ script>

script id= "menu.html" type= "text/ng-template" >
< ion-side-menus >
< ion-side-menu side= "left" >
< ion-header-bar class= "bar-positive" >
< h1 class = "title" >Side Menu</ h1 >
</ ion -header-bar >
< ion-content >
< ul class = "list" >
< a href= "#/menu/item 1" class ="item" menu-close >item1</ a >
< a href= "#/menu/item2"class ="item" menu-close >item2</ a >
< a href= "#/menu/item3" class= "item" menu-close >item3</ a >
</ ul>
</ ion -content >
</ ion -side-menu >




script id= "item1.html" type= "text/ng-template" >
< ion-view view-title ="item1" >
< ion-content >
< ion-slide-box >
< ion-slide >
< div class = "box" >
< h2 >Box #1</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #2</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #3</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
</ ion -slide-box >
</ ion -content >
</ ion -view >
</ script>


script id= "item2.html" type= "text/ng-template" >
< ion-view view-title ="item3" >
< ion-content >
< ion-slide-box >
< ion-slide >
< div class = "box" >
< h2 >Box #1</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #2</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #3</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
</ ion -slide-box >
</ ion -content >
</ ion -view >
</ script>

script id="item2.html" type= "text/ng-template" >
< ion-view view-title ="item2" >
< ion-content >
< ion-slide-box >
< ion-slide >
< div class = "box" >
< h2 >Box #1</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #2</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #3</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
</ ion -slide-box >
</ ion -content >
</ ion -view >
</ script>


script id= "item3.html" type= "text/ng-template" >
< ion-view view-title ="item3" >
< ion-content >
< ion-slide-box >
< ion-slide >
< div class = "box" >
< h2 >Box #1</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #2</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
< ion-slide >
< div class = "box" >
< h2 >Box #3</ h2 >
< p>Content goes here</ p >
</ div >
</ ion -slide >
</ ion -slide-box >
</ ion -content >
</ ion -view >
</ script>

<ion-tabs class= "tabs-positive tabs-
icon-top" >
<ion-tab title= "Home" icon-on= "ion-
ios-filing" icon-off= "ion-ios-filing-
outline" >
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title= "About" icon-
on= "ion-ios-clock" icon-off= "ion-
ios-clock-outline" >
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title= "Settings" icon-
on= "ion-ios-gear" icon-off= "ion-ios-
gear-outline" >
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>

</ body>
</ html>

Re: creating your first Html5 hybrid app by Nobody: 9:44am On Jan 22, 2016
app.js


 angular.module( 'testApp' , [ 'ionic' ])
 .controller( 'MyController' , function
 . finally( function() {
 // Stop the ion-refresher
 from spinning
        $scope.$broadcast
 ( 'scroll.refreshComplete' );
 });
 };
 });

 }
Re: creating your first Html5 hybrid app by Nobody: 9:48am On Jan 22, 2016
The program is to create an app with a lot of content using ionic framework . To continue you need knowledge of html and css . 

<div class= "bar bar-footer bar-
balanced">
<div class= "title" > Footer</div>
</div>

Incase you want to put footer on your app
Re: creating your first Html5 hybrid app by Nobody: 10:41am On Jan 22, 2016
for those using cordova you use CLI in js node to build . www.ionicframework.com/docs/guide/publishing.html
     $ cordova build ios

     $ cordova build

you can also run your app in the command line interface using Android emulate. 

 $ cordova emulate android


For those using phonegap use phonegap build

https://build.phonegap.com/
Re: creating your first Html5 hybrid app by Nobody: 11:26am On Jan 22, 2016
Assignment create an app that allows user to login twitter and Facebook . Tips go to fb and twitter developer page . strictly html5 .
Login.html in the index.html folder .
Re: creating your first Html5 hybrid app by Nobody: 5:16pm On Jan 22, 2016
convert your website into a an app using
windows.open.href='http://url ' );

Cordova app in browser plugin
Re: creating your first Html5 hybrid app by Nobody: 7:29pm On Jan 22, 2016
PayPal integration in html5 https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/buynow_buttons/

To sell online using PayPal and collecting money you can convert the API to ionic framework .

sign up an put the item you want to sell and all the necessary information . an copy the code . Read the article .
Re: creating your first Html5 hybrid app by jboy01(m): 7:50pm On Jan 22, 2016
is hybrid app now running smoothly like native app?
Re: creating your first Html5 hybrid app by Nobody: 7:56pm On Jan 22, 2016
jboy01:
is hybrid app now running smoothly like native app?

yes . Hybrid apps are unique . frameworks makes it look cool
Re: creating your first Html5 hybrid app by Nobody: 8:23am On Jan 23, 2016
1 create a weather app with ionic framework or angular js
2 create a Web browser in Html5 using Cordova app in browser plugged linked to google.com
Re: creating your first Html5 hybrid app by Nobody: 9:57am On Jan 23, 2016
in Html5 game development you need a game engine construct 2
Cocos2d-JS* 3
Cocos2d-JS Lite 3
EaselJS
Phaser
Pixi
gamemaker
Panda.js
Kiwi.js

Use photoshop for graphic design and use .js libraries to add the sound and game effects . You don't have to study the engine .js copy the line of codes you want .
Note that some libraries are grouped into Api according to their function . you may import as much libraries you need to build your games .

Don't forget to link the game engine libraries to your main.html .you need to learn the game engine language and syntax with the libraries to know how to develop your own games using Html5 canvas and svg .

you need knowledge of graphics designing and sound creation because each components of the images need to be design before coding .

read more https://software.intel.com/en-us/xdk/docs/getstarted-gamedev
Re: creating your first Html5 hybrid app by Nobody: 11:56am On Jan 23, 2016
For those that want to start learning Html5 game with construct 2 go to the newboston video site and start learning . Or registered at udemy . pluralsight ,lynda .


For game source code . www.java2s.com/Open-Source/Javascript_Free_Code/Game_Canvas/List_of_Free_code_Game_Canvas.htm
Re: creating your first Html5 hybrid app by mark2k(m): 9:52am On Aug 05, 2016
http://market.ionic.io/themes/full-ionic-photosharing-app-with-nodejs-and-amazon-s3-mongodb-backend
Re: creating your first Html5 hybrid app by Nobody: 10:44am On Aug 05, 2016
One more thing I forgot to mention you can add you Java codes in the android folder . Your Swift or objective -c in the iOS folder.

It is your choice . And so on depending on the operating system you are using.

Feel free to add your comments.

Or u can just make it 100% HTML and javascript. It is just like building a website with HTML layout and js for the functions .

Hybrid uses andriod ui in Java same with iOS .
Re: creating your first Html5 hybrid app by Nobody: 10:58am On Aug 05, 2016
mark2k:
http://market.ionic.io/themes/full-ionic-photosharing-app-with-nodejs-and-amazon-s3-mongodb-backend

Nice one

(1) (Reply)

My Programming Life Story.. Don't Miss.. / How Do I Download Udemy Courses On My PC For Offline Viewing? / Connecting To A Remote Database

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 60
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.