I'm working in a project with electronjs + vue to implement adb operations in desktop application. For the implementation of this i am using the node library adbkit.
When I tried to load script i get an error during the require('adbkit') operation during webpack. The error that i got is the following:
My configuration for webpack is the following:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify"),
},
},
externals:{
"fs": require("fs"),
"child_process": require("child_process"),
}
},
})
The script that i am using to get device storage:
/* eslint-disable */
export function memory() {
var Promise = require('bluebird');
var adb = require('adbkit');
const client = adb.createClient();
//var readline = require('readline');
var capaccity = null;
var used = null;
var free = null;
var stat = null;
return new Promise(function (resolve) {
client.listDevices()
.then(function (devices) {
if(devices.length != 0) {
console.log('Device %s ', devices[0].id)
var check = false;
client.shell(devices[0].id, "df -h", function (err, output) {
if (err) {
console.log(err);
}
var readStream = output;
var importantdata = [];
readStream
.on('data', function (data) {
//console.log('Data!', data.toString());
var lines = data.toString().split('n');
//if(lines.includes('/dev/fuse')){
// console.log(lines);
//}
lines.forEach(element => {
if (element.includes('/dev/fuse')) {
//console.log(element)
var info = element.toString().split(' ');
info.forEach(info => {
if (info != '') {
importantdata.push(info)
}
})
}
});
if (importantdata.length != 0) {
capaccity = importantdata[1] + 'B'
used = importantdata[2] + 'B'
free = importantdata[3] + 'B'
stat = '"'+importantdata[4]+'"'
check = true
//console.log([capaccity, used, free, stat]);
resolve([capaccity, used, free, stat])
}
})
.on('error', function (err) { console.error('Error', err); })
})
if (check == false) {
client.shell(devices[0].id, "df", function (err, output, capaccity, used, free, stat, importantdata) {
if (err) {
console.log(err);
}
var readStream = output;
importantdata = [];
readStream
.on('data', function (data) {
//console.log('Data!', data.toString());
var lines = data.toString().split('n');
lines.forEach(element => {
if (element.includes('/storage/emulated')) {
//console.log(element)
var info = element.toString().split(' ');
info.forEach(info => {
if (info != '') {
importantdata.push(info)
}
})
}
});
if (importantdata.length != 0) {
capaccity = importantdata[1] + 'B'
used = importantdata[2] + 'B'
free = importantdata[3] + 'B'
stat = '"'+((parseFloat(importantdata[2].replace('G', '')) / parseFloat(importantdata[1].replace('G', ''))) * 100.0).toFixed(2) + '%"';
//return [capaccity, used, free, percentage]
//console.log([capaccity, used, free, stat]);
resolve([capaccity, used, free, stat])
}
})
.on('error', function (err) { console.error('Error', err); })
})
}
}
})
})
}
And the view when i execute the following script:
<template >
<div class="home">
<img src="../assets/mobile_image.png" class="imagemobile" />
<h1 class="textheader">
<font size="5" id="brand">Teléfono Móvil</font>
</h1>
<h2 class="modelo">
<font size="3" id="model"> Modelo </font>
</h2>
<h3 class="textcontent">
<i> Información sobre el Teléfono </i>
</h3>
<div class="barcontent">
<div style="text-align: left;">Almacenamiento</div>
<div class="progress-bar">
<div class="progress-bar-fill-ocuppied"></div> <!--- PREGUNTAR SI ASI O ABAJO -->
</div>
<div style="display:inline">
<p id="alma-ocupado" class="info-alma-ocupado">Ocupados 114GB</p>
<p id="alma-disp" class="info-alma-libre">Libres 24GB</p>
</div>
<div class="totalcapacity">Almacenamiento total: 128 GB</div>
</div>
<img src="../assets/android.jpg" class="imageandroid" />
</div>
</template>
<script>
import {memory} from './prueba'
export default {
name: "HomeView",
mounted(){
const pb1 = new ProgressBar(document.querySelector('.progress-bar'));
pb1.setValue("0%");
memory().then(function (resolve) {
pb1.setValue(resolve[3])
})
},
};
class ProgressBar{
constructor(element,initialValue="0%"){
this.Ocuppied = element.querySelector('.progress-bar-fill-ocuppied');
this.setValue(initialValue);
}
setValue (newValue){
this.value = newValue;
this.update();
}
update(){
const percentageoccupied = this.value;
this.Ocuppied.style.width = percentageoccupied;
}
}
</script>
<style>
.info-alma-ocupado{
text-align: left;
display: inline;
width: 50%;
padding-left: 0px;
margin-right: 33%;
}
.info-alma-libre{
display: inline;
width: 100%;
height: 50%;
text-align: right !important;
align-items: right !important;
margin-left: 33%;
}
.bloque{
display: inline-block;
align-content: initial;
}
.imagemobile {
float: left;
margin-left: 10%;
margin-top: 5%;
width: 15%;
height: auto;
}
.imageandroid {
margin-right: 10%;
margin-top: 5%;
float: right;
width: 20%;
height: auto;
}
.textheader {
margin: 0;
position: absolute;
margin-top: 5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 90%;
}
.modelo {
margin: 0;
position: absolute;
margin-top: 10%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 90%;
}
.textcontent {
margin: 0;
position: absolute;
margin-top: 20%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60%;
}
.almacenamiento {
text-align: left;
}
.barcontent {
margin: 0;
position: absolute;
margin-top: 35%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 90%;
border: 20px;
/*border: 10px solid #000; */
}
.progress-bar {
position: relative;
float: center;
width: 600px;
height: 50px;
border: 1px solid #000;
background-color: #0a9905;
}
.progress-bar-fill-ocuppied {
float: left;
height: 100%;
width: 40%;
background: #9b0b0b;
transition: width 0.5s;
position: absolute;
}
</style>
The result of the script should be that i got the percentatge of storage and then show it in front
