Barebone Ionic - Full Application

What’s new in version 2.24:
Tabs with badges. Google Places autocomplete.

What’s new in version 2.23:
Youtube player stops playing in the background when the app is paused.

Upgrade to Ionic 2

Ionic 2 is superior to Ionic 1 – period! Upgrade to Ionic 2 and enjoy its improved performance, new components, powerful set of Native APIs and many more. Get started now with Barebone Ionic 2, the Swiss Army Knife of Ionic 2! Visit and choose the edition that suits your learning and development needs the most.

Feature request

Help us improve this app in a way that absolutely makes sense. Suggest the next feature you would like to see implemented. We are taking suggestions very seriously.

Introduction

Barebone Ionic is the bootstrap you need in order to build your next extremely modular Ionic application. It is a well structured, well organised and implemented, full working app that comes with all the ingredients a modern application needs. Best practices, proven techniques and experienced software architecture are packed with a well crafted design.

At a glance

• Slide menu navigation
• Master/Details display of remote JSON data
• Image Galleries based of remote JSON data
• Infinite Scroll
• Push notification
• Plethora of Form Elements Samples
• Grunt based build system
• Extremely Modular Architecture
• Share articles to social media and any other defined service
• Live Chat backed by Firebase
• Shopping Cart
• Restaurant Ordering
• SASS support
• Live Radio – Audio Stream
• Calendar View with Events
• Feedback form with geolocation
• SQLite CRUD example
• Local Storage CRUD example
• oAuth sample utilizing 3 service providers: Twitter, Facebook, Google
• PopUp context menu
• Tinder and Swipeable cards
• Tabs with badges
• 3rd party APIs integration
• WordPress
• Drupal
• YouTube
• Vimeo
• Facebook (Authentication, User’s Albums
• Instagram
• Google Charts
• Firebase (Authentication, Live chat)
• Rate this App in AppStore and Google Play
• AdMob – Google Ads
• Google Places autocomplete
• Native calls
• Make a phone call
• Prepare and email and open the native mailer app
• Open Map application with a predefined marker
• Send a URL to a native browser window
• Watch and display the current position of the device

Demo

Android .APK

• Download Android APK v2.24

Preview on iOS and Android – Ionic View

• Download the Ionic View app )
• Use the App ID 241b6d37

Note: Some features are not fully functional for preview on Ionic View. Especially, those that need to launch another application of the device such as “Find us” which launches device’s Google Maps application. Other examples are “Share” an article and “Send email” features.

Plenty of Color combinations – Themes

Tens of carefully selected, awesome color schemes to choose from: Square default, Square dark, Awesome, Ocean, Material indigo, Material blue, Material red, Material pink, Material purple, Material dark purple. Just pick the one that suits your brand and activate it with a single modification of the related file.

Features

Stripe payments

A fully-functional example of Stripe payment processor usage is demonstrated. You can process credit cards professionally through a checkout form and make an actual charge by using this example as a starting point.

Restaurant Menu

Barebone Ionic can now give you the solution even for a more specific kind of e-shop! That is a Restaurant e-shop! Demonstrate the Restaurant’s menu and let everyone buy your delicacies in a few steps.

A list of restaurant menu items is displayed presenting the products details, images and price. Also, a full-featured shopping cart is included so that the user can add/remove the desired menu items. Then, two delivery methods (home delivery and take away) are provided and, by the time the process is completed, the user receives an order confirmation email making them aware of the ordered items and everything else that is needed according to a simple setting of the email contents.

Tinder and Swipeable cards

Barebone Ionic makes use of Ionic’s Tinder Cards and Swipeable Cards libraries and applies a simple yet effective example of an enjoyable user experience letting the user swipe cards right, left or down. We are doing our best to make you fully aware of all the goodies you can use to make your apps even fancier!

oAuth

Keep users logged in on the app by providing three different options: Facebook, Twitter and Google account. Barebone Ionic app makes use of Cordova Oauth module and lets your users have quick access to any service requires a login process. Login information is maintained in the local storage of the app unless user taps the “Log out” button. You are only one step away from the configuration of this feature. Just set the related ID of each login provider and you are all ready.

PopUp context menu

Countless times views that float above app’s content are needed either to show more info about the current view, select a tool/configuration option or present a list of actions to perform inside the view. Barebone Ionic app demonstrates Ionic’s popover element to make it easier for you to get started.

SQLite and Local Storage

SQLite module provides a full working example where the whole set of the CRUD operations is demonstrated. An SQLite database is initialized and a simple model is serialized and deserialized into and from it. All the UI required for this purpose is carefully handcrafted.

Is SQLite too complex for your needs? Persist your app’s data by taking advantage of Local Storage. Use Barebone Ionic’s sample code as your starting point and get the hang of it in no time! Local Storage module comes with everything you need.

Feedback

Feedback module provides the user the option to compose and send a report which consist of, a text message, an image, a video and the geographic location of the device. Watch a video demonstration

Rate this App

Ratings are beneficial for finding out the problems of your app and the improvements you could make. A button from inside the app makes it quick and easy for the user to rate the app without a lot of hoops to jump through. You simply need to provide the url that will allow the user open the app directly and rate it. Besides, if the user does not make a decision to rate it on their own, the app itself will prompt the user displaying the related dialog each time they reach the number of predefined uses of the app. As for the configuration, you will need no time as just a single variable needs to be modified – no further coding is required.

Watch a video demonstration

Events

Display events in a Calendar view. Events modules provides an easy way to describe Event by using a simple JSON structure. All the records are automatically be displayed as event entries into a Calendar

Navigation

The application follows the modern trends of the “Slide menu”.

Live Radio – Audio Stream

Stream module gets any live streaming URL and turns it into a live radio screen. Everything is already coded so you can make your own live streaming radio available for use simply by defining the URL of your stream.

Shopping Cart

Barebone Ionic is coming with a full working Shopping Cart module which provides a unified add to cart and checkout user experience.

• Watch the video

Firebase Login

Barebone Ionic is coming with a module which demonstrates the integration with the Firebase platform. A full working authentication example is part of the module.

Firebase Chat

Once the user authenticates itself, gets access to all chat rooms which have been defined through the Firebase backend. When a message is posted, in a room, appears instantly in all the other devices that are currently connected to that room. A full history of the messages is kept in Firebase.

• Watch the video

Remote data

The News, Products and Galleries, listing windows are fetching data from online sources by using the JSON protocol. The source URLs for these listings are set in the application’s configuration file. Images, Galleries, texts and whole entries can be updated by adjusting the remote sources. Nevertheless, rebuilding and re-distributing the application are not required for constant updates.

The same applies for the pins in the live map too. The users are able to add and configure the pin points just by adjusting the remote source.

Articles and products listing

Two different content types are used and demonstrated in Barebone Ionic.

The application provides the ability of forming Articles by adding a unique photo in any of them.

Products are similar to Articles but are supporting an unlimited number of accompanying images. An Image Slider is created by using them.

Gallery integration

Barebone Ionic comes with an Image Gallery already integrated. All the images are controlled by a remote JSON structure. Unlimited number of Galleries is supported and displayed by using three different views: Galleries Feed, Gallery’s thumbnail, Images View (slide).

Wordpress

Barebone Ionic provides Wordpress support that is going to facilitate you to fetch and display the posts of a Wordpress website by simply replacing a single line of the code with the desired JSON feed source.

Drupal

Barebone Ionic ensures an easy way to fetch and display the articles you choose from a Drupal website in a very smart and rapid manner just by placing your JSON feed of the articles only in one line of the code.

RSS

Atom, RSS, or Media RSS feed could be consumed by using the Google Feed API which is already integrated into the app. A Working example where articles are consumed for the RSS Feeds of the Wired magazine is provided

YouTube

Youtube playlists is fast and easy to be fed into the application. You only need to do two simple steps:

• Provide the Youtube account username and
• Provide your API key in a single code line

All the complexity behind the communication with the Youtube API is taken care for you already.

Vimeo

Vimeo playlists is fast and easy to be fed into the application. You only need to do two simple steps:

• Provide the Vimeo account username and
• Provide your API key in a single code line

All the complexity behind the communication with the Vimeo API is taken care for you already.

Infinite Scroll

Infinite Scroll, a technique that load paginated data automatically while you are scrolling is demonstrated. Best practices regarding its implementation are available in the Vimeo videos listing screens.

Facebook

A full working example of the Facebook Graph API is integrated into the application.

Facebook – User Authentication

The application authenticates the user and displays its full name and email address Facebook keeps in its records.

Facebook – User Albums

Once the user is authenticated the application gets and displays the Albums and their Photos the user has uploaded.

Facebook – Page Albums

The applications gets the Albums of the specified Facebook page and creates images galleries by using their images.

The authentication method of the “permanent token” is used, so the user is not requested to login with his Facebook Account.

Instagram

A full working example of the Instagram API is integrated into the application. The application authenticates the user and displays the recent posts he has made in Instagram.

AdMob

Barebone Ionic comes with a full working example where the AdMob integration is demonstrated.

Social Sharing

Social sharing is a core feature of the application. Articles are providing the option to be shared to Facebook, Twitter, via email or any other registered service.

Google Charts

A Charts module is part of the Barebone Ionic application. The module is making use of Google Charts and integrates their API. It uses the Chart engine the service of Google is providing and makes any chart available in the mobile device. The data that are used for the charts are handled completely by the application.

Location Service / Device’s Location

A full working Location module demonstrates the location service. It is watching and gets and displays the current position of the device. Move the device and the location data will be updated.

Push notification

A full working Push notification example is integrated into the application. It comes also with detailed instructions on how to configure everything in your end and have your application ready to send and receive Push Notifications.

Plethora of Forms samples

A plethora of Sample screens where all the available by the platform form elements and form layouts are demonstrated.

See the video demonstration

Architecture

Yeoman Ionic Framework Generator powered

Yeoman Ionic Framework Generator combines the best practices and features for scaffolding a hybrid application. It makes building of a mobile app easy and quickly since Yeoman is integrated with Ionic Framework and Cordova plugin. Also, the included Grunt build system optimizes and automates some important tasks of your workflow.

Modularity

Barebone Ionic’s extremely modular architecture is going to eliminate any unnecessary complexity. Its code is clean and well-organised into modules to make configuration even easier. A configuration file is responsible for each feature of the application such as:

• The RSS feeds
• The News
• The Galleries
• The URLs for the remote data

Therefore, the configuration of all of the features is done through the services by which they are accompanied.

Ionic design

Barebone Ionic is based on the UI elements that the Ionic Framework provides. Ionic Framework comes with a detailed and impressive CSS framework for layout styling. Furthermore, it handles header elements in a very similar way to existing libraries you may have used. Headers are available in many different default color options. Adding a footer element is as easy as adding a header. Moreover, Ionic comes with its own icon library built in which contains almost everything you should need. Use Ionic’s UI components and they will give you a fully customised and functional UI.

Documentation

The documentation which is coming with, describes in details everything that is needed in order to get started with the app and personalize it.

Multilingual support

Are you interesting in having multiple languages packed with this application? Check our I18N Ionic Application and learn how you can make it happen.

Change log

2.24 - Mar 23, 2017
- Google Places autocomplete
- Tabs with badges

2.23 - Dec 13, 2016
- Youtube player stops when the app is paused

2.22 - Oct 20, 2016
- Slide menu remains open on tablets and wide screens
- Support for Youtube channel URLs based on both username and channel IDs

2.21 - Oct 13, 2016
- Fixed misplaced radio play button on real devices

2.20 - Sep 09, 2016
- Migration to the Cloud Client Push

2.19 - Sep 02, 2016
- Upgrade Firebase to 3.x

2.18 - May 04, 2016
- Ionic update to v1.3.0
- Fix on showing a pin and setting the destination on Android's maps app
- Fix of the ionic keyboard plugin id

2.17 - March 03, 2016
- Addition of six new themes
- oAuth fix
- Spacing between the cards in the home screen fix

2.16 - February 09, 2016
- Ionic update to v1.2.4 as Ionic 1.2 uses native scrolling by default.
- Ionic CLI update to v1.7.13
- Email composer fix for Android 6

2.15 - January 12. 2015
- Example of Stripe payment processor usage. Includes checkout and charge of credit card

2.14 - January 04, 2015
- Four theme options

2.13 - December 22, 2015
- Improved installation process
- Downgrade of Apache Cordova iOS to v3.9.2 because of plugin conflicts
- Copy of package file to be used as a replacement when needed
- Usage of a forked version of the audio stream plugin which fixes the Audio Stream issues for Android 5.x and 6.x

2.12 - December 15, 2015
- Fix on ConnectionType always returning Connection.UNKNOWN (Android)
- Ionic update to v1.1.1
- Cordova CLI update to v5.4.1
- Ionic CLI update to v1.7.12
- ngCordova update to v0.1.23-alpha
- Support of android versions back to 4.0
- Replacement of AdMob plugin with AdMob Pro
- Plugins update
- Improved installation process for Win/Linux/MacOS
- README.md update with improved instructions on how to install, run, build the app.

2.11 - November 3, 2015
- Restaurant module. Full working restaurant ordering system. Includes list of menu items, shopping cart, checkout, delivery methods and confirmation email.
- README.md update with improved instructions on how to install, run, build the app.

2.10 - October 18, 2015
- Local-storage module. Full working Local-storage CRUD example
- Tinder Cards module. Tinder cards full working demonstration.
- Swipeable Cards module. Swipeable cards full working demonstration.
- Ionic CLI update to v1.7.6
- Minor issues fix related to bouncing view.

2.9 - October 9, 2015
- oAuth samples utilizing Twitter, Facebook and Google as service providers
- PopOver context (right) menu

2.8 - October 6, 2015
- Utilization of the Transport Security Plugin to allow HTTP requests for iOS9
- Addition of a full working SQLite example

2.7 - September 30, 2015
- Ionic update to v1.1.0
- Cordova CLI update to v5.3.3
- Ionic CLI update to v1.6.4

2.6 - September 10, 2015
- User's Feedback module. This module provides the user the option to compose and send a report which consist of, a text message, an image, a video and the geographic location of the device.

2.5 - September 8, 2015
- AdMob integration

2.4 - August 7, 2015
- Rate module. Integration of Cordova Apprate Plugin and demonstration of a real case scenario
- Update ngCordova to v0.1.18-alpha.
- Explicit reference to ng-cordova-auth. It is required bye the v0.1.18-alpha of ngCordova
- Integration with Ionic Platform and deployment through Ionic View

2.3 - July 31, 2015
- Event modules. A screen which displays Calendar entries in a Event/Calendar view has been added.
- Network connection check: The application check for network connections before each http request and displays a message if the connection can not be established.
- Cordova Whitelist plugin added which improves the behaviour of network connections for Android
- Cordova update to 5.1.1
- Ionic CLI update to v1.6.3

2.2 - July 18, 2015
- Fix: Map Display on iOS simulator and devices
- Ionic CLI update to v1.6.1
- Ionic update to v1.0.1

2.1 - July 11, 2015
- Live Radio / Audio Stream playback

2.0 - June 27, 2015
- SASS support
- Cordova update to v5.0.0
- Ionic update to v1.5.5.
- Fix the "grunt serve" issue duo to version 1.0.1 of the "grunt-concurrent" module

1.8 - June 27, 2015
- Shopping Cart with products browsing, add to cart and checkout

1.7 - June 20, 2015
- Live Chat backed by Firebase
- Firebase Authentication
- Icons in the Slide Menu

1.6 - June 13, 2015
- Facebook API authentication by using a permanent token (no user login is required)
- Facebook Page Albums integration.  The application creates Photo Albums by using the albums and their images of the specified Facebook page.
- Sharing article to Facebook, Twitter, Email and any other defined in the device service.

1.5 - June 10, 2015
- Facebook User Albums integration. The application loads the Albums the authorised user has uploaded in his Facebook account and displays them as Galleries.
- Google Charts integration

1.4 - June 9, 2015
- Position Screen which demonstrates the location service. It is watching and gets and displays the current position of the device.

1.3 - June 8, 2015
- Sample screens demonstrating all the Form Elements and Layouts
- Sample screens demonstrating Tabs and all their available styles.

1.2 - June 3, 2015
- Facebook Graph API integration with examples
- - Login
- - Get user's full name and email address
- Instagram API integration with examples
- - Login
- - Get user's recent posts

1.1 - May 31, 2015
- Vimeo API integration with examples.
- Infinite scroll example.
- Automate dependencies installation via grunt.

1.0 - May 17, 2015
- Initial release