Avatar API support in Appwrite | DevsDay.ru

IT-блоги Avatar API support in Appwrite

dev.to 13 октября 2021 г.


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

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

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);

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>
   );

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

Start Appwriting Away!!!
evil-laugh-laugh

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

Источник: dev.to

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

hacktoberfest opensource react appwrite