Giphy

Giphy

GIPHY add-on to your messaging UI

$6.00

Not yet rated
Hieu Pham

Hieu Pham

Member since 2015

Details

Version:
1.0
Size:
1mb
Ionic:
1.0 beta,1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
View ID:
4a1f445d
Released:
10 months ago
Updated:
20 days ago
Category:
Plugins
Tags:
chat, messaging, gif, giphy, social, tinder

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

See more of my works

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]

Hey there! You'll need to log in or create an account before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   10 months ago

Beautiful! :D

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in or create an account before you can leave a comment here.

Juan David Nicholls

Juan David Nicholls   ·   10 months ago

Beautiful! :D

Hey there! You'll need to log in or create an account and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}