You can found this code on my github: https://github.com/leonyangela/jquery-demo-appwrite
Installing Appwrite
To install appwrite, you need to have docker installed. After you've finished installing docker. You can install appwrite by using
docker run -it --rm ^
--volume //var/run/docker.sock:/var/run/docker.sock ^
--volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
--entrypoint="install" ^
appwrite/appwrite:1.0.3
It will let you choose your own parameter or you can use the default one.
After you have specified these details, it will take a few moments. If it's successful, you will get a message saying Appwrite installed successfully
You can now access your appwrite dashboard by visiting http://<hostname or custom domain>:<HTTP port>
You could register a new account and explore the appwrite (Docs).
Account
To create an account, you can use these API.
Database
To insert into database, you can use these API
App Init
I use webpack as front-end and webpack-dev-server to start the app.
to hide sensitive information, I use dotenv-webpack.
to use jquery, install the jquery with
npm i --save-dev jquery.
I use bootstrap v5 as CSS framework.
.env
create a file on parent directory and add these to your .env file:
API_ENDPOINT=[YOUR_API_ENDPOINT]
PROJECT_ID=[YOUR_PROJECT_ID]
DB_COLLECTION_ID=[YOUR_DATABASE_COLLECTION_ID]
DB_ID=[YOUR_DATABASE_ID]
Index.js
create a new file under /src folder and add
import $ from 'jquery'
import { GenerateApp } from "./generateApp"
class App {
static init() {
console.log('init....')
let app = new GenerateApp()
}
}
App.init()
GenerateApp.js
create a new file generateApp.js under /src folder to add all the functions related to the app functionality.
import { Client, Account, ID, Databases } from 'appwrite'
export class GenerateApp {
constructor() {
this.client = new Client()
.setEndpoint(process.env.API_ENDPOINT) // Your API Endpoint
.setProject(process.env.PROJECT_ID) // Your project ID
this.account = new Account(this.client)
this.databases = new Databases(this.client)
let data = sessionStorage.getItem("appWriteUser")
// if local storage is empty, show form or register data
if (!data) {
this.register()
// if local storage is not empty, show to do list
} else {
this.todoFunc()
}
}
generateTodo() {
var htmlAdd = ''
htmlAdd += '<h1 class=" h5 pt-2">add your todos below...</h1>'
htmlAdd += '<div class="input-group mb-3 pt-2">'
htmlAdd += ' <input type="text" class="form-control" id="todoinput" placeholder="add todos..." aria-label="todo lists aria-describedby="button-addon2">'
htmlAdd += ' <button class="btn btn-outline-secondary" type="button" id="btnAdd">Add Item</button>'
htmlAdd += '</div>'
htmlAdd += '<div class="w-100" id="card-group">'
htmlAdd += ' <div class="card w-50" id="no-data">'
htmlAdd += ' <div class="card-body">'
htmlAdd += ' <h5 class="card-title">No data....</h5>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += '</div>'
htmlAdd += '<button type="button" class="btn btn-primary mt-5" id="btnLogout">Logout</button> '
$('.container-fluid').html(htmlAdd)
}
generateLoginForm() {
var htmlAdd = ''
htmlAdd += '<div class="row justify-content-center align-items-center h-100">'
htmlAdd += ' <div class="col-12 col-lg-9 col-xl-7">'
htmlAdd += ' <div class="card shadow-2-strong card-login" style="border-radius: 15px">'
htmlAdd += ' <div class="card-body p-4 p-md-5">'
htmlAdd += ' <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Login Form</h3>'
htmlAdd += ' <form id="registrationForm">'
htmlAdd += ' <div class="row">'
htmlAdd += ' <div class="col-md-6 mb-4">'
htmlAdd += ' <div class="form-outline">'
htmlAdd += ' <input type="email" id="login_email" class="form-control form-control-lg" />'
htmlAdd += ' <label class="form-label" for="email">Email</label>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' <div class="col-md-6 mb-4">'
htmlAdd += ' <div class="form-outline">'
htmlAdd += ' <input type="password" id="login_password" class="form-control form-control-lg" />'
htmlAdd += ' <label class="form-label" for="password">Password</label > '
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' <div class="mt-4 pt-2">'
htmlAdd += ' <input class="btn btn-primary btn-lg" type="submit" value="Login" id="btnLogin" />'
htmlAdd += ' <input class="btn btn-primary btn-lg" type="submit" value="Register" id="goToRegister" />'
htmlAdd += ' </div>'
htmlAdd += ' </form>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += '</div>'
$('.container-fluid').html(htmlAdd)
}
generateRegisterForm() {
var htmlAdd = ''
htmlAdd += '<div class="row justify-content-center align-items-center h-100">'
htmlAdd += ' <div class="col-12 col-lg-9 col-xl-7">'
htmlAdd += ' <div class="card shadow-2-strong card-registration" style="border-radius: 15px">'
htmlAdd += ' <div class="card-body p-4 p-md-5">'
htmlAdd += ' <h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>'
htmlAdd += ' <form id="registrationForm">'
htmlAdd += ' <div class="row">'
htmlAdd += ' <div class="col-md-6 mb-4">'
htmlAdd += ' <div class="form-outline">'
htmlAdd += ' <input type="text" id="name" class="form-control form-control-lg" />'
htmlAdd += ' <label class="form-label" for="name">Name</label>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' <div class="col-md-6 mb-4">'
htmlAdd += ' <div class="form-outline">'
htmlAdd += ' <input type="email" id="email" class="form-control form-control-lg" />'
htmlAdd += ' <label class="form-label" for="email">Email</label>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' <div class="row">'
htmlAdd += ' <div class="col-md-6 mb-4 pb-2">'
htmlAdd += ' <div class="form-outline">'
htmlAdd += ' <input type="password" id="password" class="form-control form-control-lg" />'
htmlAdd += ' <label class="form-label" for="password">Password</label>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' <div class="mt-4 pt-2">'
htmlAdd += ' <input class="btn btn-primary btn-lg" type="submit" value="Register" id="btnRegister" />'
htmlAdd += ' <input class="btn btn-primary btn-lg" type="submit" value="Login" id="goToLogin" />'
htmlAdd += ' </div>'
htmlAdd += ' </form>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += ' </div>'
htmlAdd += '</div>'
$('.container-fluid').html(htmlAdd)
}
addCard(element) {
var htmlAdd = ''
htmlAdd += '<div class="card w-50 rounded-2 mt-3">'
htmlAdd += ' <div class="card-body">'
htmlAdd += ' <h5 class="card-title">' + element.todos_name + '</h5>'
htmlAdd += ' </div>'
htmlAdd += '</div>'
return htmlAdd
}
changePage() {
$("#goToLogin").on('click', (e) => {
this.login()
})
$("#goToRegister").on('click', (e) => {
this.register()
})
}
register() {
// Register User
let registerObj = {
userId: ID.unique(),
email: '',
password: '',
name: ''
}
this.generateRegisterForm()
$('#email').on('input', function (el) {
registerObj.email = el.target.value
})
$('#password').on('input', function (el) {
registerObj.password = el.target.value
})
$('#name').on('input', function (el) {
registerObj.name = el.target.value
})
$("#btnRegister").on('click', (e) => {
e.preventDefault()
if (registerObj.email != '' && registerObj.password != '' && registerObj.name != '') {
const promise = this.account.create(registerObj.userId, registerObj.email, registerObj.password, registerObj.name)
promise.then((response) => {
this.login()
}, function (error) {
console.log(error) // Failure
})
} else {
console.log('registerObj is emptyy!')
}
})
this.changePage()
}
login() {
let loginObj = {
email: '',
password: ''
}
console.log(loginObj.email, loginObj.password)
this.generateLoginForm()
$('#login_email').on('input', function (el) {
loginObj.email = el.target.value
})
$('#login_password').on('input', function (el) {
loginObj.password = el.target.value
})
$("#btnLogin").on('click', (e) => {
e.preventDefault()
if (loginObj.email != '' && loginObj.password != '') {
const promise = this.account.createEmailSession(loginObj.email, loginObj.password)
promise.then((response) => {
// save data to local storage
sessionStorage.setItem("appWriteUser", JSON.stringify(response))
this.todoFunc()
}, function (error) {
console.log(error) // Failure
})
} else {
console.log('loginObj is emptyy!')
}
})
this.changePage()
}
todoFunc() {
let todos_name = ''
this.generateTodo()
// if user click log out btn, clear local storage
$("#btnLogout").on('click', (e) => {
sessionStorage.removeItem("appWriteUser")
this.login()
})
$('#todoinput').on('input', function (el) {
todos_name = el.target.value
})
$("#btnAdd").on('click', (e) => {
const promise = this.databases.createDocument(
process.env.DB_ID,
process.env.DB_COLLECTION_ID,
ID.unique(),
{
todos_name: todos_name
}
)
promise.then((response) => {
$('#no-data').remove()
$('#card-group').append(this.addCard(response))
}, function (error) {
console.log(error) // Failure
})
})
}
}
template.html
create a new file template.html under /src folder, here is your html template that will be rendered, here I use bootstrap v5 as CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid p-3 position-relative">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>
<form id="registrationForm">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="name" class="form-control form-control-lg" />
<label class="form-label" for="name">Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="email" id="email" class="form-control form-control-lg" />
<label class="form-label" for="email">Email</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<div class="form-outline">
<input type="password" id="password" class="form-control form-control-lg" />
<label class="form-label" for="password">Password</label>
</div>
</div>
</div>
<div class="mt-4 pt-2">
<input class="btn btn-primary btn-lg" type="submit" value="Register" id="btnRegister" />
<input class="btn btn-primary btn-lg" type="submit" value="Login" id="btnLogin" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</html>
Here is the final folder structure:
After everything completed, you can run npm run dev to start the app.
Top comments (0)