Royalty Free Images

For my android app I need a lot of images for my design to work. Family works South is a non-profit organisation and stock photos can go between $10 – $20 usd per photo. That would cost Family Works Southland between $1000 – $2000 dollars for just images. I we decided to use public domain / royalty free images . During my search on the internet I found some really great sites for public domain and creative commons images.

What is Creative Commons?

Creative Commons is a way for people to protect their intellectual property by declaring what rights the user has to the intellectual property. There are four main elements that can be attached to an intellectual property, these are:

Attribution – http://creativecommons.org.nz/licences/licences-explained/

Attribution

Attribution means you must provide appropriate credit to the intellectual property rights holder

 

 

 

 

 

 

 

Non-Commercial
http://creativecommons.org.nz/licences/licences-explained/

Non-Commercial 

Others may not use your work for commercial or monetary gain.

 

 

 

 

 

 

 

NoDerivatives
http://creativecommons.org.nz/licences/licences-explained/

No Derivatives

Means Others can share the work but cannot change it

 

 

 

 

 

 

 

Share-alike http://creativecommons.org.nz/licences/licences-explained/

Share-alike

Anyone who adopts or modifies your work must keep the same creative commons as the original work.

 

 

 

 

 

 

 

Now that I’ve explained the common its time to go over the sites for gather my images.

The Sites

Creative Commons Search

https://search.creativecommons.org/

Creative Commons Search allows you to search google, flickr and pixabay to search for creative common / royalty free images.

It allows you to set what rights you want on the images.

This site allows for the search for images that can be used for commercial use and images that can be modified there isn’t an option for no attribution. This means any images I find on this site I must still check the image licence

Public Domain Pictures

http://www.publicdomainpictures.net/

This site has over 100,000 public domain images. Each image displays its licence so you can reconfirm.

Wikimedia Commons

https://commons.wikimedia.org/wiki/Category:Images

Most Images on commons.wikimedia care public domain, it pays to check before using though.

Image After

http://www.imageafter.com/

This site is 100% royalty free public domain images.

Public Domain Photos

http://www.public-domain-photos.com/

This site is 100% royalty free public domain images.

Free Images

http://www.freeimages.com/

This site is mostly public domain. There might be some images which aren’t.

Each image has its licence display clearly.

Pixabay

https://pixabay.com

This site has one of the largest selection of royalty free images, but not all might be public domain.

The licence is clearly displayed on each image.

Flickr

https://www.flickr.com/

This is has a large number of images, all which have their creative commons licence clearly displayed. You are also able to filter searches by creative commons terms.

 

Advertisement

Tools

During my project’s development I researched into some tools to help make the process faster and easier. Out of the tools I research and used two really stood out as something truly awesome. These tools were Bower and Gulp.

Gulp

What is Gulp?

Gulp Is a task tool. Its functionally in what it can do seems limited less. Its built with node.js and it allows its users to create tasks in the form of node scripts, it makes use of nodes npm system to host all kinds of gulp plugins.

How was it helpful?

Gulp allowed me to take the time and effort out of resizing and compressing all the images in my application using the gulp plugins image-resize and image-min allowed me to reduce the size of my android app from 20mbs to 3mbs! In about 2 minutes.

It also allowed me to compress my html, javascript and css to save on file size.

I’ve only scraped the surface of what gulp and do, I’m glad it took the time to learn about and would use it in future projects.

How it works?

To start using gulp you need to install gulp globally with npm (nodejs is needed) once its installed globally you need to create a gulpfile.js.

In your gulpfile.js you need to define the gulp variable

var gulp = require(‘gulp’);

gulp.task(‘compressImg’, function () {

}

Inside your task you place the logic for the gulp task. Most of this is done for you if you are using a premade plugin from npm. You just need to make sure you install the plugin to the root of your project using npm and define it in the gulpfile.

Heres an example on an image compressing task using image-min plugin

var gulp = require(‘gulp’);

var imagemin = require(‘gulp-imagemin’);

gulp.task(‘compressimg’, function () {

return gulp.src(‘uncompressed/img/*’)

.pipe(imagemin({

progressive: true,

svgoPlugins: [{removeViewBox: false}]

}))

.pipe(gulp.dest(‘/img/’));

});

 

Bring up the command prompt make sure you are in the root of your project and type gulp [taskname] e.g

Gulp compressImg

And your away

Bower

What is it?

Bower is a package manager for web developers. Bower can fetch pretty much any package to do with web development.

How was it helpful?

It really took the time and effort out of setting up libraries in my app. All I needed to do was open the command prompt move to the projects root directory and type

Bower install [package name here]

e.g

bower install jquery

And it would fetch the latest version of the package and if any dependencies were needed it would fetch them too, Nice!.

One anther great feature is being able to saved your fetched packages to a json file on fetch.

E.g. bower install jquery –save

This means if anyone else wanted to work on my project they can fetch all the projects dependencies with one command.

 

Final Design Concepts

After showing my concepts to my client, they felt the colour pallet they supplied me through their national branding guide wasn’t appealing to younger audiences. I got back to work on my design concepts and made them more modern and suited towards younger people. The new colour pallet the supplied me was more bright and vibrant.

I created a more modern Circular styled concept and a more classic yet modern styled square concept

Circular concept

Classic square concept.

After discussing the concepts and ideas back and forward with Family Works Southland we came up with a final concept.

Susy toolkit

For my project I needed a grid system. I didn’t want to use bootstrap just because it’s heavy and I wouldn’t use a lot of the features in it. While looking at grid systems I stumbled upon Susy, which I thought would work well for my project.

What is Susy?

Susy is very different from most grid systems out there. Most common grid systems consist of a CSS library which contain classes that you add to your HTML mark up. Susy is more of a Sass tool kit which uses sass mixins and maps to allow the developer to create their own grid. I talked more about Susy and sass in a  prior blog post – found here.

The fundament concept of Susy based on this mathematical equation: target / context  = multiplier

Target is your element sizing / how many rows, ems, px a html element takes up and the context is your grid size e.g. 12 columns. Your multiplier is your element size as a percentage.

So this grid toolkit creates fluid layouts. It also has lots of very cool and handy mixin’s (sass functions) which really takes a lot of the time and effect out of using Susy, just declare your sizing in the mixin and Susy works all the math out for you.

What if you want a responsive fluid grid or an static responsive grid? Susy using the new sass map feature. The Sass map feature is a collection of key, value pairs that you can define. Maps main purpose is for settings. Using the $susy() map you can set your grid up how you want It,  gutter size and type , column size, float position, math type plus a lot more, (More about Susy settings here )

Susy has built in breakpoint features to allow for easier media queries.  Which gives all the goodness of sass variables and sass intuitive formatting with media queries.

Why Susy?

Light weight, Susy is a toolkit for writing your own grid. No heavy JS / CSS libraries

Susy’s smart. It’s very exact with its mathematical CSS outputting. Looking at the CSS of Susy you will see sizing, margins, paddings are calculated to 5 decimal places!

Fast. Once you get past the learning curve you can put together responsive sites with Susy very fast. This is due to the large number of positioning mixing and the highly customizable $susy() map.

Something Different. There are a lot of grid frameworks and library’s: bootstrap, 960grid , pure , responsive, all using the same concept of CSS classes which you attach to your html mark-up.

Conclusion

Susy worked well for me but I unsure how it would suit large site layouts. Due to Susy being the underdog in the grid world not a lot of people have heard of it making it not a good choice for team projects.

Bare Bones App – A Proof of concept

It’s a pretty exciting time for me. I have my first beta version of my application working. This version is just demonstrating the functionality of the application and not the visual design of the application, also all data and links in this app are only test data the final app will have proper data.

At the start I demonstrate how the app responds to the phone being turned. Then I show the navigation of the application and viewing websites within the app

Now that you have seen the app in action lets look at how it works.

This app is a single page application that pulls data in as its requested using ajax. I used angular.js javascript framework with some html / css to create this app.

How it Works

At the heart of this app is an angular router. This router reads the app’s HTTP header for any changes. When a button in this app is pressed it sends a variable of he button to the HTTP header. Inside the angular router is a group of .when() functions. These functions are waiting for the HTTP header to meet the condition of that .when() function. When the condition is met the router will load a template file and insert it into the html page in between the view  tags.

The Code

Router

Index.html’s view tag

Currently each category , subcategory , service has its own template and controller. The controller binds its data to the template.

each {{ }} tag represents a variable bound to the controller.

Further Development

From here I need to further develop the app and slim it down. Having a controller and template for each “page” of the app isn’t the best practice. I would rather have a controller and template that takes care of all top level categories , all sub categories and all services.

The data is stored as javascript objects , this is fine for small amounts of data but for apps with lots of data it tends to bloat the app a bit. I want to ether incorporate a sqlite database or a json data storage solution.

Database Connection

I have come across a problem in my application with my sqlite database connection. I am having problems with shipping a pre-populated sqlite database with my application. After researching the problem I have discovered that android doesn’t allow sqlite database to be stored and accessed from within the APK. This is a problem….

What I have discovered

Many people have come across this problem before and there is a phonegap plugin which is meant to fix it. The plugin Litehelpers / sqlite-plugin. This plugin is meant to find your sqlite database from within your app and move it to the android data store if the plugin cannot find your database it will create a new blank database in the android data store. This plugin is maintained and currently has a forum and a gitter for support.  The problem is I cannot get this plugin to work. I installed the plugin and added a line of code opening my database

var db = window.sqlitePlugin.openDatabase({name: “slfw.db”});

While checking the console I get the message:

Database opened

I added a line of code to query the database and select and output all the data from the categories table.

No error but not data output …. odd

I read that if it couldn’t find a database in my application it would create a new one in the android data store. I tried adding a new table and inserting some data then outputting the results.

db.transaction(function(tx) {
tx.executeSql(‘DROP TABLE IF EXISTS test_table’);
tx.executeSql(‘CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text, data_num integer)’);

tx.executeSql(“INSERT INTO test_table (data, data_num) VALUES (?,?)”, [“test”, 100], function(tx, res) {
console.log(“insertId: ” + res.insertId + ” — probably 1″);
console.log(“rowsAffected: ” + res.rowsAffected + ” — should be 1″);

db.transaction(function(tx) {
tx.executeSql(“select count(id) as cnt from test_table;”, [], function(tx, res) {
console.log(“res.rows.length: ” + res.rows.length + ” — should be 1″);
console.log(“res.rows.item(0).cnt: ” + res.rows.item(0).cnt + ” — should be 1″);
});

Success! This method works. The problem with this method is that the first time the user loads up my application they would have to wait while my application builds the database and inserts the data in each column.  The other option is to store all my data into Json files and get my data from these files. This method is more time consuming for me because I need to create each Json object individually.

 

Conclusion

I have come to a cross roads with my application and am unsure about which road to take.

If I continue with trying to load my pre-populated database into my application I could waste vital time (especially if I speed lots of time on it and I don’t get it working).  The pre-populated database method  is far the best method for this application.

Storing my content as json files should work and would be faster then creating a database on the first load of the application

Creating the database and populating the database on the first load of the application creates an large overhead for the user BUT I know this method works!

 

Frameworks and Grids

I want my application to be responsive and to adapt to what ever mobile device it is running on. From small mobile devices to phablets to tablets. To do this I need some kind of responsive feature. I took a look at grid systems:

Grids:

Bootstrap 

Bootstrap is the most popular html/css front end framework, it comes with a grid system , UI elements and icons (font awesome). There are a few problems with using bootstrap for my mobile application.

1. Bootstrap is mainly for creating webpages – Using their UI elements could result in my aplication looking too much like a mobile website and not a native android application.
2. This framework might be too heavy for my needs. I only needs a responsive grid that supports mobile to tablet (12″ max). Bootstrap comes with a lot of unneeded bulk ( UI elements , desktop media queries, etc)

Skeleton 

Skeleton is design with mobile in mind and is ultra light weight with only 400 lines of CSS. Unlike Bootstrap, Skeleton isn’t a UI framework its a grid system.  I like the sound of this grid system and currently I am leaning more towards this grid over bootstrap.

Susy

Susy is an add on for Compass . Compass is Sass framework and Sass is a pre-processing language for CSS, you write Sass code and it gets compiled into CSS. The advantage of Sass is that its easier to read, supports variables and functions.

More about Sass and Compass here:

Sass for Noobs

What is Compass?

Back to Susy

Susy uses the power of Sass to create your own grid. Because this grid is custom built , your grid is only as big as it needs to be making it and economical choice. Susy binds the grid system to your own CSS classes, no need to have html elements with heaps of classes tagged on with messy names.

Boot strap Markup

Susy Markup

Make my own grid

I could create my own grid or break points using media queries. This method takes slightly longer but could ensure the lightest solution to the mixed screen size problem.

 

Frameworks

JavaScript front end frameworks have become hugely popular with every large company which deals with the web creating one. There are so many out there: Angular (Google) React (Facebook) , Ember , Knockout, jquery UI.

Most of these frameworks are built on some variation of MVC pattern (Model , View Controller). Using a JavaScript framework gives my application some good advantages:

Speed – Most of these frameworks try to improve the speed of the application and give structure to your JavaScript. Structure is important with programming without it your application / program can become unmanageable and can collapse under its own weight.

I haven’t used any JavaScript frameworks during my time of study at NMIT, so this is all new grounds for me. Skills with JavaScript frameworks are in high demand and learning one would be beneficial for my career….But which one?

I looked into a few of the different Frameworks out there.

Angular

Angular is developed by Google and is based on the Model View Whatever structure – the whatever being a wild card , you can use a Model View Controller setup or a Model View Model setup.

Angular is great for Hybrid mobile applications and is very fast. The main problem is it has a steeper learning curve.

Ionic Framework

Ionic is a framework designed for hybrid mobile applications. It uses angular and its own UI elements to create mobile application. The only problem with Ionic currently is their lack of tablet support.

Jquery Mobile

Jquery Mobile comes with an inbuilt grid system. From what I researched Jquery can be very good for creating hybrid mobile applications but has a few problems.

1. Jquery likes to be in controll and doesn’t work well with out frameworks.
2. Jquery can become slow and heavy.

Conclusion

My choices are not set in stone but currently I am leaning towards Susy for my grid system. Susy seems like a good choice with its lightweight and its incorporation of Sass

For my framework choice I feel like the speed that angular offers and the skill set I would learn from this JavaScript framework would makes this a good choice.

Debugging Phonegap

Normally when debuging HTML/CSS Javascript web applications you would turn to the browser console for any errors in your code.

Because phonegap applications are compiled into an apk and run ether on a mobile phone or in an emulator debugging is a lot harder.

I started out with adding javascript alert() functions into my code. These functions send out a message when ever a certain piece of code was called. This could only get my so far and it wasn’t greatly effective. I set out to research ways to debug in phone gap. Turns out there are alot of different programs to help with this task.

Ripple

Ripple is an extension for google chrome.  It allows for hybrid mobile apps to be emulated in google chrome.  It offers the ability to fire mobile events such as – volume up , volume down, app pause. The extension has a large number of devices to pick from.

Phonegap build

When uploading to your application to phonegap bild there is an option to debug the app. Phonegap build debug is able to retrieve information about the applications storage, network connections , HTML/CSS and access to a javascript console.

Chrome

Chrome has the ability to debug mobile apps while they are running on a mobile device debugging is done through a desktop. By connection your mobile phone to your desktop via USB and by visiting the following URL in chrome:

chrome://inspect/#devices

you can access the a console for any error logging, while the application is running on mobile phone.

My Thoughts

During the development of my applications I have used all of these methods of debugging for many different reasons, and have proven very useful. Out of all the debug methods I found Google Chrome’s device debug the most effective because it allows me the run the application in its native environment, this also gives me the piece of mind that I’m not going to come across any bugs during deployment.

 

Setting up Phone Gap

This week I setup my phone gap environment for development. It wasn’t as simple as I thought it was. Phone gap has a few dependencies needed for it to run and installation is done all via the command line.

Dependencies

Nodejs

To install phonegap you must use Nodejs’s packages manager – npm

My first step was to install Nodejs.

Upon installing , nodejs creates a local variable to gain access to its features over the command line – one of these features is npm (node package manager) using npm you can install software through the command line.

Java

Java is needed for phonegap to be able to compile the project into a android app.

For windows apps you will need the .net framework.

SDK

SDK(software developer kit) is also needed to compile the phonegap project. Android studio comes bundled with the SDK so I downloaded android studio.

Installing phone gap

With nodejs’s npm all that I need to do is run the command

npm install -g phonegap

Creating a project

Now that phonegap is installed , its time to create a project.

when phonegap is install the system variable is installed with it – phonegap

to create an project I need to run the command: (in the desired directory)

phonegap create appname

cd to the directory

and add a phone platform

phonegap add platform android

npm will take care of the rest

To emulate my app it need to build then run. During this process I got an error 

After some research into this problem I found a solution. There was something wrong is my .gradel folder. By deleting the .gradle folder phonegap had to fetch a new .gradel folder (via npm) upon build. Doing this fixed the problem.

After building my app I can now run it using the android emulator

phonegap emulate android

Heres where I meet another problem , the emulator is not working. After some research I discovered that I needed a CPU wich supports Intel HAXM . Luckily I was able to change the emulators CPU to ARM

This fixed the problem but it made the emulator run alot slower.

Heres some images of the emulator running

Phonegap Build

After some more reading I discoved that phonegap offers an cloud service to build your app

http://build.phonegap.com

All you need to do is zip the app and upload it. Once uploaded there is a QR code you can scan to install the app on your phone. This is a much easier solution and it allows me to test it on my mobile device!

Data!

This application is data heavy with not many tables but a lot of entries. The application it self would only need to read the data and not write or update the data in anyway. With these thoughts in mind I went and did some research on data storage for android and phone gap applications.

Data storage

I have a number of different options here when it comes to data storage. I can use a DBMS to store all my data or I can use androids internal storage feature, another option to save my data locally with XML or JSON.

Internal Storage features

Android has an internal storage feature. From what I have gathered this feature is good for saving users app settings or preferences.  It doesn’t have any built in features for structuring and organizing data.

XML / JSON

XML / JSON is faster to retrieved and write data with and is very good for transferring data over the internet. But due to the amount of data my app is storing I feel like these technologies won’t aid the app with feature updates and growth of the application.

DBMS

DBMS stands for database manage system. Android has inbuilt support for Sqlite which is a small database system which is built for performance over size and security. The good thing about having a database is that my content would be neatly organised into tables. I would also be able to create the relation ships between the parent categories , sub categories , and Links with foreign keys.  A Database like Sqlite would allow the application’s data to expand more easily with feature updates.

 

Conclusion

I think that the database approach would be the best solution for information management in my application.

Database

I used Visio to to design my database. The name row will be used to identify each table. each category has an image associated with it. each category , subcategory and link will have and optional context text. The context text is used to add a bit of context to the category for if the name is to broad.

Image Storage

I had two options when it came to image storage. Option one Store the image it self in the database. This option is good if I was to have the database running off a web server with the app connecting to it to retrieve data from, this option also has greater security.

Option two to save the location of the image in the app folder structure. This way is much faster but offers less security.

Seeing that the application isn’t storing any sensitive data or images I went with the URL approach.

Database diagram :