Milestone 3 Report

1- Final project assessment

Introduction

Getflix is an e-commerce platform that connects vendors and customers in one single platform with a great user experience. Our platform lets vendors signup to our system and add their products. They are able to later edit or delete their products through their vendor page. When a product of theirs is bought, they can display the order in the orders section on profile page. Then, they can change the current status of any order.

Getflix is also a nice and friendly place for buyers. Customers can signup and login into the system and immediately start shopping. The homepage displays our best products in certain categories. As customers make orders, Getflix recommends more personalized products. Customers can add products to their shopping cart and decide to continue their shopping later. Customers may decide to add products to their wishlist and get notified of any price changes. This system also notifies buyers as their orders’ status changes.

Getflix cares about customer satisfaction. Thus, offers much functionality to make customers sure about their buying choice. Getflix uses a rating and reviewing system for products, however, only the people who have bought the item can make reviews and rates. This way, we make sure products are rated fairly. Also, customers can contact the vendors about their questions and any problems. Getflix has a nice messaging functionality and supports sending media files.

Milestone 1 and Milestone 2 Assessment

For the first milestone, we have focused on building our foundation firm and clean. Our main prioritization was to keep our backend endpoints documentation up-to-date, to fix our meeting notes format, pull request templates and pull request review-approve-merge cycle, and to complete the CI-CD process to make things easier for further milestones. Team members followed our best practices and the management became much easier.

In terms of functionalities, we have completed the sign-up page, login page, auto-login using tokens, search page, product page, profile page, shopping cart page. We created a trending products section in our landing page, created a product card to display products in packed form, designed the header to show current user’s information.

For the second milestone, we were much confident about our performance and productivity since milestone 1 was showing that our team was working hard and communicating efficiently. Our work started working on the components that received feedback. We focused on fixing our bugs,

We have delivered our major components timely in accordance with our plan. We have completed purchasing a product including adding and editing credit cards and addresses, search page functionality in the backend, product reviewing system and displaying in the product page, managing customer orders for vendors, profile page with addresses, credit cards, messages sections, product page with detailed information, email verification system and displaying a warning to unverified accounts, wishlist functionality with mock data.

Although we have created many pages and components, all teams focused greatly on User Experience when designing the subcomponents. We have changed our homepage to display products in categorical format because of feedbacks in milestone 1. We have improved our init process by showing a user-friendly loading page, started to increase using status update messages at the right-top corner of the page, enhanced token management system by injecting tokens in HTTP headers, created a mock proxy server in frontend for faster development experience

Final Milestone

For the final milestone, our team knew that we were going to be busy at this time of the semester, so we have greatly advantaged our decisions in previous milestones like implementing continuous integration pipeline in milestone 1, or focusing on user experience and not overlooking small details and hoping our customer would not notice.

Teams were confident in their acquired skills obtained through milestones 1 and 2, so we did not experience technical slowness. After milestone 2, we all have gathered in the lab session and discussed the deliverables for the final milestone. As we concretized the tasks, we made sure that our customers and we were on the same page. Then, teams started arranging their own meetings.

Previous milestones were focusing on components from the customer’s point of view. However, for the final milestone, we focus more on vendor-related pages and components.

The functionalities we have implemented are as follows:

• We have started using personalized product recommendation system, this is the first time we have included data science into our system. We have displayed these recommended products on our homepage.
• We have created a notifications section on the profile page to let customers know about the change in their order status and any price change of products that are added to the wishlist.
• We have created a vendor page to display fundamental vendor information like title, description, image, and rating. Also, the page displays the main products of the vendor in a grid-based view. The page is designed for both customers and vendors so it normally shows vendor’s info but it enables the vendor owner of the page to edit it. The owner can add new products, edit existing products, edit its basic information in place, etc.
• To edit and add products, we have prioritized the user experience. A pop-up modal is shown and fills the information automatically from the clicked product.
• Messaging system that enables customers and vendors to connect and share information. Messaging functionality modal made accessible via Orders section and Vendor’s page. Previous messages can be accessed on the Profile page.
• Created an Orders page for Vendors that shows the current status of orders and it comes with functionality to change the status of orders.

Overall, we spent such a productive and amazing semester since we have practiced teamwork, realized the importance of communication, gained knowledge about software best practices, and obtained hands-on experience in many latest technologies.

2- Status and evaluation of the deliverables(by A. Furkan Varol)

• Web Interface: The frontend application of our project was flawless in the presentation. We have showcased multiple components without any bugs and problems. Planning and implementation are designed by taking user experience into account as discussed in the lectures and lab hours. The functionalities that are presented were in line with our customer's needs.
• Android Interface: Android application of our project was ready and fully functional in the presentation. Components in the Android application were in sync with the Web Interface in terms of design and functionality.
• Database and endpoints: Database and endpoints worked as intended during the presentation. We have created data, such as some orders and reviews, to be used in the presentation specifically for our scenario.
• Requirements: Requirements were already cleared and updated in Milestone 1 so there was no need for any other change. A link to requirements can be found in our Wiki page
• API Documentation: API documentation is up to date with all the endpoints. Thus, Android and Frontend teams had been working without the constant need for the Backend team.
• Project Plan: Our project plan is ready and can be found on our Wiki page. The project plan has been a directive in planning our work, distributing tasks, and completing the aforementioned deliverables.
• User Scenarios: User scenarios that we used in the presentation can be found in the report. The scenarios for Frontend and Android teams are arranged by the team leaders and got approved by all team members. Scenarios are arranged to be in line with each other and to complement the flow of the presentation and present the most important features we have implemented.

3- Activity stream implementation & W3C standard compliance

We didn't strictly apply ot the ActivityStreams protocol in GetFlix. GetFlix is also have no strict compliance with W3C Standards. However the platform behaves in similar patterns with these standards. Notification, messaging, and the other features are instinctually implemented coherent to these protocols and standards.

4- API documentation

5- User manual

6- System manual

Deploy on AWS

Requirements

• Docker

• Linux

• AWS

• gpg (GPG_PASSWORD is stored in Github Secrets)

• git

• Create an EC2 instance

  Steps

• Make sure that the EC2 instance has for name "instance"

• Make sure that it has the ports 80 (frontend), 8000 (backend) and 5432 (postgres) open in its Security Policy

• SSH into the instance and install Docker

• CD into the repo

• Execute the following:

./copy_backend_secrets.sh && ./encrypt_secrets.sh

• Merge master to deploy and push
• The .github/workflows will execute when pushed to deploy

Deploy on your local

Requirements

• Docker
• Linux
• git

Steps

To build the images from scratch please follow the commands below: IMPORTANT: For the purposes of testing, you can download the docker images from the drive link and continue from Step 4.

1. Clone the repo to your local and switch into it

git clone https://github.com/bounswe/bounswe2020group2 && cd bounswe2020group2

2. Download and copy .env.production and .env.development to ecommerce/backend

cp .env.development ecommerce/backend
cp .env.production ecommerce/backend

3. Build the backend and frontend images

docker build ecommerce/frontend -t frontend --build-arg REACT_APP_API_URL="http://localhost:8000"
docker build ecommerce/backend -t backend

4. Load docker images (skip if you are not in testing)

docker pull postgres
docker load -i frontend.tar.gz
docker load -i backend.tar.gz

5. Run and setup/restore database

docker run --name database --net=host -e POSTGRES_PASSWORD=admin postgres
docker cp dump.sql database:/
docker exec database psql -U postgres -f /dump.sql

6. Run backend

docker run --name backend --net=host -e DEBUG=False -e DB_HOST=localhost backend

7. Run frontend

docker run --name frontend --net=host frontend

8. Open the browser and go to http://localhost

7 - A summary of coding work done by each team member

Team Member	Contributions
A. Furkan Varol	At the start of Milestone 3, I created the Recommendations component. This is a component that shows a list of recommended products for the specific user. Here, I used the same structure that I implemented previously for Best Sellers components on the Home Page. Then, I refactored and glanced over the whole project. Removed the necessary imports from every .js file. Altered the design of the Best Sellers components on the Home Page, so that they did not overflow vertically. Changed some error messages and notification text with more appropriate ones. At last, I tried to get the updating profile information functionality up and running before the milestone and implemented the frontend part but we could not stay in sync, thus I was not able to merge this into master.
Aleyna Kara	I have designed the layout, namely fragment_vendor.xml after creating VendorPageFragment.kt with its view model VendorPageViewModel.kt. Since my initial design has included just a recycler view that shows which products are currently retailed by the vendor, I have also created card_vendor_product.xml followed by VendorPageProductAdapter.kt. With a view of improving this auspicious design, I have watched a video explaining the implementation of ViewPager2 and also examined the documentation of ViewPager2 written by Google. I have created three fragments - NByTwoGridFragment.kt, NByThreeGridFragment.kt and VendorReviewsFragment- and their view models NByTwoViewModel.kt, NByThreeViewModel.kt and VendorReviewsModel.kt so that The use of ViewPager2, ways and means to transfer my knowledge into practice, has been provided by creating VendorPageFragmentAdapter.kt in order for the page of the vendor to have horizontal paging which is a navigation pattern frequently used in modern apps. Furthermore, it is clear that fragment_n_by_two_grid.xml, fragment_n_by_three_grid.xml and fragment_vendor_reviews.xml have been created at the same time. Now, let me explain these three fragments in detail : 1. NByTwoGridFragmen.kt : My motive to create this fragment is to show all data which a user probably wants to look for first when he or she is viewing a product. Thus, it has been sufficient to update the binding of VendorPageProductAdapter. 2. NByThreeFragment.kt : This fragment is a shot in the arm for UX since it enables a user to glance at the products of the vendor thanks to the design of the view holder, namely card_vendor_product_smal.xml. I have also created VendorProductSmallAdapter.kt. 3. VendorReviewsFragment.kt : With the aim of the ability to view all reviews regarding the vendor, VendorCommentAdapter.kt and card_vendor_review.xml has been created. I have taken the responsibility of the implementation of VendorOrdersFragment.kt in for which the vendor user of our system is able to change the status of the order while viewing all orders within the same page. Furthermore, a vendor is able to click any order to get more information about a specific order. It has been a task which has included another research topic for me since I had not enabled Google Maps SDK for any Android project. Video resources and the guides provided by Google have been sufficient to grasp how to use it. In addition to Google Maps API, I have made researches about shared element activity transitions to make the navigation from the list of orders to the fragment of a single order more continuous and smooth. From the perspective of the implementation, my initial attempt was to write non-existing PUT and GET request to /vendor/order and create necessary data models to handle the response and the body of the request. Then, I have implemented VendorOrderAdapter.kt for the list of orders and card_vendor_order.xml as the layout of the adapter’s view holder. For the maintenance of MVVM pattern, I have controlled actions taken after click events and requests to the /vendor/order endpoint in VendorOrdersViewModel.kt after creating it. Speaking of the single page of the order, it is where I have used Google Maps in order for the vendor to estimate the address of the destination to determine the delivery time and the status of the order, i.e. whether or not he or she is able to send a cargo to the specified address by viewing the order address visually. Clearly, I have also implemented VendorOrderFragment.kt, VendorOrderViewModel.kt and fragment_vendor_order.xml. Since I have served the functionality to change the order status up via spinners, I have customized the spinner by creating custom_spinner_dropdown_item.xml. Mail verification and change of password have been my other tasks which has required the search as regards Firebase. After checking the blogs, videos and documentation about Firebase out, I have created MailVerificationFragment.kt, MailVerificationViewModel.kt and updated the functions in both LoginViewModel.kt and RegisterViewModel.kt. It should be mentioned that I have implemented POST request to /changepassword which has never been used. My last task has been to implement both POST request to /review for the customer to make a comment to a product which he or she already bought and data model of the body of this request. I have also created a comment dialog fragment for the customer to be able to propose a review directly when he or she is viewing its orders and added a section in the product page itself. In addition to adding new features to our app, I have fixed six bugs related to the empty shopping cart, empty list of recommended products, empty address fragment, empty list of credit cards, empty shopping cart and change the status of the notification. I have, at the end, refactored our code via the removal of all println statements and I have reviewed a couple of PRs of my teammates during the process up to Milestone 3.
Aslı Aykan	After Milestone 2, I firstly dealt with the filter, sort, and search functionalities which were missing in Milestone 2. I added an edit text to the toolbar on the homepage, and added the search functionality by refactoring the related endpoint function and handling necessary navigations. I added a rating bar to FilterOptionsFragment, and made the options for the filter on this page work correctly by also adding necessary fragment arguments for it. I also edited the vertical product layout, by adding a rating bar and removing unused amount section for the user to see the ratings of the products. I connected all the sort options of the related endpoint to the layout. I removed the toolbar on ProductFragment and added a small back button for the user to see the full image of the product. For the message functionality, I firstly made a research about chat libraries in Android. After also discussing with my subteam, I decided to use the ChatKit library. I needed to examine the sample Java code of this library on its GitHub page, and find out what functions&data models are necessary and how to adapt them to our app. After that, I created CustMessagesFragment(by also adding its navigation to the ProfileFragment), CustChatFragment and VendorChatFragment from scratch, and redesigned the VendorMessagesFragment. To use the library functions correctly, I added the necessary data classes which are Message, MessageModel, MessageListModel, DialogModel and AuthorModel. For the classes that I created, adapted and converted to Kotlin language for this library, I gave their related GitHub links as references in comment sections of my code (I also informed stfalcon-studio that we are using its library for our school project via email). I added the necessary endpoints functions for GET /messages and POST /messages, by also adding their necessary request and response classes. Terms&conditions texts for register and completing order were also missing in Milestone 2, so I took these texts from frontend and added them to our app. I also added the necessary checkbox for it on the complete order page and made them clickable so that pop-ups open with these texts on it. For the list selection on product fragment, I created two dialogs: one with the radio buttons(with MaterialDialog builder) and the other one with an edit text(custom dialog). For a more realistic app design, instead of showing empty pages and only a floating action button when the user has no credit cards, addresses or product lists, I created three empty page designs for ListsFragment, AddressFragment and BankAccountFragment with an image view, text view and add button by also adding related navigations to these buttons. I disabled navigating to the complete order page if the shopping cart is empty, with a dialog that warns the user. I also handled the bugs that occur when the guest option is enabled. I made navigating to the complete order page, adding products to the shopping cart and navigating to the bank accounts page disabled for the user with related dialogs that warn the user. I added the necessary endpoint functions for GET /lists, POST /lists, DELETE /lists/{id}, DELETE /lists/{id}/product/{product_id}, POST /lists/{id}/product/{product_id}, GET /recommendation, GET /notification, POST /notification/seen and POST /notification/seen/{notification_id} by also adding necessary request and response classes. I connected all these endpoints with the related layouts. For delete endpoints, I created necessary SwipeToDelete classes. After the notification endpoint connection, I made the necessary design updates for NotificationFragment (with product images, seen&unseen buttons and same text formats with frontend). I also made design improvements on OrderInfoFragment and OrderProductsFragment, after realizing our misunderstanding for the json format of order. I connected the add to cart button on list products page to the related endpoint function. I refactored all the product images according to the update in the backend. After the presentation, I also added POST /vendor/product and DELETE /vendor/product endpoints, refactored the vendor product navigation, connected these endpoints to related layouts, and created AddProductFragment from scratch. I also handled some small bugs during the last refactoring. I merged all the commits for Android while also resolving all the conflicts. I also reviewed all of the pull requests for Android.
Burak Çetin	Impemented vendor profile and vendor details endpoints and updated the database models accordingly. Fixed a critical bug on the search endpoint.
Furkan Nane	Implemented the recommendation endpoint.
Hande Şirikçi	Changed one of the five main fragments in application from favorites to lists by constructing all the structure for creating new lists and to display them in order and also clicking on lists to see products in lists. Implemented lists in a recycler view, created view model for list item then created navigation feature for each list item in the list. Designed and implemented the card views in list fragments displayed product and enabled user to add it directly into her basket. Implemented notification page by creating recycler view and view model for the notification item. Displayed the notifications in a list in notification page designed noticeable view for the items. Updated register form to took the address information of the vendor. Created a new part in register form of vendor under the relevant title to made register form more organized. Redesigned the orders page which i have completed for second milestone by adding a review option according to status of the orders and also implemented navigation from order items to a fragment which displays all the products in that order in a list. Implemented recycler view, view model for order items and designed horizontal card view to display products with their amount information, price for one of the product and also price for all the products in that specific order. I have always followed MVVM pattern and used data binding for all the tasks i have completed since the beginning of the term. I have reviewed many of the pull requests and attended all meetings.
Mehdi Saffar (Communicator)	refactor the CI/CD pipeline workflow files to work with only one single instance, implement the frontend interface of the messaging system, implement the vendor user interface focusing on the profile page and the vendor orders, report a few bugs in backend (image url confusion, vendor_id vs user_id confusion), co-author vendor orders page with Özdeniz Dolu, co-author add/edit product modal with Özdeniz Dolu, continue implementing missing functionalities of Product List with Özdeniz Dolu, hide customer-related actions from Vendor user interface (such as add to shopping cart, add to product list, checkout...), co-author the vendor homepage with Özdeniz Dolu and Abdullah Yıldız, due to our EC2 instance being hacked the day before the demo, refactor backend and github actions to hide django SECRET_KEY from github and pass it as an environment variable to the CI/CD pipeline, collect a list of bugs in the frontend (> 15) and fix them before the demo, build Docker images of backend and frontend for the Submission Delivery Package, write the System Manual with Ömer Faruk Deniz for deploying locally and to AWS
Mehmet Umut Öksüz	Implemented price change notifications and order status change notifications at backend, implemented endpoints to make a specific notification or all notifications seen. Fixed minor bugs (image adding problem at vendor edit product, changed something in delete product). After frontend team requested, added username to user serializer. Attended meetings and distributed tasks at backend team. Also join some frontend meetings to listen their requirements from backend and fix problems. Helped my teammates wherever they had a problem.
Ömer Faruk Deniz	Implemented the password change endpoint, send message and get conversations endpoints both of which compose the direct-messaging system of the platform, implemented the semantic search functionality, fixed the user_id and vendor_id in the system. Fixed the system before the Milestone 3 due to an attack to the server and wrote the System Manual with Mehdi Saffar. Attended all of the meetings of backend, arranged meetings for the specific needs of other teams. Reviewed and refactored nearly all of the pull requests opened in backend for the Milestone 3.
Özdeniz Dolu	Co-authored orders page for vendors with Mehdi Saffar, co-authored edit/add product modal with Mehdi Saffar, co-authored some of the functionalities related to Product Lists (not all), co-authored vendor shop page with both Mehdi Saffar and Abdullah Yıldız, towards the last days of the milestone Mehdi Saffar and I spent countless hours on small stuff, polishing, bug fixing and refactoring
Abdullah Yıldız	Created a notification system where customers are getting a message about a price change in their wishlist and any order status change. Designed a page to display notifications in vertical list format. Designed notification’s layout to show image, link, title, date and description message. I kept in coordination with Android team to keep in harmony. I created a common message description template for both price change and order status changes and shared with Android team. I created buttons to mark notifications and mark specific notification seen. Created Vendor’s page to display fundamental information of vendors. Designed the page editable according to current signed in user. Changed product cards editable to work with vendor’s page. Designed the Vendor Splash page, arranged the layout, selected a background color. I created Vendor’s Main products page in grid based view by getting help from our previous components. I created Vendor Reviews page from our previous User Reviews component in case we can display different information. I have integrated Adding product and Editing product modals with my Vendor page.
Murat Can Bayraktar	I've learned Kotlin programming throughout semester and individually implemented a few minor apps but they weren't used in the GetFlix project. I've designed the product page. The design later replaced with a better version. I couldn't be supportive to the team in the code field. Instead, I've participated more in documentation issues.
Bekir Yıldırım	After the Milestone 2, I have worked on ProductList table and implemented relevant endpoints. By list endpoints, user can create, get and delete product list and also put product into list or delete product from list. To make ProductList table more functional, I have arranged table to ease table manipulation. With the backend team, We have gathered many times as a team and generally our meeting's main subject is refactor and bug fix. Also I have reviewed many PR and give suggestion or change request to PR's owner. We exchanged ideas with Ömer Faruk Deniz on the tools we will use to make the currently written search endpoint more functional and the roadmap we will follow.

8 - Each team member should explain the unit tests committed by him/her by referring to the commit SHA

Mehmet Umut Öksüz

1. Commit SHA: b107198f9c05a195beee72d662253d8f82341a19

• test for make all notifications seen
• test for make single notification seen
• test for single notification seen with invalid token

2. Commit SHA: ed92c3975d4c9deed2c113fc6b417d924689b468

• test for price change notifications
• test for price change notifications (same price no notification tested)

3. Commit SHA: d1b16496618eab622e748934f0662e509fb9af21

• test for order status change notifications

Ömer Faruk Deniz

1. Tests of the Password Change Endpoint

• test for password change --> 8b348a4a551ebb967c3cfdd3cc0e0e5d60aefd96
• test for password change with wrong current password --> b4930d301a18528df92b30af38179c00bbf5cf73
• test for password change without logging in --> 19198e743ba7513396defcf45ec0f66223e8cd94

2. Tests of the Send Message Endpoint

• test for sending message --> 1da3c3286e99a08087eff525a2a9aac536bc0070
• test for sending message without login --> 4c17a891b4fe51a9f481bf6d3c970365156746d1
• test for sending message with invalid data --> d1153266ce1266e8400168a083312977ed059120

3. Tests of the Get Conversations Endpoint

• test for getting all conversations --> c62b6a718d13cfcd4d4c2ca9193c14fd92a642f1
• test for getting all conversations without logging in --> 1a6c0e0d98942294d9792ca422dab4a7df1ce5ee

4. Tests of the Semantic Search Endpoint

• test for reading from Database API for similar queries --> d184c47c7cb8bd0b6d4c4c2f5e2cf9c225b6be61

Bekir Yıldırım

1. Tests of the Create List Endpoint

• test for create list --> 676a57424b46a9abd0c3c8a6391fc1065f4eb7bc
• test for duplicate list name error --> 3140b9c15bb13b680d2173d658640c4284fd0211

2. Tests of the Get List Endpoint

• test for getting list --> 2fc1d2931f8c990671d0870b3931bb97ea1f5326

3. Tests of the Delete List Endpoint

• test for deleting list --> c96181d5f52ce98913035aa57b15e140262c34dc

4. Tests of the Add Product to List Endpoint

• test for adding product to list --> 596cf79cda83bab682c5c583151d7e702f404100
• test for adding duplicate product to list --> c8463c5c97477c260966a207af86715aae97ecfe

5. Tests of the Delete Product from List Endpoint

• test for deleting product from list --> b44653225c04f0f04047b82e0e5a8fc84c648c33