Build a modern android ecommerce app from scratch | Kotlin, Firebase, MVVM

Summary

This video introduces a new series on building an e-commerce app for Android from scratch. The host guides viewers through the app's features, including user registration, product browsing, cart management, and order placement. Utilizing Kotlin, Firebase services, MVVM architecture, and coroutines, the tutorial promises a comprehensive journey for aspiring developers interested in Android app development.

Takeaways

• 🚀 The video introduces a new playlist focused on building an e-commerce app from scratch.
• 🛠️ The tutorial will cover all aspects of app development, from the initial setup to the final coding.
• 📱 The app includes features such as user registration, login, and account management.
• 🔍 Users can search for products, view details, select options like color and size, and add items to a shopping cart.
• 🛒 The shopping cart allows users to manage quantities and view the total cost before checkout.
• 🏠 The app supports multiple address management for shipping and allows users to add new addresses.
• 💳 Although payment integration is not covered, the app has a checkout process that includes order placement.
• 🔔 The app will include push notifications using Firebase Cloud Messaging.
• 🌐 The app development will utilize Kotlin as the programming language and Firebase services for backend operations.
• 🔄 The app will be built using the MVVM architecture pattern, incorporating the use of coroutines for asynchronous tasks.
• 🌐 The video creator has already implemented support for the Arabic language, indicating multilingual capabilities in the app.

Q & A

What is the main focus of the video?

The main focus of the video is to introduce an e-commerce app that will be built from scratch, covering all the steps and functionalities involved in the process.

What are the initial steps a user encounters when using the app?

The initial steps include a splash screen, followed by options to register or log in. Users can register by providing their first name, last name, email address, and password.

How can a user reset their password in the app?

A user can reset their password by clicking on the 'forgot password' option, which displays a bottom sheet fragment allowing them to reset their password.

What additional login options are available besides email and password?

Besides email and password, users can also log in through their Google and Facebook accounts.

What features are included in the app for browsing and managing products?

The app features a home screen with product categories, a search screen, a cart screen to manage products added by the user, and a profile screen for personal account details.

Can users customize product options like color and size before adding them to the cart?

Yes, users can select options such as color and size for a product before adding it to their cart.

How does the checkout process work in the app?

During checkout, the app displays a screen for payment methods (though no virtual payments are implemented), and users can add or select a shipping address before placing the order.

What happens after a user places an order?

After placing an order, the user receives an order number and a confirmation message. They can also view the order details, including the status and other relevant information.

What personalization options are available in the profile section?

In the profile section, users can edit their personal details, upload a profile picture, and manage their shipping addresses.

What are some of the technical tools and architectures mentioned for building the app?

The app is built using Kotlin, with Firebase services including Firestore, Firebase Authentication, Firebase Storage, and Firebase Cloud Messaging for push notifications. The MVVM architecture pattern and coroutines are also utilized.

Does the app support multiple languages?

Yes, the app supports multiple languages, including Arabic, as mentioned by the video presenter.

What is the next step for viewers interested in following the development of the app?

Viewers interested in following the development should subscribe to the channel, turn on notifications, and stay tuned for the first video of the playlist.

Outlines

00:00

🛍️ Introduction to Building an E-commerce App

This paragraph introduces a new video series focused on building an e-commerce app from scratch. The host promises to guide viewers through the entire development process, from the initial setup to the final coding. Viewers are encouraged to watch the entire video for important information on prerequisites and to understand the functionalities that will be implemented in the app. The app features a splash screen, user registration and login options, password reset, and social media account login capabilities. The host demonstrates the app's interface, including product browsing, cart management, and user profile customization.

05:01

📦 Exploring App Features and Development Overview

In this paragraph, the host delves deeper into the app's features, showcasing product categories, the ability to select product options like color and size, and adding items to the cart. The shopping cart functionality allows for quantity adjustments, with confirmation dialogs for item removal. The checkout process is detailed, including the addition of shipping addresses and the display of order totals. The host also touches on the app's profile management features, such as personal details editing and picture uploading, and mentions the inclusion of order tracking and notification systems. The development tools and services to be used are outlined, including Kotlin for programming, Firebase services for backend operations, and the MVVM architectural pattern for app structure. The host concludes by inviting viewers to join the development journey and to subscribe for updates on Android development content.

Keywords

💡e-commerce app

An e-commerce app is a mobile application that facilitates online shopping, allowing users to browse, select, and purchase products through their smartphones. In the video, the creator is introducing a new series focused on building an e-commerce app from scratch, demonstrating its features such as product browsing, cart management, and user account handling.

💡MVVM architecture pattern

MVVM stands for Model-View-ViewModel, which is a software architectural pattern used in development to separate the user interface and business logic. In the context of the video, the creator mentions using MVVM to structure the e-commerce app, which helps in organizing the code and making it more maintainable and testable.

💡Firebase

Firebase is a platform developed by Google for creating mobile and web applications. It offers various services like Firestore (a NoSQL database), Firebase Authentication, Firebase Storage, and Cloud Messaging. In the video, Firebase services are highlighted as integral to the app's functionality, including user authentication and data storage.

💡Coroutines

Coroutines are a form of concurrency design pattern that is used in Kotlin, the programming language used in the video for app development. They simplify asynchronous programming by allowing for non-blocking operations and are mentioned in the script as a feature utilized in the e-commerce app for smooth and efficient execution of tasks.

💡Splash screen

A splash screen is the introductory screen that appears when an app is first launched. It often displays the app's logo or name and can serve as a loading screen. In the video, the splash screen is mentioned as the first interaction point with the user when they open the e-commerce app.

💡Product categories

Product categories are classifications used to organize products within an e-commerce app, making it easier for users to navigate and find items of interest. In the script, the creator shows different categories such as furniture, chairs, and tables, which are used to categorize the products available in the app.

💡Cart

A cart in e-commerce refers to a virtual basket where users can add products they wish to purchase. The video script describes the functionality of the cart in the app, including adding products, adjusting quantities, and checking out.

💡Checkout

Checkout is the process of reviewing and confirming a user's order before finalizing the purchase. In the video, the creator demonstrates the checkout process in the app, where users can view their cart, select shipping addresses, and place their orders.

💡Order confirmation

Order confirmation is the step where a user receives a summary of their order and a confirmation message after placing it. In the video, the script mentions that after completing the checkout process, the user is presented with an order number and a confirmation message.

💡Profile screen

The profile screen is a section within an app where users can view and edit their personal information, such as account details and preferences. In the video, the profile screen is highlighted as a feature where users can upload a profile picture and manage their shipping addresses.

💡Push notifications

Push notifications are messages that are sent to users through apps to alert them of updates, promotions, or other relevant information. The video script mentions the implementation of push notifications using Firebase Cloud Messaging as a feature of the e-commerce app to keep users informed.

Highlights

Introduction to a new special video and playlist about building an e-commerce app from scratch.

The app will cover all aspects from nothing to the last line of code.

The video will discuss details of Android development and new exciting features.

Viewers are encouraged to watch the video until the end for important prerequisites.

Demonstration of the app's functionalities starting with the splash screen.

Explanation of the registration and login process including social account options.

Forgot password feature and its implementation in the app.

Overview of the home screen, search, cart, and profile screens.

Product categories and the ability to add products to the cart.

Product detail view with options to select color and size before adding to the cart.

Cart functionality including quantity adjustments and item removal confirmation.

Checkout process and the addition of shipping addresses.

Order placement and confirmation with order number display.

Profile screen features including personal details editing and picture upload.

Viewing and managing orders from the profile screen.

Unimplemented features like track order and billing, with potential future inclusion.

Notification feature implementation and language support, specifically Arabic.

Logout functionality and the end of the app demonstration.

Overview of the technologies used, including Kotlin, Firebase services, and MVVM architecture.

Encouragement for viewers to subscribe and turn on notifications for Android development updates.

Transcripts

hey everyone welcome to a new special

video and finally a new playlist about

what you all have been asking me about

which is the e-commerce app and this

video will be an introduction of the

e-commerce app that we are going to

build from scratch so we'll start from

nothing until we write the last line of

code in this app and i will go through

all the details while i'm building this

app with you so you will understand a

lot of new things a lot of exciting

things in android development so get

ready and if you are interested in

building such a cool shopping app for

android

so you need actually to watch this video

until the end because i will talk about

stuff that you need to know before you

start watching or you start following up

with this playlist so as i said make

sure to watch this video till the end

and now let's actually jump into the app

that we are gonna build and show you all

the functionalities that we are gonna

implement

okay so as you can see this is my own

phone i have installed the application

on my own phone and before that let me

actually connect to my internet real

quick because i'm connected to my camera

now

okay

now as you can see this is the splash

screen or the introduction screen that

we are going to play to the user once he

opens the app now when he clicks on

start then we will move to this uh

screen which will show two options the

first option is to register and login so

let's actually register a new account as

you can see it asks the first name so

let's type

my name

and the last name

then i will type the email address

and now i'm going to add my password so

i'll just add

any password here

and i will click on register

then it will take a moment until we

register new account and we navigate it

back to the login fragment now let's

login into our account

so i'm gonna type my email

and then i will add my password

and if you can notice that we have

forgot password here if i click on it

then we display this

bottom sheet fragment and here we can

just reset our password so we're gonna

implement this feature as well and i

also forgot to tell you that we can log

in through google accounts and facebook

accounts but

because i have just created my

account with email so let me just plug

in within this account

so i'm going to click on login and as

you can see now we look and we logged in

our account and now we can see the

product we can browse them add them to

cart let me show you all of this stuff

so basically we have a home screen we

have search screen here we can search

about the products

we have this card

screen where we'll just show all the

products that user added to the to his

card and we also have this profile

screen where he can edit on his profile

he can add his image and so on we'll get

back to this later so let's get back to

the home screen and as you can see in

this home screen we have categories of

the product so basically for me i

actually made this up for uh houses

furniture you can also

spread your own products anything you

want

so as you can see we have chairs here we

have cupboards tables accessories

furniture and yes so let's actually go

and browse some products we have let's

see this table

so as you can see this table has a

special offer

let's go into this table and as you can

see we display some images i actually

added the same images

so don't worry about that now we can

select the color i also added any colors

here i didn't care about that and we can

select the size then we can add this

product to our cart

now let's go back and check our cart as

you can see here is the product is added

to our cart and we can increase the

quantity as you can see now we have two

and the price has increased as well also

we can

reduce the

quantity

now if the quantity already is one and

if we try to reduce it then we show this

dialog that are you sure you want to

delete this item if i click on yes it

will get deleted if i click on no it

will stay and that's what i'm gonna do

now as you can see i can actually order

this uh the products inside my card so

i'm going to so i'm going to click on

check out

and here we get to this screen where

we'll just show the payment method

however i did not add any virtual

payments in this app you can implement

that on your own

but

we can actually deliver products to the

addresses

we don't have any addresses we don't

have any shipping addresses here so

we have this plus icon where we just can

add a new address now i'm going to add

my address so here let's say this is the

home address add my name here

and add the street my address so i'll

just type anything

and here we add the phone number so just

add any number and the city

then the state and click on save

once this uh shipping address is saved

we can select it

and then as you can see we have the

total price of this order we have the

products of this order then we can place

our order and then we click on confirm

now as you can see this order has

completed and we have our order number

here which is six four two four eight

one two

we have this message

then if i click on order details we just

go to this screen where we just show the

details of our product so so we have the

state of the order so now the order is

placed and the author is waiting to get

confirmed by the by the ad administrator

so yes as you can see we have this order

here we have the address of the order we

have pretty much all the details that we

want to know about this order

now let's actually get back

to the profile screen

and here uh by the way excuse me if i

talk too fast because there is a lot of

stuff to cover this app and i just uh

when i finish this video as soon as

possible i don't want to make it long

anyways let's get back to uh the app and

we and we are now in the profile

fragment

and here the user can

view many stuff the first thing he can

actually or she can edit

on the personal details so if we click

on the name of our account

we have this screen and the user also

can upload his or her own picture for

the account so let me add a picture in

here

i'm gonna add my picture

this one

okay please select it

oh we have a problem let me see

okay we have a problem in the emulator

whatever so we select this picture he

can also or she can edit it on the name

i'm going to leave it and then click on

save

wait some time until we upload this

picture as you can see this picture

is updated in the profile screen now we

also have

here some options all orders where the

user can actually view the orders that

he has ordered

and he can also view all the details

about that order

and we have a track order which is which

i didn't implement actually i don't know

if i'm gonna implement it in my playlist

but i will see that and here we have

billing and addresses and here we can

actually add payment methods which we

don't allow yet i didn't implement it

but we can actually add shipping

addresses so i already added home

address when we actually try to purchase

our uh product so let's try to add a new

address

let's name this address work

full name

and

type anything for the rest

click on save as you can see now we have

two addresses that the user can select

let's get back

and one of the cool features that we

have in this app which is the

notification so we're going to implement

this

we also have the language here i i don't

know if you want to implement that but i

already supported arabic language in my

app

we also have the log out button so let's

click on that and now we locked

off our account

okay now i showed you everything that

we're going to build in this app now let

me just give you an overview of the

stuff that we are going to use to be

able to build such an ecommerce app like

this one

first of all i will use scotland to

build this app for the programming

language and we're also going to use

firebase services which are firestore

firebase authentication firebase storage

and fire cloud messaging

for the push notifications

and if you have never used firebase in

your projects then that will be okay

because i will try my best to explain

everything

while i'm doing it and we're also going

to use mvvm architecture pattern which

is a famous pattern and finally we're

going to use cortines and coroutine's

flaws

in this app okay this is the end of this

video stay tuned to build this app with

me and if you are not subscribed to my

channel please subscribe now and turn on

the notification bell if you want to

receive all the new videos that i post

about android development so that was

all again thank you so much for watching

catch you in the first video of this

playlist

[Music]

you