Ionic Material Design (Full Applications)

About :

Ionic Material Design is Mobile Native Web Application that
developed by Ionic Framework under the design concept of Google Material
Design integrate with the functions of ngCorgova.

The application will present the function of Application storage, Social
Connect, Share content to social network, Advertising in application,
Hardware connect and Material Design Concept.

Also we have the documentation that will Introduce you about how to getting
started with the project.

Important Notes :

To running this project and use it productive way.

You’ll need a basic understanding of this following:

• HTML
• JavaScript
• CSS
• AngularJs
• Ionic Framework

Highlight :

Application Storage :

Every application have to store data.
We will introduce you to using application storage to store data in your
application by
using SQLite and LocalStorage.

SQLite Database :

SQLite is the best way to store data to application storage. It allow you to
manage complex relational database.

Advantage of SQLite it have unlimit ability to store data. It will create
the sqlite file that store in the application. Also can store more complex
data such as relation between tables.

We use SQLite function to create a small contract application that including
function to :

Local Storage Database :

LocalStorage have ability to store data by HTML5 loacalStorage function.

We use LocalStorage function to create a notes application that including
function to :

WordPress :

Getting WordPress feed by input your WordPress URL to application.
It will use WP REST
API for connecting with WordPress
Feed.

The function include:

Social Network Connect :

Using Social Network Connect for connect your application with social
network.
You can use it to be your application log in authentication and get user
profile information from social
network. Also it can retrieve data object of user timeline.

Advantage of Social Network Connect is you don’t need to create login page
for your application just use
social log in authentication. And it is easy for user to login.

Facebook :

Use cordovaOauth for connect with facebook to get user profile
information, user
timeline and friend list by calling Facebook API Version 2.4.

The function include:

Google Plus :

Use cordovaOauth for connect with Google to get user profile
information and user
activity by calling Google API.

The function include:

Instagram :

Use cordovaOauth for connect with instagram to get user profile
information and user
feed by calling instagram API.

The function include:

• Log in
• Get user profile information
• Get user feed

Foursquare :

Use cordovaOauth for connect with foursquare to get user profile
information and user
tips feed by calling foursquare API.

The function include:

Dropbox :

Use cordovaOauth for connect with dropbox to get user profile
information and user
files directory feed by calling dropbox API.

The function include:

• Log in
• Get user profile information
• Get files directory feed

Share Application Content :

Share Application Content is for share content from the application
to social network by using feature of ngCordova.

Social Share :

Using cordovaSocialSharing for share application content to social network
and using Canvas2ImagePlugin for save image to mobile gallery.

The function include:

• Share content to facebook
• Share content to twitter
• Share content to e-mail
• Save image to mobile gallery

Mail & Message :

Using cordovaSocialSharing for send email from the application
and using cordovaSMS for sent message.

The function include:

• Send e-mail
• Send message
• Mobile calling

Advertising Application :

Google AdMob :

Using Google AdMob for earning money to your application. By using
cordovaAdMob.

The function include:

• Show AdMob
• Hide AdMob

Hardware Connect :

Hardware Connect is for connecting with mobile feature by using ngCordova.

Mobile Contract :

Using cordovaContacts for connecting the application to mobile contract.

The function include:

Image Picker :

Using cordovaImagePicker for selecting image from mobile gallery.

The function include:

• Select single image
• Select multiple images

Vibration :

Using cordovaVibration for using mobile vibration.

The function include:

Flashlight :

Using cordovaFlashlight for using mobile flashlight.

The function include:

Device Information :

Using ionic.Platform.device for get device information.

The function include:

• Get mobile device information

Material Design Themes :

Material theme that will help you to generate idea to create your powerful
application.

Theme Color :

You can change color of application theme, Just config it !!!

Demo :

If you would like to try full application, Please use below detail :

• Android Install :
  Ionic Material Design APK
  

Installation :

To install Ionic Material Design you can following this video instruction :
Ionic Material
Design Getting Started.

Documentation :

We have brings all of system features to the table list and providing a
quick start guideline of how to start with our product. We describes all
details that is needed in order to get started with the product and put
the explanation of the code for you to understand in the source code.

This is a Documentation in the package file by the topic of :

• Getting
  Started and Installation
• HTML Files
  and Structure
• CSS Files and
  Structure
• Javascript
  Files and Structure
• More detail …

Please read deeply and understand the documentation before you buy this
product.

Compatibility :

This project was tested in :

• IOS Version 9 iPhone 5c
• IOS Version 8 iPhone 5c
• IOS Version 7 iPhone 5
• Android Version 4.4.4 Samsung E5

Compatible with:

• IOS Version 9
• IOS Version 8
• IOS Version 7
• Android Version 4.4.4 >

Known Issues :

1. Social connect :
   
   Foursquare and Dropbox feed API
   have no paging so it cannot do load more
   function.

2. Social Share :
   
   1. For send email user must add email to the native mail
      application
      before sent e-mail.
   2. Facebook and Twitter sharing can not send a text via ngCordova
      API
      to shareing screen.
      However user can type text message on sharing screen.
   3. The reference limitation of $cordovaSocialSharing :
      
      
      
      Learn more:
      ngcordova socialSharing

3. Mobile contract :
   

   For get all contracts you have to wait up to 2 sec for
   loading
   contracts form device.

4. HTML Button Tag :

   Problem : Ionic Material Design doesn’t support
   HTML button Tag, Because
   Angular
   material and angular-aria will have double event when
   tap at the HTML button Tag on Mobile
   Browser.

   Solution : Ionic Material Design avoid this issue
   by using HTML a to create
   button by :
   

   
   <a class="md-raised md-button" href="#" ng-click="doSomeThing()">Button</a>
                                                       

   To create button :.

5. Image Size :
   

   Application will lag and slow if image size are large.

Sources and Credits :

I’ve used the following Icons, Framework, Idea , Inspiration or
Other
files as listed.

Also a
thanks to all the awesome resources I’ve used for the development of
this
project.

Resources used in Development

• Ionic Framework
• Angular
  Material
• Angular
  Messages
• Angular Aria
• ngCordova
• jQuery
• Fort
  Awesome
• Google Fort
  Roboto

Resources used in Design

• 
  Google Material Design
• Dribbble.com
• Materialpalette.com

Version History

Version 1.0 – released 21 september 2015

Download Ionic Material Design (Full Applications)