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>
);
์ฑ๋ผ์ดํ ์ ์์ํ์ธ์!!!

์์ฌ์ค๋ฌ์ด ์ ์ ์ฝ์ผ์ญ์์ค.
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(Appwrite์ Avatar API ์ง์), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/pretty19/avatar-api-support-in-appwrite-fc1ํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค