diff --git a/example-database/.gitignore b/example-database/.gitignore index 403adbc..2502760 100644 --- a/example-database/.gitignore +++ b/example-database/.gitignore @@ -14,6 +14,7 @@ yarn-error.log* pnpm-debug.log* # Editor directories and files +.code-workspace .idea .vscode *.suo diff --git a/example-database/README.md b/example-database/README.md index e13f820..a16daeb 100644 --- a/example-database/README.md +++ b/example-database/README.md @@ -1,482 +1,345 @@ -# Appwrite + VueJS =❤️ -This example is to showcase [Appwrite's JS API](https://github.com/appwrite/sdk-for-js) with [VueJS](https://vuejs.org/) by creating a simple tasks web application where you can add, remove and mark tasks as done. - -## Prerequisites - -- A recent version of [NodeJS](https://nodejs.org/) -- [Yarn](https://yarnpkg.com/) (Feel free to use [NPM](https://www.npmjs.com/) if you want to, just switch out the Yarn Commands for their NPM counterparts) -- [A locally running Appwrite instance](https://appwrite.io/docs/installation). - -## Getting Started -To get started as fast as possible we will use the Vue CLI, Here we will use NPX to launch the Vue CLI without installing it globally. -``` shell -npx @vue/cli create --default example-database -``` -that should create an app with VueJS 2, Babel and ESLint, while we are in the terminal we might as well install the appwrite SDK for later using: -```shell -yarn add appwrite -``` - - -With that done go ahead and launch the development server on `localhost:8080` using: -``` shell -yarn serve -``` - -## Housekeeping and The Appwrite SDK -First, we want to remove the default components contained within the boilerplate app we just created. - - 1. Delete the `src/components/HelloWorld.vue` component - 2. Replace the code in `src/App.vue` to the following: - ```html - - - - - - ``` - -This will give us a basic app with nothing in it, which allows us to start creating our tasks app. - -Next, we are going to create a JS File with the Appwrite Initialisation code so we can easily import it in our app code from where ever we like. Create a new file `src/utils.js` and place the following code in it. - -```js -import * as Appwrite from 'appwrite' -const appwrite = new Appwrite() -appwrite - .setEndpoint('http://EndpointURL.example/') // Replace this with your endpoint - .setProject('ProjectID') // Replace this with your projectID - -let promise = sdk.account.createSession('emailaddress', 'password'); // Replace with a appwrite account you created - -promise.then(function (response) { - console.log(`Successfully logged in as: ${response.name}`); // Success - }, function (error) { - console.error(error); // Failure - }); - - -export { appwrite } -``` -Make sure to replace the URL and ProjectID with your Endpoint and ProjectID You created in your appwrite installation. -Aswell as the email address and password to sign in the app to a appwrite account so it can access the functions it needs. - -## Creating the collection -In order for us to create this to-do app we need a place to store it, In appwrite we have collections and if you use or have used MongoDB this should be instantly familiar! We need to first create a collection in our appwrite database for this app to use. - -First, we want to navigate to our appwrite control panel and login, then navigate to the Database tab. -![Image Showing where the database tab is](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/1.png) -Once there go ahead and click on the `+` icon in the bottom right corner, Go ahead and give this new collection a name, any name it doesn't matter since what we need is the CollectionID which you will get once you've created the collection. It can be found here: -![Image Showing where the collection ID is](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/2.png) -Go ahead and copy that and keep it in an open notepad since we will use it later when we are writing code - -Next, we are going to create the schema for the collection. Go ahead and navigate to settings under the rules section click on `Add` where you want to add 3 rules, Copy the rules from the images below: - -![Image Showing collection rules 1](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/3.png) - -![Image Showing collection rules 2](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/4.png) - -![Image Showing collection rules 3](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/5.png) - -Finally, we are going to allow read, write access to everyone this is because we don't want to have to sign in to add these tasks and read them. Please note that you do not want to do this in a public web app powered by appwrite. We are only doing this for ease of use while developing this project. - -Navigate to the settings again and in the permissions section add * to both read and write permissions like so -![Image Showing permissions](https://raw.githubusercontent.com/PineappleIOnic/demos-for-vue-1/example-database/example-database/tutorial-resources/images/6.png) - -Make sure to click Update to apply all the changes you've just made to the collection, once we've done that we can get back stuck into the code! -## Creating the fetch code -We want to be able to fetch all the tasks when the app loads up and when changes are made, so in app.js we are going to create a function that can do so, First, we are going to import the appwrite SDK we created earlier! - -In the ` -``` -With that done, we'll move onto creating the Template! - -## Writing the App Template -We'll take a break from the code to indulge ourselves in some nice HTML (VueJS Syntax) in the `