Ionic & MySQL - File Types: *.js vs *.ts for SQL operations

Hail, Ionites!

I am trying to make an app that will allow IT staff at my university to scan barcodes and then use that as a primary key in a MySQL database. I have designed and built the database, but the app is no more than a not-so-glorified barcode scanner that has no real functionality for the intended purpose.

I had watched a tutorial on youtube by Alex of CodeCast on how to do this using node.js and MySQL, linked here.

I tried to paste my edited version of the tutorial code into the typescript file of a new page designed for one of my database actions, but I got errors up the wazoo, presumably because there is a bigger difference between a *.js file and a *.ts file than I had originally thought.

My question is:

  • Can I use the *.js files as they are, and not be required to convert them into *.ts files?

I am just learning how to develop for mobile platforms, and I hadn’t done any javascript coding until about a week ago, so I appreciate any constructive criticism or friendly advice.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    constructor(public navCtrl: NavController,
        private barcodeScanner: BarcodeScanner) {
            
    }

    barcodeData: any;
    scanResult: any;

    goToFetch() {
        this.navCtrl.push('page-fetch');
    }

    goToUpdate() {
        this.navCtrl.push('page-update');
    }

    ScanBarcode() {
        this.barcodeScanner.scan().then((barcodeData) => {
            console.log("Scan Successful: " + barcodeData.text);
            this.scanResult = barcodeData.text;
            //alert("Scan Successful: " + this.scanResult);
        }, (err) => {
            console.error("Scan Failure: " + err);
            alert("Scan Failure: " + err);
            return;
            });
    }
}

insert.js

var mysql = require('mysql');

var connection = mysql.createConnection({

    host: 'localhost',

    user: 'root',

    password: '',

    database: 'assetdb'

});

connection.connect();



var asset = {
    asset_tag: scanResult,
    asset_type: ,
    deployment_cycle: ,
    year_issued: ,
    manufacturer: ,
    model: ,
    asset_location: ,
    asset_department: 
}



var query = connection.query('insert into assets set ?', asset, function (err, result) {

    if (err) {

        console.error(err);

        return;

    }

    console.error(result);
    console.log(query.sql);
});

select.js

var mysql = require('mysql');

var connection = mysql.createConnection({

    host: 'localhost',

    user: 'root',

    password: '',

    database: 'assetdb'

});

connection.connect();

var asset = {
    asset_tag = scanResult,
}

var query = connection.query('select a.*, c.* from assets a join computers c on a.asset_tag = c.asset_tag where a.asset_tag = ?', asset_tag, function (err, result) {
    if (err) {
        console.error(err);
        return;
    }
    console.error(result);
    console.log(query.sql);
});

Thank you in advance! I hope to get this sorted out soon!

PS- If you have need of any further information that is relevant to answering my question, please don’t hesitate to ask!

The larger issue that you’re going to run into with this route is that Ionic isn’t node.js, so any node.js code isn’t going to work in the app. Node.js is more of a server/endpoint environment and library.

It sounds to me like you’re going to need a local endpoint that then inserts the data into the database. That the app uses via http.post and what not.

Unless I’ve misunderstood what you’re shooting for, of course.

I am using node.js to create my ionic project, and Visual Studio to edit the code. I created the schema for my database using notepad++ and my database is created by sourcing that schema into MySQL command line.

So, I guess I might be a little confused and spread out. . .yeah.

Thank you for clarifying; I had been under the impression that ionic and node.js worked well together, since the tutorials I found used that to access the ionic CLI.

In any case, I think I understand what you’re saying. I would need to use URI’s rather than this node.js ‘mysql’ connection project I found?

If I can run *.js files within an Ionic app, then great, I will see if the node.js thing works.

If I can’t run a *.js file within the ionic app, then I would be interested in knowing what I can do to incorporate the database functionality I require, which might involve URI’s.

I got an answer to a similar question previously, but I was given links to a resource that would require learning an entirely new programming language, which I do not want to do just for the sake of this one project. I am already learning javascript/node.js as I go, so adding in another new language would get extra confusing for me.

Have I explained enough of where I’m coming from, or are you and I missing each other’s ideas entirely? I apologize for any confusion I have contributed here.

Edit: I think I am beginning to understand that the node.js is not just js, but I am wondering if I can still use the *.js files as a kind of source code for an ionic typescript file to call/reference when performing database related actions.

Ah, so, you’re certainly not wrong. The CLI and Node.js do indeed work well together, but it’s a case of the CLI not being the same as the Library/Framework itself. So you can certainly use Node.js for local stuff, just not in the app itself. Sorry for the confusion on that point.

So i don’t think you can do what you’re trying to do. At least, not in the way that you’re trying. As far as I know (but I could certainly be wrong), there’s no way to connect to a MySQL server within an Ionic app. You either have to use something like SQLite, or you use to create an endpoint that you can hit. Which if you do the latter, which sounds like it’d be what you want rather than the former, you could then utilize Node.js.

So…I guess what I’m suggesting is looking into getting a Node.js server that can then connect to your database.

Does that help clear up my thoughts? Visiting the in-laws this weekend and so I’m having to use my phone and am a little distracted at times :P.

1 Like

That is starting to make more sense. As I understand it now, it sounds like my app will need some kind of intermediary that runs within the app, and then facilitates any interaction with the MySQL database, (is that what people call “middleware?”). I will look into that and post further questions here for additional help.

No worries my friend, I hope you enjoy your visit! I am grateful you decided to reply despite the less than ideal circumstances.

I have left this thread dormant for a while, but I hope you can still offer some help. I am researching the methods I could take to connect the Ionic app to MySQL, and I came across this article:

http://masteringionic.com/blog/2016-12-15-using-php-and-mysql-with-ionic/

I am new to PHP of course, but I am thinking it would be worth learning in general.

I have a few questions about the article as it pertains to this project of mine:

  • What Apache and PHP software would I need to acquire, and how?
  • Would this create the connection I am hoping to acheive?

I am grateful for your earlier comments, which helped me to understand the environment better, and I look forward to hearing back about whether this article might give me a push toward completing this project.

You can replace PHP with Node.js on the server side if you want to - the important thing here is that the Ionic app communicates with an app on the server that provides a API.

It looks like that article goes into quite a bit more detail, but I wrote an article recently that explains the basic concept: https://www.joshmorony.com/integrating-a-backend-with-ionic/

Maybe that can help clarify it for you. In short: It doesn’t matter what software you set up on your server, or how it retrieves data, as long as it provides an API that your Ionic application can interact with through HTTP requests.

3 Likes

So, does this mean I need to just code a program on the machine I’ll use as the server which will supply an API to the app?

I’m still not exactly certain I know what to do. I have access to a local machine that I plan to use for storing the database. Could I simply create a local server on that machine which allows the app to remotely reference my database stored locally on the HDD?

I think I get it now, somewhat. I have been looking at your article, and it seems like I would need to somehow export the MySQL data to JSON files for the Ionic app to read and manipulate. Is this accurate thinking?

You have to be careful about security here. If you’re talking about something that simply executes whatever SQL the client app sends it, you have a big Bobby Tables problem:

Instead, you want to expose things like GET /widgets, GET /widget/12345, and POST /widget/12345 that correspond to well-defined database actions.

1 Like

I think I do recall something like that being covered in the video I linked at the beginning of this thread, quoted below.

Thank you for reminding me of the security concerns.

I am unsure whether the code provided in that youtube example is intended to function within something like the ionic app, or if it is intended to serve as the API connection mentioned by several of you in the comments above.

I am not sure if this is going way over my head, but I want to confirm whether I can use the code from Alex’s example as a starting point for a server-side application for the purpose of providing the Ionic app with an API, presumably in the form of JSON files.

Am I just confusing everybody now, or did I actually say something understandable?

Here is the code I modified from the code in the video.

@rapropos @Sujan12 @SigmundFroyd @joshmorony

I think I’ve finally grasped the concept you’ve been trying to teach me, and have thought of a possible solution.

I understand now that the node.js mysql code should work for what I need on the server, since it interacts with the database, and can likely recieve http requests from my Ionic app. My reasoning now is that I should implement the Ionic app to request the data it needs to display or edit, and then send any changes to the node.js mysql code on my server machine, all using http requests from the Ionic code to trigger SQL statements/queries in the node.js code. Then, the node.js code will do the actual legwork of communicating with the database. I think the only confusion I really had a big issue with was where and how the node.js code was intended to be used.

If any of you can confirm that any of this is the case, please do so.

Question: could i iuse MongoDB for this specific project without paying a dime?

Oh, just realized that would be a replacement for MySQL, if I understand correctly.

Confirmed.

MongoDB can replace MySQL as a database - but is conceptually very different.

No idea.

Yes.

1 Like

So, I am currently watching some tutorials on youtube about how to create a server using node.js.

I want to clarify some terminology here:

  • Is an API something that enables communication between my app and MySQL?

  • Would the node.js code as seen in the video I linked earlier run on the phone, or the server itself?

  • Do I use a ‘get’ HTTP request to retrieve data and a ‘post’ HTTP request to send it between the Ionic app and my API?

If I am off the mark, please clarify.

Thank you for all the help so far; I think I’m almost done learning the essentials of how to fix this project.

No, the communication between your Ionic app and your server app. Your server app then can talk to MySQL.

Server.

Yep, more or less.

1 Like

If I were to create the server app using node.js, would I then start it from the command line and run it continuously, or could I get it set up as a background service/process on Windows?