Build an E-commerce Store App like Souq.com for Android

Marwa Eltayeb — Mon, 08 Mar 2021 03:03:58 +0000

Many developers want to know how to create an e-commerce store app, and so am I. Therefore, I have decided to build an E-commerce Store app that looks like souq.com. When I shared it, so many developers liked it and asked me about it, so I decided to write about it and give you an idea about its features. My app is implemented using MVVM Architecture. I have written the Back-end rest API in MySQL and Node.js.

It is a clone of Souq.com, but it is not identical. As you know, to build an app like Souq.com, you need to have a big team to collaborate. However, I have made this app myself, and it includes lots of features that you can implement in your app.

First of all, the user can sign up for getting a new account if he/she does not have one, or log in to their existing accounts. The app enables them to add other products if they have admin accounts. They can browse products and see details about them like product name, picture, image, price, etc.

Besides, the user can search for products using keywords or categories. They can add a product to the shopping cart or remove it. The product can be added to their wish list or removed from it.

The user can review a product, give feedback about it, and check other users’ reviews. They can check all products in their shopping cart or wish list.

The user can sign out or delete his/her account if they wish. For the profile picture, the user can take a picture via camera or upload it from Gallery.

Users can update password and get OTP via email to verify their identity if they forget their password. Moreover, users can change the language of the application if they wish.

There is an ability to share the application with friends and rate it on Google Play store. Furthermore, users get a news feed about new offers. The app also provides support through the help center.

Finally, users can add their shipping address and track the status of their orders.

Libraries included in Android side:

(Paging / Glide / Retrofit / Data Binding / Live Data / ViewModel / RecyclerView / CardView / GSON / CircleImageView)

Libraries included in Server Side:

(Express/ Multer/ Bcrypt/ JWT/ Body Parser/ Nodemailer)

Steps to run the application:

Start Server and MySql from Xampp.
Import Database from SQL_Database to PhpMyAdmin How to import.
Create three folders inside Souq_Backend to store images.

mkdir storage_poster
mkdir storage_product
mkdir storage_user

Click the Souq_Backend folder and run npm install command to install server dependencies.
To start the server, run npm start command.
Open Android Studio and Run the project.

Hooray, NOW you can use it, and apply any feature you like in your E-commerce Store app.

Get the app through Souq_ShopOnline

Follow me on: GitHub and LinkedIn

Hide and Keep your API key out of GitHub repository

Marwa Eltayeb — Sun, 13 Dec 2020 15:12:43 +0000

When you upload your Android app on GitHub, you need to hide it as no one has access to it except you. It is considered a security glitch, so that’s why it is important to hide your API key. I am going to show you how you can do that easily.

Some Developers store their API key in a String variable like this.

private static final String APK_KEY = "asjsdakf4d3ggs2ytm4x";

It is not good to push your secret things into public repository as other people could use up your limited API calls. That’s probably the least concerning situation. Sharing of API keys becomes more of a concern if the API key authenticates someone for access to a subset of data.

So, let’s see how we can do that.

1- Create a file called gradle.properties in .gradle folder.

   -Drive C
    -Users folder
     -your user folder
      -.gradle folder
      Create it here
      -gradle.properties

Then, write your APPNAME_API_KEY = "asjsdakf4d3ggs2ytm4x" inside it. Save it as PROPERTIES File by enclosing with double quotes like this "gradle.properties"

2. Next step, Go to module level build.gradle file in your project

Then, put your API key for debug and release purposes under buildTypes tree.

buildConfigField ‘String’, “ApiKey”, APPNAME_API_KEY

It will be like that

buildTypes {
        debug{
            buildConfigField 'String', "ApiKey", APPNAME_API_KEY
        }
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            buildConfigField 'String', "ApiKey", APPNAME_API_KEY
        }
}

Sync it

3. Last Step, access your APK key in your Java file like that

private static final String API_KEY = BuildConfig.ApiKey;

If ApiKey goes red, press Make Project button or use Ctrl+F9

Another Way to do that:

1. Add the API key to your local.properties file:

apiKey="Your Key"

2. Add these two lines to the root level of your app-level build.gradle file:

def localProperties = new Properties()
localProperties.load(new FileInputStream(rootProject.file("local.properties")))

3. Add this following line to your app-level build.gradle file:

android {

  defaultConfig {
      // ...   

      buildConfigField "String", "API_KEY",localProperties['apiKey']

  }   
}

4. Sync Gradle and build the project. You can now reference the key:

String apiKey = BuildConfig.API_KEY;

Sounds pretty easy, does it?. Whenever you upload your Android project on GitHub, the person that uses your repository will not be able to figure out what your API key is. Therefore, you are secure NOW.