Setup Ionic Push Notifications

Amrendra Pratap Singh

This guide aims to help you set up push notifications for your Ionic app. Also I will append new questions to the final help section for something like the FAQ of Ionic push notifications. Without more words, let’s start the fun.


It’s going to be a wild ride!


Oh and if you want to grab a Postman collection with all the HTTP Requests you need for creating and observing Push notifications, click the download button below!


Start the smallest Push App ever


The funny thing here is that we actually need almost no code for push to work. Anyway, we start with a blank Ionic app and add 2 plugins, the ionic-platform-web-client which will handle the connection to Ionic.io and the phonegap-plugin-push which handles incoming pushes inside your app (and how you want to react upon receiving them). So go ahead and run:


 

ionic start push-app blank

cd push-app

ionic add ionic-platform-web-client

ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"


We need a GCM...

Read more

Amazon Webstore closing. eCommerce options with Spree, Shopify and BigCommerce

Ishank Gupta
Amazon Marketplace

Amazon announced recently that the Amazon Webstore which many sellers used will be closed down in 2015, no new stores will be accepted, and old stores will be slowly phased out over the next 12 months.

Many companies will be left searching for a new solution for hosting their product sales. There are a number of solutions, but the top solutions include Spree (fully customizable Rails application), Shopify - the leading eCommerce platform and BigCommerce also a leading platform.

At W3villa, we have a full stack development team that can Architect, Design, Create and Run eCommerce platforms on Spree, Shopify and BigCommerce.

In addition we offer Eventory.io, an event driven solution for business that helps to list, update, review or remove product listings automatically from multiple channels. This solution helps you to optimize your inventory over many channels. Eventory will be available on a limited basis from January 1st, 2016 for new subscribers. (After the busy year end selling...

Read more

Hybrid mobile apps with ionic

Ishank Gupta

Mobile applications have assisted businesses to increase their profits exponentially. But choosing the platform out of iOS, Android or Windows turns out to be a subject of question. Designing apps for all of them is quite infeasible. So, a framework was created which allows you build apps that can be deployed on all platforms.

Ionic is a hybrid app development framework using AngularJS assisting you in simplifying the development of the front end. The open-source framework provides tools for developing apps using HTML5, Javascript and CSS. Using Angular, Ionic provides custom components and methods for interacting with them. Above all, Ionic is just more modern.


Reasons to why Ionic

  • Optimized for AngularJS:
    Ionic and AngularJS seem to complement each other for many reasons: The UI components used in Ionic are AngularJS Directives; multiple of them being provided making interface components easy to use. The framework controls the UI elements by use of delegates. Also, you can...
Read more

BITCOIN - A must have payment method

Ishank Gupta

Bitcoin is a form of digital money or virtual currency. It was introduced in 2009 and has gained a lot of popularity.

You can store bitcoins in your digital wallet on your computer or mobile and send them through the internet to any other person and he can use it to purchase any commodity. There has been a gradual increase in the list of commodities available to purchase by bitcoin.

The transfer occurs between two individuals without passing through any bank or ACH(Automated Clearing House). Currency exchanges let you exchange bitcoins for standard local currency. Depending on the market the value of bitcoin keeps fluctuating.

Accepting credit cards online typically requires long procedures of security checks to ensure and guarantee compliance to the PCI Standards. Bitcoin security is built in such a way that makes this method obsolete. This E-commerce technique does not uses any kind card or account rather it makes use of NFC code or QR Code of your wallet.

The generation of...

Read more

AngularJS - Next gen web applications

Ishank Gupta

Angular is a JavaScript framework that extends the functionality of HTML and helps ease out the development of enterprise single page web applications. The framework is maintained by Google and helps in designing and testing phases of such applications working on the model-view-controller architecture while maintaining code quality.

Most frameworks implement MVC by asking you to break down your application into components, then write the code to combine them up together again. Angular implements MVC by asking you to split your app into MVC components and Angular does the rest. It manages your components and also serves as a platform to connect them.

AngularJS works by first reading the original HTML page designed using the standard tags and elements. It then interprets those attributes as directives to bind parts of the page to a model that is represented by standard JavaScript variables. AngularJS is built around the notion that declarative programming should be used for building...

Read more

Realtime applications with Node.js

Ishank Gupta

Node.js has enabled JavaScript running on the server, earlier it was used for browser UI/UX coding. Traditionally, web applications worked on request response paradigm making the client always initiate communication. The intervention of Nodejs has made possible the development of web applications with two-way connections, where both the client and server can initiate communication. Apart from many other functionalities, primarily Node.js is a way of running JavaScript on the server.

JavaScript was used for client side programming designing rich UI/UX and languages with different syntax and form were used for server side programming. But knowledge and expertise in two different formats of languages was required for developing a fully functional application. To combat this issue, Nodejs was designed. Employing Nodejs enables working on both server side and client side with skill in one language.

A fundamental principle of Node is enabling processes to run in background. With most...

Read more

Spree Vs Magento Vs Shopify

Ishank Gupta

SpreeCommerce:

SpreeCommerce is a Ruby on Rails based e-commerce solution with additional functionality which allows for rapid development. It is easy to use demanding no specialization in any platform.

  • SpreeCommerce is easy to pick up and does not require specialization.
  • It provides extensions for additional functionality and easy to use admin.
  • The core is open source and sustained by the community.

Shopify

Shopify is another option that is easy to perform, offers low-customization options, good for small business organizations.

  • No access to the code makes it less flexible to make changes.
  • Constraints on functionality exist.
  • Shopify is a hosted solution.
  • Shopify is a commercial product (you need to pay for it).

Magento

Magento is a feature rich platform with a recognized score. Being used by many large retailers, the platform is possessed by eBay which ensures it isn’t likely to go anywhere. To perform efficiently, you will need developers with specific skills.

  • The admin is...
Read more

Right e-commerce platform for your online store - SpreeCommerce

Ishank Gupta

Proliferated businesses have boosted the need of e-commerce platforms. The scope of these platforms is from managing inventory to allowing users to manage account activities like tracking orders, platforms like SpreeCommerce, Shopify, Magento are few of the best options available.


Why SpreeCommerce :

  • User-Friendliness:
    Working on the interface seems effortless and the backend is de-cluttered thus making any change would not seem much of a task. Spree accommodates muti-language and currency supports thereby marketing to regional and different linguistic audiences.

  • Regular Updates:
    The consistent updates address the issues of adding database indexes, improving the current order lookup hot spot, bug fixes, added Google Analytics Enhanced Ecommerce tracking and addressing the security vulnerability.

  • Licensing:
    Spree’sBSD licenseis one of the least restraining licenses existing. Spree uses the same open source software regardless of the category of business. There is no ‘...
Read more

Pure JQuery UI date range picker

Ishank Gupta

Date range selector example given in the official documentation of JQuery UI datepicker is not that handy, so I have have modified it a bit and have designed the same which is more intuitive. You can have a look at this  demo HTML of the range picker is simple, I have created two text field separated with a hyphen.

 <div align="center"> <div class="date-range"><input id="start_date" class="datepicker" name="start_date" readonly="readonly" type="text" data-should_refresh="end_date" data-type="minDate" /> <div class="saperator">-</div> <input id="end_date" class="datepicker" name="end_date" readonly="readonly" type="text" data-should_refresh="start_date" data-type="maxDate" /> </div> </div> 

Add CSS to make it look better

 .datepicker { width: 80px; border: 0; }...
Read more

Upload image without submitting form, works on all browsers

Ishank Gupta
If you will have a look at my old post on Uploading files/image with Ajax & Jquery, without submitting a form, you will find that this implementation does not works with Internet Explorer (IE). IE does not supports FormData, so either we can flash or the hidden iframe solution. Now flash is not the best solution as it is not installed in many browsers (and many of the mobile devices does not supports flash). So, the hidden iframe solution is best in our case. Here is how we can implement it :
 <!-- Change the target of the form to the hidden iframe -->
<form id="avatar_form" action="/welcome/upload" method="post" enctype="multipart/form-data" target="uploader_iframe">
<input id="avatar" type="file" name="avatar" size="30" />
</form>

<!-- Hidden iframe which will interact with the server, do not forget to give both name and id values same -->
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

<!--...
Read more