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:
3 years ago
Updated:
3 months ago
Category:
Plugins
Tags:
chat, messaging, gif, giphy, social, tinder

TakeThatDesign.com is my new home

Click the screenshot below to visit, don't forget to bookmark, and subscribe to my newsletter. See you there!

takethatdesign.com thumbnail

Ionic Giphy 2 (Ionic 3)

Giphy keyboard is now written on Ionic 3

You can find Ionic 4 version of the same plugin sold separately here.

Payment methods

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

Other options:

Purchase Externally

If you want to Paypal directly, please let me know the name of the item by sending me an email mr_hie@yahoo.com before you process the payment. Thanks.

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 APK to preview the theme:

enter image description here giphy-2_demo.apk

Watch on Youtube

See how it works on Youtube: https://youtu.be/ce9hYXbuOYU

See more

You might like my collection of Ionic products. See more at https://market.ionic.io/user/66136

See more of my works

Happy prototyping!

Changelog

Note: All updates are on Ionic 3

Last updated: Dec 23 2018

v1

  • First version

v2

  • 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@5.4.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 template

Notes

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>

Contact

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

Homepage: https://www.takethatdesign.com

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

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 }}