DEV Community

Loveena Saran
Loveena Saran

Posted on

Avatar API support in Appwrite

60a11c80-fcf1-11e9-959e-565bc6cba590 (1)

Appwrite provides an AMAZING solution that offers YOU an array of REST APIs , tools , Management Console UI for YOUR core backend needs.

If you haven't already try it out for yourself AppWrite
Go Ahead don't be shy...

tumblr_3a8b75e6b3c5df176c3f7fe5341e5fbf_d34ad33a_500

Are YOU Looking to make your Service Standout?

fist-pump-yeah

Are YOU Tired of importing multiple packages for Icon support?

cumsite

Are YOU Hoping to make your Life a little bit easier?

nod-alright

Enhance your Appwrite App with Images, Icons, and Avatars...

Adding payment methods logos , fetching the desired country flags and Generating QR codes is all that you desire.

Be it Food Delivery Services ,Language Learning App or a Fintech App these small additions that will make it a lot easier.

4187

How can you use Appwrite's Avatar API ?

  1. Create a Service Class to fetch the endpoint. In our case avatars and create a constructor to access it within the method.
class AppwriteService {
constructor() {   
appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
    this.avatars= appwrite.avatars;
  }    
Enter fullscreen mode Exit fullscreen mode

2.Access your desired method getCreditCard present under Avatar API and pass in the mandatory attributes cardname for the method to work.
Optional Attributes Include: width,height,quality

 createCreditAvatar =(cardname) =>{
    return this.avatars.getCreditCard(cardname);
  }
Enter fullscreen mode Exit fullscreen mode

3.Call the method Created in your file that you desire to add your avatar. Don't forget to pass the value to the attributes that were Set earlier.
Example: amex, argencard, cabal, censosud, diners, discover, elo, hipercard, jcb, mastercard, naranja, targeta-shopping, union-china-pay, visa, mir, maestro

  let creditcard = appwrite.createCreditAvatar('amex');
  console.log(creditcard);
Enter fullscreen mode Exit fullscreen mode

4.In the return section of your Project call the component inside the image tag to view the icon

   return(
    <div >
      <img src={creditcard} />
    </div>
   );
Enter fullscreen mode Exit fullscreen mode

5.And Voilà!! You have your icon displayed on your UI
image

Few Other Examples To get you started:

createFlagAvatar =(flagname) =>{
    return this.avatars.getFlag(flagname);
  }
  createQrAvatar =(text,size) =>{
    return this.avatars.getQR(text,size);
  }
Enter fullscreen mode Exit fullscreen mode
let flagname = appwrite.createFlagAvatar('IN');
let  qrcode  = appwrite.createQrAvatar('FinTechApp',100);

console.log(flagname);
console.log(qrcode);
   return(
    <div >
      <img src={flagname} />
      <br/>
      <img src={qrcode} />
      <br/>
    </div>
   );
Enter fullscreen mode Exit fullscreen mode

Start Appwriting Away!!!
evil-laugh-laugh

Read for any Doubts:
Getting Started with Appwrite
Appwrite React Series

Discussion (0)