Create and Publish TODO Application Using Swifty
Опубликовано Денис Завьялов on 20 November 2018 13:35
In this article, I’ll show you how to create and host simple ToDo application with authentication, profile and task management using Swifty. We will use swifty.todo application written on Vue.js as an example. Our swifty.todo application includes the following features:
What is Swifty?
Swifty is a serverless platform that allows you to develop and run backends for your web or mobile applications as fast and easy as possible without having to manage any infrastructure. With Swifty, you do not need to think about your application’s scalability or availability, we do it for you. For more convenience, we also include Maria and Mongo databases, Object Storage, and Authentication-as-a-Service.
If you do not have Swifty account still please create it here.
Setting Up Authorization and Creating Users
A typical application that stores data requires a way to create and manage user accounts. Swifty offers built-in Authentication-as-a-Service that provides the basic actions:
First, create the authentication backend. In the Swifty.Dashboard, open Authentication Services and click Create Auth Database. Name the database
The function needs to have access to the Mongo and authentication middleware. It automatically gets a URL trigger that the application needs to call to manage users. To get the link for the trigger, open Functions in the Swifty.Dashboard, locate the function marked Authentication, open Triggers and copy the REST API URL. Save this link as AUTH_URL. We will need it later.
The function expects the
User management requests are sent using the POST method:
If sign-in is successful, you get JSON response with a JWT token that lets you access functions. The JWT token is to be provided via the bearer authorization scheme. If an authentication check fails (no header, wrong scheme, or bad signature), the function is not called and the code 401 is returned. If authentication passes, the function receives the token claims via the
The swifty.todo application does the following when you sign up and open the user details page:
To use profile management, you also need to get a REST API links for
Managing Profile Pictures
Swifty.todo ap allows you to upload user profile pictures. Alongside other files, pictures are kept in Swifty’s built-in object storage and can be managed with any S3 tool via Amazon S3-compatible API.
While you can create your own function using the standard S3 API to upload and download profile pictures, you can also use a standard function that comes with Swifty:
Create object storage to store avatars:
Also you need to tell your function the name of bucket to use. As for previous function we will add environment variable:
We are creating ToDo app, right? So, we finally need a function to manage tasks. This function allows to create and delete tasks as well as to store them in Mongo database.
Create Mongo database to store tasks:
Also you need to tell your function the name of the database to use.
Now that the authentication backend, functions, and middleware are ready, you need to enable authentication for the user profile and avatar management functions to protect them from unauthorized access. Do the following in the Swifty.Dashboard:
Now all functions will only be executed for users with valid JWT tokens.
By marking the function “authenticated” you make sure that Swifty gets the JWT from the call request, checks it and, if the JWT is properly signed, decodes the claims and passes them to the function as a
After all preparations, the Functions screen should look like this:
Publish swifty.todo Application
Please copy the source code of swifty.todo app to your local folder:
# git clone https://github.com/swiftycloud/swifty.todoapp
After that go to swifty.todoapp folder -> src and open config.js file in your favourite code editor (I prefer Atom personally). You need to update variables with your actual links:
export const AUTH_URL = "https://api.swifty.cloud/call/991..." export const PROFILE_URL = "https://api.swifty.cloud/call/281..." export const PICTURE_URL = "https://api.swifty.cloud/call/e6a..." export const TASKS_URL = "https://api.swifty.cloud/call/4b1..."
Please ignore facebook variables at this stage.
Next you need to build your application:
# npm run build ... DONE Build complete. The dist directory is ready to be deployed.
You can also test your application locally by starting it:
# npm run serve
and accessing at http://localhost:8080
After that you need to upload your app to Object Storage and publish it. Please go to Object Storage, create todoappbucket and upload files from the dist directory of your swifty.todoapp folder to the bucket.
The last step is to publish your website. Go to More -> HTTP Server Settings and enable HTTP server. Copy Endpointlink and click Save.
Now everything is ready and you can access your application using Endpoint link.
Create your account, manage your tasks and profile – your application is on air!
If you open the Functions screen of swifty.dashboard, you will see that the authentication auth function has executed at least once to create a new user account. The
If you have any question, please send them to us.