Angular 2+: How I Developed my First Side Project from Scratch and gained Confidence.
So this was the time of April 2018, when I began learning Angular. I started with the cliche official docs tutorial ‘tour of heroes’ and got familiar with the basics of angular. However, it was more like a tutorial that gives you the code of everything and you just copy it.
Though, not gaining much confidence after that I continued the official docs and learned many things. The initial ones were not so difficult like interpolation, event binding, directives but as I proceeded the learning curve got steeper and steeper. Observables, HTTP module, dependency injection all just started to blow my mind. So, I realized that only reading or learning from the docs isn’t going to help much so I rushed to google for searching project ideas. I got a few tutorials on youtube including the BookMarker app, however, Brad sir built it without any frameworks but I tried to build it with angular, so it was a bit of learning. But still, there were tons of features of Angular which weren’t cared of while building it(no observables, no http, no dependency injection nothing).
So, the next thing was to realize that I had to develop a project completely on my own i.e. without any reference to any tutorial and trust me building a project completely from a scratch is on a whole different level than building a project according to some tutorial.
I began searching for ideas and came up with an idea of building a site which will show videos on search. I decided to use Dailymotion’s API for the task.
So, I am not going to give any sort of tutorial on building this project as the central idea of this blog post is to build projects on your own from scratch. This will include just an overview of the project so that you can give it a shot on your own.
- The first feature to include was to make the search bar functional, for which I used:
“https://api.dailymotion.com/videos?fields=id,thumbnail_url%2Ctitle&search="+str+"&limit="+this.limitThe str variable was equal to the value I got by the search bar. I used reactive forms for smooth data transferring.
The result is this:
The good looking ‘+’ icon and the stream video online button was all with the help of Angular Material.
2. Now it was easy to just give the URL of the video from the Dailymotion and redirect every time to Dailymotion when we hit the stream button. But, I decided to stream the video on my own site.
Now, when we click on the button a smooth looking modal will open up containing the video embed and few of its details.
The landing page code was like this:
<div *ngFor=’let video of videoArray;let i = index’>
<a [href]=’video.thumbnail_url’><img [src]=”video.thumbnail_url”></a>And the modal code:<div class=”videoInfo”><button mat-mini-fab title=”Add to favourites” (click)=’addToFav(i)’><i class=”fa fa-plus”></i></button><p>{{video.title}}</p><button mat-raised-button (click)=”open(embedVideo,i)”>Stream video Online</button></div></div>
I gave a template reference variable in the <ng-template> as embedVideo
then used it in the open() function as an argument.
The modal code:
<ng-template #embedVideo let-c=”close” let-d=”dismiss”><div class=”modal-header”><p style=”color:black;text-align: center” mat-dialog-title>{{ currentVideoName }}</p><button type=”button” class=”close” aria-label=”Close” (click)=”Cross_click()”><span aria-hidden=”true”>×</span></button></div><div class=”modal-body”><div class=”video-container”><iframe frameborder=”0" [src]=”embedUrl | safe” allowfullscreen allow=”autoplay”></iframe></div></div></ng-template>
The embed video API I used was :
“https://api.dailymotion.com/embed/videos?fields=id,thumbnail_url%2Ctitle&search="+str
After all this the button was working :
At this time my project was about to complete. But I gave myself one more challenge i.e. to include a favorites tab in the navigation bar.
The challenge for me was that I didn’t have any knowledge of backend at that time so I search about it and got to know about local storage. However, even after that, there were a whole lot of difficulties I overcame to include this functionality. While doing the project I was constantly struggling with the new bugs and errors I found and googling helped me every time.
CONCLUSION
After doing this project, I felt much more confidence inside me as an Angular developer. It made me through with many things about angular like:-
- The most important feature of angular is Routing. I used it in the navigation bar.
2. For calling the DailyMotion APIs I had to use the httpClient module.
3. For various design features like raised-buttons, input and the modal itself I used angular-material.
4. The search results come in an animated piling up manner which I implemented with the help of Angular Animations.
5. I made two services one for favorites and other for the videos. That made me learn about using data between the components and the dependency injection.
6. LocalStorage for saving favorite videos.
At last, I hope this was of some help to you guys. Like this, you can create a movie search app, weather forecast app etc.
You can contribute to this project too as there are many functionalities which can be added here like there is no backend support right now.
The site is hosted on firebase here.
