Sensation - PhoneGap/Cordova Full Hybrid App

Sensation - PhoneGap/Cordova Full Hybrid App - CodeCanyon Item for Sale



Sensation is a PhoneGap / Cordova Full Hybrid App with AngularJS + Onsen UI (Latest Release: 1.9.0).

Sensation.xcodeproj is already tested without any issues in Xcode 6.0.1 with iPhone 6 / iOS 8.0 (12A365) Simulator.

PhoneGap is a very helpful hybrid mobile app development framework, which can drastically improve your HTML5 app development experience. It allows you to easily access native functionality, like camera and Geolocation via JavaScript. Onsen UI is a Custom Elements-Based HTML5 UI Framework for HTML5, PhoneGap & Cordova apps.

Sensation gives you the bootstrap you need in order to build your next PhoneGap / Cordova application based on Onsen UI. In addition, it gives you examples on how to access the native mobile functionality using the Cordova library.

Sensation 1.9.0 supports the Onsen UI 1.1.3. Onsen UI 1.1.x http://onsenui.io is a major new release. Onsen UI 1.1.x reduces AngularJS complexity, supports jQuery and is integrated with CSS Components Theme Roller http://components.onsenui.io. Download also the APK files.

JSON Protocol

News, Products, About, RSS, Wordpress JSON listing and Wordpress Categories windows are fetching data from JSON sources by using the JSON protocol. News, Products and About listing windows come with their own JSON data structures.
Regarding the JSON windows back-end, please check the tutorial that we have prepared with title AngularJS Tutorial: RESTful JSON Parsing with the Sensation App. By understanding this tutorial and the Master / Detail pages, you will have no problems to integrate any custom JSON structures into this App.

Home Page, Menu, Map, Gallery, Plugins, Settings, Discrete Bar Chart windows are fetching data from AngularJS Factories using the data.js javascript file.

Wordpress JSON



Wordpress JSON windows are fetching data from JSON source (with JSON API plugin https://wordpress.org/plugins/json-api) by using the JSON protocol. Please set your HTTP request url (e.g. http://www.example.org/api/get_recent_posts) into the data.js file using the corresponding factory.

Note that the tutorial AngularJS Tutorial: RESTful JSON Parsing with the Sensation App is based on the Wordpress JSON window back-end.
Wordpress Server Side pagination
Sensation >=1.2.0 comes also with Server Side pagination support accompanied by a Status Bar. Just set your HTTP request url (e.g. http://www.example.org/api/get_recent_posts) into the data.js file using the corresponding factory and the Sensation will make the server side pagination for you by passing the appropriate parameter to the url in each Load more request http://www.example.org/api/get_recent_posts?page=1 using the $http AngularJS service $http({method: 'GET', url: ServerPostsData.url + 'page=' + $scope.page}). Read more


Wordpress Categories
Sensation >=1.8.0 comes also with the Wordpress Categories window. This window gets all the active Wordpress Categories using the get_category_index API method and then get the Wordpress Posts of each Category using the get_category_posts API method with Server Side pagination (3 Level – Master/Detail pages). Read more

Custom fields from Wordpress JSON API
Regarding the Wordpress JSON, Wordpress Server Side Pagination and Wordpress Categories windows, in many cases there is a need to show custom fields in the windows. The tutorial Custom fields from Wordpress JSON API with the Sensation App will guide you on how to parse your custom fields.

PhoneGap Social Sharing plugin (Mail, Facebook, Twitter, Google+ etc.) for all Wordpress windows
Sensation >=1.9.0 comes with PhoneGap Social Sharing plugin to share Post Message, Subject and Link via the native sharing widget https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin (nl.x-services.plugins.socialsharing). This plugin supports sharing files from the internet, the local filesystem, or from the www folder.
We have added a Share post button/function via the native sharing widget for Post, Server Post, Category Post and RSS Feed windows.

PhoneGap / Cordova Plugins

  • Device: The device object describes the device’s hardware and software
  • Dialogs: Visual, audible, and tactile device notifications
  • Geolocation: The geolocation object provides access to location data based on the device’s GPS sensor or inferred from network signals
  • EmailComposer: The plugin provides access to the standard interface that manages the editing and sending an email message
  • InAppBrowser: This plugin provides a web browser view that displays when calling window.open(), or when opening a link formed as <a target="_blank"></a>
    Please check also this tutorial on how to open any external link with InAppBrowser PhoneGap / Cordova Plugin
  • Barcode Scanner: com.phonegap.plugins.barcodescanner – The plugin provides cross-platform BarcodeScanner for Cordova / PhoneGap. Video: Barcode Scanner Plugin in action
    The following barcode types are currently supported from the plugin:
    Android: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, PDF417, RSS_EXPANDED – iOS: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, ITF
  • PhoneGap Social Sharing plugin: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git (nl.x-services.plugins.socialsharing) – This plugin allows you to use the native sharing window of your mobile device.

RSS Feed Reader



Sensation >=1.2.0 comes with an RSS Feed Reader using AngularJS and Google Feed API. Each RSS Feed post comes also with a link to the original post using the Cordova inAppBrowser plugin org.apache.cordova.inappbrowser. This plugin provides a web browser view that displays when calling window.open(). The window.open() opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.


Local Storage – Offline Mode for RSS Feeds
Sensation >=1.9.0 comes with a prototype implementation (AngularJS service) which supports Offline Mode for the RSS Feeds window. This AngularJS service Get/Save/Clear RSS Feeds to the local storage. In addition, we have added a clear local storage button to the Settings window. Please find more on the corresponding support section http://goo.gl/Zv7NL1.

Tutorials

Sensation Tutorials document.

How to build the Sensation App with Adobe® PhoneGap™ Build

Adobe PhoneGap provides a way for users to create mobile applications using technologies such as HTML, CSS, and Javascript. Please follow the steps in the tutorial in order to build the Sensation App with the Adobe® PhoneGap™ Build.

APK files

Onsen UI 1.1.3

APK file with the Default color scheme
https://dl.dropboxusercontent.com/u/12169158/Sensation-default.apk

APK file with the Gray color scheme
https://dl.dropboxusercontent.com/u/12169158/Sensation-gray.apk

APK file with the Blue color scheme
https://dl.dropboxusercontent.com/u/12169158/Sensation-blue.apk

APK file with the Red color scheme
https://dl.dropboxusercontent.com/u/12169158/Sensation-red.apk

APK file with the Purple color scheme
https://dl.dropboxusercontent.com/u/12169158/Sensation-purple.apk

Find here more info about the Sensation Themes.

Discrete Bar Chart with nvD3 visualization via JSON data

Sensation >=1.8.0 comes with a Discrete Bar Chart window with nvD3 visualization via JSON data. It already includes all the appropriate libraries and creates the corresponding AngularJS Data Factory and Controller. Please find more JSON data examples for any Chart type here http://krispo.github.io/angular-nvd3/.

Features

  • PhoneGap/Cordova Full Hybrid App using AngularJS + Onsen UI
  • Onsen UI – A Custom Elements-Based HTML5 UI Framework
  • Master/Detail pages with Onsen UI (2 or 3 Levels)
  • Onsen UI Components
  • Onsen UI is bundled with Font Awesome
  • AngularJS Controllers, Factories
  • Cordova Plugins
  • Cordova updated to 3.5.0-0.2.4
  • Already builded for iOS and Android platforms using the Cordova Command-Line Interface – Build are included in the deliverable (Onsen UI does not support Windows Phone platforms yet)
  • News, Products, About and Wordpress listing windows are fetching data from JSON sources by using the JSON protocol.
  • Home Page, Menu, Map, Gallery, Plugins, Settings windows are fetching data from AngularJS Factories using the data.js javascript file
  • Google Maps Javascript API elements with UI.Map directive
  • GoogleMap AngularJS Directive
  • angular-local-storage module that gives you access to the browser’s Local Storage with cookie fallback
  • AngularJS Touch Carousel
  • Angular-nvD3 – An AngularJS directive for NVD3 re-usable charting library (based on D3)

AngularJS example implementations

  • Using comma as list separator
  • Client side show more pagination
  • Server side show more pagination
  • Parsing JSON responses
  • Parsing data/values created by Factories
  • RSS Feed Reader using AngularJS
  • Using Filter for opening/closing elements after n iterations

1. Server side pagination with status bar
2. Client side pagination

Resources

CHANGELOG

Sensation 1.9.0
- (1.1.3) Update Onsen UI framework to the latest 1.1.3 release
- (1.1.3) Add Cordova plugin to share text, a file (image/PDF/..), or a URL (or all three) via the native sharing widget https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
- (1.1.3) Share post button/function via the native sharing widget for Post, Server Post, Category Post and RSS Feed windows - Share Title, Message and Link
- (1.1.3) Prototype: Offline Mode for the RSS window - Save RSS Feeds to the local storage
- (1.1.3) Reset Local Storage for the RSS Feeds through the Settings window
- (1.1.3) Print the Title with ng-bind-html for Post, Server Post and Category Post windows - Share Title, Message and Link
- (1.1.3) Update all the default color schemes
Sensation 1.8.3
- (1.1.2) Confirm before closing the Sensation App http://goo.gl/D9drIW
- (1.1.2) Load the code for opening any external link with InAppBrowser only one time in the onDeviceReady function into the app.js
- (1.1.2) Print the full image into the post.html, serverpost.html and category-post.html
- (1.1.2) Prepare a tutorial on how to confirm before closing the Sensation App http://goo.gl/D9drIW
- (1.1.2) Prepare a tutorial on how to print custom fields from Wordpress JSON API http://goo.gl/iWY0pT
Sensation 1.8.2
- (1.1.2) Include jQuery 1.11.1 (jquery-1.11.1.min.js)
- (1.1.2) Open any external link with InAppBrowser PhoneGap / Cordova Plugin in Post, Server Post, Category Post and RSS Feed Windows
- (1.1.2) Prepare a tutorial on how to open any external link with InAppBrowser PhoneGap / Cordova Plugin http://goo.gl/XHr9UZ
- (1.1.2) Update the RSS data source to https://developer.apple.com/news/rss/news.rss
Sensation 1.8.1
- (1.1.2) Add Loading messages to Wordpress Categories window
- (1.1.2) Remove custom height from Discrete Bar Chart
Sensation 1.8.0
- (1.1.2) Get all the active Wordpress Categories using the get_category_index method and then get the Wordpress Posts of each Category using the method get_category_posts with Server Side pagination
- (1.1.2) Print the number of posts for each active Wordpress Category
- (1.1.2) Master - Detail implementation with 3 Levels
- (1.1.2) An example of creating a simple Discrete Bar Chart with nvD3 visualization via JSON data http://krispo.github.io/angular-nvd3/
- (1.1.2) Add Radio Button in List Item Component in the Elements Page
Sensation 1.7.0
- (1.1.2) Update Onsen UI to the latest 1.1.2 release
- (1.1.2) Include the new extra Blue color scheme
- (1.1.2) Simple implementation with the new ons-modal component
- (1.1.2) Fixed small flicker in Android devices: Edited the MenuController in the js/app.js and changed from $scope.ons.navigator.pushPage(selectedItem.page) to $scope.ons.navigator.pushPage(selectedItem.page, {animation: 'none'})
- (1.1.2) Draggable range input in Android devices
- (1.1.2) Set swipe target width to the Sliding Menu <ons-sliding-menu menu-page="menu.html" main-page="home.html" side="left" max-slide-distance="85%" swipable="true" swipe-target-width="100" var="menu">
Sensation 1.6.0
- (1.1.1) Include Barcode Scanner plugin com.phonegap.plugins.barcodescanner with Scan function
- (1.1.1) News Page with Search (Menu item with title Search News) - Filter the News (by their Title or Body) with a Search Input field and AngularJS
- (1.1.1) Prepare a Tutorial on how to filter the News (by their Title or Body) with a Search Input field and AngularJS http://goo.gl/UKkS1V
- (1.1.1) Get the values from the Contact form text input and textarea using the ng-model as it was implemented in 1.0.4
Sensation 1.5.1
- (1.1.1) Remove the timeout function from the Controllers
- (1.1.1) Update the Onsen UI to latest 1.1.2-dev due to a very important fix https://github.com/OnsenUI/OnsenUI/issues/165
- (1.0.4/1.1.1) Prepare new tutorial with title How to import and run the Sensation App into the Intel® XDK environment http://goo.gl/UrEKy8
Sensation 1.5.0
- (1.1.1) Use the ons-page without ons-scroller as the ons-page is scrollable in v1.1.x
- (1.1.1) Google Maps for AngularJS http://angular-google-maps.org/ instead of Google maps v3 AngularJS directive module https://github.com/allenhwkim/angularjs-google-maps (js/ng-map.js removed)
- (1.1.1) Pass and retrieve parameters between pages example (Managing page stacks: http://onsenui.io/guide/overview.html#Managingpagestacks)
- (1.0.4/1.1.1) Prepare new tutorial with title How to build the Sensation App with Adobe® PhoneGap™ Build http://goo.gl/2fPPxP
- (1.1.1) Update Onsen UI Framework to its latest release 1.1.1 https://github.com/OnsenUI/OnsenUI/releases/tag/1.1.1
Sensation 1.4.0
This release supports the Onsen UI 1.1.0. Onsen UI 1.1.0 http://onsenui.io is a major new release. Onsen UI 1.1.0 reduces AngularJS complexity, supports jQuery and is integrated with CSS Components Theme Roller http://components.onsenui.io. Due to the major of this release, Sensation 1.4.0 comes with two projects – one integrated to the latest release 1.1.0 and one based on the previous 1.0.4 release https://github.com/OnsenUI/OnsenUI/releases/tag/1.0.4.
- (1.1.0) Update Onsen UI to its latest release 1.1.0
- (1.1.0) Full compatible with Onsen CSS Components
- (1.1.0) Include default Onsen CSS Components stylesheets (Default, Gray, Red, Purple) - Support unlimited color schemes with theme roller http://components.onsenui.io/
- (1.1.0) User login page design without functionality based on Onsen UI Patterns
- (1.0.4) backbutton event that fires when the user presses the back button on Android
- (1.0.4) Add ng-click="ons.slidingMenu.closeMenu()" function at the Home ons-page component
Sensation 1.3.0
- Removed target-densitydpi from the viewport meta tag (index.html) for Android devices
Sensation 1.2.0
- RSS Feed Reader using AngularJS
Using the Google Feed API https://developers.google.com/feed/v1/jsondevguide. Added link to the original post using the Cordova inAppBrowser plugin.
- Server side pagination using AngularJS (already applied to Wordpress JSON API server side pagination with the page &page parameter)
- Server side pagination with Status Bar (Showing 1 to 10 of 100)
- Added Cordova plugin org.apache.cordova.inappbrowser
This plugin provides a web browser view that displays when calling window.open() https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md.
- Support 6 new color schemes (8 totally)
- Add max-slide-distance to sliding menu
- Style changes/fixes
Sensation 1.1.0
- Wordpress Listing Window: Added post thumbnail in the Master page (posts.html) linked to the Detail page (post.html)
- Wordpress Listing Window: Printed post.excerpt with ng-bind-html
- Wordpress Listing Window: Added more link between Wordpress Master/Detail pages (posts.html/post.html)
- Wordpress Listing Window: Removed the letter limit option from post.excerpt in the Master page
- Wordpress Listing Window: Added Loading… message in the Posts Controller
- Style changes
- Extended Support Documentation
Sensation 1.0.0
- Initial release

Next Releases

Suggestions for next releases
by
by
by
by
by
by