| Server IP : 14.225.204.176 / Your IP : 216.73.216.252 Web Server : nginx/1.24.0 System : Linux nodejs-ybgk 6.8.0-40-generic #40-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul 5 10:34:03 UTC 2024 x86_64 User : root ( 0) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/php/zinisoft.net/user-guide/kindie_31_10/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Berkine" />
<!-- Stylesheets
============================================= -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800|Poppins:300,400,500,600,700,800,900"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- One Page Module Specific Stylesheet -->
<link rel="stylesheet" href="onepage.css" type="text/css" />
<!-- / -->
<!-- Documentation Module Specific Stylesheet -->
<link rel="stylesheet" href="docs.css" type="text/css" />
<!-- / -->
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/et/et-line.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/medical/medical-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons/real-estate/real-estate-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="one-page/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- Document Title
============================================= -->
<title>Documentation | Kindergarten Management Software - Connecting Schools, Teachers, and Parents on the Web and
Mobile</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="static-sticky">
<div id="header-wrap">
<div class="container-fullwidth clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="/" class="standard-logo">Kindergarten Management Software - Connecting Schools,
Teachers, and Parents on the Web and Mobile</a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul>
<li><a target="_blank" href="https://kindie.io/dung-thu" target="_blank">
<div>Trial</div>
</a></li>
<li><a target="_blank" href="https://kindie.io/" target="_blank">
<div>About Kindie</div>
</a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap nopadding">
<div id="docs" class="container-fullwidth clearfix">
<div class="docs-navigation">
<ul>
<li><a href="#docs-start">Installation</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-start-introduction">Introduction</a></li>
<li><a href="#" data-href="#docs-start-requirements">Requirements</a></li>
<li><a href="#" data-href="#docs-start-installation">Installation</a></li>
<li><a href="#" data-href="#docs-start-deployment">Deployment</a></li>
</ul>
</li>
<li><a href="#docs-installation-mobile">Mobile
Installation</a>
</li>
<li><a href="#docs-userguide">User Guide</a>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-website"><b>WEBSITE MANAGEMENT</b></a>
</li>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-website-login">Login to the
software</a></li>
<li><a href="#" data-href="#docs-userguide-website-school">Update school
information</a></li>
<li><a href="#" data-href="#docs-userguide-website-branch">Create branches</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-session">Create academic
sessions</a></li>
<!-- <li><a href="#" data-href="#docs-userguide-website-chuongtrinh">Create programs</a></li> -->
<li><a href="#" data-href="#docs-userguide-website-groupclass">Create class
groups</a></li>
<li><a href="#" data-href="#docs-userguide-website-class">Create classes</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-foods">Create menus</a></li>
<li><a href="#" data-href="#docs-userguide-website-subject">Create subjects</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-student">Add students</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-parent">Add parents</a></li>
<li><a href="#" data-href="#docs-userguide-website-medical">Create health
checkups</a></li>
<li><a href="#" data-href="#docs-userguide-website-news">Create articles,
news</a></li>
<li><a href="#" data-href="#docs-userguide-website-album">Create albums</a></li>
<li><a href="#" data-href="#docs-userguide-website-notification">Send
notifications</a></li>
<li><a href="#" data-href="#docs-userguide-website-fee">Create tuition fees</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-accounting">Accounting</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-user">Create staff</a></li>
<li><a href="#" data-href="#docs-userguide-website-attendance">Attendance
management</a></li>
<li><a href="#" data-href="#docs-userguide-website-bus">Manage school bus
transportation</a></li>
<li><a href="#" data-href="#docs-userguide-website-messengers">Messengers</a>
</li>
<li><a href="#" data-href="#docs-userguide-website-report">Reports</a></li>
<li><a href="#" data-href="#docs-userguide-website-changeclass">Transfer
classes</a></li>
<li><a href="#" data-href="#docs-userguide-website-medias">Upload medias</a>
</li>
</ul>
<li><a href="#" data-href="#docs-userguide-mobile"><b>MOBILE APPLICATION</b></a>
</li>
<ul class="one-page-menu" data-offset="110" data-easing="easeInOutExpo"
data-speed="1250">
<li><a href="#" data-href="#docs-userguide-mobile-setup"><u><b>Installation,
login, and basic setup information.</b></u></a></li>
<li><a href="#" data-href="#docs-userguide-mobile-login">Installation and
login</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-account">Change password and
update personal information</a></li>
<li><a href="#"
data-href="#docs-userguide-website-parent"><u><b>Parents</b></u></a>
</li>
<li><a href="#" data-href="#docs-userguide-mobile-absence">Request leave of
absence</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-foods">View menus</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-fee">Check tuition fees</a>
</li>
<li><a href="#" data-href="#docs-userguide-mobile-payment">Pay tuition fees</a>
</li>
<li><a href="#" data-href="#docs-userguide-mobile-follow">Track child's
activities</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-parent-messengers">Online
exchange</a></li>
<li><a href="#"
data-href="#docs-userguide-mobile-teacher"><u><b>Teachers</b></u></a>
<li><a href="#" data-href="#docs-userguide-mobile-schedule">View timetable</a>
</li>
<li><a href="#" data-href="#docs-userguide-mobile-attendance">Attendance</a>
</li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-messengers">Online
exchange</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-medical">View health
information</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-medias">Manage centralized
medias</a></li>
<li><a href="#"
data-href="#docs-userguide-mobile-driver"><u><b>Drivers</b></u></a>
<li><a href="#" data-href="#docs-userguide-mobile-shuttle">Transporting
children</a></li>
</ul>
</ul>
</li>
</ul>
</div>
<div class="docs-content">
<!-- INTRODUCTION -->
<div id="docs-start">
<div id="docs-start-introduction" class="docs-content-inner page-section">
<h1>Kindie Web - Multi branch kindergarten management software</h1>
<div>
<span class="special-label">Version 1.0</span> <span class="special-label">Last
Documentation Update - Feb 21, 2024</span>
</div>
<div class="row special-row">
<div class="col-md-6">
<img src="images/banner.png" style="border:1px solid #22376F;">
</div>
<div class="col-md-6">
<h3>Welcome</h3>
<p>Thank you for purchasing <a target="_blank"
href="https://codecanyon.net/item/kindie-kindergarten-management-software/25257408"
target="_blank">Kindie Web – the multi-branch kindergarten management software</a>. This guide covers everything you need for a quick setup. Your support means a lot to us! If you’re satisfied with our product, please consider leaving a rating. It motivates us to keep creating better cloud solutions.</p>
<h5>Author: <a target="_blank" href="https://codecanyon.net/user/zinisoft"
target="_blank">ZiniSoft Team</a></h5>
<h5>Demo: <a target="_blank"
href="https://codecanyon.net/item/kindie-kindergarten-management-software/25257408"
target="_blank">Kindie Web - Multi branch kindergarten management
software</a></h5>
</div>
</div>
</div>
<div class="line"></div>
<div id="docs-start-requirements" class="docs-content-inner page-section">
<h1>Installation Requirements</h1>
<p>
<strong>Web Service: NodeJS</strong><br/>
Download: <a href="https://nodejs.org/en/download">NodeJS</a><br/>
Ensure Node.js is installed to run backend services.<br/><br/>
<strong>Database: MongoDB</strong><br/>
Download: <a href="https://www.mongodb.com/try/download/community">MongoDB</a><br/>
Set up MongoDB for database management.<br/><br/>
<strong>Mail Server: <a href="https://login.mailgun.com/login/">https://login.mailgun.com/login/</a></strong><br/>
Create an account and log in: Mailgun<br/>
Configure email sending services.<br/><br/>
<strong>Firebase Service</strong><br/>
Set up Firebase Console: <a href="https://console.firebase.google.com/u/0/">https://console.firebase.google.com/u/0/</a><br/>
Configure Firebase for authentication, cloud storage, and other services<br/><br/>
<strong>Operating System</strong><br/>
Supported OS:<br/>
Windows: Windows 10, Windows 11, Windows Server 2018 or later<br/>
Linux: Ubuntu 22.x or higher<br/>
</p>
<h4><strong>A. Installing services on Windows:</strong></h4>
<p>
<strong>A-1. Install Web sevices Node.js</strong> <br />
Visit the official website of Node.js at <a target="_blank"
href="https://nodejs.org">https://nodejs.org</a>. <br />
Download Node.js settings for Windows. <br />
<img src="images/backend/win/download_node.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. Click "Next" to
install.<br />
<img src="images/backend/win/install_node.png" width="1000"> <br />
Follow the instructions in the installation process. Make sure you select the "Add
to Path" option to facilitate the use of Node.js in Command Prompt. <br />
<img src="images/backend/win/path_node.png" width="1000"> <br /><br />
Check the Node.js version was installed with Command Prompt or PowerShell: <br />
<strong>$ node --version </strong><br />
<strong>$ npm --version </strong><br />
<img src="images/backend/win/node_version.png" width="1000"> <br /><br />
Next step is to install "forever" using the following command:<br />
<strong>$ npm install forever -g</strong><br />
<img src="images/backend/win/install_forever.png" width="1000"> <br />
Check "forever" version: <br />
<strong>$ forever --version</strong><br />
<img src="images/backend/win/forever_version.png" width="1000"> <br />
Now, once "forever" is installed, we are ready to run application.<br /><br /><br />
<strong>A-2. Install database MongoDB</strong>:
(Reference more on their offical web: <a target="_blank"
href="https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows">https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows</a>)<br />
Download the MongoDB Community .msi installer from the following link: <a
target="_blank"
href="https://www.mongodb.com/try/download/community?tck=docs_server">MongoDB
Download Center</a><br />
Select the MongoDB version that is suitable for your Windows operating system and
click the "Download" button to download the installer. <br />
<img src="images/backend/win/download_mongo.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. <br />
Select "Complete" when asked to install. <br />
<img src="images/backend/win/open_msi_mongo.png" width="1000"> <br /><br />
Make sure you choose the <strong>"Install MongoDB as a Service"</strong> option to
automatically run
as a Windows service. <br />
<img src="images/backend/win/mongo_config.png" width="1000"><br />
You can also choose <strong>"Install MongoDB Compass"</strong> if you want to
install MongoDB
Compass, a GUI tool to manage MongoDB.
<img src="images/backend/win/mongo_compass.png" width="1000"><br />
Configure path: <br />
Open Control Panel and go to System and Security> System. <br />
Select <strong>"Advanced System Settings"</strong> and then click the "Environment
Variables" button.
<br />
<img src="images/backend/win/env_variable.png" width="1000"> <br /><br />
In the <strong>"System Variables"</strong> section, find and select the "path"
variable, then click
the "Edit" button. <br />
<img src="images/backend/win/edit_path.png" width="1000"> <br /><br />
Add the path to the bin folder of MongoDB (the default is C:\Program
Files\Mongodb\Server\{Version}\bin), and click "OK". <br />
<img src="images/backend/win/path_mongo.png" width="1000"> <br /><br />
Start MongoDB: <br />
If you have chosen MongoDB settings as a service, it will automatically run after
installation. <br />
If you do not install MongoDB as a service, you can boot it by opening Command
Prompt and running the following command: <br />
<strong>$ mongod </strong> <br /><br />
<img src="images/backend/win/start_mongo_cmd.png" width="1000"> <br />
<br />
Download MongoDB Command Line Database Tools .msi installer from the following link: <a
target="_blank"
href="https://www.mongodb.com/try/download/database-tools">MongoDB Command Line Database Tools</a><br />
Open the .msi file downloaded to start the installation process. Click "Next" and "Install" when asked to install. <br />
<img src="images/backend/win/install_mongo_tool.png" width="1000"> <br />
<img src="images/backend/win/install_mongo_tool_1.png" width="1000"> <br />
Check MongoDB Command Line Database Tools version with Command Prompt: <br />
<strong>$ mongodump --version </strong> <br />
<img src="images/backend/win/check_mongo_tool.png" width="1000"> <br /><br />
- <strong>Install Redis</strong>: Reference: <a target="_blank"
href="https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-windows/">https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-windows/</a><br />
Or use the unofficial version of Redis on Windows: <a target="_blank"
href="https://github.com/microsoftarchive/redis/releases">https://github.com/microsoftarchive/redis/releases</a><br />
Download .msi installer: <br />
<img src="images/backend/win/download_redis_msi.png" width="1000"> <br /><br />
Open the .msi file downloaded to start the installation process. Click "Next" and "Install" when asked to install. <br />
<img src="images/backend/win/install_redis_msi.png" width="1000"> <br /><br />
Connect to Redis: <br />
Once Redis is running, you can test it by running redis-cli: <br />
<strong>redis-cli</strong><br />
Test the connection with the ping command: <br />
<img src="images/backend/win/test_redis.png" width="1000"> <br /><br />
</p>
<br />
<hr />
<br />
<h4><strong>B. Installing services on Linux:</strong></h4>
<p>
If you are using hosting: They will provide you all the credentials to access: FTP
and Database account.<br />
If you are using VPS (Ubuntu 22.x Recommended): Login to SSH server and
install:<br />
- <strong>B. Install Nginx</strong>: Reference: <a target="_blank"
href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04</a><br />
System update: <br />
<strong>$ sudo apt update </strong> <br />
<img src="images/backend/linux/apt_update.png" width="1000"><br /><br />
<strong>$ sudo apt upgrade</strong> <br />
<img src="images/backend/linux/apt_upgrade.png" width="1000"><br /><br />
Install Nginx: <br />
<strong>$ sudo apt install nginx</strong> <br />
<img src="images/backend/linux/install_nginx.png" width="1000"><br /><br />
Start and activate Nginx: <br />
<strong>$ sudo systemctl start nginx</strong> <br />
<strong>$ sudo systemctl enable nginx</strong> <br />
<img src="images/backend/linux/start_nginx.png" width="1000"><br /><br />
Check the status of Nginx: <br />
<strong>$ sudo systemctl status nginx </strong> <br />
<img src="images/backend/linux/nginx_active.png" width="1000"> <br /><br />
- <strong>Install MongoDB</strong>: Reference: <a target="_blank"
href="https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/">https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/</a><br />
Import the public key used by the package management system: <br />
<strong>$ sudo apt-get install gnupg curl </strong> <br />
<img src="images/backend/linux/install_curl.png" width="1000"> <br /><br />
<strong>$ curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | \
sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg \
--dearmor</strong>
<img src="images/backend/linux/GPG_key.png" width="1000"> <br /><br />
Create a list file for MongoDB: <br />
<strong>$ echo "deb [ arch=amd64,arm64
signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ]
https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | sudo tee
/etc/apt/sources.list.d/mongodb-org-7.0.list </strong> <br />
<img src="images/backend/linux/echo_deb.png" width="1000"><br />
Reload local package database: <br />
<strong>$ sudo apt-get update </strong> <br />
<img src="images/backend/linux/apt_get_update.png" width="1000"> <br /><br />
Install the MongoDB packages: <br />
<strong>$ sudo apt-get install -y mongodb-org </strong> <br />
<img src="images/backend/linux/install_mongo.png" width="1000"> <br /><br />
Start and activate MongoDB: <br />
<strong>$ sudo systemctl start mongod </strong> <br />
<strong>$ sudo systemctl enable mongod </strong> <br />
<img src="images/backend/linux/start_mongo.png" width="1000"><br />
Check MongoDB status: <br />
<strong>$ sudo systemctl status mongod </strong> <br /><br />
<img src="images/backend/linux/status_mongo.png" width="1000"> <br /><br />
- <strong>Install Node.js</strong>: Reference: <a target="_blank"
href="https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04">https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04</a><br />
Add Nodesource repository: <br />
<strong>$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
</strong> <br />
<img src="images/backend/linux/nodesoure.png" width="1000"> <br /><br />
* Replace 18.x with the Node.js version you want to install. We recommend using Node.js 18.x or higher. <br />
Install Node.js: <br />
<strong>$ sudo apt-get install -y nodejs </strong> <br />
<img src="images/backend/linux/install_nodejs.png" width="1000"> <br /><br />
Check Node.js version: <br />
<strong>$ node --version</strong> <br />
<strong>$ npm --version</strong> <br />
<img src="images/backend/linux/node_version.png" width="1000"> <br /><br />
Next step is to install "forever" using the following command:<br />
<strong>$ sudo npm install forever -g</strong><br />
<img src="images/backend/linux/install_forever.png" width="1000"> <br /><br />
Check "forever" version: <br />
<strong>$ sudo forever --version</strong><br />
<img src="images/backend/linux/forever_version.png" width="1000"> <br /><br />
Now, once "forever" is installed your server, we are ready to run our application.<br />
- <strong>Install Redis</strong>: Reference: <a target="_blank"
href="https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/">https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/</a><br />
Add the repository to the APT index, update it, and install Redis: <br />
<strong>$ sudo apt-get update</strong><br />
<strong>$ sudo apt-get install redis</strong><br />
Start Redis server: <br />
<strong>$ sudo systemctl enable redis-server</strong><br />
<strong>$ sudo systemctl start redis-server</strong><br />
Connect to Redis: <br />
Once Redis is running, you can test it by running redis-cli: <br />
<strong>redis-cli</strong><br />
Test the connection with the ping command: <br />
<img src="images/backend/linux/connect_redis.png" width="1000"> <br /><br />
</p>
</div>
<div class="line"></div>
<div id="docs-start-installation" class="docs-content-inner page-section">
<h1>Configure Source Code</h1>
<p>This is a general installation overview of the script.</p>
<p>Follow the steps as explained, and you will complete the installation process.</p>
<strong>A. SOURCE CODE CONFIG </strong><br /><br />
Open file <strong>.env.example</strong> and rename to <strong>.env</strong> located inside script folder.<br /><br />
<img src="images/backend/env_config.png" width="1000"> <br /><br />
<strong>MONGO_USER=""</strong><br />
<strong>MONGO_PASSWORD=""</strong><br />
<strong>MONGO_DB_NAME="kindiedb1"</strong><br />
* Replace "" with your database username, password and database name. <br /><br />
<strong>MAIL_AUTH_USER="no-reply@mg.kindie.io"</strong><br />
<strong>MAIL_AUTH_PASSWORD="Kd123123!"</strong><br />
<strong>MAIL_AUTH_HOST="smtp.eu.mailgun.org"</strong><br />
<strong>MAIL_AUTH_PORT="587"</strong><br />
<strong>MAIL_FROM="no-reply@mg.kindie.io"</strong><br />
* Replace "" with your maigun credentials you have when register on Mailgun. <br />
* If you need to send / received email, we support Mailgun service, please replace all
the credentials above by your Mailgun server config. Reference: <a target="_blank"
href="https://documentation.mailgun.com/">https://documentation.mailgun.com/</a>
<br /><br />
<strong>TYPE_CACHE="file"</strong><br />
The default caching will be used with "file". <br />
If you install Redis, you can change to "redis": <strong>TYPE_CACHE="redis"</strong><br /><br />
Open file <strong>firebase-service-account-example.json</strong> and rename to <strong>firebase-service-account.json</strong> located inside script folder.<br />
<img src="images/backend/firebase-service-account.png" width="1000"> <br />
* If you need to submit notifications or messages, please replace all the authentication information above with the credentials you registered in Firebase.
Reference: <a target="_blank" href="https://documentation.mailgun.com/">https://console.firebase.google.com/u/0/</a><br /><br />
<strong>Then Upload all files/folders located inside "script" folder to your server.</strong><br /><br />
<strong>B. - START APPLICATION </strong><br/>
<strong>How to start our application on dedicated server?</strong><br/>
Login to your server using command line:
<strong>$ cd /path/to/script</strong> <br/>
<strong>$ cd /path/to/web-kindie/</strong> <br/>
<b class="text-danger">Note: You MUST go to working folder have source code to run the following commands.</b><br/>
Before we run our application, you need to install all the dependencies, to do that, run the following command and wait till it finishes.<br/>
<strong>$ npm install -g sails</strong><br/>
<strong>$ npm install</strong><br/>
<img src="images/backend/install_sails.png" alt=""> <br/>
To start our application, run the following command:<br/>
<strong>$ sails lift</strong><br/>
<img src="images/backend/start_sails.png" alt=""> <br/>
Now your node server is running on PORT 1337.<br/>
<b class="text-danger">Note: Kindie build on Sails JS Framework, so if you need further information how to config advanced, reference: <a target="_blank" href="https://sailsjs.com/get-started">https://sailsjs.com/get-started</a></b><br/>
To stop our application, press <strong>CTRL+ C</strong> <br/>
Run the following command using the server "forever" <strong>$ forever start app.js</strong><br/>
<img src="images/backend/start_forever.png" alt=""> <br/>
</div>
<div class="line"></div>
<div id="docs-start-deployment" class="docs-content-inner page-section">
<h1>Deployment</h1>
<p><strong style="color: red;">We recommend using this app in a Linux environment with the Nginx service</strong>. <br/>If you are
using Windows, please config with IIS service by yourself. Refer: <a
href="https://dev.to/sumitkharche/how-to-deploy-react-application-on-iis-server-1ied">Deploy
React application</a></p>
<p>
<h2>Run the application on Linux:</h2>
<strong>Config Nginx file: </strong> <br>
You need 1 domain to configure: for ex: kindie.com<br>
Download the sample file here: <a
href="sampleFile/sample-api.conf">sample-api.conf</a><br>
Replace the <strong>demo API domain name</strong> with <strong>your API domain name</strong>.<br>
Replace <strong>demo root path folder</strong> with <strong>your root path folder</strong>.<br>
Replace <strong>port</strong> with <strong>your port</strong>.<br>
<pre>
server {
##Replace <strong style="color: red;">kindie.com</strong> below by <strong style="color: red;">YOUR_DOMAIN_NAME</strong>##
server_name <strong style="color: red;">kindie.com</strong>;
client_max_body_size 10m;
client_body_timeout 60;
access_log off;
error_log /var/log/nginx/<strong style="color: red;">kindie.com</strong>-error error;
##Replace <strong style="color: red;">/var/www/html/kindie</strong> below by <strong style="color: red;">YOUR_ROOT_PATH</strong> to your document root (source code folder) on your server##
root <strong style="color: red;">/var/www/html/kindie</strong>;
index index.html;
### root directory ###
##Replace port <strong style="color: red;">1337</strong> below by port you run NodeJS service##
location / {
proxy_pass http://127.0.0.1:<strong style="color: red;">1337</strong>;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
#proxy_cache_bypass $http_upgrade;
}
}
</pre>
<br />
Ensure that the Nginx configuration file is compatible with both the API domain and the main website domain.<br />
<strong>$ service nginx restart </strong><br />
Visit the domain in a browser to verify.
</p>
</div>
</div>
<!-- END INTRODUCTION -->
<!-- MOBILE INSTALLATION -->
<div id="docs-installation-mobile">
<h1>Mobile installation</h1>
Make sure the following services are installed on your computer:
<br>
- <b>Node.JS</b>. Reference: <a href="https://nodejs.org/en" target="_blank"
rel="noopener noreferrer">https://nodejs.org/en</a>.<br>
- <b>Visual Studio Code</b>. Reference: <a href="https://code.visualstudio.com/download"
target="_blank"
rel="noopener noreferrer">https://code.visualstudio.com/download</a>.<br>
- <b>Android Studio</b>. Reference: <a href="https://developer.android.com/studio?hl=vi"
target="_blank"
rel="noopener noreferrer">https://developer.android.com/studio?hl=vi</a>.<br>
- <b>Android Debug Bridge (ADB)</b>. Reference: <a
href="https://www.xda-developers.com/install-adb-windows-macos-linux/" target="_blank"
rel="noopener noreferrer">https://www.xda-developers.com/install-adb-windows-macos-linux/</a>.<br>
<br>
<p>Follow the steps below to install the application</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span> Open <b>Terminal</b> or
<b>Command Prompt</b> in the folder of the app-kindie-2x application.
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Install Yarn.
<br>
If your computer doesn't have yarn installed, in the current window, enter <b>npm
install --global yarn</b> to install it. Reference:
<a href="https://classic.yarnpkg.com/lang/en/docs/install/" target="_blank"
rel="noopener noreferrer">here</a>.
<br>
<img src="images/mobile-installation/install-yarn.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3: </span>Install node_modules.
<br>
Enter <b>yarn</b> and wait a moment for the necessary modules and libraries to
install.
<img src="images/mobile-installation/install-node_modules.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 4:</span> Connect your device.
<br>
Connect to an Android or iOS device. Then enter <b>adb devices</b> to check if the
device is connected.
<img src="images/mobile-installation/check-connections.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 5:</span> Build the application
on the device (for the first time running the application).
<br>
<b>For Android devices:</b> <br>
- Enter the command <b>yarn android</b><br>
<img src="images/mobile-installation/run-1.png" class="special-img">
<br>
<br>
- Wait until the window below appears, press the <b>a</b> key
<br>
<img src="images/mobile-installation/run-2.png" class="special-img">
<br>
<br>
- After a successful build, the screen will display as follows
<br>
<img src="images/mobile-installation/run-3.png" class="special-img">
<br>
<br>
<b>For iOS devices:</b> <br>
- Add to script to run on iOS: "postinstall": "react-native setup-ios-permissions &&
pod-install"
<br>
Eg: <br>
"scripts": { <br>
"android": "react-native run-android",<br>
"ios": "react-native run-ios",<br>
"lint": "eslint .",<br>
"start": "react-native start",<br>
"test": "jest",<br>
"postinstall": "react-native setup-ios-permissions && pod-install"<br>
},<br>
rm -rf ~/Library/Developer/Xcode/DerivedData/*
<br>
</li>
<li class="special-li"><span class="special-span">Step 6:</span> Run the application.
<br>
<b>For Android devices:</b> <br>
- Enter the command <b>yarn start</b><br>.
<img src="images/mobile-installation/start-1.png" class="special-img">
<br>
<br>
- Press the <b>a</b> key
<br>
<img src="images/mobile-installation/start-2.png" class="special-img">
<br>
<br>
- After a successful run, the screen will display as follows
<br>
<img src="images/mobile-installation/start-3.png" class="special-img">
<br>
<br>
<b>For iOS devices:</b> <br>
- Add to script to run on iOS: "postinstall": "react-native setup-ios-permissions &&
pod-install"
<br>
Eg: <br>
"scripts": { <br>
"android": "react-native run-android",<br>
"ios": "react-native run-ios",<br>
"lint": "eslint .",<br>
"start": "react-native start",<br>
"test": "jest",<br>
"postinstall": "react-native setup-ios-permissions && pod-install"<br>
},<br>
rm -rf ~/Library/Developer/Xcode/DerivedData/*
<br>
</li>
</ul>
</div>
<!-- END INSTALLATION -->
<!-- HUONG DAN SU DUNG -->
<div id="docs-userguide">
<div id="docs-userguide-website" class="docs-content-inner page-section">
<h2>Instructions for Using the Software on the Website Platform (Management Board)</h2>
<p><a target="_blank" href="https://kindie.io/" target="_blank">Kindie</a> helps schools
to oversee and manage the activities of staff, parents, and students. It manages
teaching programs, information flows, and school reports. Below is a guide for the
management board on using the software on the website platform.</p>
</div>
<!-- 1/Login -->
<div id="docs-userguide-website-login" class="docs-content-inner page-section">
<h3>1. Logging into the Software</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span> Access the
software.
<br>
Go to the Kindie administration website <a target="_blank"
href="https://v3.kindie.io/backend"><u>Here</u></a>.
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Sign in.
<br>
In the Sign-in window, enter your <b>Email</b> and <b>Password</b> provided.
<br>
Select <b>Log In</b> to sign in to the software.
<br>
<img src="images/web-login.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 2/Update school information -->
<div id="docs-userguide-website-school" class="docs-content-inner page-section">
<h3>2/ Update school information</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on the <b>gear icon</b> in the top
right corner of the screen.
<br>
Select <b>School</b> from the menu.
<br>
<img src="images/web-school-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Fill in the
information.
<br>
In the School window, fill in the school information in the provided form
<b>(1)</b>.
<br>
Finally, click <b>Update</b> to save the information.
<br>
<img src="images/web-school-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 3/Create branch -->
<div id="docs-userguide-website-branch" class="docs-content-inner page-section">
<h3>3/ Create a branch</h3>
<p>To create a branch for the school, follow these steps:</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on the <b>gear icon</b> in the top
right corner of the screen.
<br>
Select <b>Branch</b> from the menu.
<br>
<img src="images/web-branch-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the right-hand side Branch window, click on <b>Add New</b>.
<br>
<img src="images/web-branch-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Branch information.
<br>
Fill in the information for the new branch in the provided form <b>(1)</b>.
<br>
Finally, click <b>Add</b> to complete the process. You can go to the
<b>Management</b> section on the left side of the screen to verify the branch
you just created.
<br>
<img src="images/web-branch-step3.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 4/Create session -->
<div id="docs-userguide-website-session" class="docs-content-inner page-section">
<h3>4/ Create a new session</h3>
<p>To create a new session for the school, follow these steps:</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Select <b>Session</b> from the options.
<br>
In the right-hand side Session window, click on <b>Add New</b>.
<br>
<img src="images/web-session-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Session
information.
<br>
Fill in the information for the new session in the provided form <b>(1)</b>.
<br>
Finally, click <b>Add</b> to complete the process.
<br>
<img src="images/web-session-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 5/Create group class -->
<div id="docs-userguide-website-groupclass" class="docs-content-inner page-section">
<h3>5/ Creating a new group class</h3>
<p>To create a new group class, follow these steps:</p>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Then select <b>Class Groups</b>.
<br>
In the Group Class window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-groupclass-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Group Class Information
<br>
Fill in the information for the new group class in the form <b>(1)</b>.
<br>
Finally, click on <b>Add</b> to complete.
<br>
<img src="images/web-groupclass-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 6/Create class -->
<div id="docs-userguide-website-class" class="docs-content-inner page-section">
<h3>6/ Creating a new class</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Then select <b>Classes</b>.
<br>
In the Classes window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-class-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Class Information
<br>
Fill in the information for the new class in the form <b>(1)</b>.
<br>
Finally, click on <b>Add</b> to complete.
<br>
<img src="images/web-class-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 7/Create menu -->
<div id="docs-userguide-website-foods" class="docs-content-inner page-section">
<h3>7/ Creating a new menu</h3>
<p>To create a new menu, follow these steps:</p>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Then select <b>Foods</b>.
<br>
In the Foods window on the right side, you have two options:
<ul>
<li><b>Add New</b>: Add a single dish at a time</li>
<li><b>Import</b>: Upload multiple dishes at once (using the provided
template file)</li>
</ul>
<br>
<img src="images/web-foods-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Dish Information
<ul>
<li>For <b>Add New</b>: Fill in the information for the new dish in the form
<b>(1)</b> and click <b>Add New</b> to add the dish.<br><img
src="images/web-foods-step2a.png" class="special-img">
</li>
<li>For <b>Import</b>:
<br>
Choose the English/Vietnamese template file.
<br>
<img src="images/web-foods-step2b.png" class="special-img">
<br>
<b>MenuSample.xls</b> file will automatically download to your computer.
<br>
<img src="images/web-import-menu-step1.png" class="special-img">
<br>
Open and fill in the menu dishes according to the file template. Pay attention to
the <b>Class Code</b> field and enter the correct class code for adding
the menu.
<img src="images/web-import-menu-step2.png" class="special-img">
<br>
After completing the menu, save the file to your computer. Go to
<b>File</b> > <b>Download</b> > <b>Microsoft Excel (.xls)</b>.
<br>
<img src="images/web-import-menu-step3.png" class="special-img">
<br>
Finally, return to the Kindie software and import the file. Click on
<b>Choose File</b>, select the saved <b>MenuSample.xls</b> file, and
click <b>Open</b>.
<br>
<img src="images/web-import-menu-step4.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 8/Create subject -->
<div id="docs-userguide-website-subject" class="docs-content-inner page-section">
<h3>8/ Creating a new subject</h3>
<p>To create a new subject, follow these steps:</p>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Then select <b>Subject</b>.
<br>
In the Subject window on the right side, you have two options:
<ul>
<li><b>Add New</b>: Add a single subject at a time</li>
<li><b>Import</b>: Upload multiple subjects at once (using the provided
template file)</li>
</ul>
<br>
<img src="images/web-subject-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 3:</span> Subject Information
<ul>
<li>For <b>Add New</b>: Fill in the information for the new subject in the
form <b>(1)</b> and click <b>Add New</b> to add the subject.<br><img
src="images/web-subject-step2a.png" class="special-img"></li>
<li>For <b>Import</b>:
<br>
Choose the English/Vietnamese template file.
<br>
<img src="images/web-subject-step2b.png" class="special-img">
<br>
<b>SubjectSample.xlsx</b> file will automatically download to your computer.
<br>
Open and fill in the subject according to the file template. Pay attention to the
<b>Class Code</b> field and enter the correct class code for adding the
subject.
<img src="images/web-import-subject-step1.png" class="special-img">
<br>
After completing the parent information, save the file to your computer.
<br>
Finally, return to the Kindie software and import the file. Click on
<b>Choose File</b>, select the saved <b>SubjectSample.xls</b> file, and
click <b>Open</b>.
<br>
<img src="images/web-import-subject-step2.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 9/Add student -->
<div id="docs-userguide-website-student" class="docs-content-inner page-section">
<h3>9/ Adding new students</h3>
<p>To add students to a class, follow these steps:</p>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Management</b>.
<br>
Select the <b>branch that contains the class</b> where you want to add students
(e.g., <b>Default Branch</b>).
<br>
In the branch window, click on the <b>class where you want to add students</b>
(e.g., <b>Test 2</b>).
<br>
<img src="images/web-chooseclass-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span>
<br>
In the Student window on the right side, you have two options:
<ul>
<li><b>Add New</b>: Add a single student at a time</li>
<li><b>Import</b>: Upload multiple students at once (using the provided
template file)</li>
</ul>
<br>
<img src="images/web-student-step2.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 3:</span> Student Information
<ul>
<li>For <b>Add New</b>: Fill in the student's information in both forms
<b>Profile</b> and <b>Healthy Info</b> <img
src="images/web-student-step3a.png" class="special-img">
</li>
<li>For <b>Import</b>:
<br>
Choose the English/Vietnamese template file.
<br>
<img src="images/web-student-step3b.png" class="special-img">
<br>
<b>StudentSample.xlsx</b> file will automatically download to your computer.
<br>
Open and fill in the parent information according to the file template.
<br>
<img src="images/web-import-student-step1.png" class="special-img">
<br>
After completing the student information, save the file to your
computer.
<br>
Finally, return to the Kindie software and import the file. Click on
<b>Choose File</b>, select the saved <b>StudentSample.xlsx</b> file, and
click <b>Open</b>.
<br>
<img src="images/web-import-student-step2.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 10/Add parent -->
<div id="docs-userguide-website-parent" class="docs-content-inner page-section">
<h3>10/ Adding new parents</h3>
<p>To add new parents, follow these steps:</p>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Management</b>.
<br>
Select the <b>branch that contains the class</b> where you want to add parents
(e.g., <b>Default Branch</b>).
<br>
In the branch window, click on the <b>class where you want to add parents</b>
(e.g., <b>Test 2</b>).
<br>
<img src="images/web-chooseclass-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span>
<br>
Click on the <b>Parents</b> section.
<br>
In the Parent window on the right side, you have two options:
<ul>
<li><b>Add New</b>: Add a single parent at a time</li>
<li><b>Import</b>: Upload multiple parents at once (using the provided
template file)</li>
</ul>
<br>
<img src="images/web-parent-step2.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 3:</span> Parent Information
<ul>
<li>For <b>Add New</b>: Fill in the parent's information in the form <img
src="images/web-parent-step3a.png" class="special-img"></li>
<li>For <b>Import</b>:
<br>
Choose the English/Vietnamese template file.
<br>
<img src="images/web-parent-step3b.png" class="special-img">
<br>
<b>ParentSample.xlsx</b> file will automatically download to your computer.
<br>
Open and fill in the parent information according to the file template.
<br>
<img src="images/web-import-parent-step1.png" class="special-img">
<br>
After completing the parent information, save the file to your computer.
<br>
Finally, return to the Kindie software and import the file. Click on
<b>Choose File</b>, select the saved <b>ParentSample.xlsx</b> file, and
click <b>Open</b>.
<br>
<img src="images/web-import-parent-step2.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 11/Create health examination schedule -->
<div id="docs-userguide-website-medical" class="docs-content-inner page-section">
<h3>11/ Creating health examination schedule</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
Then select <b>Medical</b>.
<br>
In the Medical window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-medical-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Class Information
<br>
Fill in the information for the health examination schedule in the form
<b>(1)</b>.
<br>
Finally, click on <b>Add</b> to complete.
<br>
<img src="images/web-medical-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 12/Create news -->
<div id="docs-userguide-website-news" class="docs-content-inner page-section">
<h3>12/ Posting new articles and news for the school</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>News</b>.
<br>
Then select <b>All News</b>.
<br>
In the Post window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-news-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Class Information
<br>
Fill in the information for the news in the form <b>(1)</b>.
<br>
Finally, click on <b>Add New</b> to complete.
<br>
<img src="images/web-news-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-website-album" class="docs-content-inner page-section">
<h3>13/ Create Photo Albums</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Information Portal</b>.
<br>
Next, select the <b>Album</b> section. After the <b>Albums</b> window opens,
click on the <b>Add new</b> button to start creating a new album.
<br>
<img src="images/web-album-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Create a new photo
album.
<br>
Fill in the album information in the form <b>(1)</b> and upload the images.
<br>
Finally, click <b>Add new</b> to complete the album creation. Now you have
successfully created a photo album.
<br>
<img src="images/web-album-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-website-notification" class="docs-content-inner page-section">
<h3>14/ Send Notifications to Each Class/Parent/Teacher</h3>
<p>Steps for the school to create and send notifications to parents and teachers.</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Information Portal</b>.
<br>
Next, select the <b>Notifications</b> section.
<br>
<img src="images/web-notification-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the Notifications window on the right side, click on <b>Add new</b>.
<br>
<img src="images/web-notification-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Create content for
the notification.
<br>
Create a new notification using the form <b>(1)</b> and select the appropriate
notification type (scope): <b>All/Parents/Teachers</b>.
<br>
Finally, click <b>Add new</b> to send the notification.
<br>
<img src="images/web-notification-step3.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 13/Create fee & notification invoice -->
<div id="docs-userguide-website-fee" class="docs-content-inner page-section">
<h3>15/ Creating fees & notification invoice</h3>
<p><b>First we need to create a list of fees (or fees that need to be collected).</b>
</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the software main interface, click <b>Fee</b>.
<br>
Select the <b>Fee</b> section.
<br>
In the Fee window, click <b>Add new</b> on the right side.
<br>
<img src="images/web-fee-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Fill in information
about the new fee.
<br>
Please fill in the information for the new fee such as name, amount,...
according to form <b>(1)</b>.
<br>
Finally, click <b>Add</b> to add the fee to the list.
<br>
<img src="images/web-fee-step2.png" class="special-img">
<br>
Once created, the new fee will be displayed in the category as follows:
<br>
<img src="images/web-fee-step3.png" class="special-img">
</li>
</ul>
<p><b>Next, we will create invoices for the objects from the created charges:</b></p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Select the <b>Invoice</b> section.
<br>
In the Invoice window, click <b>Add new</b> on the right side.
<br>
<img src="images/web-invoice-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Add new invoice.
<br>
Invoice type options <b>(1)</b>.
<br>
Fill in the invoice information in section <b>(2)</b>.
<br>
<img src="images/web-invoice-step2.png" class="special-img">
<br>
Select the fee categories to collect from the pre-created list <b>(1)</b>.
<br>
Multiple fees can be collected in 1 invoice, select <b>Add new (2)</b> to add
other categories to the invoice.
<br>
Then select <b>Continue</b> to go to the next step.
<br>
<img src="images/web-invoice-step3.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Check the newly
created invoice.
<br>
Check and edit the invoice information in section <b>(1)</b>.
<br>
Save the invoice to complete invoice creation <b>(2)</b>.
<br>
<img src="images/web-invoice-step4.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 4:</span> Send invoice
notification.
<br>
In the <b>Invoice</b> window there is a list of invoices that have been created.
Here, you will select the invoice you want to send notification to.
<br>
Select <b>Sent to parent</b> or <b>Sent to parent and notification</b> to send
invoice notification to parents.
<br>
<img src="images/web-invoice-step5.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 14/Accounting -->
<div id="docs-userguide-website-accounting" class="docs-content-inner page-section">
<h3>16/ Accounting</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
Select the <b>Invoice</b> section.
<br>
In the Invoices window, in the list of invoices there will be components as
noted in the image.
<br>
<img src="images/web-accounting-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Accounting
operations
<ul>
<li>(1) View information: This will tell you information about invoices as
well as invoice payment status.
<br>
<img src="images/web-accounting-step2a.png" class="special-img">
</li>
<li>(2) Edit: You can change invoice information such as price, payment
method, etc. After completing editing, select <b>Save</b> to save the
invoice or <b>Send Email Notify Invoice</b> to send the notification.
Notify parents of bill changes.
<br>
<img src="images/web-accounting-step2b.png" class="special-img">
</li>
<li>(3) Update payment status: Helps accountants update invoices when
parents make payments. <b>For example</b>: Nguyen Van Luoi's parents pay
1 million tuition in cash in advance, then the accountant will update
the system and note the information as shown below.
<br>
<img src="images/web-accounting-step2c.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 15/Add user -->
<div id="docs-userguide-website-user" class="docs-content-inner page-section">
<h3>17/ Adding new staff members (Teachers, Drivers, Accountants, School Administrators)
</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on the <b>gear icon</b> located in
the top-right corner of the screen.
<br>
Select <b>Users</b>.
<br>
<img src="images/web-user-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the STAFFS window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-class-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Fill in the
information.
<br>
In the Staff window, fill in the information and assign the staff member's
position according to the form <b>(1)</b>.
<br>
Finally, click on <b>Add New</b> to add the staff member.
<br>
<img src="images/web-user-step3.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 16/Messengers -->
<div id="docs-userguide-website-attendance" class="docs-content-inner page-section">
<h3>18/ Attendance Management</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Management</b>.
<br>
Choose the <b>branch containing the class for attendance</b>.
<br>
<img src="images/web-student-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the branch window, click on the <b>class for attendance</b>.
<br>
<img src="images/web-student-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span>
<br>
In the list of students, select the student for attendance.
<br>
<img src="images/web-student-step4.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 4:</span>
<br>
Continue to click on the <b>Attendance</b> section to view the attendance
information of the student.
<br>
Here you can view information about the days the student was absent as well as
manage the pickup/drop-off times for students.
<img src="images/web-attendance.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-website-bus" class="docs-content-inner page-section">
<h3>19/ Manage buses and assign students to pick up students</h3>
<p><b>Create new bus information</b></p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the software main interface, click on <b>the gear icon</b> in the right
corner of the screen.
<br>
Select <b>the Bus</b> section .
<br>
<img src="images/web-addbus-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
In the bus window that appears, select <b> Add new</b>.
<br>
<img src="images/web-addbus-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Điền thông tin.
<br>
Please fill in the new bus information as well as the driver's name<b>(1)</b>.
<br>
Finally, click <b>Add new</b> to add the bus to the system.
<br>
<img src="images/web-addbus-step3.png" class="special-img">
</li>
</ul>
<p><b>Assign students to pick up and drop off buses</b></p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
In the list of buses, click on the bus icon of the bus you want to assign.
<br>
<img src="images/web-bus-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
In the window a list of students will appear, select <b>(2)</b>students the bus
will pick up. We can quickly search for students in the search bar <b>(1)</b>.
<br>
Finally, click <b>Update</b> to add students to the list of buses that will pick
up.
<img src="images/web-bus-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-website-messengers" class="docs-content-inner page-section">
<h3>20/ Messengers (Exchange Information, Chat with Classes)</h3>
<ul>Messengers
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Messengers</b>.
<br>
<img src="images/web-messengers-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the opened window, choose the conversation you want to exchange information
with <b>(1)</b>.
<br>
In the chat interface, enter the content you want to discuss in the <b>Input
message</b> section and can send images or attached files.
<br>
Finally, select the green arrow to send your message.
<br>
<img src="images/web-messengers-step2.png" class="special-img">
</li>
</ul>
</div>
<!-- 18/Change class -->
<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">
<h3>21/ Change class</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy (1)</b>.
<br>
Then select <b>Change Class (2)</b>.
<br>
Use the search bar and filter the list to find students faster <b>(3)</b>.
<br>
After finding the student you need to transfer, select that student <b>(4)</b>.
<br>
Next, in section <b>(5)</b>, select the class the student will be transferred
to.
<br>
Click <b>Move</b> to complete <b>(6)</b>.
<br>
<img src="images/web-changeclass-step1.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 19/Upload media -->
<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">
<h3>22/ Upload media</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Academy</b>.
<br>
In the Medias window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-medias-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Upload medias
<br>
Select the file to upload in section. Note that the file has a maximum upload
file size 20MB.
Enter image caption content in the <b>Caption</b> box.
<br>
Select <b>Add new (2)</b> to complete the upload.
<br>
<img src="images/web-medias-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- Mobile App -->
<div id="docs-userguide-mobile-setup" class="docs-content-inner page-section">
<h1>Guide for Mobile App for Parents, Teachers, and Drivers</h1>
</div>
<div id="docs-userguide-mobile-login" class="docs-content-inner page-section">
<h3>1/ Installation & Login to the Kindie App on your mobile device</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span> Install Kindie
<br>
You can easily find and download the Kindie app from the App Store and Google
Play Store.
<br>
<a href=""></a>
<a href=""></a>
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Login
<br>
Open the Kindie app that you have installed.
<br>
Choose your role as <b>Parent/Teacher/Driver</b>.
<br>
Enter your <b>Username</b> and <b>Password</b> provided by the school.
<br>
Click <b>LOGIN</b> to access the app.
<br>
<img src="images/app-login.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-account" class="docs-content-inner page-section">
<h3>2/ Change Password and Update Personal Information</h3>
<p>After installing and successfully logging into the Kindie app, we will proceed to
change the password for your account and update some information.</p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the app screen, tap on the <b>3-line icon</b> located on the left side of the
screen.
<br>
In the menu bar that appears, select <b></b>.
<br>
<img src="images/app-teacher-home.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Fill in user
information
<br>
Enter the required information below.
<br>
Press <b>SAVE CHANGES</b> to save the information.
<br>
<img src="images/app-information1.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Change the password
for your account
<br>
First, tap on <b>CHANGE PASSWORD</b>
<br>
<img src="images/app-information2.png" class="special-img-iphone">
<br>
Enter your current password in the <b>Old Password</b> field and enter the new
password you want to change in the two <b>New Password</b> and <b>Confirm
Password</b> fields.
<br>
Finally, press <b>SAVE CHANGES</b> to save the password.
<br>
<img src="images/app-password.png" class="special-img-iphone">
</li>
</ul>
</div>
<div id="docs-userguide-mobile-parent" class="docs-content-inner page-section">
<h2>For Parents</h2>
</div>
<div id="docs-userguide-mobile-absence" class="docs-content-inner page-section">
<h3>1/ Requesting Leave for the Child</h3>
<p></p>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the <b>Home screen</b> of the app, select <b>Request Leave</b>.
<br>
<img src="images/app-parent-home.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Fill in the leave
request information.
<br>
Parents will enter the leave details for their child, including the
<b>duration</b> and <b>reason</b>.
<br>
Finally, click <b>SEND</b> to submit the leave request to the teacher.
<br>
<img src="images/app-parent-absence.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-foods" class="docs-content-inner page-section">
<h3>2/ Viewing the Menu</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the <b>Home screen</b> of the app, select <b>Menu</b>.
<br>
<img src="images/app-parent-home2.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Parents can view the menu for each meal of the day for their child. They can
also review past menus from previous days, helping parents monitor their child's
nutrition at school.
<br>
<img src="images/app-parent-foods.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-fee" class="docs-content-inner page-section">
<h3>3/ Checking Tuition Fee</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the <b>Home screen</b> of the app, select <b>Tuition Fee</b>.
<br>
<img src="images/app-parent-home3.png" class="special-img-iphone">
</li>
<p>Currently updating.</p>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-payment" class="docs-content-inner page-section">
<h3>4/ Tuition Fee Payment</h3>
<p>Updating.</p>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-follow" class="docs-content-inner page-section">
<h3>5/ Following Children's Activities</h3>
<ul>
<li class="special-li">On the <b>Home screen</b> of the app, select <b>Follow</b>.
<br>
<img src="images/app-parent-home5.png" class="special-img-iphone">
</li>
<li class="special-li">Parents can track the time when their child enters/exits the
classroom.
<br>
<img src="images/app-parent-follow.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-parent-messengers" class="docs-content-inner page-section">
<h3>6/ Online Exchange with Teachers</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1: </span>
On the <b>Home screen</b> of the app, select the <b>Messages</b> section at the
bottom.
<br>
<img src="images/app-parent-home.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2: </span>
Here, choose the conversation you want to engage in.
<br>
<img src="images/app-parent-messengers1.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 3: </span>
In the chat interface, enter the content you want to discuss in the <b>Input
message</b> section and can send images or attached files.
<br>
Finally, select the green arrow to send your message.
<br>
<img src="images/app-parent-messengers2.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-teacher" class="docs-content-inner page-section">
<h2>For Teachers</h2>
</div>
<div id="docs-userguide-mobile-schedule" class="docs-content-inner page-section">
<h3>1/ View Class Schedule</h3>
<p>With the Kindie app, teachers can view the class schedule for the assigned teaching
class and easily check them through the application.</p>
<ul>
<li class="special-li">On the home screen, select the class you want to check the
schedule for. Tap on <b>Class Schedule</b>.
<br>
<img src="images/app-teacher-home1.png" class="special-img-iphone">
</li>
<li class="special-li">Teachers can view the weekly class schedule with specific
time slots and activities.
<br>
<img src="images/app-parent-schedule.png" class="special-img-iphone">
</li>
</ul>
<p></p>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-attendance" class="docs-content-inner page-section">
<h3>2/ Attendance</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1: </span>Select the class
for attendance
<br>
On the Home screen, Teachers should choose the class they want to take
attendance for.
<br>
Tap on <b>Attendance</b>.
<br>
<img src="images/app-teacher-home2.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2: </span>Take Attendance
<ul>
<li>Take <b>attendance for arrival</b></li>
<br>
In the "In" section, enable the function to confirm that students have
arrived in class.
<br>
Then confirm who brought the student to class (parent/driver) and select
<b>Update</b>.
<br>
<img src="images/app-teacher-attendance-in1.png" class="special-img-iphone">
<img src="images/app-teacher-attendance-in2.png" class="special-img-iphone">
<br>
Finally, select <b>SEND NOTIFICATION</b> to send the attendance
notification.
<br>
<img src="images/app-teacher-attendance-in3.png" class="special-img-iphone">
</li>
<li>Take <b>attendance for leaving</b></li>
<br>
In the "Out" section, enable the function to confirm that students have left class.
<br>
Then confirm who picked up the student (parent/driver), add additional notes in the
<b>Note</b> section (if any), and select <b>Update</b>.
<br>
<img src="images/app-teacher-attendance-out1.png" class="special-img-iphone">
<img src="images/app-teacher-attendance-out2.png" class="special-img-iphone">
<br>
Finally, select <b>SEND NOTIFICATION</b> to send the attendance notification.
<br>
<img src="images/app-teacher-attendance-out3.png" class="special-img-iphone">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-teacher-messengers" class="docs-content-inner page-section">
<h3>3/ Online Communication</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1: </span>
On the <b>Home screen</b> of the app, select the <b>Messages</b> section at the
bottom.
<br>
<img src="images/app-teacher-home4.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2: </span>
Choose the Class you want to communicate with.
<br>
<img src="images/app-teacher-messengers.png" class="special-img-iphone">
<img src="images/app-teacher-messengers1.png" class="special-img-iphone">
<br>
After selecting the class, Teachers will receive a corresponding list of
conversations for that class.
<br>
Teachers can also view information about the conversations in the contact
section and choose the conversation they want to discuss.
<br>
<img src="images/app-contact1.png" class="special-img-iphone">
<img src="images/app-contact2.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 3: </span>
In the chat interface, enter the content you want to discuss in the <b>Input
message</b> section and can send images or attached files.
<br>
Finally, select the green arrow to send your message as a Teacher.
<br>
<img src="images/app-teacher-messengers2.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-medical" class="docs-content-inner page-section">
<h3>4/ View student health information</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span> Select the class to
view information
<br>
On the home screen, choose the class for which you want to view information.
<br>
Tap on <b>Health</b>.
<br>
<img src="images/app-teacher-home3.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span> Choose the student
to view information
<br>
Select the student whose health information you want to view.
<br>
<img src="images/app-student.png" class="special-img-iphone">
<br>
With the information provided by the system, teachers can have an overview of
students' health status to plan and organize suitable activities.
<br>
<img src="images/app-medical1.png" class="special-img-iphone">
<img src="images/app-medical2.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-medias" class="docs-content-inner page-section">
<h3>5/ Centralized Media Management</h3>
<ul>
<li class="special-li">
On the Home screen, Teachers should select the <b>Notification</b> section in
the bottom right corner of the screen.
<br>
<img src="images/app-teacher-home5.png" class="special-img-iphone">
</li>
<li class="special-li">
Teachers can interact by liking and commenting on the content.
<br>
<img src="images/app-medias.png" class="special-img-iphone">
<img src="images/app-medias2.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-driver" class="docs-content-inner page-section">
<h2>For Drivers</h2>
</div>
<div id="docs-userguide-mobile-shuttle" class="docs-content-inner page-section">
<h3>Attendance and Status Update When Transporting Students</h3>
<ul>
<li class="special-li"><span class="special-span">Check-in at School</span>
<br>
In the "In" section, turn on the function to confirm that the student has
arrived at school.
<br>
Then confirm the person who brought the student to school (parent/driver) and
select <b>Update</b>.
<br>
<img src="images/app-driver-in1.png" class="special-img-iphone">
<img src="images/app-teacher-attendance-in2.png" class="special-img-iphone">
<br>
Finally, select <b>SEND NOTIFICATION</b> to send a confirmation notification
that the student has been picked up.
<br>
<img src="images/app-driver-in3.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Check-out from School</span>
<br>
In the "Out" section, turn on the function to confirm that the student has left
school.
<br>
Then confirm the person picking up the student at home, you can add a note in
the <b>Note</b> section (if any), and select <b>Update</b>.
<br>
<img src="images/app-driver-out1.png" class="special-img-iphone">
<img src="images/app-teacher-attendance-out2.png" class="special-img-iphone">
<br>
Finally, select <b>SEND NOTIFICATION</b> to send a notification that the student
has arrived home.
<br>
<img src="images/app-driver-out3.png" class="special-img-iphone">
</li>
</ul>
</div>
</div>
<!-- END HUONG DAN SU DUNG -->
</div>
</div>
<script>
jQuery(document).ready(function ($) {
$("#docs").tabs({
show: { effect: "fade", duration: 400 },
activate: function (event, ui) {
$('html,body').stop(true).animate({
'scrollTop': $('.docs-content').offset().top - 40
}, 1250, 'easeInOutExpo');
}
});
$('#icons-filter').typing({
stop: function (event, $elem) {
var filterValue = $elem.val(),
count = 0;
if ($elem.val()) {
$(".docs-icons li").each(function () {
if ($(this).text().search(new RegExp(filterValue, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++
}
});
if (count > 0) {
$('#icons-filter-result').html('<strong>' + count + '</strong> Icons Found.');
} else {
$('#icons-filter-result').html('No Icons Found.');
}
} else {
$(".docs-icons li").show();
$('#icons-filter-result').html('');
}
count = 0;
},
delay: 500
});
});
</script>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>