Appwrite Loves Open Source: Why I Chose to Support Flow-Launcher

Arman — Mon, 25 Jul 2022 08:37:25 +0000

Open source is at the ❤️ of everything we do at Appwrite, and we want to enable and foster the open-source community that helped us grow to nearly 24,000 stars on GitHub.
Open-source projects, though, require a great deal of effort to maintain and grow. We use open-source tools every day to build Appwrite, and we want to help our community.
To give back, each Appwrite engineer gets to pick an open-source project for Appwrite to sponsor for one year.

All I Want Is to Search My PC 🔍

I've always been both a Linux and Windows user. While using the latter, there was only one thing that I always envied macOS users: Alfred.

Everyone knows the joke by now: Windows search is awful and should be burned at the stake…

Lucky for us the open-source community is here to rescue us! While browsing through Reddit, I came upon Flow-Launcher, and I immediately fell in love with it! 😍

So What Can Flow-Launcher Do?

Simply put… Everything! Seriously it has an Everything plugin that allows you to search your files at lightning speed!

The plugin ecosystem is amazing!! Do you want unit and currency conversion? You got it. Do you want GitHub integrations, instant translation, hex color conversion, putty, gifs, plex, and much much more? Guess what: you got it.

Do you want to find a cure to the existential dread born from the realization that we're all monkeys with shoes on a speck of dust orbiting around a small star in an uncaring universe… ehm, well… sorry, no luck here, but did I mention plugins?

And if your favorite app/workflow doesn't have a plugin, you can simply write a new one and share it with the community.

Somehow the open-source community managed to fix something that a multi-billion dollar company like Microsoft couldn't. If you are a Windows user, Flow-Launcher will make your life a lot easier.

Learn More about Appwrite

Appwrite is an open-source Backend-as-a-Service (BaaS), packaged as a set of Docker micro-services, to give developers of any background the tools necessary to build modern apps quickly and securely.

Chat with us on Discord, or, Learn more about Appwrite:

Check out Appwrite as the backend for your next Web, Flutter, or Server-side application. Here are some handy links for more information:

Custom Svelte Store with Appwrite and Caching

Arman — Tue, 28 Jun 2022 15:10:53 +0000

Who wouldn’t love cache, right? Let’s see how we can cache data with Svelte & Appwrite!

We're going to explore how we can create a Svelte store that caches our data and is dynamically updated.

Luckily for us, it’s pretty easy.

The TL;DR is:

Create a store with set, subscribe, and load
Set the data to the cache
Update the cache by subscribing to the data changes
Update the data dynamically by calling the load function in your component

Let's set everything up 📦

We’ll start by creating an appwrite.js store to make our life easier:

import { Client } from 'appwrite';

const server = {
    endpoint: import.meta.env.VITE_APP_ENDPOINT.toString(),
    project: import.meta.env.VITE_APP_PROJECT.toString(),
    collection: import.meta.env.VITE_APP_COLLECTION_ID.toString(),
    database: import.meta.env.VITE_APP_DATABASE_ID.toString()

};

const client = new Client();

client.setEndpoint(server.endpoint).setProject(server.project);

export { client, server };

You can check a complete example here

This allows us to access Appwrite's sdk from wherever we want.
Remember to add all the endpoints in the .env file at your project's root.

The fun begins! 🥳

Now let's initialize another store where we will implement our caching:

import { client, server } from './appwrite'; // This is the store we created previously
import { Databases } from 'appwrite';
import { writable } from 'svelte/store';
import { browser } from '$app/env'; // We'll use this to check if we are in the browser

function createDocumentsListStore() {
// Magic unicorns 🦄 
}

export const documentsList = createDocumentsListStore();

Great! Let's work a little bit on that function. We want to create a writable store that can fetch our cached data, and is easy to update.

function createDocumentsListStore() {
    const { subscribe, set } = writable({
/* Check if we're in the browser. 
If we are check the session storage for a item named documents, and parse it. This is our response. 
If we're not in the browser or if there is no item stored the response is null */
        response: browser ? JSON.parse(sessionStorage.getItem('documents')) : null
    });

    return {
        subscribe,
        set,
        load: async ( queries ,limit, offset) => {
            try {
                const database = new Databases(client, server.database);
                const response = database.listDocuments(
                server.collection, // We imported server from the appwrite.js store
                queries,
                limit,
                offset,
                undefined,
                undefined,
                ['created_at'],
                ['DESC']
            );
                set({
                    response
                });
            } catch (error) {
               // Handle the error
            }
        }
    };
}

So, with this function, we check if there is data in the session storage and set the response to it.

Where's my cache? 😕

We have a small problem: we've yet to save anything in our cache!

Luckily for us it's pretty straightforward:

if (browser) {
    documentsList.subscribe((n) => sessionStorage?.setItem('documents', JSON.stringify(n.response ?? '')));
}

We simply subscribe to the store and save the data in the session storage each time it changes.

✅ set, ✅ subscribe, 🔧 load

Now we have another problem! The data is set, and our cache is always up-to-date... but the data never changes!
That's what "load" is for ;)

For example, in our component we can do something like this:

<script>
import { documentsList } from './store';
let queries, limit, offset

$: documentsList.load(queries, limit, offset);
</script>

{#if $documentsList?.response?.total}
    {#each $documenstList.response.document as document}
        <pre>{document}</pre>
    {/each}
{/if}

This way, each time one of the arguments passed to "load" changes, the data will be updated!

And now we have an Appwrite store with cached data!

Let's put it all together 🙌

In the end our store looks like this:

import { client, server } from './appwrite'; 
import { Databases } from 'appwrite';
import { writable } from 'svelte/store';
import { browser } from '$app/env'; 


function createDocumentsListStore() {
    const { subscribe, set } = writable({
        response: browser ? JSON.parse(sessionStorage.getItem('documents')) : null
    });

    return {
        subscribe,
        set,
        load: async ( queries ,limit, offset) => {
            try {
                const database = new Databases(client, server.database);
                const response = database.listDocuments(
                server.collection, 
                queries,
                limit,
                offset,
                undefined,
                undefined,
                ['created_at'],
                ['DESC']
            );
                set({
                    response
                });
            } catch (error) {
               // Handle the error
            }
        }
    };
}

export const documentsList = createDocumentsListStore();
if (browser) {
    documentsList.subscribe((n) => sessionStorage?.setItem('documents', JSON.stringify(n.response ?? '')));
}

🏁 Conclusion

And that’s all it takes to implement a custom svelte store with Appwrite & caching. You can view the following resources as well if you want to explore Appwrite further:

Appwrite Docs
Appwrite Discord
Appwrite GitHub

DEV Community: Arman