Steps to do next:

1. Download & unpack
2. Install local PHP server & Database
3. Configuring XAMPP, PHP & MySQL
4. Configure sample: host url, company name, cnd directories, dowload link, database info, jwt info,
5. Change icons and logos

1. Download & unpack

• Download the webapp-sample package into your local disk drive
• Unzip it to D:/webapp-sample

2. Install local PHP server & Database

• Recommend you to use XAMPP, which can be downloaded here
• Download it and install in C:/xampp
• It should take some moment to complete the package: apache, php, mysql, phpMyAdmin, tomcat, MercuryMail…

3. Configuring XAMPP, PHP & MySQL

We need to configure XAMPP, PHP, MySQL and phpMyAdmin.

XAMPP

• Open XAMPP server. Remember to Run as administrator.
• Set/add your working folder as localhost
• Open C:/xampp/apache/conf/extra/httpd-vhosts.conf with Notepad++ or VSCode
• REM all current existing content with #
• Then paste the code block below at the end of file, to let apache understand your app
• Restart Apache Server
• Open browser and type https://localhost to see the miracle.

    DocumentRoot "d:webapp-sample"
    ServerName wapapp
  
    Order allow,deny
	AllowOverride All
    Allow from all
	Require all granted
  

PHP

• Make sure to turn on file_uploads=On in php.ini

MySQL / phpMyAdmin

• Start MySQL local server
• Tap Admin button to open phpMyAdmin
• Copy SQL template in docs/sql/webapptemplate.sql
• Goto SQL tab
• Paste content and GO

4. Configure sample

I believe there will be some errors and you will feel very upset.

Be calm, please!

I understand it and here below what you should do next.

First of all

• Use VSCode to open the webapp folder.

Go find configs/__config.php

• Open file and modify as your information.

define("APP_HOST","webapptemplate.hssoftvn.com");
define("APP_PROTOCOL","https://");
define("APP_URL", APP_PROTOCOL . APP_HOST);
define("LOCALHOST","http://localhost");
define("COMPANY_NAME","YOUR_COMPANY");

define("CDN_DIR", __DIR__ . "/../cdn");
define("CDN_DIR_BK", CDN_DIR . "_bk");
define("MAX_UPLOAD_SIZE", 5_000_000);

$server_name = $_SERVER['SERVER_NAME'];
$url_origin = APP_URL;
if($server_name != APP_HOST){
    $url_origin = LOCALHOST;	
}

$current_url = $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];

$is_local = ($url_origin == LOCALHOST);

function isLocal(){
	global $is_local;
	return $is_local;
}

define("CDN_URL", (isLocal()? LOCALHOST:APP_URL) . "/cdn");

$APP_DOWNLOAD_LINK = "https://play.google.com/store/apps/details?id=com.hssoftvn.gicungduoc";
?>

Go find .htaccess

• Open file
• Find SetEnv MY_DB_SERVERNAME your.remote.sqlsever.hosting
• Replace to yours.
• You can leave it localhost if your webserver and mysql server running on a same environment, such as when deploying them into live server.

Go find controllers/core/database/core.db.php

• Change these info as yours

define("MY_DB_SERVERNAME", getenv("MY_DB_SERVERNAME"));
define("MY_DB_USERNAME", "root");
define("MY_DB_PASSWORD", "");
define("MY_DB_DATABASENAME", "webapptemplate");

Go find controllerscore/upload/module.photo.php

• Open file
• Find below and change as your preferrence.

if(isLocal()){
	$CDN_DIR = isLocal()? "./cdn":$CDN_DIR;
	$CDN_BK_DIR = isLocal()? "./cdn_bk":$CDN_BK_DIR;
	$CDN_URL = "cdn/";
}

$CDN_DIR = CDN_DIR;	
$CDN_BK_DIR = CDN_DIR_BK;	
$MAX_UPLOAD_SIZE = MAX_UPLOAD_SIZE;
$CDN_URL = CDN_URL;

• Be default, these CDN folders will be located right in root dir

Go find controllers/core/jwt/jwt.php

• Open file and modify below information to yours.

// Hours * Minutes * Seconds
$token_expiration = 6 * 60 * 60;

//For Mobile, reduce the token expiration
if($iss=='am'){
    $token_expiration = 2 * 60 * 60;
}

// Get our server-side secret key from a secure location.
define ("SERVER_KEY", 'IyQlXiZAKjMlKiZeLTgyJioqPQ'); //base64 encode
define ("ALGORITHM", 'HS256'); //in seconds
define ("EXPIRATION_TIMES", $token_expiration); //in seconds

Now, F5 again if there are stil errors?

I believe the sample should work well now.

5. Change icons and logos

Changing icons and logos are very easy.

Icons: icon folder

• ico: ICO format, sizes: 24, 32 and 256px
• png: PNG format, sizes: 128, 256, 512px
• You can define icons for other languages here, by suffix _lang to the file name.
  • lang is in your supported languages, not default language

Logos: images/logo folder

• PNG format
• Ratio 16-9:
  • Big: 910x512
  • Small: 612x260
• Ratio 1-1: 256, 512
• You can define logo for other languages here, by suffix _lang to the file name.
  • lang is in your supported languages, not default language

Now, F5 again.

See your new icons and logos?

Useful tools

PNG to ICO tool

If you are looking for a tool to convert PNG to ICO files, here you go

• https://www.freeconvert.com/png-to-ico 
• https://convertico.com/ 

Optimize PNG files

• https://nukesaq88.github.io/Pngyu/

WHAT'S NEXT? 

FEATURES & FUNCTIONS