I am planning on designing and implementing an e-Commerce shopping application in Android that will allow end-users to register, login to the app and browse for products in different category sections.
This application will currently have 4 pages of product categories that users can browse through and they are Sports & Outdoors, Tech, Clothing and DIY and once the users have chosen the products that they wish to purchase from category X, they can add it to their basket and proceed to the checkout. Customers can view the products added to the basket.
Before browsing for products, users are required to register and login into their account.
The main scope of this application is to allow end-users to shop for products in different categories, very similar to Amazon’s application.
After registration customers will receive a notification saying that they have registered successfully and the data from the registration will get sent to a back-end database. I will be making use of the Firebase Service to store the user’s registration data.
When customers have decided on what they want to purchase they can add the products to their basket and the users can view their basket in the form of a list view.
Users will be presented with a payment form where they are prompted to fill out their payment information and pay for the products chosen. After the payment is complete and processed users will receive an invoice through e-mail.
Each category with products will be shown on different activity pages on the application. For example, on page 1 the sports and outdoors category section will be displayed with the products available in stock etc.
I will be making use of version control using Git in order to track the changes made to the project and to also commit and push new changes when developing the application. In case I lose my work, I can revert back to previous commits to start from that checkpoint.
My initial inspiration for choosing this type of application was from the Amazon application.
I will be also making use of some Agile approaches such as Kanban Boards, Product Backlogs and Sprint Boards.
Android Studio Installed
In this section I will be writing about the different kinds of feasibility studies that will impact this project. These will determine whether this project is feasible enough to develop or not.
Under the Copyright Design and Patents Act, all of the images and source code that I will be using throughout this project I will reference in an index at the end of the project.
Under the Data Protection Act all of the registration data will get stored in a secure back-end database using Firebase.
Under the Computer Misuse Act, I will not any malware that will harm and render other people’s computer unavailable.
The total time taken for each task will be stated in a Gantt Chart and also the start and end dates for that task. The Gantt Chart will also show whether or not that task has been completed or if it’s still pending.
I will not be purchasing any software in order to achieve project completion, all of the software and tools that I will be using to develop this project will be free to use. No costs will be incurred.
I will be making use of my MacBook Pro to develop my project. The software that will be used are:
Android Studio: Where I will implement the User Interface
Draw.io: Used to design the class diagrams using UML.
Zube: Used to implement Kanban Boards & implement the sprints for the project.
Firebase: Used to store the registration details of the customers.
Adobe XD CC: Used to design the User Interface of the application.
Survey Monkey: Used to gather data from end-users by creating a survey of 10 questions.
The images below shows a Questionnaire that I have created which asks the public what they would like to see from the application.
1. The main activity will have a Register Button and a Login Button below the text.
2. The registration activity will have entry fields for Username, E-mail Address, Password and a terms and conditions check box that must be ticked before registering successfully.
3. The registration activity entry fields will get validated against:
4. Username must not be empty.
5. Username must contain numbers.
6. Username Length must not exceed 10 characters.
7. Password Data Input Field must contain numbers, special characters, characters and must not be left empty.
8. Password Data Input Field: Must start with an uppercase character
9. E-mail Address Data Input Field: Must have an @ symbol and should not be left empty.
10. E-mail Address Data Input Field: Must be within the range of [A-Z], [0-9].
11. Terms and Conditions Check Box must be ticked to register successfully.
12. The Main Activity will have a drop-down menu that allows users to choose which category of products they would like to choose from. The options are:
Sports and Outdoors.
Tech.
Clothing.
DIY.
5. The main activity will have a Contact Us button that will allow users to fill out a form if they are having any issues with the application. SQLite will be used as the database to store any complaints from users.
6. Users will receive a notification saying that they have registered successfully after clicking the register button.
7. The login activity will allow users to login with their E-mail Address and password only.
8. After users register with their unique account Firebase will be used to store the credentials in a back-end database.
9. A toast message will appear saying “You are logged in as X” when the user has logged in successfully.
10. The Sports & Outdoors activity will show the images of the products that are currently in stock. There will be 2 pages of sports & outdoors products.
11. The Tech category activity will show the images of the products that are currently in stock.
12. The Clothing category activity will show the images of the products that are currently in stock.
13. The DIY category activity will show the images of the products that are currently in stock.
14. The cost of each product will be displayed next to the images in GBP.
15. Users have the option to choose the quantity of each product, hence that will affect the total cost of the product.
16. There will be an “Add to Basket” button underneath the products which allows the users to add the chosen product(s) to their basket (adds it to the menu items).
17. The Clothing products will have an option where users can choose the size, color and quantity they would like to pick.
18. Users have the option to view the products in their basket by clicking “View Basket” which will get placed in a menu on the activity.
19. On each of the categories, users will have the ability to choose the color of the product that they would like.
20. The application will have a Payment activity that will have the following entry fields when checking out:
The type of payment the users may wish to pay with: VISA, PayPal, Mastercard.
Card number: XXXX XXXX XXXX XXXX (will get validated to ensure that only numbers are present) and no characters are inputted.
Card CVV ( this is the 3-digit code at the back of the card), will get validated to ensure that no more than 3 numbers are entered.*
Cardholder’s Name.
Expiry Date (Month & Year) in the form of drop-down menus (Spinners).
20. The payment activity will have a Confirm Payment button that the users will click when they are ready to pay for the products.
21. A rotating circular progress bar will be shown after the button has been clicked to indicate that the payment is being processed and after it has been complete, an alert dialogue will get displayed saying that the payment has been successful.
22. After the payment has been completed, the users will get re-directed back to the home page.
How does it work?
This is how the Homepage of the application looks like. Users who are on the application will be able to register an account by pressing the register button, then they will be taken to a form to fill out their details, after that they will be re-directed to the login page where they should login their account.
If users are having any issues then they can fill out a form on the Contact Us section of the app.
How does it work?
This is the Register activity of the application. Users can create an account by choosing a Username, Password and their e-mail. Once users click the Register button, they will receive a notification saying that they have registered successfully and the details will get written to a firebase database.
How does it work?
This is how the Login Activity looks like. Users are required to log in with their registered e-mail address and password, the details must match with the ones they have registered with, otherwise they won't be granted access.
How does it work?
This is how the Tech Category Activity looks like. Users are able to choose a quantity, colour and size for each of the product and then add the product to the basket just like Amazon's shopping application. There is however a small issue, whenever a colour, quantity or size is chosen, it doesn't show up in the drop-down menu, this will be fixed in a later update.
How does it work?
This is how the Sports and Outdoors Activity looks like. It has the same functionality as the other shopping categories, users can choose the quantity, colour and size of the product and then add it to the basket.
How does it work?
This is how the clothing activity looks like. It is the same as the other ones above.
How does it work?
Same as the other ones above.
How does it work?
This is how the Contact Us Activity looks like, the users that are experiencing issues with the application can fill out the form. After they have submitted the form, the data will get written to an SQL database where the data will get analysed and will be taken into consideration in order to figure out what needs to be fixed and updated, usually this will be in the Maintenance phase of the software development life cycle.
How does it work?
This is how the Payment Activity looks like. After the users have chosen which products they would like to buy, they are presented with this form where they can pay for the products, just like on any shopping application. Users also have the option of paying with PayPal, however I would not recommend to actually go ahead and buy anything as this is only an application for myself for improving my skills and will not be uploaded on the play store.
In this section you will find details on what most of the functions of the application does and also you will find instructions on how to build and run the application.
- Go to your current directory by using the command cd
- Copy the repository URL and in the command line type the command: git clone to clone the repository on the desktop
- Open Android Studio.
- Choose Open Project
- Once the project has opened and finished indexing click the green hammer next to the run button to build the project.
- Open the AVD manager to choose a emulator device to run the application on.
- After you have chosen the device, click the run button to run the application.
onClick(View view)
View: This parameter refers to the view of the button.
This methods adds an action listener to the register button so that an event can be triggered.
void
onClick(View view);
View: This parameter refers to the view of the button.
void
private boolean validateUsername();
None
boolean (True or False)
-
Username is validated against: Empty Username Field
-
Username length is no longer than 20 Characters
-
Username contains digits.
-
Username contains Regular Expression characters.
private boolean validateEmailAddress();
None
boolean (True or False)
-
E-mail Address is validated against: Empty Username Field
-
E-mail Address length is no longer than 30 Characters
-
E-mail Address contains Regular Expression character (@ symbol).
The purpose of the following Unit Tests is to test different parts of the application and to see whether they successfully function without any bugs or not. The Unit Test methods that are being incorporated in my application will ensure that they are fit for purpose and that no bugs are found whilst the testing is in process.
The following features of the Android Application will be tested:
- Testing if the Username entered by the user when they registered is valid or not. Test Passes Successfully.
- Testing to see if the Username entered by the user is not left empty. Test Passes Successfully.
- Testing to see if the Username entered by the user does not exceed 20 characters. Test Passes Successfully.
- Testing to see if the E-mail Address entered by the user is valid. Test Passses Successfully.
- Testing to see if the E-mail Address entered by the user does not exceed 30 characters. Test Passes Successfully.
- Testing to see if the E-mail Address contains a special regex character (@ symbol). Test Passes Successfully.
- Testing to see if the Password entered by the user starts with an Uppercase character, contains regex characters and is not left empty. Test Passes Successfully.
- Testing to see if the Card Number entered by the user in the payment form is valid or not. Test Passes Successfully.
- Testing to see if the Card Number entered by the user in the payment form is not left as an empty string. Test Passes Successfully.
- Testing to see if the Card Number length entered by the user does not exceed 20 numbers. Test Passes Successfully.
- Testing to see if the Card Number field is not left empty. Test Passes Successfully.
- Testing to see if the Card CVV is valid. Test Passes Successfully and does not exceed 3 integers.
- Testing to see if the Card CVV length is valid. Test Passes Successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent