Vacaciones
for ($i=0; $i<1814400; $i++) {
echo "No hacer nada\n";
sleep(1);
}
for ($i=0; $i<1814400; $i++) {
echo "No hacer nada\n";
sleep(1);
}
El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.
Instalaré varias librerías:
En vez de ir instalando una a una, usando el siguiente package.json y ejecutando npm i, lo tendremos todo instalado.
{
"name": "hapi-frontend",
"version": "1.0.0",
"description": "Hapi.js frontend",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --config webpack.config.dev.js",
"build": "webpack --mode production --config webpack.config.production.js"
},
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.4",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"eslint": "^6.0.1",
"eslint-plugin-html": "^6.0.0",
"eslint-plugin-vue": "^5.2.3",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue-hot-reload-api": "^2.3.3",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"buefy": "^0.7.10",
"vue": "^2.6.10"
}
}
Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).
Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):
const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vue
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelint
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );
// Para obtener un path para los alias
function resolve( dir ) {
return path.join( __dirname, '.', dir );
}
module.exports = {
mode: 'production',
// Fichero inicial del proyecto
entry: './js/main.js',
// Fichero final para incluir
output: {
filename: 'js/main.js',
publicPath: '/dist/',
},
module: {
// Reglas para los ficheros
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new StyleLintPlugin( {
files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
} ),
],
resolve: {
extensions: [ '.js', '.vue', '.json' ],
alias: {
'@': resolve( '' ),
},
},
};
El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:
import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
import App from './components/App.vue';
import '@/assets/scss/main.scss';
Vue.use( Buefy );
new Vue( {
el: '#app',
components: {
App,
},
render: ( c ) => c( 'app' ),
} );
// accept replacement modules
if ( module.hot ) {
module.hot.accept();
}
Y ya por último el componente App.vue, que muestra simplemente un poco de HTML
<template>
<header class="hero">
<div class="hero-head">
<h1>{{ title }}</h1>
</div>
</header>
</template>
<script>
export default {
data() {
return {
title: "Demo site",
};
},
};
</script>
<style lang="scss" scoped>
div {
h1 {
color: #fff;
}
}
</style>
Bueno, ha sido un resumen rápido, pero bajándote el código seguro que lo entiendes fácil
OpenCart es una aplicación para venta online (el típico carrito de la compra) realizado en PHP5 y MySQL.
Es fácil de instalar y de administrar y posee casi todas las opciones que un e-commerce necesita: pago, shiping, artículos, clientes, paypal…
OpenCart
Vía / SmashingApps
Mi amigo Christian me ha comentado que la entrada anterior sobre Twitter sería más interesante si mostrara los datos sobre un término.
Pues dicho y hecho, tan sólo se necesitan dos scripts, uno para recuperar los datos y otro para mostrarlos. El primero habrá que ponerlo en el cron para que recupere los datos cada cierto tiempo (en mi ejemplo busco “google” cada 2 minutos).
Hay que tener cuidado porque Twitter da un máximo de 2000 actualizaciones nuevas, por lo que tendremos que ajustar los tiempos de consulta en Twitter.
El script que lee los datos es el siguiente:
<? php
function insertar($consulta, $ult) {
global $db;
$data = json_decode(file_get_contents('http://search.twitter.com/search?q='.urlencode($consulta).'&refresh=true&since_id='.$ult));
$n = isset($data->total) && $ult != $data->max_id? $data->total:0;
$db->queryExec('INSERT INTO estadisticas (fecha, n) values ('.time().', '.$n.')');
if (!$ult) $db->queryExec("INSERT INTO opciones (clave, valor) values ('ultimo', ".$data->max_id.")");
else $db->queryExec("UPDATE opciones SET valor = ".$data->max_id." where clave='ultimo' ");
}
$consulta = $_GET['q'];
// Limpio para poder usarlo en el nombre para la BD
$_consulta = preg_replace('/[^A-Z0-9]/i', '_', $consulta);
if ($db = new SQLiteDatabase($_consulta.'.db')) {
$q = @$db->query("SELECT valor FROM opciones Where clave='ultimo'");
if (!$q) {
$db->queryExec('CREATE TABLE estadisticas (fecha real, n real, PRIMARY KEY (fecha));');
$db->queryExec('CREATE TABLE opciones (clave text, valor text, PRIMARY KEY (clave));');
$q = $db->query("SELECT valor FROM opciones Where clave='ultimo'");
}
$r = $q->fetchAll(SQLITE_ASSOC);
$ult = 0;
if (!empty($r)) $ult = $r[0]['valor'];
insertar($consulta, $ult);
}
?>
Y el script que dibuja la gráfica es:
<? php
$desde = strtotime($_GET['desde']);
$hasta = strtotime($_GET['hasta']);
$consulta = $_GET['q'];
// Limpio para poder usarlo en el nombre para la BD
$_consulta = preg_replace('/[^A-Z0-9]/i', '_', $consulta);
if ($db = new SQLiteDatabase($_consulta.'.db')) {
$q = $db->query("SELECT fecha, n FROM estadisticas Where fecha>".$desde." and fecha<".$hasta);
$r = $q->fetchAll(SQLITE_ASSOC);
foreach($r as $item) {
$x[] = $item['n'];
$l[] = $item['fecha'];
}
}
header('Location: http://chart.apis.google.com/chart?chtt=Line+Chart&chts=000000,12&chs=1000x600&chf=bg,s,ffffff|c,s,ffffff&chxt=x,y&chxl=0:|'.implode('|', $l).'|1:|'.implode('|', $x).'&cht=lc&chd=t:75.00,16.66,0.00,8.33,100.00&chdl=Label+1&chco=0000ff&chls=1,1,0');
Actualización: Google Charts no deja meter muchos valores por lo que la gráfica de arriba sólo saca las 20 últimas actualizaciones
Ejemplos muy interesantes y útiles usando la librería CURL: