📒 Introduction
In recent years, it has been difficult for me to participate in Hacktoberfest. There are so many people, so I'm having trouble finding tasks!
But I want help! So, I participated in the Appwrite Hackathon 2024 at october, and it was amazing to see the news on the Appwrite product ( I have been a fan for a few years! ).
I love Appwrite because it permits me to speed-coding some projects that I have in mind! I love that the idea can be real in a short time!
In this trying (I didn't win) I saw only a few detailed tutorials on Appwrite so I decided to make one (using Angular as front-end)!
Let's start!
💡 The project idea
I recently started again to play D&D, I always loved to play a smart character, an inventor, or a mage so I had an idea: In the AI era I can record the session and transform it into a journal handmade by my character.
🤓 Nerd note: I like the idea that my gnome Artificier can create ( in automatic) a journal
💾 Tech stack
- Angular v18
- Appwrite Cloud v1.6.0
- Primeng v18 as front-end framework
🌃 Appwrite
Create the project
- Click on "Create project"
- Insert name and click "Next"
- Select the region
- Select the platform with you use the appwrite. In our case "Web".
- Compile all the information (Skip or compile all the optional step)
- The project is ready!
Setup Authentication
- Go on Auth page
- Click on "Create User"
- Fill the data
- Ok! Done!
🏙️ Angular app
Create app
Ok, now we have to create a new Angular App!
- Install if you don't have the Angular CLI:
$ npm install -g @angular/cli
- And create a new project
$ ng new <project-name>
- Start the project
$ npm start
- and a framework for the UI, I like Primeng but you can install whatever you want
$ npm install primeng @primeng/themes
- configure primeng: check
app.config.tsandapp.component.ts
Create menu and Routing
For my project, I set routing, an app page with the <router-outlet> and with the PrimeNg menu, and a home page. Maybe you set your project in a different way so you can jump to the next section!
AppComponent
app.component.ts
app.component.html
Routing
app.routes.ts
app.config.ts
Create pages
ok, now we have to do some pages.
$ ng g component pages/home-page
$ ng g component pages/login-page
check next session for the code.
HomePage
home-page.component.ts
home-page.component.html
LoginPage
login-page.component.ts
login-page.component.html
Angular: setup service
Now we have to prepare a service that contact the appwrite server and prepare a method to do the login:
REMEMBER TO SETUP THE ENVIRONMENT VARIABLES!
It's important to set the environment.PROJECT_ID with the appwrite project Id (you can found it in the console near the project name)
Angular: call authentication
Now we rewrite the login function in the login-page.component.ts to call the service method.
💫 Try it!
- Land in home page at
localhost:4200
- select login
- insert username and password
- You are logged in!
🌟 Github Repository
Small app to help with journaling and transcription of audio for tabletop roleplaying games.
This project was generated with Angular CLI version 18.2.9.
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Running unit tests
Run ng test to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
Further help
To get more help on the Angular CLI use ng help or go check…
Top comments (0)