amitxshukla/gps-mobile-tracking-app

Angular 9.0 HTML Bootstrap NodeJS and MYSQL App - Store GPS Mobile Browser Location

- If you like this project, please consider giving it a star (*) and follow me at GitHub & YouTube.

HTML Bootstrap Angular 9.0 MYSQL NodeJS CRUD Operation

GPS Mobile Location Tracking App

send an email to [email protected] for Pro version download. This repository is updated to Angular 9.0

Video Tutorials Link!

In this app, I am going to demostrate how to use most common, popular and widely used technologies.
I believe, HTML, CSS, Javascript and Bootstrap are still used in 90% of iOS and Android we see today in market.
And MYSQL is no doubt king of all databases.
I am also going to make use of advance Angular 7 framework at front end which will connect to MYSQL database at the backend through NOdeJS Javascript engine.

My Objective is to show how to make a complete CRUD operations in MYSQL & Angular 9.
However, instead of making a simple manual or tutorial, I am going to demostrate this in a real-life app.
One other reason, I want to show CRUD in an app is, because writing CRUD in production is very different than what do you see in tutorials or manuals.
In real-life App, each of the CRUD operations should be authenticated and authroized before it's allowed to access database and perform any operations.
Each and every database call, whether is read or write, should be properly authenticated and authorized based on invididual user privileges and busines operations.
For example, User can only update their own settings and admin can update someone else password.

Tools: 

front-end: Angular 9.0, HTML CSS JS & Bootstrap
back-end: MYSQL
middleware: JWT, CORS, NodeJS, Express etc.

Let's get started :-

Front end :-

At first, We are going to work on a static website using HTML, CSS and Bootstrap.
We are going to use part of this website in our Angular App.
If you are using VisualCode editor, please install a live-server extension.
Otherwise, you can use any webserver to host your website.
Now, let's create index.html, login.html, signup.html, aboutus.html, dashboard.html, reports.html and settings.html and host this to your webserver.
At this point, we only want to make sure that individual html pages work fine only, these pages don't need to be connected or have any business logic because we are going to write all business, routing and other logic in Angular 7.

Before we start, Please make sure you have latest version of node js installed.
Let's head out to https://nodejs.org/en/ and grab latest nodejs.
Once you have nodejs installed, open command prompt/terminal window.
$ node -v // make sure, this command comes back with a node version
$ npm -v // make sure, this command comes back with a npm version

$ npm install -g @angular/cli
$ mkdir app
$ cd app
$ mkdir client
$ mkdir server
$ cd client
$ ng new GPS-Mobile-Tracker
$ cd GPS-Mobile-Tracker
$ ng serve

Back end :-

$ cd server
$ npm init
$ npm install --save nodemon cors express dotenv jsonwebtoken mysql bcrypt body-parser
$ nodemon app

MYSQL Tables

-- Table structure for table user

CREATE TABLE user ( name varchar(30) NOT NULL, email varchar(50) NOT NULL, password varchar(300) NOT NULL, question varchar(100) DEFAULT NULL, answer varchar(100) DEFAULT NULL, createdAt datetime NOT NULL, updatedAt datetime NOT NULL, PRIMARY KEY (email) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

-- -- Table structure for table usergps

CREATE TABLE usergps ( email varchar(100) NOT NULL, lat varchar(10) NOT NULL, long varchar(10) NOT NULL, createdAt datetime NOT NULL, PRIMARY KEY (email,createdAt) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

gps-mobile-tracking-app's Issues

Error 500

Hello,
Thanks for your script,
I was able to use to createUser and Login User, Update User but I'm getting error 500 for other post and get eg

http://localhost:3000/setlocation
POST http://localhost:3000/setlocation net::ERR_EMPTY_RESPONSE

I've been trying to figure it out for past days but it is not working

HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "Internal Server Error", url: "http://localhost:3000/setlocation", ok: false, …}
error: "↵↵↵↵<title>Error</title>↵↵↵

ReferenceError: userEmail is not defined
    at C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\app.js:81:5
    at Layer.handle [as handle_request] (C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\express\lib\router\route.js:137:13)
    at C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\body-parser\lib\read.js:130:5
    at invokeCallback (C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\raw-body\index.js:224:16)
    at done (C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\raw-body\index.js:213:7)
    at IncomingMessage.onEnd (C:\Users\Saint Steven\Desktop\NativeScript\GPS-Mobile-Tracking-App\server\node_modules\raw-body\index.js:273:7)
    at IncomingMessage.emit (events.js:188:13)
    at endReadableNT (_stream_readable.js:1129:12)
    at process.internalTickCallback (internal/process/next_tick.js:72:19)

↵↵↵"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:3000/setlocation: 500 Internal Server Error"
name: "HttpErrorResponse"
ok: false
status: 500
statusText: "Internal Server Error"
url: "http://localhost:3000/setlocation"
proto: HttpResponseBase

password-hash-and-salt is creating 270 char long password ..how to restrict it to 20 or 40??

CORS blocked

the tutorial is great help but im getting this error:

Access to XMLHttpRequest at 'http://localhost:3000/signup' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

could you please help me how to solve it/

Post api is not running when i submit the user add form

core.js:6185 ERROR TypeError: Cannot read property 'post' of undefined
at BackendService.setUser (backend.service.ts:59)

this is my error in console

connector.js i think the' if loop' is supposed to be verified== true?? (ps: line 61)...??

loginUser: function (req, res) {
pool.getConnection(function (err, connection) {
if (err) throw err; // not connected!

    var sql = 'SELECT * FROM `user` WHERE `email` = ?';
    var values = [req.body.inputEmail]
    // Use the connection
    connection.query(sql, values, function (error, results, fields) {
      if (error) {
        resultsNotFound["errorMessage"] = "Something went wrong with Server.";
        return res.send(resultsNotFound);
      }
      if (results =="") {
        resultsNotFound["errorMessage"] = "User Id not found.";
        return res.send(resultsNotFound);
      }
      password(req.body.inputPassword).verifyAgainst(results[0].password, function (error, verified) {
      //bcrypt.compare(req.body.inputPassword, results[0].password, function (err, result) {
  if (verified == true) {
    var token = {
      "token": jwt.sign(
        { email: req.body.inputEmail },
        process.env.JWT_SECRET,
        { expiresIn: '30d' }
      )
    }
    resultsFound["data"] = token;
    res.send(resultsFound);
  } else {
    resultsNotFound["errorMessage"] = "Incorrect Password.";
    return res.send(resultsNotFound);
  }
});

      // When done with the connection, release it.
      connection.release(); // Handle error after the release.
      if (error) throw error; // Don't use the connection here, it has been returned to the pool.
    });
  });

},``

(using angular 8) i have followed both video tutorial but these new errors pop up

ERROR in src/app/login/login.component.ts:25:15 - error TS2339: Property 'error' does not exist on type 'Object'.

25 if (res.error > 0) {
~~~~~
src/app/login/login.component.ts:29:52 - error TS2339: Property 'data' does not exist on type 'Object'.

29 window.localStorage.setItem('token', res.data.token);
~~~~
src/app/login/login.component.ts:33:35 - error TS2339: Property 'errorMessage' does not exist on type 'Object'.

33 this.errorMessage = res.errorMessage;
~~~~~~~~~~~~
src/app/reports/reports.component.ts:25:15 - error TS2339: Property 'error' does not exist on type 'Object'.

25 if (res.error > 0) {
~~~~~
src/app/reports/reports.component.ts:29:32 - error TS2339: Property 'data' does not exist on type 'Object'.

29 this.myDocData = res.data;
~~~~
src/app/reports/reports.component.ts:32:35 - error TS2339: Property 'errorMessage' does not exist on type 'Object'.

32 this.errorMessage = res.errorMessage;
~~~~~~~~~~~~
src/app/settings/settings.component.ts:27:15 - error TS2339: Property 'error' does not exist on type 'Object'.

27 if (res.error > 0) {
~~~~~
src/app/settings/settings.component.ts:31:30 - error TS2339: Property 'data' does not exist on type 'Object'.

31 this.docData = res.data;
~~~~
src/app/settings/settings.component.ts:34:35 - error TS2339: Property 'errorMessage' does not exist on type 'Object'.

34 this.errorMessage = res.errorMessage;
~~~~~~~~~~~~
src/app/settings/settings.component.ts:55:51 - error TS2339: Property 'settings' does not exist on type 'BackendService'.

55 this.querySubscription = this._backendService.settings(formData).subscribe((res) => {
~~~~~~~~
src/app/signup/signup.component.ts:27:15 - error TS2339: Property 'error' does not exist on type 'Object'.

27 if (res.error > 0) {
~~~~~
src/app/signup/signup.component.ts:34:35 - error TS2339: Property 'errorMessage' does not exist on type 'Object'.

34 this.errorMessage = res.errorMessage;
~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.