DEV Community: 0xsapphir3

Best thing about Symbl.ai Docs

0xsapphir3 — Sat, 27 Nov 2021 17:20:28 +0000

Hi, as you have probably known symbl.ai, it is a very powerful tool that you can use for conversation intellisence.

The thing I loved is how they added different requests methods which can be very helpful for other devs.

Deploying Amplication Server To Digital Ocean

0xsapphir3 — Tue, 26 Oct 2021 16:21:51 +0000

Hi there! This post teaches you how you can deploy your Amplication Server to Digital Ocean. You can request to the api, create or delete data, get data and so on.

Setting up Digital Ocean droplet

Now, in order to run our server, we will need to have a virtual machine, which Digital Ocean provides.

Move to the digital ocean's cloud website. Click the create dropdown in topbar and click Droplets.

Choose the specifications for your droplet

We will use Ubuntu as our disk image. Then, choose a plan according to your requirement.

Next, choose the data center. I would recommend you to choose the center nearest to you.

I would always recommend you to use SSH Key Authentication. It is secure and better than Password Authentication

Lastly, click the Create button to create the droplet. It may take 30 sec to 1 min for the droplet to become ready.

Setting up the droplet

Now that your droplet is created, we need to install required packages. The steps for setting up the droplet is:

Open a terminal
Run ssh root@<host> where host is the ipv4 of your droplet. You can get this IP from your droplet by going to the droplet menu.
Now you should see that we have successfully connected to the droplet.
Curl the latest version of node - curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Install nodejs by running this command - sudo apt-get install -y nodejs
Install docker compose with the following command: apt install docker-compose
Install pm2 - npm install -g pm2

Setting up the project

Now that you have installed nodejs, follow these steps:

Clone your repository - Clone your repository using git at the home directory or any other directory - git clone <repository_url>
Change directory to the directory where your source code is - cd <folder_name>
Optional: You can actually delete the admin ui folder because we are just deploying our server.
Change directory to the server folder - cd server
Install the required dependencies - npm install
Wait for the installation to complete
Generate prisma client - npm run prisma:generate
Start the database - npm run docker:db
Initialize the database - npm run db:init
Now change the port from 3000 to 80. You must be wondering why to do this? Well, we should not allow users to go to specific post to access the api. Since the default port of the browser is 80, we changed the port. This way, the user has to go to http://<host>/ instead of going to http://<host>:3000/. I hope this makes sense.

Open up the nano editor by running nano src/main.ts (make sure that you are at server/ directory). You must find a line with this content - const { PORT = 3000 } = process.env;. Change this to const { PORT = 80 } = process.env;

Press Ctrl + X then Y then Enter

Lastly build the application for the production use - npm run build. This should create a folder dist.

You can actually test if your server is working fine. Run node dist/main.js and go to this website - http://<host>/graphql, where the host is the ipv4 of your droplet.

If you terminate your running code, you will see that the site hangs, keeps on loading and you get this error - <url> took too long to respond
Now, to run this code in background, use this command - pm2 start dist/main.js. Now, if you again go ahead to the site, you should see it rendering. Amazing!

Creating a domain

Now, of course you will not provide access to the API through the IP address of the droplet. So, we use domains. Go ahead and buy a domain (I buyed the domain for free from the site https://www.freenom.com/en/index.html).

Setting up the domain

Follow these steps:

Click the domains option in left bar of Digital Ocean's Home

Next, you should see a input box saying "Enter Domain". Enter the domain there.

Then click "Add Domain"

Create records

Next, click on the A button in the menu under "Create new record"

You can create a subdomain which represents what that domain does. Like we are deploying the api, we can use api.ecommerce.ml. Use "@" if you dont want to create subdomains. Next, Under "Will Redirect To", choose your droplet. The click "Create Record"

Add NameServers

Now, different domain providers have different locations for setting up the name servers. Under "DNS Records, you will wind three nameservers (It would be in a ns<number>.digitalocean.com). Copy them and add to the servers (You can find out how to do so by following tutorial on that specific domain provider).

Adding CNAME

Move to CNAME option in the menu. Enter the host name as www and @ under the "Is An Alias of". Then click "Create Record"

Note: It may take some time for your droplet to start on the domain.

Done! You have successfully deployed your server to Digital Ocean!

Testing Our API

Now that we have successfully deployed our server, its time to test the server. We will make some requests, and check the output.

Simple GET request for users

import fetch from "node-fetch"

fetch("http://<your_website>/api/users" , {
    method: "GET",
    headers: {
        "Authorization": "Basic YWRtaW46YWRtaW4="
    }
}).then((res) => res.json())
.then((data) => console.log(data))

If you run the above code, you should see the list of users available.

Ending

I hope that you have understood how you can deploy your app server to Digital Ocean.

Conclusion

I, not only want to thanks Yuval Hazaz for this amazing project, but also for helping me to make this tutorial.

My github profile

Deno + Appwrite

0xsapphir3 — Fri, 22 Oct 2021 17:03:01 +0000

Hi there!

This post teaches you how you can use Appwrites Deno SDK to write Appwrite Functions.

Setting up

You should have cli version of deno installed.

Let's start learning!

Importing module and setting up the function API

Appwrite has the sdk for deno published to deno land. We can import easily with the help of the package's url:

import * as sdk from "https://deno.land/x/appwrite/mod.ts";

Create a Appwrite client

const client = new sdk.Client()

Set apiEndpoint , apiKey and projectID

Next, we will require the above mentioned data and set it to the client

client.setProject(projectId)
      .setEndpoint(endPoint)
      .setKey(apiKey

Create a instance of the Function class

const functions = new sdk.Functions(client)

Now that we have imported the import, we will start interacting with the Appwrite's functions API.

Creating function

Lets first get started by creating a function. Now, creating a function is pretty simple. You just need to run a method and pass all the data for your new function

functions.create("foo" , ["*"] , "node-16.0").then(() => {
    console.log("Successfully created a new function")
})
.catch((error) => {
    console.log("Error while creating a new function.")

    console.log(error)
})

Okay, lets understand the code line by line:

functions.create("foo" , ["*"] , "node-16.0").then(() => { - This line calls the function that creates the function. The parameters are the following:

Name - The first parameter states the name of the function. You can give it a name of your choice
Permissions - The second parameter takes in a list of permission that you will allow your function. "*" means all the function. You can find a list of all the permission here
Runtime - The third parameter takes in the excecution runtime. It can be one of the following - java-16.0 (Java), python-3.9 (Python), ruby-3.0 (Ruby), php-8.0 (PHP), node-16.0 (Typescript / JavaScript)

The next line is printing to console telling that the function was created successfully.

Now, run the code by running deno run --allow-net main.js and then go ahead to Function tab in appwrite's console.

You should see a new function being created!

Listing all the functions

Now, at some point of time you will require to print all the available functions. Here is how to you do it:

functions.list().then((res) => {
    let index = 0

    res.functions.forEach((_function) => {
        console.log(`${index}: ${_function.name}`)

        index += 1
    })
})

What is happening here?

So the first line basically fetches all the functions which are registered in our database. Next, we are iterations over all the functions. Each function object looks like this.

Next, we are just printing the name of each of the function.

Run the file by this command: deno run --allow-net main.js

This should give the following output:

0: foo

Getting functions

You can get the details of a function using the function's id.
Here is how you can do it:

functions.get("6172d8bc57f89").then((res) => {
    console.log(`Fetching details for function id ${res.$id}`)
    console.log(`Name - ${res.name}`)
    console.log(`Created at - ${res.dateCreated}`)
    console.log(`Status - ${res.status}`)
    console.log(`Runtime - ${res.runtime}`)
})

So, in the first line, we are fetching the function by id. It returns a object with [these] key-value pairs. We then just print some of the properties to the console. The output is like this:

Fetching details for function id 6172d8bc57f89
Name - foo
Created at - 1634916540
Status - disabled
Runtime - node-16.0

Updating functions

Now, are you stuck at the place where you want to rename your function? Its easy! Appwrite provies a function to change the function's id , name , runtime etc. Here is how you do it:

const newName = "Bar"

functions.update("6172d8bc57f89", newName, ["*"]).then(() => {
    console.log("Successfully renamed the function!")
}).catch((err) => {
    console.log(err)
})

So, first we are initiating a variable with the new name of the function.

Next, we are running the function and updating the function. The parameters are as follows:

ID - The id of the function that we want to change
Name - The new name for this function
Permissions - New permissions for this function
Rest - Rest args are not required, you can read those here

Deleting functions

Got fed up by a function and want to delete it forever, well, its easy!

functions.delete("6172d8bc57f89").then(() => {
    console.log("Successfully deleted")
})

Well, there isnt anything to explain here. The function name and the parameter describes it. The function delete the function from the database. The parameter is the id of the function.

Function

Creating tags

Now, to create a tag, use the following code:

functions.createTag("6172e57d60cc5", "foo", "somepath.tar.gz").then(() => {
    console.log("Successfully created a new tag")
})

Now, the first parameter takes in the id of the function (target). The second parameter takes in the name of the code extension command. The last is the path of the zipped code.

Updating tag id

You can set a custom tag id and use them.

functions.updateTag("6172e57d60cc5", "foo-tag").then(() => {
    console.log("Succesfully changed the tag!")
})

So, we call the updateTag function. It takes in two parameter - first for the function id while the last for the new name of the tag.

Listing tags

Same as that for the function, we may also require to print all the tags. Here is how you can do it:

functions.listTags("6172e57d60cc5").then((res) => {
    let index = 0

    for (const tag of res.tags) {
        console.log(`${index}: ${tag.$id}`)

        index += 1
    }
})

So, we are fetching all the tags available in a function. Then we print the id of all the tags.

Getting tag data

Now, we saw how to create tags, list tags, now to fetch a single one?

Here is how you can do it:

functions.getTag("6172e57d60cc5", "foo-tag").then((res) => {
    console.log("Tag id is", res.$id)
})

The first param is for the function id and the second is for the tag's id. Then we just do a simple console logging.

Deleting tags

Are you even fed up of the tag? Here is how you delete it:

functions.deleteTag("6172e57d60cc5", "foo-tag").then(() => {
    console.log("Successfully deleted the tag")
})

Well, this doesnt require a explanation.

Creating executions

After all the tiring work, you now want your application to execute the functions properly.

Here is how you can create execution:

functions.createExecution("6172e57d60cc5").then((res) => {
    console.log("Created an excecution")
})

So, this creates up an execution of the function with the id which is passed as an argument.

Listing executions

Now, do you want to get all the current user function execution logs? As always, its simple:

functions.listExecutions("6172e57d60cc5").then((res) => {
    let index = 0

    for (const tag of res.executions) {
        console.log(`${index}: ${tag.$id}`)

        index += 1
    }
})

The listExecutions function takes in the function id as a param. It returns an list of objects of the executions.
Here is the format of the return value.

Getting execution

Last but not the least, get a single execution. Here is how you can do it:

functions.getExecution("6172e57d60cc5", "5e5ea5c16897e").then((res) => {
    // Play with the execution object
})

So, here you run the function getExecution which takes in the function id as the first parameter and the function id as the second parameter. It returns a execution object with multiple different properties, all about that execution

Conclusion

Thanks for reading this post. I hope that you will have understood how to use the function api with the deno sdk.

Github repository

You can get the code here

My github account - https://github.com/AsianCat54x

Appwrite Users Services

0xsapphir3 — Fri, 22 Oct 2021 04:59:09 +0000

What is Appwrite?

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.

How will this post be help to you?

This post is for the beginners who are trying to get started with Appwrite. This post teaches you how you can use Appwrite user services in your Appwrite project.

What are we going to use?

We will be using:

Appwrite
Electron as frontend
Notyf for displaying toast messages

What we will do

We will be creating a simple login / signup form using Appwrite's users services. The registered user can see other users who are registered and check their username , email verification status , registeration date etc.

Installing dependencies

Now we will install all the required dependencies for out project

package.json should look like this:

{
  "name": "appwrite-toturial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "appwrite": "^4.0.4",
    "dotenv": "^10.0.0",
    "electron": "^15.3.0",
    "moment": "^2.29.1",
    "node-appwrite": "^2.5.1"
  }
}

Now, run npm install to install the dependencies!

Template

Create three files - index.html , styles.css and app.js

The code for the frontend (html and css) in the github repository.

app.js should be like this:


const notyf = new Notyf()

const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");

signupBtn.onclick = ((e) => {
    loginForm.style.marginLeft = "-50%";

    loginText.style.marginLeft = "-50%";
});

loginBtn.onclick = (() => {
    loginForm.style.marginLeft = "0%";

    loginText.style.marginLeft = "0%";
});

signupLink.onclick = (() => {
    signupBtn.click();

    return false;
});

index.js:

This file will be our entrypoint for this application. We will initialize electron here.

const { app , BrowserWindow } = require("electron")
const path = require("path")

app.on("ready", () => {
    const window = new BrowserWindow({
        "width": 500,
        "height": 500,
        "webPreferences": {
            "nodeIntegration": true,
            "contextIsolation": false,
        }
    })

    window.loadFile(path.join(__dirname, "index.html"))
})

Now, run npm run start and you should see a login / signup form.

Starting the application

Gather all the input and buttons for getting the data from user

We will use JavaScript's .querySelector method for selecting both the buttons and listen for each of them

In app.js:

const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");

signupBtn.onclick = (() => {
    loginForm.style.marginLeft = "-50%";

    loginText.style.marginLeft = "-50%";

    signUp()
});

loginBtn.onclick = (() => {
    loginForm.style.marginLeft = "0%";

    loginText.style.marginLeft = "0%";

    signIn()
});

signupLink.onclick = (() => {
    signupBtn.click();

    return false;
});

document.addEventListener("keydown" , (e) => {
    if(e.keyCode === 27){
        const target = document.querySelector(".userInfo")

        if(target.style.opacity == 1){
            target.classList.add("fade")

            target.style.display = "block"

            setTimeout(() => {
                target.classList.remove("fade")

                target.style.opacity = 0

                target.style.display = "none"
            } , 599)

            notyf.success("Press ESC to close")
        }
    }
})

Now we will first start by creating a new user.

To create a new user, firstly we will have to initialize all the required classes from appwrite.

Gather projectId , endPoint and api Key from appwrite's dashboard and use them here.

const sdk = require("node-appwrite")

const client = new sdk.Client()

client.setEndpoint(apiEndPoint)
      .setProject(projectId)
      .setKey(projectAPiKey)

const users = new sdk.Users(client)

Next, we will listen for the click and add user to database

document.querySelector(".signUp_button").addEventListener("click" , (e) => {
    e.preventDefault()

    const username = document.querySelector(".sign_up_username").value

    const email = document.querySelector(".sign_up_email").value

    const password = document.querySelector(".sign_up_password").value

    if(password.length < 6){
        notyf.error("Password must be at least 6 characters")

        return
    }

    users.create(email , password , username).then((res) => {
        notyf.success("Successfully Created A New User!")
    })
    .catch((err) => {
        console.error(err)

        notyf.error("Error while creating a new user!")
    })
})

Now, this is the function which will run on click of the sign up button

The first line is pretty simple, it prevents the default behaviour. The next three lines are for the user's credentials. Next, we are checking if the length of the password is not less than 6. Note: Appwrite raises an error if the password length is less that 6. Finally, creating users is pretty simple. The User class which we initiated, will be used to create the user. Now run the file and enter username , email address and password.

Now, move to the appwrite's dashboard and click the Users button under Develop in left panel.

Now, you will see that a new user is created and it should look somewhat like this:

Great! We have successfully created sign up form!

Making login form

Now, making login form is as simple as creating user. Instead, it is done using a different module named appwrite.

Here is how you would do it:

// Import the appwrite module
const { Appwrite } = require("appwrite")
const server = new Appwrite()

server.setEndpoint(endPoint)
      .setProject(projectID)

document.querySelector(".login_button").addEventListener("click" , (e) => {
    e.preventDefault()

    const email = document.querySelector(".signin_email").value;

    const password = document.querySelector(".signin_password").value

    server.account.createSession(email, password).then((res) => {
        notyf.success("Successfully logged in!")
    })
    .catch((err) => {
        notyf.error("Username or password is incorrect!")
    })
})

So, firstly we are listening for the click. On click, we are gathering username and password from input element in DOM. Next, we are creating a session for the user login. This session can be used for the next time whenever the users opens the app (The session is stored inside of the user's system and can be retrived any time). It would directly take them to dashboard instead to again doing login. So, if the account email and password are correct, we would send a message saying that there was a successful login. If the login email / password is incorrect, we will display invalid credentials message.

Now, we have successfully created a working login / signup system!

Showing a list of users available

Now that our login / signup system is complete, we will show the users, the names of all the other users registered.

...
users.list().then((users) => {
    const parent = document.querySelector(".users")

    for(let user of users.users) {
        const card = document.createElement("div");

        card.addEventListener("click" , parseFunction(showUser , [user["$id"]]));

        card.classList.add("user-card")

        card.innerHTML = user.name;

        parent.appendChild(card);
    }
})
.catch((err) => {})

const parseFunction = (name , args) => {
    return () => name(...args)
}

So, here, firstly, we are requesting to the appwrite to send a list of all the users registered. users.list returns a object with the list of users. name gives the name of that specific user. There are other properties too which can be used. You can see them here

When you run this function, you will see a list of users logged in (even though at first, you will see your own username if you are the only one registered, you can try to sign up with multiple emails and test that out).

Next, we are just creating a card for showing the user's name.

Show user's profile

So, when we will click on a specific user's card, we should see his/her name, when they signed up , and their status.


const showUser = (userId) => {
    users.get(userId).then((user) => {
        document.querySelector(".userName").innerHTML = "Username: " + user.name
        document.querySelector(".userVerified").innerHTML = "Email Verified: " + (user.emailVerification ? "Verified" : "Not verified")
        document.querySelector(".userRegistration").innerHTML = "Registration: " + moment(user.registration).format("DD/MM/YYYY")
        document.querySelector(".userStatus").innerHTML = "Status: " + (user.status === 0 ? "Unactivated" : user.status === 1 ? "Activated" : "Blocked")

        const target = document.querySelector(".userInfo")

        if(target.style.opacity == 0){
            target.classList.add("unfade")

            target.style.display = "block"

            setTimeout(() => {
                target.classList.remove("unfade")

                target.style.opacity = 1
            } , 599)

            notyf.success("Press ESC to close")
        }
    })
}

So, this function fetchs the user according to the user id. Then, we can use the data to show the user's name , whether their email is verified , the date when they registered and their status (whether thay are active, inactive or blocked). Here is the list of the data that appwrite returns. Next lines are for animation. The block appears with a unfading animation.

Updating user's credentials

Now that we have created a system for user sign up, we should also allow users to edit their crendentials.


document.querySelector(".update").addEventListener("click", (e) => {
    e.stopImmediatePropagation()

    var f = false

    users.updateEmail(currentUserId , document.querySelector(".editEmail").value).then((res) => {})
        .catch((err) => {
            notyf.error("Invalid email")

            f = true
        })

    if(f){
        return
    }

    f = false

    users.updateName(currentUserId , document.querySelector(".editName").value).then((res) => {})
        .catch((err) => {
            notyf.error("Invalid email")

            f = true
        })

    if(f){
        return
    }

    f = false

    users.updatePassword(currentUserId , document.querySelector(".editPassword").value).then((res) => {})
        .catch((err) => {
            notyf.error("Invalid email")

            f = true
        })

    if(f){
        return
    }

    notyf.success("Successfully changed the credentials")
})

So, here firstly we are listening for the update button click. On click, we would do the following things:

Update the email - Get the new email from the input and check if there wasnt any error while updating. If there was, send a toast notification
Update the username - Get the new username from the input and check if there wasnt any error while updating. If there was, send a toast notification
Update the password - Get the new password from the input and check if there wasnt any error while updating. If there was, send a toast notification

Creating logouts

Now, the user should be able to logout. This should go like this:


document.querySelector(".logout").addEventListener("click", (e) => {
    server.account.deleteSession("current")

    const target = document.querySelector('.wrapper')

    const secondtarget = document.querySelector(".dashboard")

    secondtarget.classList.add("fade")

    target.classList.add("unfade")

    target.style.display = "block"

    setTimeout(() => {
        target.classList.remove("unfade")

        target.style.opacity = 1

        secondtarget.classList.remove("fade")

        secondtarget.style.opacity = 0
    } , 599)

    notyf.success("Successfully logged out")
})

So, we are listening for the click on the logout button. Whenever the user clicks the button, we will delete the session that we have created during login. "current" deletes the current session saved in the user's system. As the session is deleted, next time we open up the app, it will redirect to the login / signup page.

Next lines are for fading and unfading effect for the dashboard and authentication page, respectively.

Deleting account

Now that we have created all the elements, we will now allow users to delete their account.

The code should go like this:

document.querySelector(".delete").addEventListener("click" , (e) => {
    users.delete(currentUserId)

    const target = document.querySelector('.wrapper')

    const secondtarget = document.querySelector(".dashboard")

    secondtarget.classList.add("fade")

    target.classList.add("unfade")

    target.style.display = "block"

    setTimeout(() => {
        target.classList.remove("unfade")

        target.style.opacity = 1

        secondtarget.classList.remove("fade")

        secondtarget.style.opacity = 0
    } , 599)
})

Finally, we will listen for the click on the delete button. Whenever the user clicks it, we will run the function.

The first line of the function deletes the user from the databse. The next lines are just for the animations just like we did in logout.

Conclusion

I hope that you will have understood how to use Appwrite's Users Services. This tutorial uses all the services that appwrite provides and bundles them into a project.

I found out about Appwrite from the Hacktoberfest event. I really love this project. Its simple, easy and most of all - secure and fast. It has a good UI for seeing the requests count, database collections and users. I would really recommend using Appwrite while creating a database application.

Github repository

Here is the full source code for this project: