Appwrite์˜ Avatar API ์ง€์›

4063 ๋‹จ์–ด reactappwritehacktoberfestopensource


Appwrite๋Š” ํ•ต์‹ฌ ๋ฐฑ์—”๋“œ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์œ„ํ•œ ์ผ๋ จ์˜ REST API, ๋„๊ตฌ, ๊ด€๋ฆฌ ์ฝ˜์†” UI๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋†€๋ผ์šด ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์•„์ง ์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์•˜๋‹ค๋ฉด AppWrite
๋ถ€๋„๋Ÿฌ์›Œํ•˜์ง€ ๋ง๊ณ  ๊ฐ€์„ธ์š”...

๋‹น์‹ ์€ ๋‹น์‹ ์˜ ์„œ๋น„์Šค๋ฅผ ๋‹๋ณด์ด๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๊นŒ?




Icon ์ง€์›์„ ์œ„ํ•ด ์—ฌ๋Ÿฌ ํŒจํ‚ค์ง€๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐ ์ง€์น˜์…จ์Šต๋‹ˆ๊นŒ?




๋‹น์‹ ์€ ๋‹น์‹ ์˜ ์‚ถ์„ ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ์Šต๋‹ˆ๊นŒ?





์ด๋ฏธ์ง€, ์•„์ด์ฝ˜, ์•„๋ฐ”ํƒ€๋กœ Appwrite ์•ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค์„ธ์š”...

๊ฒฐ์ œ ๋ฐฉ๋ฒ• ๋กœ๊ณ  ์ถ”๊ฐ€, ์›ํ•˜๋Š” ๊ตญ๊ธฐ ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฐ QR ์ฝ”๋“œ ์ƒ์„ฑ์ด ์›ํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์Œ์‹ ๋ฐฐ๋‹ฌ ์„œ๋น„์Šค, ์–ธ์–ด ํ•™์Šต ์•ฑ, ํ•€ํ…Œํฌ ์•ฑ ๋“ฑ ์ž‘์€ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ด ์žˆ์œผ๋ฉด ํ›จ์”ฌ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค.


Appwrite์˜ Avatar API๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?


  • ๋์ ์„ ๊ฐ€์ ธ์˜ฌ ์„œ๋น„์Šค ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ ์•„๋ฐ”ํƒ€์™€ ๋ฉ”์„œ๋“œ ๋‚ด์—์„œ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์„ฑ์ž๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

  • class AppwriteService {
    constructor() {   
    appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
        this.avatars= appwrite.avatars;
      }    
    

    2. Avatar API ์•„๋ž˜์— ์žˆ๋Š” getCreditCard ๋ฉ”์„œ๋“œ์— ์•ก์„ธ์Šคํ•˜๊ณ  ๋ฉ”์„œ๋“œ๊ฐ€ ์ž‘๋™ํ•˜๋„๋ก ํ•„์ˆ˜ ์†์„ฑ์ธ ์นด๋“œ ์ด๋ฆ„์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
    ์„ ํƒ์  ์†์„ฑ์—๋Š” ๋„ˆ๋น„, ๋†’์ด, ํ’ˆ์งˆ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

     createCreditAvatar =(cardname) =>{
        return this.avatars.getCreditCard(cardname);
      }
    


    3.์•„๋ฐ”ํƒ€๋ฅผ ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ํŒŒ์ผ์—์„œ Created ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด์ „์— ์„ค์ •๋œ ์†์„ฑ์— ๊ฐ’์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์„ ์žŠ์ง€ ๋งˆ์‹ญ์‹œ์˜ค.
    ์˜ˆ: 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. ํ”„๋กœ์ ํŠธ์˜ ๋ฐ˜ํ™˜ ์„น์…˜์—์„œ ์ด๋ฏธ์ง€ ํƒœ๊ทธ ๋‚ด๋ถ€์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์•„์ด์ฝ˜์„ ๋ด…๋‹ˆ๋‹ค.

       return(
        <div >
          <img src={creditcard} />
        </div>
       );
    


    5. ์งœ์ž”!! UI์— ์•„์ด์ฝ˜์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.


    ๋ช‡ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์˜ˆ ์‹œ์ž‘ํ•˜๋ ค๋ฉด:




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


    ์•ฑ๋ผ์ดํŒ…์„ ์‹œ์ž‘ํ•˜์„ธ์š”!!!


    ์˜์‹ฌ์Šค๋Ÿฌ์šด ์ ์„ ์ฝ์œผ์‹ญ์‹œ์˜ค.

    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ