Giphy 2

Giphy 2

Giphy 2 - Ionic 3

$6.00

Not yet rated
Hieu Pham

Hieu Pham

Member since 2015

Details

Version:
3.0
Size:
3mb
Ionic:
2.x,3.x
Platforms:
iOS, Android
View ID:
4955ccad
Released:
2 years ago
Updated:
8 months ago
Category:
Plugins
Tags:
chat, messaging, gif, giphy, social, tinder

Ionic Giphy 2

Giphy keyboard is now written on Ionic 3

Looking for older Ionic version?

You can find the older Ionic 1 version of the same theme sold separately here.

Payment methods

Pay via Stripe using the button PURCHASE $6 on the side.

Other options:

Purchase Externally

Purchase Externally

If you have any problems with the above payment methods, please send me an email to mr_hie@yahoo.com before you pay via PayPal using the button below

Purchase Externally

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 2 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.

Preview

Download and view the demo: Android APK

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

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

See more of my works

Happy prototyping!

Changelog

Last updated: Dec 23 2018

v1-ionicMarket-giphy-2-38a58e7f6815

-First version

v2-ionicMarket-giphy-2-3706de849602

-Fix pushed up Header

v3

-Re-organize Giphy and all related services into one module. Easier to integrate than ever.

Screens

  1. Messaging UI
  2. Giphy keyboard (GIF search tool)

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g ionic@3.20.1

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the app

Usage

Sample data structure for the messages template is pretty straight-forward. You will find it in pages/message/message.ts

this.messages = [
      {
        isMe: true,
        type: 'image',// text || image
        body: 'https://media.giphy.com/media/3oz8xSjBmD1ZyELqW4/giphy.gif',
        timestamp: 'Oct 10, 2017 9:47am'
      },
      {
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'text',// text || image
        body: 'Hey yo what\'s up?',
        timestamp: 'Oct 10, 2017 9:48am'
      },
      {
        isMe: true,
        type: 'image',// text || image
        body: 'https://media.giphy.com/media/lXiRyZVS9B79r2YOQ/giphy.gif',
        timestamp: 'Oct 10, 2017 9:50am'
      },
      {
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'image',// text || image
        body: 'https://media.giphy.com/media/JUMLTR3dHEGpW/giphy.gif',
        timestamp: 'Oct 10, 2017 9:52am'
      },
      {
        isMe: true,
        type: 'text',// text || image
        body: 'Where are you, buddy?',
        timestamp: 'Oct 10, 2017 9:53am'
      },
      {
        isMe: false,
        avatar: 'assets/img/hieu.png',
        type: 'text',// text || image
        body: 'I\'m almost there',
        timestamp: 'Oct 10, 2017 9:53am'
      }
    ];

Giphy module is now a folder under src/giphy enter image description here

After importing into your app.module.ts

import { GiphyModule } from '../giphy';
...

You can start to use the main component inputWithGiphy in your message UI

<ion-footer [keyboardAttach]="content" no-border>
  <input-with-giphy
    (onSubmit)="onSubmitMessage($event)"
    (onGifToggled)="scrollToBottom()"
  ></input-with-giphy>
</ion-footer>

Support

If you need technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com

Homepage: http://takethatdesign.com/

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

There are no comments for this plugin yet

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

Hey there! You'll need to log in 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 }}