5.1) App Screen 2 (UI + Backend integration)
This week’s task was to complete the second app screen with backend integration.As i had already got a hold of the Data API’s and all the Nuances related to it so this week was a little bit less stressful for me.
App Screen Sections:
- Search User:
Any User can find any other user using his username and follow him to get the latest updates of photos from him. This is what the page looks like before you follow a user, you can only see the users images after you follow him. Other things i would like to mention for this section are if a user types an incorrect user name,the page will refresh and notify the user to enter a correct username and try again,also if a user tries to search his username,he will be redirected to his own profile.
2. Following State:
User’s photos become visible after you follow them,and their images will also appear on your imagefeed(Home page)whenever they upload a new image.
I’ll first explain the approach i followed for this follow/following system. So what did was,i created a single following table in my DB,that table had user_id column and following_id column,user_id represents the current user’s Id,and following_id represents Id of user who this user is following. I made views as well for keeping the count of these following and followers.Below are all these images of the table and views.
Now that i have explained how i am maintaining the data it’ll be easier to understand the backend code. I’ll do these as i did in the last blogpost,i’ll show you the code snippet then i’ll explain what that code does.
So as you can see when a user click on searched user’s follow button,we take this searched user’s userId and then make a req to the data service,to the following table with current user’s userId and searched user’s userId as ssusrid,upon success response from the data response,i create a Notification to notify user that they are now following this user and the page refreshes after 3 seconds. Now when the users hit’s the Following button what i do is just delete this entry from the following table. Below is the snippet for that as well.
So this is it for this week’s Blog,in the next week i’ll explain about the Homescreen(imagefeed) part of this application.
Link to my application: Go to link