| Server IP : 14.225.204.176 / Your IP : 216.73.216.6 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/ |
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 academicsessions</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-changeclass">Transferclasses</a></li>
<li><a href="#" data-href="#docs-userguide-website-medical">Create health checkups</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-user">Add user</a></li>
<li><a href="#" data-href="#docs-userguide-website-news">Create articles, news</a></li>
<li><a href="#" data-href="#docs-userguide-website-notification">Send notifications</a></li>
<li><a href="#" data-href="#docs-userguide-website-event">Create event</a></li>
<li><a href="#" data-href="#docs-userguide-website-album">Create albums</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-report">View report</a></li>
<li><a href="#" data-href="#docs-userguide-website-bus">Manage school bustransportation</a></li>
<li><a href="#" data-href="#docs-userguide-website-messengers">Messengers</a></li>
<li><a href="#" data-href="#docs-userguide-website-medias">Upload medias</a></li>
<li><a href="#" data-href="#docs-userguide-website-courses">Create courses</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-mobile-parent"><u><b>Parents</b></u></a></li>
<li><a href="#" data-href="#docs-userguide-mobile-foods">View menu</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-timetable">View timetable</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-health">View health</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-fee">Check tuition fees</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-news">View news</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-medicine">View medicine</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-album">View activity images</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-dayoff">Check leave application</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-fee">View tuition</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-medicine">Medicine</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-album">Create activity album</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-attendance">Attendance</a></li>
<li><a href="#" data-href="#docs-userguide-mobile-teacher-messengers">Online exchange with teachers</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/ Set up 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 <i class="fa fa-list"></i> in the top right corner of the screen.
<br>
Select <b>Settings</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>
<img src="images/school-setting.png" class="special-img">
<br>
<ol>
<li><b>General</b></li>
<ul>
<li><b>Menu settings</b>: Divide the time frames of the day</li>
<ul>
<p class="btn btn-danger btn-sm icon-btn ml-2"><i class="fas fa-trash"></i></p> Delete time frame
,
<p class="btn btn-danger btn-sm icon-btn ml-2"><i class="fas fa-plus"></i></p> Add time frame
</ul>
<li><b>Payment Method Settings</b>: Select and fill in the information of the payment methods that you support.</li>
<li><b>Other Settings</b></li>
<ul>
<li><b>Weekend</b>: Divide the time frames of the day</li>
<li><b>Maximum size of file upload (MB)</b>: Divide the time frames of the day</li>
<li><b>Turn on shuttle bus on mobile application</b>: If your school has a bus that takes students to school, turn it on to track the driver's pick-up/drop-off times.</li>
<li><b>Enable to modify time attendance on web</b>: Divide the time frames of the day</li>
</ul>
</ul>
<li><b>Web</b>: Set up information on Website</li>
<li><b>App</b>: Set up information on mobile app</li>
<li><b>Web Menu</b>: Set up login screen interface</li>
<li><b>Currency</b>: Add the currency the school uses for payment
<br>
Select <b>Add new</b> then fill in the currency information and select <b>Add</b>
<br>
<img src="images/currency.png" class="special-img">
</li>
</ol>
</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>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on the <i class="fa fa-list"></i> 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>
<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>
<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/Change class -->
<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">
<h3>7/ 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>
<!-- 8/Create health examination schedule -->
<div id="docs-userguide-website-medical" class="docs-content-inner page-section">
<h3>8/ 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>
<!-- 9/Create menu -->
<div id="docs-userguide-website-foods" class="docs-content-inner page-section">
<h3>9/ Creating a new menu</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click <b>Academy</b>.
<br>
Then select <b>Foods</b>.
<!-- <br>
<img src="images/web-foods-step1.png" class="special-img"> -->
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the Foods window on the right side, there are two options:
<ul>
<li><b>Add new</b>: Add a single food item.</li>
<li><b>Action > Import data</b>: Upload multiple food items at once (using the provided file template).</li>
</ul>
<img src="images/web-foods-step1.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Step 3:</span> Food Information.
<ul>
<li>For <b>Add new</b>: Fill in all the food information in the form <b>(1)</b> and click <b>Add new</b> to save the food item.
<br><img src="images/web-foods-step2a.png" class="special-img">
</li>
<li>For <b>Import data</b>:
<br>
Select the English/Vietnamese file template.
<br>
<img src="images/web-foods-step2b.png" class="special-img">
<br>
Open the downloaded excel file.
<br>
Refer to the <b>Manual</b> sheet then fill in the menu information in the <b>FoodData</b> sheet.
<br>
<img src="images/web-import-menu-step1.png" class="special-img">
<br>
Finally, return to the website and import the file under <b>Choose File</b>.
<br>
<img src="images/web-import-menu-step2.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 10/Create subject -->
<div id="docs-userguide-website-subject" class="docs-content-inner page-section">
<h3>10/ Creating a new subject</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click <b>Academy</b>.
<br>
Then select <b>Subject</b>.
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
In the Subject window on the right side, there are two options:
<ul>
<li><b>Add new</b>: Add a single subject item.</li>
<li><b>Action > Import data</b>: Upload multiple subject items at once (using the provided file template).</li>
</ul>
<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 all the subject information in the form <b>(1)</b> and click <b>Add new</b> to save the subject item.
<br><img src="images/web-subject-step2a.png" class="special-img">
</li>
<li>For <b>Import data</b>:
<br>
Select the English/Vietnamese file template.
<br>
<img src="images/web-subject-step2b.png" class="special-img">
<br>
Open the downloaded excel file.
<br>
Refer to the <b>Manual</b> sheet then fill in the menu information in the <b>SubjectData</b> sheet.
<br>
<img src="images/web-import-schedule-step1.png" class="special-img">
<br>
Finally, return to the website and import the file under <b>Choose File</b>.
<br>
<img src="images/web-import-schedule-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 student.
<br>
In the branch window, click on the <b>class where you want to add student.</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 Students window on the right side, there are two options:
<ul>
<li><b>Add new</b>: just add one student</li>
<li><b>Action > Import data</b>: Upload multiple students at once (using the provided file template).</li>
</ul>
<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>, <b>Healthy Info</b> and click <b>Add new</b> to save information.
<br>
<img src="images/web-student-step3a.png" class="special-img">
</li>
<li>For <b>Import</b>:
<br>
Select the English/Vietnamese file template.
<br>
<img src="images/web-student-step3b.png" class="special-img">
<br>
Open the downloaded excel file.
<br>
Refer to the <b>Manual</b> sheet then fill in the students' information on the <b>StudentData</b> sheet.
<br>
<img src="images/web-import-student-step1.png" class="special-img">
<br>
Finally, return to the website and import the file under <b>Choose File</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 parent.
<br>
In the branch window, click on the <b>class where you want to add parent.</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>
Select the <b>Parents</b> tab, there are two options:
<ul>
<li><b>Add new</b>: just add one parent</li>
<li><b>Action > Import data</b>: Upload multiple parents at once (using the provided file template).</li>
</ul>
<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
<br>
<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>
Open the downloaded excel file.
<br>
Refer to the <b>Manual</b> sheet then fill in the parents' information on the <b>ParentData</b> sheet.
<br>
<img src="images/web-import-parent-step1.png" class="special-img">
<br>
Finally, return to the website and import the file under <b>Choose File</b>.
<br>
<img src="images/web-import-parent-step2.png" class="special-img">
</li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<!-- 11/Add user -->
<div id="docs-userguide-website-user" class="docs-content-inner page-section">
<h3>11/ Add user (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 <i class="fa fa-list"></i> 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-user-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>
<!-- 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>
<!-- 13/Create notification -->
<div id="docs-userguide-website-notification" class="docs-content-inner page-section">
<h3>13/ 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>
<!-- 14/Create event -->
<div id="docs-userguide-website-event" class="docs-content-inner page-section">
<h3>14/ Create event</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Portal</b>.
<br>
Then select <b>Event</b>.
<br>
In the Medical window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-event-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span>
<br>
fill in all information in the form
<b>(1)</b>.
<br>
Finally, click on <b>Add New</b> to complete.
<br>
<img src="images/web-event-step2.png" class="special-img">
</li>
</ul>
</div>
<!-- 15/Create album -->
<div id="docs-userguide-website-album" class="docs-content-inner page-section">
<h3>15/ Create 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>
<!-- 16/Create fee & notification invoice -->
<div id="docs-userguide-website-fee" class="docs-content-inner page-section">
<h3>16/ 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>
<!-- 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>
<!-- 17/View report -->
<div id="docs-userguide-website-report" class="docs-content-inner page-section">
<h3>17/ View report</h3>
<p>
To view reports, select the <b>Report</b> section.
<br>
Select the report you want to view here there is report on <b>Attendance</b> and <b>Expenses</b>
<br>
<img src="images/web-report-step1.png" class="special-img">
</p>
<ul>
<li class="special-li"><span class="special-span">Attendance Report:</span>
<br>
Select the class and the time period you want to view the attendance report
for <b>(1)</b>.
<br>
After selecting, click <b>Filter (2)</b> to view the report.
<br>
<img src="images/web-report-step2.png" class="special-img">
</li>
<li class="special-li"><span class="special-span">Expense Report:</span>
<br>
<img src="images/web-report-step3.png" class="special-img">
</li>
</ul>
<p>You can export the report by selecting <b>Action > Export</b></p>
</div>
<div class="line"></div>
<!-- 18/Manage buses -->
<div id="docs-userguide-website-bus" class="docs-content-inner page-section">
<h3>18/ 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 <i class="fa fa-list"></i> 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>
<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.
<br>
<img src="images/web-bus-step2.png" class="special-img">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 19/Messengers -->
<div id="docs-userguide-website-messengers" class="docs-content-inner page-section">
<h3>19/ 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>
<div class="line"></div>
<!-- 20/Upload medias -->
<div id="docs-userguide-website-changeclass" class="docs-content-inner page-section">
<h3>20/ Upload medias</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>
<!-- 21/Create courses -->
<div id="docs-userguide-website-courses" class="docs-content-inner page-section">
<h3>21/ Create courses</h3>
<ul>
<li class="special-li">
<span class="special-span">Step 1:</span>
<br>
On the main interface of the software, click on <b>Courses</b>.
<br>
Then select <b>List</b>.
<br>
In the Courses window on the right side, click on <b>Add New</b>.
<br>
<img src="images/web-courses-step1.png" class="special-img">
</li>
<li class="special-li">
<span class="special-span">Step 2:</span> Courses Information
<br>
Fill in the information for the courses in the form <b>(1)</b>.
<br>
Finally, click on <b>Save</b> to complete.
<br>
<img src="images/web-courses-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>
<!-- 1/Login -->
<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>
<!-- Change password & update personal information -->
<!-- <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-gv-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-thongtin1.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-thongtin2.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>
<!-- 1/View menu -->
<div id="docs-userguide-mobile-foods" class="docs-content-inner page-section">
<h3>1/ Viewing menu</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Menu</b>.
<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-menu-step1.png" class="special-img-iphone">
<img src="images/app-menu-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 2/View Timetable -->
<div id="docs-userguide-mobile-timetable" class="docs-content-inner page-section">
<h3>2/ Viewing the timetable</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Timetable</b>.
<br>
Parents can view the timetable of the day for their child. They can
also review past timetable from previous days.
<br>
<img src="images/app-timetable-step1.png" class="special-img-iphone">
<img src="images/app-timetable-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 3/Request leave -->
<div id="docs-userguide-mobile-absence" class="docs-content-inner page-section">
<h3>3/ Leave of absence</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Day off</b>.
<br>
Select the <b>+</b> icon to create a new absence.
<br>
You can see your absence history in section <b>(*)</b>.
<br>
Parents will enter the leave details for their child, including the
<b>Timeline</b> and <b>Reason</b>.
<br>
Finally, click <b>Send</b> to submit the absence to the teacher.
<br>
<img src="images/app-dayoff-step1.png" class="special-img-iphone">
<img src="images/app-dayoff-step2.png" class="special-img-iphone">
<img src="images/app-dayoff-step3.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 4/View Health -->
<div id="docs-userguide-mobile-health" class="docs-content-inner page-section">
<h3>4/ Viewing the health</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Health</b>.
<br>
Parents can view full information about their children's health.
<br>
<img src="images/app-health-step1.png" class="special-img-iphone">
<img src="images/app-health-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 5/Check fee -->
<div id="docs-userguide-mobile-fee" class="docs-content-inner page-section">
<h3>5/ Checking tuition fee</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Tuition</b>.
<br>
Select the fee to pay <b>(3)</b>
<br>
<img src="images/app-tuition-step1.png" class="special-img-iphone">
<img src="images/app-tuition-step2.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
Review tuition details
<br>
Parents can review detailed information about the tuition fee, including
the amount due, payment deadline, and any outstanding balance.
<br>
Then select the bank you want to make payment to in <b>List Of Bank (5)</b> and select <b>Continue to Pay</b>
<br>
<img src="images/app-tuition-step3.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 3:</span>
<br>
Proceed to payment according to the payment information displayed on the screen. After successful payment, select <b>I have transferred money (8)</b> to confirm.
<br>
<img src="images/app-tuition-step4.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 6/View News -->
<div id="docs-userguide-mobile-news" class="docs-content-inner page-section">
<h3>6/ Viewing news</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>News</b>.
<br>
Parents can view the latest news and updates from the school.
<br>
Select the news you are interested in to see the full content of that news.
<br>
<img src="images/app-news-step1.png" class="special-img-iphone">
<img src="images/app-news-step2.png" class="special-img-iphone">
<img src="images/app-news-step3.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 7/Medicine -->
<div id="docs-userguide-mobile-medicine" class="docs-content-inner page-section">
<h3>7/ Medicine</h3>
<p></p>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Medicine</b>.
<br>
Select the <b>+</b> icon to create a new medicine.
<br>
You can see your medicine history in section <b>History</b>.
<br>
Parents will enter the medicine details for their child, including the
<b>Time</b>, <b>Content</b>, <b>Add photo</b>.
<br>
Finally, click <b>Send</b> to submit the absence to the teacher.
<br>
<img src="images/app-medicine-step1.png" class="special-img-iphone">
<img src="images/app-medicine-step2.png" class="special-img-iphone">
<img src="images/app-medicine-step3.png" class="special-img-iphone">
</div>
<!-- 8/View Album -->
<div id="docs-userguide-mobile-album" class="docs-content-inner page-section">
<h3>8/ Viewing activity images</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Activity Images</b>.
<br>
You can view photo albums of your children's activities at school.
<br>
Select the photo album you are interested. Here you can view and interact by dropping reactions, comments on the album.
<br>
<img src="images/app-album-step1.png" class="special-img-iphone">
<img src="images/app-album-step2.png" class="special-img-iphone">
<img src="images/app-album-step3.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 9/Follow -->
<div id="docs-userguide-mobile-follow" class="docs-content-inner page-section">
<h3>9/ Following children's activities</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Tracking</b>.
<br>
Parents can track the time when their child enters/exits the classroom.
<br>
<img src="images/app-follow-step1.png" class="special-img-iphone">
<img src="images/app-follow-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 10/Chat-->
<div id="docs-userguide-mobile-parent-messengers" class="docs-content-inner page-section">
<h3>10/ Online exchange with teachers</h3>
On the <b>Home screen</b> of the app, select the <b>Messages</b>.
<br>
Here, choose the conversation you want to engage in.
<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/app-chat-step1.png" class="special-img-iphone">
<img src="images/app-chat-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-teacher" class="docs-content-inner page-section">
<h2>For Teachers</h2>
</div>
<!-- 1/Check leave application -->
<div id="docs-userguide-mobile-dayoff" class="docs-content-inner page-section">
<h3>1/ Check leave application</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Day off</b>.index.html
<br>
You can manage leave requests from parents here.
<br>
You will approve leave requests by selecting Allow or Not Allow, the system will send your response notification to parents.
<br>
<img src="images/app-allow-step1.png" class="special-img-iphone">
<img src="images/app-allow-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 2/Check fee -->
<div id="docs-userguide-mobile-teacher-fee" class="docs-content-inner page-section">
<h3>2/ View tuition</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Tuition</b>.
<br>
Select the student you want to view <b>(3)</b>
<br>
<img src="images/app-tuition-step1.png" class="special-img-iphone">
<img src="images/app-tuition-step02.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>
<br>
Here the student's expenses are displayed. Select an expense to see details about that expense.
<br>
<img src="images/app-tuition-step03.png" class="special-img-iphone">
<img src="images/app-tuition-step04.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 3/Medicine -->
<div id="docs-userguide-mobile-teacher-medicine" class="docs-content-inner page-section">
<h3>3/ Medicine</h3>
<p></p>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Medicine</b>.
<br>
You can see the medicine sent by parents.
<br>
<img src="images/app-medicine-step1.png" class="special-img-iphone">
<img src="images/app-medicine-step02.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 4/Create Activity Images -->
<div id="docs-userguide-mobile-teacher-album" class="docs-content-inner page-section">
<h3>4/ Create activity album</h3>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Activity Images</b>.
<br>
You can view photo albums of your children's activities at school.
<br>
Select the <b>+</b> icon to create a new album.
<br>
<img src="images/app-album-step1.png" class="special-img-iphone">
<img src="images/app-album-step02.png" class="special-img-iphone">
</div>
<div class="line"></div>
<!-- 5/Attendance -->
<div id="docs-userguide-mobile-teacher-attendance" class="docs-content-inner page-section">
<h3>5/ Attendance</h3>
<ul>
<li class="special-li"><span class="special-span">Step 1:</span>Choose the class
for attendance
<br>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Attendance</b>.
<br>
Select the class for attendance <b>(3)</b>
<br>
<img src="images/app-attendance-step01.png" class="special-img-iphone">
<img src="images/app-attendance-step02.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>Take Attendance
<br>
You can take attendance for your class here.
<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>Confirm</b>.
<br>
And select <b>Send notification</b> to send attendance notification.
<br>
<img src="images/app-teacher-attendance-in.png" class="special-img-iphone">
<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>Confirm</b>.
<br>
Finaly, select <b>Send notification</b> to send attendance notification.
<br>
<img src="images/app-teacher-attendance-out.png" class="special-img-iphone">
</li>
</ul>
</div>
<div class="line"></div>
<!-- 6/Messengers -->
<div id="docs-userguide-mobile-teacher-messengers" class="docs-content-inner page-section">
<h3>6/ Online exchange with teachers</h3>
On the <b>Home screen</b> of the app, select the <b>Messages</b>.
<br>
Select the class/parent you want to chat.
<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/app-chat-step01.png" class="special-img-iphone">
<img src="images/app-chat-step2.png" class="special-img-iphone">
</div>
<div class="line"></div>
<div id="docs-userguide-mobile-driver" class="docs-content-inner page-section">
<h2>For Drivers</h2>
</div>
<!-- 1/Attendance and Status Update When Transporting Students -->
<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">Step 1:</span>Choose the class
for attendance
<br>
On the <b>Home screen</b> of the app, select <b>Function</b> > <b>Attendance</b>.
<br>
Select the class for attendance <b>(3)</b>
<br>
<img src="images/app-driver-step01.png" class="special-img-iphone">
</li>
<li class="special-li"><span class="special-span">Step 2:</span>Take Attendance
<br>
You can take attendance for your class here.
<br>
In the "In" section, enable the function to confirm the student you just picked up.
<br>
And select <b>Send notification</b> to send attendance notification.
<br>
<img src="images/app-driver-in.png" class="special-img-iphone">
<br>
In the "Out" section, enable the function to confirm the student you just dropped off.
<br>
Finaly, select <b>Send notification</b> to send attendance notification.
<br>
<img src="images/app-driver-out.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>