Published on: 08 August, 2017

Create your ebook android apps using Cordova.

Posted by andy | 378 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, you will learn how to create your first android app using Cordova. You will learn how to create a simple e-book app contains 5 pages. I will show you on how to use AngularJS and SlideoutJS javascript library to implement the app navigation and animate.css for cool effect to show the e-book content. We will use bootstrap framework as well for the default mobile template. i will divide this tutorial into two parts. First part is the design on the ebook and the second part is on how to package your ebook into an android app.

First of all, as we do not install Android Studio, we are going to install all the perquisite requirements before we start. You will need to install the following SDKs. Please note if all links supplied on this tutorial is no longer work, please use a google search ;-). Please skip any installation if you have already done it.

1. Install Java SE Development Kit.

Please download the windows x64 or x86 version. Most windows operating system now is using x64, so just download this one. Do not worry, if it is not compatible you should receive a message during the isntallation.

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

2. Install Android SDK

Please go to the Android studio page and download the Android SDK tools online (Not Android Studio). See below image for more details. Please download the SDK tools for Windows.

	https://developer.android.com/studio/index.html

Once the SDK Manager is installed, you can open the SDK Manager and view the available Android API you want to install. I am installating the Android 7.0 (API 24) as shown below. There is a filter option on the screen. Simply untick the option Updates/New and it should listed the current installed API on your Windows.

3. Install NodeJS

Please go to the following url and install the NodeJS windows version.

https://nodejs.org/en/download/

Once the Nodejs has been installed. You will need to install Cordova. Using your Nodejs console and type in the following command.

npm install -g cordova

Once the Cordova has been installed, we can install Phonegap . Phonegap is used only to serve as a server browser so we can view our app directly on a browser. To install a Phonegap use the following command line.

npm install -g phonegap@latest

Once the phonegap has been installed. We can start creating our first app. We are going to name this project as ByTutorialEbook. When you open the NodeJS console, by default the path folder should be under your name account. For example in my PC, it will be c:\users\Andy. Now if you want to create a folder to organise your project you can enter command using mkdir. This command will create a folder into the path you specified. Let's create a folder called cordovatutorials.

Once the folder has been created, we then create our first cordova project. I am going to name the project as MyEbook. Make sure you are on the cordovatutorials folder by running the following command.

cd cordovatutorials

After in the cordovatutorials folder, you can run the following command.

cordova create MyEbook

You can see the structure of MyEbook project. All of the app content will be stored under www folder. The main content will be run using index.html file. The next task we need to do is to add an android platform.

Please run the following command in NodeJS.

cordova platform add android

Once the android platform have been added, we are now ready to preview our first created app. Please run the following command in NodeJs. This will run a server service using phonegap so we can view our app in browser.

phonegap serve

Once you run the command, you should see like below illustration. If you copy the IP address with port no, in this example: 192.168.30.21:3000 into your browser, you should see your app preview.

We need to modify the following files.

  • index.html
  • css/index.css
  • js/index.js

I will explain the changes of each individual files. The first file we need to modify is the index.html file. Please copy and paste the following code or download the file to see directly the modification.

<!DOCTYPE html>
<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
		<!-- STYLES -->
		<link rel="stylesheet" href="css/bootstrap.min.css"> 
		<link rel="stylesheet" href="css/font-awesome.min.css">    
		<link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>My Ebook</title>
    </head>
    <body>
		<!-- MENU PAGES -->
		<nav id="menu" class="menu"> 
		  <section class="menu-section">
			<h3 class="menu-section-title">Ebook Pages</h3>
			<ul id="menu-list" class="menu-section-list">
				<li><a href="#/">Introduction</a></li>
				<li><a href="#/chapter1">Chapter 1</a></li>
				<li><a href="#/chapter2">Chapter 2</a></li>
				<li><a href="#/chapter3">Chapter 3</a></li>
				<li><a href="#/chapter4">Chapter 4</a></li>
				<li><a href="#/chapter5">Chapter 5</a></li>
			</ul>
		  </section>
		</nav> 
		
		<div id="panel">  
			<!-- HEADING -->
			<div id="header-bar">    
				ByTutorial.com Ebook
				<button id="main-button" class="btn btn-default" type="button">        
					<i class="fa fa-bars" aria-hidden="true"></i>        
				</button>	
			</div> 
			
			<!-- CONTENT RENDERED BY ANGULARJS -->
			<div id="ebook-wrapper"> 
				<div id="ebook-content" ng-view></div>    
			</div> 
		</div>
		
		<!--  REQUIRED SCRIPTS -->
        <script type="text/javascript" src="cordova.js"></script>
		<script src="js/jquery-1.11.1.min.js"></script>   
		<script src="js/bootstrap.min.js"></script>   
		<script src="js/angular.min.js" ></script>
		<script src="js/angular-route.min.js" ></script>
		<script src="js/slideout.min.js"></script>   
		<script src="js/index.js"></script>
		<script src="js/routes.js"></script>   
        
    </body>
</html>

If you see on above code, I divided into 4 sections of index.html with commments. The first section is to import required css files. I am using the bootstrap for the mobile layout and font awesome for the icon menu. The animate will be used to animate the ebook content page. The default index.css will be just our main style of the page. The next section is the navigation, by default I hide the navigation on the screen, so it will only be displayed when user click the menu button. There is a navigation style placed under the index.css. The next part is the heading and the content section. If you see carefully there is a wording ng-view used by AngularJS to determine where the location of the content will be placed. The last section is the javascripts required to run this ebook. Please note: you will not see cordova.js because this will be automatically added on the run time. So just ignore if you receive any error about the cordova.js could not be found in your web log console.

Let's have a look on two important scripts which are index.js and routes.js files. Below is the full code of the index.js. I have included the comments on each function or declarations, so hopefully it will help you to understand what are they used for.

//create our angularjs app
var bytutorialEbookApp = angular.module('bytutorialEbookApp', ['ngRoute']);

//once the html is ready we attach the angularjs directive app into the body
angular.element(document).ready(function () {
    if (window.cordova) {
      document.addEventListener('deviceready', function () {
        angular.bootstrap(document.body, ['bytutorialEbookApp']);
      }, false);
    } else {
      angular.bootstrap(document.body, ['bytutorialEbookApp']);
    }
});

//this will be the app controller which will be triggered once the html is ready
bytutorialEbookApp.controller('chapterController', ['$scope', function ($scope) {
	/**** INITIATE MENU SLIDE OUT ****/
	var slideout = new Slideout({
		'panel': document.getElementById('panel'),
		'menu': document.getElementById('menu'),
		'padding': 0,
		'tolerance': 70,
		touch: true
	});

	//we add an event to our main button so when user perform a click, we called the slideout function.
	document.querySelector('#main-button').addEventListener('click', function() {
		slideout.toggle();
	});

	//when user taps or clicks particular menu, we hide the slideout
	$("#menu-list > li > a").on("click", function(){
		//we check if we need to close it automatically
		if($("html").hasClass("slideout-open")){
			slideout.toggle();
		}
	});
	
	
	//animateMe function 
	function animateMe(myObject, animateType, duration){
		$(myObject).addClass("animated " + animateType).css("animation-delay", duration + "s");
	}
	
	//we add the fadeIn animation with 0.1 seconds, for more information animate css, please google animate.css in your browser, there are varieties of animations available.
	animateMe("#box-content", "fadeIn", 0.1);
}]); 

The next script file is routes javascript file. The way how the routes work in AngularJS is by identifying the url path in browser url. In order to configure the routes, we need to use the declaration of app we created which is bytutorialEbookApp. Then we need to inject $routeProvider and $locationProvider in our parameters config. In the version of AngularJS I used in here, it include a prefix of the url route which is !. I prefer to clear them out for easy navigation, so I include the hasPrefix('') to remove the exclamation mark. The way how routes is defined is pretty simple, you just need to specify which path of the route will match and what template and app controller will be used. In this example, we only have 1 controller which is chapterController. The controller will be called once the template is used as spec. You can have as many as you need.

bytutorialEbookApp.config(function($routeProvider,$locationProvider) {
	$locationProvider.hashPrefix('');
	$routeProvider
		.when('/', {
			templateUrl : 'pages/introduction.html',
			controller  : 'chapterController'
		})
		.when('/chapter1', {
			templateUrl : 'pages/chapter1.html',
			controller  : 'chapterController'
		})
		.when('/chapter2', {
			templateUrl : 'pages/chapter2.html',
			controller  : 'chapterController'
		})
		.when('/chapter3', {
			templateUrl : 'pages/chapter3.html',
			controller  : 'chapterController'
		})
		.when('/chapter4', { 
			templateUrl : 'pages/chapter4.html',
			controller  : 'chapterController'
		})
		.when('/chapter5', { 
			templateUrl : 'pages/chapter5.html',
			controller  : 'chapterController'
		})
});   

Here are the screenshots of how your cordova app will look like.

Download Demo Files

Download Ebook Files

That's all for today tutorial. The next tutorial, you will learn on how to package your ebook application into android app. So stay tune and keep visit my blog ;-).

Part 2 tutorial is now available

Read the part 2 now.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 26 September, 2017
If you receive the following email with message Missing Info.plist key - This app attempts to access privacy-sensitive data without a usage description from Apple, it means you have not included a usage description in one of your cordova plugin. It happened to myself when I develop a cordova android app where it requires a Cordova Camera plugin. In the email, I received the following message The app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data. It means when you install a plugin you have to include a variable parameter to pass the usage description.
Published on: 21 September, 2017
If you are new to Cordova and about to learn to program your first mobile app. You might want to know how to install, remove or view plugins for your app. So why you do need a plugin? Plugins in cordova is considered as a component or a module created to be used to access Native API of your phone. For example if you need to access your phone camera, you will need a camera cordova plugin which is cordova-plugin-camera. There are heaps of available plugin created by developers, you just need to try and test them so it works according to your need.
Published on: 18 September, 2017
This is the second part tutorial of our first ebook cordova tutorial. If you miss the first part of the tutorial, I would recommend you to read the first tutorial before continue reading this article. You can click the following link to read the first tutorial. As I promised, in this tutorial, you will learn how to package your ebook app into .apk file. The first thing you have to do is to configure your application configuration setting xml file. This configuration information is used by Cordova to package your application. The configuration xml file is located under the root folder named config.xml. If you open your config xml file using any text editor, you will have the following information.
Published on: 11 July, 2016
Are you completely new to Cordova programming? If you visit the cordova site and follow the example step by step. On the time you create the project and try to add a platform, if you forget to navigate to the your project name directory and you set your preference platform. You will receive the following error message Current working directory is not a Cordova based project..