Avatar API support in Appwrite

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…

Are YOU Lookin…

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


Print Share Comment Cite Upload Translate
APA
Loveena Saran | Sciencx (2024-03-29T04:35:38+00:00) » Avatar API support in Appwrite. Retrieved from https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/.
MLA
" » Avatar API support in Appwrite." Loveena Saran | Sciencx - Wednesday October 13, 2021, https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/
HARVARD
Loveena Saran | Sciencx Wednesday October 13, 2021 » Avatar API support in Appwrite., viewed 2024-03-29T04:35:38+00:00,<https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/>
VANCOUVER
Loveena Saran | Sciencx - » Avatar API support in Appwrite. [Internet]. [Accessed 2024-03-29T04:35:38+00:00]. Available from: https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/
CHICAGO
" » Avatar API support in Appwrite." Loveena Saran | Sciencx - Accessed 2024-03-29T04:35:38+00:00. https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/
IEEE
" » Avatar API support in Appwrite." Loveena Saran | Sciencx [Online]. Available: https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/. [Accessed: 2024-03-29T04:35:38+00:00]
rf:citation
» Avatar API support in Appwrite | Loveena Saran | Sciencx | https://www.scien.cx/2021/10/13/avatar-api-support-in-appwrite/ | 2024-03-29T04:35:38+00:00
https://github.com/addpipe/simple-recorderjs-demo