DEV Community

loading...
Cover image for #30DaysOfAppwrite : Appwrite Avatars API
Appwrite

#30DaysOfAppwrite : Appwrite Avatars API

Christy Jacob
・5 min read

Intro

#30DaysOfAppwrite is a month long event focused at giving developers a walk through of all of Appwrite's features, starting from the basics to more advanced features like Cloud Functions! Alongside we will also be building a fully featured Medium Clone to demonstrate how these concepts can be applied when building a real world app. We also have some exciting prizes for developers who follow along with us!

Appwrite Avatars API

Welcome to Day 21 πŸ‘‹ . Today we're going to take a look at Appwrite's Avatars API and check out some neat features it has under the hood! The Avatars API primarily allows you to generate icons and avatars for a variety of use cases. Let's take an in-depth look into what it has to offer.

Credit Card Icons

You can easily get credit card icons for the most popular Credit Card companies like AmEx, Discover, JCB, Mastercard, Visa, Maestro, etc.
This endpoint also allows you to customize the icon size and quality while requesting for it. You can find the complete list of supported credit cards here.

Browser icons

This endpoint allows you to conveniently get icons of some commonly used browsers. If you haven't seen already, we use this endpoint in the Appwrite console to display information about a user's session.

Appwrite Console

You can find the complete list of supported browser icons here.

Country flags

Similar to the browser icons endpoint, this one allows you to get icons for country flags. You can see it in use in the Appwrite console screenshot above. You can find the complete list of all the country codes and flags here.

Images from a URL

This endpoint is very useful if you need to crop and display remote images in your app or in case you want to make sure a 3rd party image is properly served using a TLS protocol.

Get Favicon

A favicon is a small icon or collection of icons associated with a website, web page, or web application. It’s displayed within the browser tabs and bookmarks bar. This endpoint allows you to fetch the favicon of any remote URL.

Favicon Example

QR Code

This endpoint allows you to generate QR codes for any string. How you use this is only limited by your creativity as this can be used to share URLs, phone numbers, and even base64 encoded images. We will make use of this functionality to add a social sharing feature in our demo app.

Get User Initials

This endpoint provides a really convenient way to get avatars for your users based on their initials. You can use this as a placeholder until the user uploads a profile image. You can also use this endpoint to generate avatars for any string (not necessarily a name). Additionally you can tweak the image size, text color, and background color if you aren't happy with the defaults.

Let's write some Code

In our demo app, we're going to add a share article feature. This will allow the user to share the article to various social media platforms and even generate a QR code for the current URL which you can then share with your friends.

The first step is to add a new function in src/appwrite.js to make a call to the Avatars service:

export const api = {
    ...
    getQRcode: text => sdk.avatars.getQR(text)
    ...
}
Enter fullscreen mode Exit fullscreen mode

Now that the network layer is ready, lets head to the src/routes/Post.svelte component where we will create the buttons for sharing. Copy the following markup into the last section of the HTML:

<!-- Share -->
<section>
  <div class="share-buttons-container">
    <div class="share-list">
      <!-- FACEBOOK -->
      <a class="fb-h" on:click="{fbs_click}" target="_blank">
        <img
          src="https://img.icons8.com/material-rounded/96/000000/facebook-f.png"
        />
      </a>

      <!-- TWITTER -->
      <a class="tw-h" on:click="{tbs_click}" target="_blank">
        <img
          src="https://img.icons8.com/material-rounded/96/000000/twitter-squared.png"
        />
      </a>

      <!-- LINKEDIN -->
      <a class="li-h" on:click="{lbs_click}" target="_blank">
        <img
          src="https://img.icons8.com/material-rounded/96/000000/linkedin.png"
        />
      </a>

      <!-- REDDIT -->
      <a class="re-h" on:click="{rbs_click}" target="_blank">
        <img src="https://img.icons8.com/ios-glyphs/90/000000/reddit.png" />
      </a>

      <!-- PINTEREST -->
      <a
        data-pin-do="buttonPin"
        data-pin-config="none"
        class="pi-h"
        on:click="{pbs_click}"
        target="_blank"
      >
        <img src="https://img.icons8.com/ios-glyphs/90/000000/pinterest.png" />
      </a>

      <!-- QR Code -->
      <a class="pi-h" on:click="{qrcode_click}" target="_blank">
        <img
          src="https://img.icons8.com/ios-glyphs/60/000000/qr-code--v1.png"
        />
      </a>
    </div>
  </div>
  {#if qrCode}
  <img src="{qrCode}" alt="No QR Code" />
  {/if}
</section>
Enter fullscreen mode Exit fullscreen mode

We need to add some styling to this as well. I'd recommend copying all the styling from here.

Now it's time to add some Javascript to stitch it all together. In the <script> section of src/routes/Post.svelte add the following code:

let qrCode = null;
var pageLink = window.location.href;
var pageTitle = String(document.title).replace(/\&/g, "%26");
const fbs_click = () => {
  window.open(
    `http://www.facebook.com/sharer.php?u=${pageLink}&quote=${pageTitle}`,
    "sharer",
    "toolbar=0,status=0,width=626,height=436"
  );
  return false;
};
const tbs_click = () => {
  window.open(
    `https://twitter.com/intent/tweet?text=${pageTitle}&url=${pageLink}`,
    "sharer",
    "toolbar=0,status=0,width=626,height=436"
  );
  return false;
};
const lbs_click = () => {
  window.open(
    `https://www.linkedin.com/sharing/share-offsite/?url=${pageLink}`,
    "sharer",
    "toolbar=0,status=0,width=626,height=436"
  );
  return false;
};
const rbs_click = () => {
  window.open(
    `https://www.reddit.com/submit?url=${pageLink}`,
    "sharer",
    "toolbar=0,status=0,width=626,height=436"
  );
  return false;
};
const pbs_click = () => {
  window.open(
    `https://www.pinterest.com/pin/create/button/?&text=${pageTitle}&url=${pageLink}&description=${pageTitle}`,
    "sharer",
    "toolbar=0,status=0,width=626,height=436"
  );
  return false;
};
let qrcode_click = async () => {
  qrCode = await api.getQRcode(pageLink);
};
Enter fullscreen mode Exit fullscreen mode

That's really it! You can now share your article to social media platforms with one click and also share a QR code with a link to the article. If you would like to see the exact file changes in this feature, you can take a look at this PR.

Credits

We hope you liked this write up. You can follow #30DaysOfAppwrite on Social Media to keep up with all of our posts. The complete event timeline can be found here

Feel free to reach out to us on Discord if you would like to learn more about Appwrite, Aliens or Unicorns πŸ¦„. Stay tuned for tomorrow's article! Until then πŸ‘‹

Discussion (0)