My School Project

Note: All the crossed-out text/information is not in use/necessary at the current development stage!

Student: Adel Sbeh

Starting Date: September 8th 2021

Finishing Date: -

Project Name: MyStore

Project Idea: A cross-platform apps store

Project Description: This project is an online store that offers all kinds of programs across platforms. The store will mainly be able to host apps and games packages. Users can sign in to manage the downloads history and payments. In addition to this, there will be lots of features that will make the users' and developers' experience much more appealing.

Planned Features

(!): This feature may not be achievable within the given period of time to work on this project.

(*): Not fully tested.

• A fully optimised workload for desktops and mobile devices:
  • Support for all chromium-based browsers
  • Support for all firefox-based browsers (*)
  • Support for the Safari browser (*)
  • A caching system (with service workers) (*)
  • Desktop layout
  • Mobile devices layout
  • Optimise for low-performing devices
• Keep track of the user experience (Analytics)
  • Detect loading problems and report them to the server
  • Check how the user interacts with pages (!)
• Support the store on mutiple platforms:
  • The web
  • PWA (Progressive Web Application) (*)
  • Windows (Electron)
  • Linux (Electron)
  • MacOS (Electron) (!)
  • Android (WebView-based)
• Apps and Games compatibility checks
  • Add mandatory compatibility metrics
  • Add preferred compatibility metrics
  • Add optional compatibility metrics
  • Organise all the avaliable compatibility metrics into two categories: reliable, and experimental!
• A built-in package management and installation system (!)
  • Create an installation package for apps (.mypack or something like that) (!)
  • Verify the app developer (!)
• A fully secure and fledged accounts system:
  • Email verification system
  • 2FA (Two factor authentication)
  • OAuth2 Support (!)
• Apps Ownership and downloads History Syncing:
  • Ownership syncing for free and paid apps
  • Downloads history syncing
• A working system-dependent and user-preferences-wary suggestions system:
  • A suggestions algorithm (!)
  • Categorises blocking
  • Categorises preferences
• An abuse report system:
  • Abuse reporting for apps
  • Abuse reporting for comments
  • Abuse reporting for ratings
• A feedback system:
  • Comments
  • Ratings
• A working developer console: (!)
  • App analytics (app page visits, ownerships, downloads, earnings (!), used OS, etc.)
  • Comments and ratings mangement
  • App page and info management
  • Policy Alerts (!)
  • Teams (Invites, user permissions, and activity logs) (!)
  • Payments Managment (Manage your earnings) (!)
  • API access settings (!)
• Store API & OAuth2 System: (!)
  • Enable access to the store updates API
  • Enable access to the user apps ownership info through the OAuth2 system (!)
  • Enable access to the user devices info through the OAuth2 system (!)
• A rewards and points system: (!)
  • Add a rewards program for apps and games (!)
  • Add a rewards currency (!)
• A gift cards system: (!)
  • Add a gift cards generator (!)
  • Add a "buy as a gift" option (!)
  • Add a code redemption page (!)
• A marketing plan: (!)
  • Create a store policy for payments and profit cuts (!)
  • Create a video ad for the store (!)
  • Create an ad for the store (!)

Used Languages

• PHP (Server-side scripting)
• Java (Android native app)
• JavaScript (Resource management, and server communication)
• HTML (Interface - structure)
• CSS (Interface - styling)
• JSON (API/Server outputs, and manifests)
• MySQL script (Database management)
• Shell Script (Build commands)

Used Technologies

• Apache2 (Website directories management)
• NodeJS (Native desktop apps management, and bundling)
• Electron (Windows, Linux, and macOS native apps)

Used Tools and Resources

• Visual Studio Code
• Android Studio
• Google PageSpeed Insights (performance testing and debugging)
• web.dev (performance testing, and web vitals improvement)
• PWABuilder (PWA testing)
• MDN Web Docs (APIs status, references, and cross-browser compatibility/support)

Server Requirements

• Apache2 support
• PHP 7+ support
• MySQL support
• At least 1GB of storage (without acounting for the apps database)
• Mailing support
• HTTPS support (lots of web APIs and features are only accessible to websites that use the HTTPS: protocol. The website won't work properly if the user is connected using a different protocol)

Personal/Local Machine Requirements

It's recommended that you have at least 6 GBs of RAM, and a CPU with four cores in order to build the codebase for Android, Windows, Linux, and the web. Any machine with specis less than the ones provided above could take a significantly long time to finish builds.

Getting Started & The Development Environment

Before you follow any of these instructions, make sure to configure your server settings in the server.config.jsonc file. Read the provided instructions within the server.config.jsonc file and follow them carefully, and watch out for any server credentials leaks when you upload your files online or share them with others.

Note: these instructions are written for Linux users. If you face any problem setting up the Development environment on Windows, you can always use the Windows Subsystem for Linux!

Localhost

If you wish to host the website locally, you need to make sure that you have apache2 enabled on your local server:

sudo apt-get install apache2
sudo apt-get install apache2-utils

Also, make sure that all the directories that you're gonna work with have these permissions in the /etc/apache2/apache2.conf file:

<Directory /MY_DIRECTORY>

    Options FollowSymLinks
    AllowOverride All
    Require all granted

</Directory>
<Location /MY_DIRECTORY>

    CacheEnable disk
    CacheHeader on
    CacheDefaultExpire 800
    CacheMaxExpire 6400000
    CacheIgnoreNoLastMod On
    ExpiresActive on
    ExpiresDefault A300

</Location>

And that you have all these modules enables:

sudo a2enmod cache
sudo a2enmod cache_disk
sudo a2enmod expires
sudo a2enmod headers
sudo a2enmod rewrite

Once you have everything set up properly, you can use this command to run the server:

sudo apachectl start

If you wish to change the default directory of the server, do this:

cd /etc/apache2/sites-available
sudo nano 000-default.conf

And make sure to replace its content with this:

# The store subdomain (store.*)
<VirtualHost *:80>

    ServerAdmin webmaster@localhost
    DocumentRoot .../bundler/public/store_subdomain
    ServerName store.localhost

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

# The accounts subdomain (accounts.*)
<VirtualHost *:80>

    ServerAdmin webmaster@localhost
    DocumentRoot .../bundler/public/accounts_subdomain
    ServerName accounts.localhost

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Note that you will need to move the website code (inside /bundler/builds/web/) to your /var/www/html/ directory or your DocumentRoot directory, if you do not change your website settings.

Building

If you wish to build any version of this codebase, you need to install NodeJS (latest) and NPM:

sudo apt-get install nodejs
sudo apt-get install npm

If you already have nodejs installed, but it's not the latest version, use these commands:

sudo npm install -g n
sudo n latest

Native apps (for Windows, Linux, and macOS)

You will need to install electron-builder if you wish to run or build any of the native apps for Windows, Linux, or macOS:

sudo npm install -g electron-builder

Native app (for Android)

You will need to install Java if you wish to run or build the native app for Android:

sudo apt install default-jre
sudo apt install openjdk-11-jre-headless

And you also need to install the Android SKD:

# Not working
sudo apt install android-sdk
sudo android update sdk -u

# Not working
sudo apt install unzip
cd ~
wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip
unzip sdk-tools-linux-4333796.zip
rm sdk-tools-linux-4333796.zip
mkdir android-sdk
mv tools android-sdk/tools
export ANDROID_HOME=$HOME/android-sdk
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export JAVA_OPTS='-XX:+IgnoreUnrecognizedVMOptions --add-modules java.se.ee'

Build the Windows app on Linux

You need to install Wine on your system so you can build windows apps. You can follow these instructions to get it to work.

The Native app for Android (OUTDATED!!!)

You will need to install expo-cli if you wish to run or build any of the native apps for Android or iO:

sudo npm install --g expo-cli

Apps Distribution

To make all the production-ready versions of the codebase, use the ./build file.

./build <flag> <flag>...

The estimated build time of the current version of the bundler is 9 minutes!

The available build flags are:

• -debug: Show debug messages
• -local: Tells the builder that your server is hosted locally (on localhost)
• -all: Create all the builds for all platforms (Web, Windows, Linux, macOS, Android)
• -desktop: Create all the builds for desktop devices (Windows, Linux, macOS)
• -mobile: Create all the builds for mobile devices (Android)
• -web: Create a web build
• -windows: Create a Windows build
• -linux: Create a Linux build
• -mac: Create a macOS build
• -android: Create an Android build

You can also use the Node Package Manager to run the build command for specific platforms:

• Use npm start to run the website locally
• Use npm run web to build the website for production
• Use npm run android to build the Android app for production
• Use npm run windows to build the Windows app for production
• Use npm run linux to build the Linux app for production
• Use npm run mac to build the MacOS app for production
• Use npm run desktop to build all the desktop apps for production
• Use npm run mobile to build all the mobile apps for production

Note that we do not offer the option to build an iOS app for the codebase because it'd be useless. (Apps can't install other apps on iOS)

If you face any problem whist building a native app for Windows, macOS, or Linux, make sure that you have the proper enviromnet setup for electron-builder!

Publishing (the website) - NOT READY!

You can use the ./publish command to publish the website to the FTP server of your choice in the server data file.

./publish <flag> <flag>...

The available flags are:

• -debug: Show debug messages
• -local: Tells the publisher that your server is hosted locally (on localhost)

You can also use the npm run publish command to publish the website online.

Licensing

This project is licensed under an Attribution-NonCommercial-ShareAlike 4.0 International license!

However, there is a restriction that applies to this repository. If you live in Israel/Palestine, you are not allowed to use this project, or any parts of this codebase, as/for your school assignment(s). Also, you're not allowed to identify this project as your own. That is a temporary restriction that ends August 1st, 2022.

Credits

The icons: Evericons

The font: Google Fonts - Daniel Johnson (Principal design), and Cyreal.

Notes

• This codebase still uses the User Agent string to identify and collect some basic information about the users' devices. It's not recommended for developers to use the User Agent string nowadays. However, I am still going to use it because the current replacement APIs for the User Agent string are not good enough to get all the information needed for the website to work properly.
• This codebase uses the SpeechRecognition API. As of the 12th of November 2021, this API is still marked as experimental. This API can be a bit laggy on desktop devices, and its cross-browser support is quite poor.
• This codebase uses the stack property of the Error type. This is a non-standard property. (I decided to use this property because almost all browsers do fully support it, but with minor differences.)
• This codebase uses the userAgentData object. This is still an experimental feature, and it has poor cross-browser support. (If a browser doesn't support this object, the platform detector will fallback to the User Agent string!)
• The search voice input option is going to be disabled when using the Electron-based version of the codebase. (Read issue #18 for more info)

More To Read

Apps Submission Requirements

Page Content Documentation

Accounts System Documentation

Typed LocalStorage Documentation