Hyperledger Fabric: how to make frontend? - hyperledger-fabric

I have already done the network part ,and can successfully register admins and enroll users basically following the fabcar example. But I would like to make a blockchain web app, what are the steps to make the front end?

Couple of things we need to do to prepare for the WebApp which interact with Blockchain Fabric.
In FabCare we would be seeing the request and response though docker cli. but in real time everything should be through REST API model, for this we are going to use the Node SDK.
You need to try 'Balance Transfer' example, which is having node SDK and you can run curl request (REST) and get response in JSON. -- all instructions are there in Readme. follow this link
https://github.com/hyperledger/fabric-samples/tree/release/balance-transfer
Once you are good with Curl Request, you can just pass those request from any front end and get the data to show in the front end.
I have created an Angular UI to interact with fabric backend and i have used the complete balance transfer example.
Angular Git: https://github.com/hyperledger/fabric-samples/tree/release/balance-transfer
Once you familiar with basic things usage, then you can slowly explore chain code, NOde SDK etc..
Hope, this helps you.

Related

Why does backend development need a seperate server?

I am developing my own website. So far, I've used React for the frontend and Flask for the backend. I've been doing frontend development for a while now but I'm just starting to get into the backend.
From my limited understanding, frameworks like Flask and ExpressJS create their own servers and host data that the frontend can use. It seems to me that that they automatically create websites to host and receive data. In my website, I route the backend to do what I want and use fetch requests with POST and GET from the frontend to communicate.
Although it works, to me, it seems overly complex. Why does the backend need it's own server? It seems unnecessary to create a proxy for the frontend and fetch data. Why can a website not just run custom code in the background, why does it need a service like Flask or ExpressJS to run in the background for it? These backend frameworks run Python or NodeJS in the background, but wouldn't it be much simpler if the website itself could run Python or NodeJS in the background?
I also see that in frameworks like React, you can import things and use modules— like in NodeJS. While importing some modules works, the require keyword is not allowed and normal NodeJS code will not work. Therefore, the backend will not work. Why is this— why can't you just run backend code natively? Instead you have to go through fetch and specify headers to basically translate information from your frontend to your backend.
Forgive my amateur understanding of web development, but the frontend/backend system seems overly complex to me. Thanks in advance.
Why does the backend need it's own server?
Where will the client store data so that when you open the page again the data will still be there? You can use localStorage but this is locked to that particular browser. What if someone logs in on a different device or uses a different browser?
Where will the client get the application from in the first place? Your application needs to be packaged up in a form that can be easily downloaded, and it needs an address to be loaded from. This is all considered "back end" even if you're using a static hosting service like GitHub Pages.
There's a lot of reasons why a back-end exists and needs its own server. Any application with persistent state which is expected to work across different sessions needs at least one of these.

swagger codegen to google cloud best workflow

I'm developing a small website with my dev partner. He's doing the front and and I'm doing the backend (API). I'm imagining a workflow like the following:
We both collaborate on basic API structure and requirements using
Swagger.io
I generate the server stub and publish to a public google cloud service.
Initially this just serves example data from the OpenAPI yaml file.
This gives my partner something to work with as he gets started.
I update the server code to use faker.js data and give him the ability to trigger various server responses like 500, 404, 200 etc... This allows him to further develop the frontend to handle various issue.
I fill in the stub with actual, working, code that we can both test
before going live.
Is this a realistic workflow? If so, any hints on how to approach it? I was hoping I could take the swagger server stub code and easily publish it to some Google Cloud service like Cloud Functions, App Engine, Containers, Cloud Endpoints etc... but nothing seems straightforward.
We are a 2 man show and this will be an iterative process.
If this is too open ended of a question, then I'd like to ask the following:
What is the simplest way to host Swagger Server Stub code on a public server using faker.js data?
Thanks.

Is frontend better or backend for integration with smart contract (erc721)?

I have developed my ethereum smart contract and I want to integrate it with my web application. But I don't know that is integration with ReactJS a better option or integration with nodejs a better one. Please give suggestions . Also I don't know how to do integration with backend through web3 library so please guide me about that.
When you are creating web3 app , most of the time you are not going to need a backend for that (Although you need a server to host your website) .
Working with and managing smart contracts are very easy at the front-end and there is no need for backend, but if your working on a large scale project , you are definitely going to need a backend for handling complex logics .
Next js is best option for both of that , containing node and react , also no need for manually configuring web server.
Better is next.js. I explained it here: https://ethereum.stackexchange.com/questions/129547/next-js-versus-react-which-to-use-when-for-your-dapp/130040#130040
Not every browser has metamask extension. By using next.js, when our
code is taken and rendered on the server, on the next server we can
reach out to the Ethereum network and do some initial calls like data
fetching, or alist of items in your smart contract. we execute all of
those requests on the server. That means when next.js produces Html
documents to send down to the user browser, it does not matter whether
or not users are using metamask. It does not matter whether or not
they have access to an Ethereum network. Because we already take care
of the data fetching for them. So all the users out there who are not
using metamask are going to see some information on the screen.
You've mentioned that you don't want to switch technologies, and while I agree with NextJS being a good platform to develop dApps on, I suggest you just use your current NodeJS server for anything that isn't web3 related and you use the web3js library from the frontend (your React) which would be very similar to a NextJS app anyway.
This way you don't have to switch technologies.

How to get detail of given address from blockchain?

I am building blockchain explorer. I have my own blockchain. In that, i want to search details of a given address from blockchain. There is no direct API to get detail of an address, could anybody help how to this ?
Thanks in Advance.
Two options:
option 1:
blockchain.info has an open API (REST + JSON)
https://blockchain.info/it/api/blockchain_api
here how:
https://blockchain.info/it/rawaddr/$bitcoin_address
bear in mind that you can only acquire info from an address that actually moved at least once some bitcoin on the network. If you just create a new wallet and do not transact then the public address is non existent on the blockchain (i.e. there's no difference between a newly generated address and a non existent address). That's the "shameful" approach as you are building a blockchain explorer using another blockchain explorer, see option 2 for the correct approach:
option 2:
Run a bitcoin node on your own and query your stuff on it. You may not be able to run a node on a normal hosting, probably you need something more like an Amazon AWS instance or host on your own server
I see from comments you are using peercoin (https://github.com/peercoin/peercoin). If it's a fork of Bitcoin, then the following holds:
In basic Bitcoin full-node setup, it's impossible to query random address. You can add some addresses to track, but think of it as of "yours".
There are modifications to the bitcoin-core, that have a addressindex option. The one I am aware of is bitcore: https://github.com/bitpay/bitcore-node.
Here's how to run your own blockchain explorer for Bitcoin using bitcore's insight: https://github.com/bitpay/insight-api
npm install -g bitcore#latest
bitcore create mynode
cd mynode
bitcore install insight-api
bitcore install insight-ui
bitcore start
This will launch full node in the needed mode (addressindex=1 enabled, etc) and a webservice with API and UI, similar to: https://insight.bitpay.com/.
Config file will be located at mynode/bitcore-node.json
Bitcore's docs and not well maintained, some are outdated. Try the code, but don't give up if it fails. For more information, refer to the source code.
P.S. I am not sure how to convert this to run with your blockchain, but if it's similar to bitcoin, it should be possible. I think it's closest you can get without writing your own explorer.

Making Firebase and Angular2 project

I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.

Resources