Comments (17)
Hi, I haven't used the debugger in vscode much so I'm not sure. But adding a console.log to the saveFood method shows it's not being called when a category is selected.
It would be nice to have that functionality, how were you thinking to do it?
from pantry-for-good.
well simply adding a new page with 3 buttons:
"register item" (dialog opens, auto focus on barcode number field -> scan -> enter information -> save)
"add item to stock" (dialog opens, auto focus on barcode field -> scan -> enter quantity -> save)
"take item" (dialog opens, auto focus on barcode field -> scan -> enter quantity -> save)
For my personal use, I'd like to add fields like expiry date etc. so I can get notification when an item is about to expire etc.
But could you try to reproduce my issue please? Maybe I just made a mistake setting up debugging.
from pantry-for-good.
But if the scanner's a react native component how do you put that in a non-native app?
It must be a mistake somehow, but I've no idea how to set up vscode to debug like that. I can look into it later if you're still having problems.
from pantry-for-good.
I simply need a number input field for the barcode. It will be scanned with a regular cheap USB barcode scanner
from pantry-for-good.
Ah, but how do you get the scanner result into the input?
Did you figure out the debugger problem? I can try if you give me a hint how to get it working.
from pantry-for-good.
some barcode scanners simply "type" the scanned number when pressing the button on it. Like you would enter it manually on the keyboard.
I used this tutorial for setting up VS Code for debugging https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react
from pantry-for-good.
Oh ok, it sounds a bit clunky to have to click an item, scan, move to the quantity field.
I made a js barcode scanner that works ok on not-mobile that should be able to streamline it a bit (https://github.com/jspaine/zxing.js), or there's this but I haven't tried it. And if you have to be on pc anyway to use the usb scanner maybe it's worth trying?
I think the best experience would be with a native app (and could be fairly easy by just showing the app in a webview with the scanner as a native component) but the way this was meant to be used (each food bank deploys their own copy) would make it difficult since each food bank would also have to build and publish the native apps.
What do you mean 'for your personal use'? Recording expiry date could be tricky since you might have an item from multiple purchases with different expiry dates?
You forgot the tutorial link, have you tried with the chrome debugger?
from pantry-for-good.
It's definitely worth a try.
About the building and publishing of the native app, how about having a Travis CI build for a docker container with the app so nobody has to build the app manually.
For personal use means at home. My idea was that, when registering, I record the expiry date, then the software calculates the timespan until expiration. When I add an item to stock, the expiry date is automatically set to time of scanning + by default. I simply need to check whether this is correct. If not, I want to have the date editable so I can fix the date.
Here is the missing link: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react
from pantry-for-good.
I checked out https://github.com/jspaine/zxing.js. Using a mobile phone is a very good idea.
But I want to focus on USB PC Barcode scanners for now.
I don't see a big problem a new view in the UI of pantry-for-good for USB Barcode scanning
Scanning with thew USB scanners works pretty easy: https://www.youtube.com/watch?v=yssnGacoTNA
My idea of the GUI is the following:
1.) new page:
when pressing the first button (register new item), the following dialog is shown:
Then I can add instances of that items to stock via 2nd button which opens this dialog
Taking an item from stock would look quite similar to the "Add item to stock" dialog. But in that dialog I would suggest that the dialog shows the expiry date of items with that barcode in stock which is closest to current date. That way, the people can use the oldest food items first (they might have to search for it but how long that takes is a matter of organization of the food storage).
Back to the topic: I simply need to understand how to debug the app, why the saveFood function is called when selecting a category, and how the app communicates with mongodb.
from pantry-for-good.
I get the same with the debugger, following this answer works though.
Add context to webpack.config.js
:
module.exports = {
context: resolve(__dirname), // add this
And in webpack.config.dev.js
change dev-tool
from eval
to source-map
But if you have several of an item in stock they could have different expiry dates, sounds awkward to keep track of specific ones?
from pantry-for-good.
I will try that.
Well the simplest method would be re-stocking new food from the backside of the shelf and using those on the front side first.
from pantry-for-good.
With the suggested changes, debugging works. Thank you very much!
from pantry-for-good.
I have another question regarding debugging. How can I debug both client and server simultaneously?
from pantry-for-good.
I tried to first lauch the chrome against localhost and then attach to the nodejs process (I selected the last entry shown in the screenshot)
This is my launch.json in .vscode/
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
]
}
But none of the breakpoints in server/routes/food.js is hit when I add a new food item while the breakpoints in the client are working.
As you can see, both debuggers seem to be running
Trying to attach to one of the other 3 remaining nodejs processes throws an error:
from pantry-for-good.
Ok, another breakpoint is actually hit (e.g. in server/controllers/food.js createItem function)
from pantry-for-good.
Try running the server with the --inspect
flag, in gulpfile.js
change line 69 to:
exec: "node --inspect ./server/index.js"
Then in launch.json
add a configuration for Node.Js: Attach
from pantry-for-good.
Thanks a lot!
from pantry-for-good.
Related Issues (20)
- Not able to restart app HOT 4
- Add Customer Name to Packed Packages List HOT 3
- Packed package list create a 'contents' tool-tip HOT 2
- Register as a customer shows not authorized from trying to get foods HOT 1
- How to run the tests correctly? HOT 15
- "Password should be longer" should be displayed to the user, in case, while trying to register a new membership HOT 3
- how do I recreate the fb-dev database? HOT 4
- 'Unknown user or invalid password' should be displayed to the user, in case, while trying to Sign In HOT 9
- Sign up form not validating properly
- Notifications HOT 4
- Issues with running on Windows 10 HOT 2
- secrets.js api keys not being integrated HOT 4
- Proxy google maps api through the server
- Deployment - use data disk for mongodb data
- Deployment - allow passing secrets into the app
- Volunteer Scheduling
- Inventory - Scan and lookup product barcodes on openfoodfacts.org HOT 1
- Use of common constants HOT 1
- npm not working while deploying project locally HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pantry-for-good.