From eca713b1801a6a043abf3ece311b11a59f26b0b3 Mon Sep 17 00:00:00 2001 From: "Vincent (Wen Yu) Ge" Date: Thu, 18 Jan 2024 14:04:11 +0000 Subject: [PATCH] Clean up the rebased Nuxt tutorial --- src/routes/docs/tutorials/nuxt/+layout.svelte | 10 - src/routes/docs/tutorials/nuxt/+layout.ts | 11 - src/routes/docs/tutorials/nuxt/+page.ts | 6 - .../docs/tutorials/nuxt/step-1/+page.markdoc | 37 ---- .../docs/tutorials/nuxt/step-2/+page.markdoc | 161 -------------- .../docs/tutorials/nuxt/step-3/+page.markdoc | 73 ------- .../docs/tutorials/nuxt/step-4/+page.markdoc | 199 ------------------ .../docs/tutorials/nuxt/step-5/+page.markdoc | 68 ------ .../docs/tutorials/nuxt/step-6/+page.markdoc | 115 ---------- .../docs/tutorials/nuxt/step-7/+page.markdoc | 181 ---------------- .../docs/tutorials/nuxt/step-8/+page.markdoc | 11 - 11 files changed, 872 deletions(-) delete mode 100644 src/routes/docs/tutorials/nuxt/+layout.svelte delete mode 100644 src/routes/docs/tutorials/nuxt/+layout.ts delete mode 100644 src/routes/docs/tutorials/nuxt/+page.ts delete mode 100644 src/routes/docs/tutorials/nuxt/step-1/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-2/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-3/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-4/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-5/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-6/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-7/+page.markdoc delete mode 100644 src/routes/docs/tutorials/nuxt/step-8/+page.markdoc diff --git a/src/routes/docs/tutorials/nuxt/+layout.svelte b/src/routes/docs/tutorials/nuxt/+layout.svelte deleted file mode 100644 index fb9fb3980f..0000000000 --- a/src/routes/docs/tutorials/nuxt/+layout.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/src/routes/docs/tutorials/nuxt/+layout.ts b/src/routes/docs/tutorials/nuxt/+layout.ts deleted file mode 100644 index c8884f46b8..0000000000 --- a/src/routes/docs/tutorials/nuxt/+layout.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { LayoutLoad } from './$types'; - -export const load: LayoutLoad = ({ url }) => { - const tutorials = import.meta.glob('./**/*.markdoc', { - eager: true - }); - return { - tutorials, - pathname: url.pathname - }; -}; diff --git a/src/routes/docs/tutorials/nuxt/+page.ts b/src/routes/docs/tutorials/nuxt/+page.ts deleted file mode 100644 index fa071eee0a..0000000000 --- a/src/routes/docs/tutorials/nuxt/+page.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { redirect } from '@sveltejs/kit'; -import type { PageLoad } from './$types'; - -export const load: PageLoad = async () => { - throw redirect(303, '/docs/tutorials/nuxt/step-1'); -}; diff --git a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc deleted file mode 100644 index 8e0dd14b5e..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: tutorial -title: Build an ideas tracker with Nuxt -description: Learn to build an idea tracker app with Appwrite and Nuxt with authentication, databases and collections, queries, pagination, and file storage. -step: 1 -difficulty: beginner -readtime: 25 -framework: Nuxt -category: Web -back: /docs ---- - -**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish. -In this tutorial, you will build Idea tracker with Appwrite and Nuxt. - -{% only_dark %} -![Create project screen](/images/docs/tutorials/dark/idea-tracker.png) -{% /only_dark %} -{% only_light %} -![Create project screen](/images/docs/tutorials/idea-tracker.png) -{% /only_light %} - -# Concepts {% #concepts %} - -This tutorial will introduce the following concepts: - -1. Setting up your first project -2. Authentication -3. Navigation -4. Databases and collections -5. Queries - - -# Prerequisites {% #prerequisites %} - -1. Basic knowledge of JavaScript. -2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer. diff --git a/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc deleted file mode 100644 index 56d3629729..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc +++ /dev/null @@ -1,161 +0,0 @@ ---- -layout: tutorial -title: Create app -description: Create a Nuxt app project and integrate with Appwrite -step: 2 ---- - -# Create Nuxt project {% #create-nuxt-project %} - -Create a Nuxt app with the `npx init` command. -The command will install all the necessary dependencies for you. - -```sh -npx nuxi@latest init ideas-tracker -``` - -# Add dependencies {% #add-dependencies %} - -Once the project is created, change your current working directory and install the JavaScript Appwrite SDK. - -```sh -cd ideas-tracker -npm install appwrite -npm install "@appwrite.io/pink" -``` - -Open `App.vue` and import the relevant style files. - -```html - - - -``` - -Then update `nuxt.config.ts` to disable SSR for now. SSR support is coming soon to Appwrite, for now, disable SSR. - -```ts -// nuxt.config.ts - -// https://nuxt.com/docs/api/configuration/nuxt-config -export default defineNuxtConfig({ - ssr: false, - devtools: { enabled: true } -}) -``` - -You can start the development server to watch your app update in the browser as you make your changes. - -```sh -npm run dev -``` - -# File structure {% #file-structure %} - -Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase. -To take advantage of this we need to add the following directories: -- `/components/` to keep our UI components in one place. - We will get back to it in [step 5](/docs/tutorials/nuxt/step-5) -- `/composables/`for storing files handling global states and data fetching. - We will use it in [step 4](/docs/tutorials/nuxt/step-4) -- `/layouts/` to store the page layouts -- `/pages/` for the content pages. - -Run the following command to create these folders - -```sh -mkdir components composables layouts pages -``` - -# Add layout {% #add-layout %} - -Go to the `layouts/` directory and add the file `default.vue`. -Add the following code for the default layout. -As you see it's nearly empty but it is needed for the automatic routing to work properly. - -```html - - - - - -``` - -# Add home page {% #add-home-page %} - -Next, head over to the `pages`directory. -This is where we will keep the content that will render on our pages in the web application. -Each file you put in here will automatically become a route. -Add the file `index.vue` with the following code. - -```vue - - - -``` - -This is what your directory should look like after adding the new directories and files: - -``` -[repository tree] -├── .nuxt/ -├── components/ -├── composables/ -├── layouts/ -│ └── default.vue -├── pages/ -│ ├── index.vue -├── public/ -│ └── /favicon.ico -├── server/ -│ └── /tsconfig.json -├── .gitignore -├── app.vue -├── nuxt.config.ts -├── package-lock.json -├── package.json -├── README.md -└── tsconfig.json -``` - -# Render page {% #render-page %} - -If you run the development server now, it will still render the Nuxt Welcome page. -We need to tell our app to use the files we just created instead. -Open `app.vue` in the root directory and replace the content with the following code. -Your page will now be up and running. - -```vue - - - - - -``` diff --git a/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc deleted file mode 100644 index 53db58ba0c..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: tutorial -title: Set up Appwrite -description: Import and configure a project with Appwrite Cloud. -step: 3 ---- - -# Create project {% #create-project %} - -Head to the [Appwrite Console](https://cloud.appwrite.io/console). - -{% only_dark %} -![Create project screen](/images/docs/quick-starts/dark/create-project.png) -{% /only_dark %} -{% only_light %} -![Create project screen](/images/docs/quick-starts/create-project.png) -{% /only_light %} - -If this is your first time using Appwrite, create an account and create your first project. - -Then, under **Add a platform**, add a **Web app**. -The **Hostname** should be `localhost`. - -{% only_dark %} -![Add a platform](/images/docs/quick-starts/dark/add-platform.png) -{% /only_dark %} -{% only_light %} -![Add a platform](/images/docs/quick-starts/add-platform.png) -{% /only_light %} - -You can skip the optional steps. - -# Environment variables {% #environment-variables %} - -To connect to Appwrite in our app, we'll need to use sensitive information. -We keep the secrets by using environment variables for the endpoint and project id. -Your project id is located in the **Settings** page in the Appwrite console. - -{% only_dark %} -![Project settings screen](/images/docs/quick-starts/dark/project-id.png) -{% /only_dark %} -{% only_light %} -![Project settings screen](/images/docs/quick-starts/project-id.png) -{% /only_light %} - -Add a `.env` file to the root directory and add the following code to it, replacing `YOUR_PROJECT_ID` with your project id. - -``` -VITE_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1" -VITE_APPWRITE_PROJECT="YOUR_PROJECT_ID" -``` - -# Initialize Appwrite SDK {% #init-sdk %} - -Create a new file `appwrite.js` for the Appwrite related code. -Only one instance of the `Client()` class should be created per app. -Add the following code to it. - -```ts -// appwrite.ts - -import { Client, Databases, Account } from "appwrite"; - -const url: string = import.meta.env.VITE_APPWRITE_ENDPOINT; -const project: string = import.meta.env.VITE_APPWRITE_PROJECT; - -const client: Client = new Client(); - -client.setEndpoint(url).setProject(project); - -export const account: Account = new Account(client); -export const database: Databases = new Databases(client); -``` diff --git a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc deleted file mode 100644 index 2f8dc59e3b..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc +++ /dev/null @@ -1,199 +0,0 @@ ---- -layout: tutorial -title: Add authentication -description: Add authentication to your Nuxt application using Appwrite Web SDK -step: 4 ---- - -For our ideas tracker app, we want any visitor to be able to read the ideas that are stored. -On the other hand, we don't want the page spammed with just about anything from anyone just stopping by. -To prevent that, or at least making it a bit more difficult, editing ideas will be available for logged in users only. -With a login function, we can differentiate between users and decide which users have access to which content. - -We will build a page with a simple login form and store its related logic in a `useUserSession` composable so it can be reused, starting with the composable. - -# User session composable {% #user-session-composable %} - -There are a few standard functions involved in handling a user session that is added to the composable. -The user needs to be able to register to an account, login to the account and logout from it. - -We are using Appwrite as a backend to handle the user details, so we need to connect to Appwrite by importing the configurations from step 3. -The response from these interactions will be stored as references to get more information about the user in our app. - -In your `composable` directory, create the file `useUserSession.js` and add the following code. -Then you can call the `useUserSession()` function in the pages and components to use the functionality. - -```ts -// composable/useUserSession.ts - -import { ID } from "appwrite"; -import { ref } from "vue"; -import { account } from "../appwrite"; -import { type Models } from 'appwrite'; - -const current = ref(null); // Reference to current user object - -export const useUserSession = () => { - const register = async (email: string, password: string): Promise => { - await account.create(ID.unique(), email, password); // Register new user in Appwrite - await login(email, password); // Login registered user - }; - - const login = async (email: string, password: string): Promise => { - const authUser = await account.createEmailSession(email, password); // Open user session in Appwrite - current.value = authUser; // Pass user data to current ref - navigateTo("/"); - }; - - const logout = async (): Promise => { - await account.deleteSession("current"); // Delete Appwrite user session - current.value = null; // Clear current ref - navigateTo("/"); - }; - - // Check if already logged in to initialize the store. - account.getSession('current').then((user: Models.Session) => { - current.value = user; - }); - - return { - current, - login, - logout, - register, - }; -}; -``` -# Login page {% #login-page %} - -Create a new file in the `pages` directory called `login.vue`. -This will not only create a new page, it will also add the route `/login` to the url. -In step 5 we will add a login button that will redirect us to this page. - -We will define functions to handle form submissions and show either a signup -or a login form, which renders one form or the other depending on `isSignUp`'s state. -We will also show buttons to toggle between the two different types of forms. - -```vue - - - - -``` - -# Authentication forms {% #auth-forms %} - -In the previous step, we defined a `AuthForm` to handle signup and login. -Let's build this form now. - -Create a new file `components/authForm.vue` and add the following code. -The handle submit and submit type are props passed from `pages/login.vue` - -```html - - - - - -``` - -Go to the browser and add `/login` to the url to check out the new page. diff --git a/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc deleted file mode 100644 index b0464b6523..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: tutorial -title: Add navigation -description: Add navigation to your app. -step: 5 ---- - -To help our users navigate the app we want it to have a navigation bar that's visible on all pages. -We will once again use the `useUserSession()` composable for information about the current user. - -With this piece of information we will show a login button when no user is logged in and a logout button when one is. -We will also put the user's e-mail address next to the logout button. - -From the `components` directory, create the file `navbar.vue` and add the code below. - -```vue - - - - -``` - -Open `app.vue` from the root directory and add the navigation bar. - -```vue - - - - - -``` - -Have a look in the browser at both the main page and the login page to test the new functionality. diff --git a/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc deleted file mode 100644 index 9206965e72..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: tutorial -title: Add database -description: Add databases and queries for ideas in your Nuxt project. -step: 6 ---- - -In Appwrite, data is stored as a collection of documents. -Create a new database and collection in the [Appwrite Console](https://cloud.appwrite.io/) to store the ideas. - -{% only_dark %} -![Create collection screen](/images/docs/tutorials/dark/idea-tracker-collection.png) -{% /only_dark %} -{% only_light %} -![Create collection screen](/images/docs/tutorials/idea-tracker-collection.png) -{% /only_light %} - -Create a new collection with the following attributes: -| Field | Type | Required | Size | -|-------------|--------|----------|----------| -| userId | String | Yes | 200 | -| title | String | Yes | 200 | -| description | String | No | 500 | - -Change the collection's permissions in the settings to give access. - -{% only_dark %} -![Collection permissions screen](/images/docs/tutorials/dark/idea-tracker-permissions.png) -{% /only_dark %} -{% only_light %} -![Collection permissions screen](/images/docs/tutorials/idea-tracker-permissions.png) -{% /only_light %} - -Navigate to the **Settings** tab of your collection, add the role **Any** and check the **Read** box. -Next, add a **Users** role and give them access to **Create**, **Update** and **Delete** by checking those boxes. - -# Environment variables {% #environment-variables %} - -Just like when we set up the connection to Appwrite in [step 3](/docs/tutorials/nuxt/step-3), we need to keep the variables with the collection id secret. -Open the `.env` file and add your database id and your collection id to it. - -``` -VITE_DATABASE_ID="YOUR_DATABASE_ID" -VITE_COLLECTION_ID="YOUR_COLLECTION_ID" -``` - -# Query methods {% #query-methods %} - -Now that we have a collection in the database to hold ideas, we can connect to it from our app. -Our users should be able to read, add and remove ideas. -We will add a new composable, `useIdeas`, to handle this functionality. - -Create a new file in the composables directory, `useIdeas.js` and add the following code. - -```ts -// composables/useIdeas.ts - -import { ID, Query, Models} from "appwrite"; -import { database } from "~/appwrite"; -import { ref } from "vue"; - -const ideasDatabaseId: string = import.meta.env.VITE_DATABASE_ID; -const ideasCollectionId: string = import.meta.env.VITE_COLLECTION_ID; -const queryLimit: number = 10; - -interface Idea extends Models.Document{ - title: string; - description: string; - userId: string; -} - -const current = ref(null); // Reference for the fetched data - -export const useIdeas = () => { - - // Fetch the 10 most recent ideas from the database - // Add the list to the current reference object - const fetch = async (): Promise => { - const response = await database.listDocuments( - ideasDatabaseId, - ideasCollectionId, - [Query.orderDesc("$createdAt"), Query.limit(queryLimit)] - ); - current.value = response.documents as Idea[]; - }; - - // Add new idea to the database, - // Change the value of the current object - const add = async (idea: Idea): Promise => { - const response = await database.createDocument( - ideasDatabaseId, - ideasCollectionId, - ID.unique(), - idea - ); - current.value = [response, ...current.value as Idea[]].slice(0, 10) as Idea[]; - }; - - const remove = async (id: string): Promise => { - await database.deleteDocument(ideasDatabaseId, ideasCollectionId, id); - await fetch(); // Refetch ideas to ensure we have 10 items - }; - - fetch(); - - return { - add, - current, - fetch, - remove, - }; -}; -``` - -Now we can call the `useIdeas` composable from the home page. diff --git a/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc deleted file mode 100644 index cb16c558aa..0000000000 --- a/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc +++ /dev/null @@ -1,181 +0,0 @@ ---- -layout: tutorial -title: Ideas page -description: Add ideas from Appwrite database in your app. -step: 7 ---- - -With the methods in the `useIdeas` composable we can get some ideas to the home page for the users to interact with. -We will use it in a form component so the logged in users can add their ideas, and in a list component to render the ten most recent ideas. -We start with building the form. - -# Idea form {% #idea-form %} - -On the home page, the logged in users should be able to add their ideas to the Appwrite database. -The form need a text field for filling in the title, a textarea for the description and a submit button. - -From the `components` directory, add the file `IdeasForm.vue` and add the following code. - -```vue - - - -