27
Creating a Simple Notice Board Using Angular
I'm creating a simple notice board app using Angular to solidify my understanding of it.
The project will have a dashboard listing all the notices with the ability to edit, delete and add notices. Each notice will have linked page that displays the details of the notice and comments that other users can add to the notice. This stuff is pretty basic with the only the comment section being a little tricky. I decided to simply add another collection to a document in firebase to implement the comment feature. I'm using firebase for my backend because it provides a lot of APIs which make my life easier.
To make this project a little more interesting for myself I've decided to add some additional features to that I've never tried.
I'm only allowing the page to show three notices initially and if the user scrolls down it will add another three notices to the list and so on and so forth. This is pretty easily implemented using firebase although it did take me some time to understand the logic behind how something like infinite scrolling can be implemented.
It was difficult to understand at first because I didn't realize that the collections in firebase could be ordered. But I realized that you can order them according to time or any other property you created in the database. Firebase has a pretty simple method where you can limit the number of items.
Also, there is one thing I'm proud of. I implemented DRY(don't repeat yourself). I was also originally planning to make 2 different functions. One to get the data to load when the component was first mounted and another one to get 3 notices thereafter if the user scrolling down. But, for some reason, I felt like that wasn't necessary. After some research, I realized that if you use "?" in the parameter, the function doesn't need to always take in an argument and does not throw an error. Very simple but very satisfying for me at this stage of my coding journey.
getNoticeList(row?: Date) { // "?" saved me from writing extra code
return this.firestore
.collection('notices', ref => ref
.orderBy('time')
.startAfter(row || 0) //this part helped me reduce code
.limit(3))
.snapshotChanges()
}I'm also trying to add elasticsearch to my app so that people can search different notices according to their titles and descriptions which has actually been incredibly difficult. I didn't realize but based on what I've found out today elasticsearch is a whole separate database. It basically saves the data in your original database and indexes them to according to some standard and fetches the data from there when some user is searching for some data.
So, the first thought that goes through my mind is that you would have to continually update the elasticsearch database with your original database.
This elasticsearch feature was a lot more difficult than I imagined. But, I do think learning this skill will help.
I'm also planning to implement unit testing.
Unit testing seems a lot more doable than elasticsearch. I think understanding the logic of why having to test is important came across a more easily than elasticsearch. Simply put, you add test cases so that whenever some new feature is added or changed those test cases ensure that the code is working properly without you having to check the screen constantly.
I read into different types of testing as well such as e2e(end-to-end) testing and integration testing. To my understanding e2e testing is a test that checks to see if your app is working from the frontend all the way to the backend. But because it is fragile only really important features would need to be tested using e2e. The bulk of the testing would be unit testing. So, I'll be focusing my learning on unit testing for the time being.
Like I've said in my other post about Angular, there's a lot of jargon and new concepts that you have to learn in Angular.
- Observables -RxJS
- Dependency Injections
- Services
One last finding about Services:
According to the Angular's official docs, components shouldn't fetch or save data directly and should rather focus on presenting data. So, Angular provides a feature called a service that does the data fetching. This is actually very similar to Vue where, to my understanding, it is best practice to make a create a composables files to do the data fetching.
27