Appwrite + jQuery로 앱 빌드

20052 단어 appwritehack tutorial webdev javascript

내 github에서 이 코드를 찾을 수 있습니다: https://github.com/leonyangela/jquery-demo-appwrite

앱라이트 설치하기

appwrite를 설치하려면 docker가 설치되어 있어야 합니다. 도커 설치를 마친 후. 다음을 사용하여 appwrite를 설치할 수 있습니다.

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

자신의 매개변수를 선택하거나 기본 매개변수를 사용할 수 있습니다.

이러한 세부 정보를 지정한 후 몇 분 정도 걸립니다. 성공하면 Appwrite installed successfully라는 메시지가 표시됩니다.

이제 http://<hostname or custom domain>:<HTTP port>를 방문하여 appwrite 대시보드에 액세스할 수 있습니다.

새 계정을 등록하고 appwrite를 탐색할 수 있습니다(Docs).

계정

계정을 만들려면 다음을 사용할 수 있습니다API .

데이터 베이스

데이터베이스에 삽입하려면 다음을 사용할 수 있습니다API.

앱 초기화

webpack을 프런트 엔드로 사용하고 webpack-dev-server를 사용하여 앱을 시작합니다.

민감한 정보를 숨기려면 dotenv-webpack을 사용합니다.

jquery를 사용하려면 다음과 함께 jquery을 설치합니다.npm i --save-dev jquery .

CSS 프레임워크로 bootstrap v5 을 사용합니다.

.env

상위 디렉토리에 파일을 만들고 .env 파일에 다음을 추가합니다.

API_ENDPOINT=[YOUR_API_ENDPOINT]
PROJECT_ID=[YOUR_PROJECT_ID]
DB_COLLECTION_ID=[YOUR_DATABASE_COLLECTION_ID]
DB_ID=[YOUR_DATABASE_ID]

Index.js

/src 폴더 아래에 새 파일을 만들고 추가

import $ from 'jquery'
import { GenerateApp } from "./generateApp"

class App {
    static init() {
        console.log('init....')
        let app = new GenerateApp()
    }
}

App.init()

GenerateApp.js

/src 폴더 아래에 새 파일 generateApp.js를 생성하여 앱 기능과 관련된 모든 기능을 추가합니다.

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
            })
        })
    }
}

템플릿.html

/src 폴더 아래에 template.html 새 파일을 만듭니다. 여기에 렌더링될 html 템플릿이 있습니다. 여기서는 CSS로 bootstrap v5을 사용합니다.

<!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/[email protected]/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/[email protected]/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>

최종 폴더 구조는 다음과 같습니다.

모든 작업이 완료되면 npm run dev를 실행하여 앱을 시작할 수 있습니다.

Reference

이 문제에 관하여(Appwrite + jQuery로 앱 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/leonyangela/build-your-app-with-appwrite-jquery-55ij

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS를 사용하여 사용자 정의 스크롤 막대 만들기

이번 주 목표는 무엇입니까"(Hacktoberfest 3주차)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다