If you have any problem with the external payment gateway, please send me a direct email to [email protected] then you could pay via Paypal.

Introduction

Giphy is an online database and search engine that allows users to search for and share animated GIF files (wiki). I knew about this interesting service while I was working on my Ionic-yahoo-messenger-ui but I didn't spend time on it. Lately, during the development of Ionic-tinder-ui, I found it again as a undeniable feature, so nothing can stop me anymore. Then the plugin was made. This plugin will also be integrated into the Tinder theme soon.

Not only the Giphy service itself, the source code also includes a beautiful and easy-to-implement messaging UI with auto-expanding input and data structure.

I always take it serious to keep the code quality high, with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.

Take a look at it with Ionic View using ID: 4a1f445d

In case you don't know, Ionic View mobile app is the simplest way to experience an ionic app. Download it here http://view.ionic.io/

Or even more entertaining, see how it works on Youtube: https://youtu.be/Q8eV6JYtGsc

See more of my works: https://market.ionic.io/user/66136

Happy prototyping!

Changelog

Last updated: Apr 17 2016

mrhieu-ionic-giphy-f139d12b9951

-First version

Screens

1. Messaging with GIF search tool

Demo

1. Download the zip file containing the entire demo app and unzip
2. Go inside the extracted folder
3. Run $ npm install
4. Run $ bower install
5. Try: $ ionic serve
6. The browser should automatically open the app

Dependencies

1. Setup SASS $ ionic setup sass
2. Angular-elastic $ bower install --save angular-elastic

Usage

1. CSS: include scss/chat.sass and scss/giphy.sass
2. JS: include www/js/giphy.js - this is the module ionic.giphy and it needs to be injected to your main module
3. Template: www/templates/home.html
4. You can see the example controller GiphyCtrl in www/js/app.js
5. The sample data structure for the messages template is pretty straight-forward

$scope.messages = [
      {
        isMe: true,
        type: 'image',// text || image
        body: 'img/hello.gif',
        timestamp: 'Feb 26, 2016, 9:47PM'
      },
      {
        isMe: false,
        avatar: 'img/adam.jpg',
        type: 'image',// text || image
        body: 'img/hello.gif',
        timestamp: 'Feb 26, 2016, 9:47PM'
      },
      {
        isMe: true,
        type: 'text',// text || image
        body: 'Where are you, buddy?',
        timestamp: 'Feb 26, 2016, 9:47PM'
      },
      {
        isMe: false,
        avatar: 'img/adam.jpg',
        type: 'text',// text || image
        body: 'I\'m almost there',
        timestamp: 'Feb 26, 2016, 9:47PM'
      }
    ];

Support

If you need technical support or have any questions, don't hesitate to send me a message via: [email protected]