Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

Famo.us verbinden met MySQL database

Pagina: 1
Acties:

donderdag 1 mei 2014 11:24

Acties:
  • Storm90
  • Registratie: September 2008
  • Laatst online: 09-09 15:23

Storm90

Topicstarter
Hallo allemaal,

Is er iemand die al kennis heeft gemaakt met Famo.us?

Ik probeer een connectie te leggen met MySQL maar ik krijg het niet voor elkaar.
Famo.us draait op NodeJs. Voor het installeren van Famo.us dient eerst Yeoman geinstalleerd te worden, welke weer Grunt en Bower bevat. Vervolgens kan je de Famous generator installeren dmv Yeoman, een project aanmaken en lanceren met het commando "grunt serve" welke een server lanceert op poort :1337.

Gezien het op Node draait leek het mij logisch om node mysql te installeren om hier een connectie mee te leggen. Echter krijg ik het niet voor elkaar om deze werkend te krijgen. Indien ik binnen de famo.us app "require('mysql')" toevoeg dan denkt requirejs dat het om een js file gaat binnen de src folder van de app. Als ik het specifieke pad vermeld naar de node_modules folder, dan krijg ik ook een 404 error (het wordt dan ook door requirejs afgeraden om te verwijzen naar de node_modules folder, maar het was toch te proberen). Maar ik weet nu niet hoe ik überhaupt een connectie kan leggen met mysql. Ik heb het geprobeerd te vragen op de IRC van famous, maar daar krijg ik geen antwoord.

Meer info over Famo.us is hier te vinden: https://github.com/Famous/famous

Om even een voorbeeld te geven van een famous app:

structuur van een famous project:
- app (folder met de daadwerkelijke famous app)
- grunt (folder met grunt files)
- node_modules (folder met node modules)
- aliases.js
- bower.js
- clean.js
- connect.js
- eslint.js
- htmlmin.js
.....

Belangrijkste bestanden van een famous project:

/app/src/main.js
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var StateModifier = require('famous/modifiers/StateModifier');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: '/content/images/famous_logo.png'
    });

    var logoModifier = new StateModifier({
        origin: [0.5, 0.5]
    });

    mainContext.add(logoModifier).add(logo);
});


Bovenstaande code plaatst een logo op de index pagina. De index.html ziet er zo uit:
/app/index.html
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE HTML>
<html>
    <head>
        <title>Narrowcasting</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />

        <!-- build:css(app/) css/app.css -->
        <link rel="stylesheet" type="text/css" href="styles/app.css" />
        <!-- bower:css -->
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js(app/) src/polyfills.js -->
        <script type="text/javascript" src="lib/famous-polyfills/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/classList.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/requestAnimationFrame.js"></script>
        <!-- endbuild -->

        <!-- process:remove:dev -->
        <script type="text/javascript" src="src/dbConnect.js"></script>
        <script type="text/javascript" src="src/main.js"></script>
        <!-- /process -->

        <!-- process:remove:dist -->
        <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfig"></script>
        <!-- /process -->
    </head>
    <body></body>
</html>


/app/src/requireConfig.js
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/*globals require*/
require.config({
    nodeRequire: require,
    shim: {

    },
    paths: {
        famous: '../lib/famous',
        requirejs: '../lib/requirejs/require',
        almond: '../lib/almond/almond',
        'famous-polyfills': '../lib/famous-polyfills/index'
    }
});
require(['main']);


Indien iemand al ervaring heeft met Famo.us dan hoor ik het graag.

[ Voor 58% gewijzigd door Storm90 op 01-05-2014 11:33 ]

donderdag 1 mei 2014 18:44

Acties:
  • Hydra
  • Registratie: September 2000
  • Laatst online: 06-10 13:59

Hydra

Je hebt wel met NPM mysql geinstalleerd? Daarnaast: verwar je client-side spul niet met je server-side code. Die requireconfig is (vermoed ik zo) client side, mysql draait server-side.

https://niels.nu

donderdag 1 mei 2014 19:22

Acties:
  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Hydra schreef op donderdag 01 mei 2014 @ 18:44:
Je hebt wel met NPM mysql geinstalleerd? Daarnaast: verwar je client-side spul niet met je server-side code. Die requireconfig is (vermoed ik zo) client side, mysql draait server-side.
NodeJS is server-side JS ;)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 2 mei 2014 10:38

Acties:
  • Storm90
  • Registratie: September 2008
  • Laatst online: 09-09 15:23

Storm90

Topicstarter
Thanks voor jullie responses. Maar ik heb het denk ik gevonden. Hiermee kreeg ik het voor elkaar om een extra node server op te zetten en ermee te connecten via socket io. De resultaten werden weergegeven zowel in de terminal als in de console van de browser (het werkt dus):

connect.js (zie het middleware gedeelte, slechts dat gedeelte heb ik toegevoegd)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// The actual grunt server settings
module.exports =  function (grunt) {
  'use strict';
  return {
    options: {
      port: grunt.option('port') || 1337,
      livereload: grunt.option('livereload') || 35729,
      // Change this to '0.0.0.0' to access the server from outside
      hostname: grunt.option('hostname') || '0.0.0.0'
    },
    livereload: {
      options: {
        open: true,
        base: [
          '.tmp',
          '<%= config.app %>'
        ]
      },
      middleware: function (connect) {
        return [
          require('./server.js') // your server packaged as a nodejs module
        ]
      }
    },
    dist: {
      options: {
        open: true,
        base: '<%= config.dist %>',
        livereload: false,
      }
    }
  };
};


server.js (even slordig IO en MySQL geimplementeerd):
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var io = require('socket.io').listen(9001);

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '****',
  database : '****'
});

connection.connect();

connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
  if (err) throw err
  console.log("Connected to Database");
  io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: '22' });
    socket.on('my other event', function (data) {
      console.log(data);
      console.log(rows);
    });
  });
});
connection.end();


index.html (index van de famous applicatie, ik verwijs nu naar de socket.io.js via localhost:9001)
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE HTML>
<html>
    <head>
        <title>Narrowcasting</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />

        <!-- build:css(app/) css/app.css -->
        <link rel="stylesheet" type="text/css" href="styles/app.css" />
        <!-- bower:css -->
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js(app/) src/polyfills.js -->
        <script type="text/javascript" src="lib/famous-polyfills/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/classList.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/requestAnimationFrame.js"></script>
        <!-- endbuild -->

        <!-- process:remove:dev -->
        <script src="http://localhost:9001/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="src/main.js"></script>
        <!-- /process -->

        <!-- process:remove:dist -->
        <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfig"></script>
        <!-- /process -->
    </head>
    <body></body>
</html>


main.js (main.js wat wordt uigevoerd door famous)
JavaScript:
1
2
3
4
5
6
7

define(function(require, exports, module) {
    var socket = io.connect('http://localhost:9001');
    socket.on('news', function(data) {
        console.log(data);
        socket.emit('my other event', { my: data });
    });
});

[ Voor 10% gewijzigd door Storm90 op 02-05-2014 10:45 ]

Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq