Tendermint web application - customize - vue.js

I am new to blockchain development and to tendermint as well.
I already have a blockchain running locally.
Using this command starport scaffold vue I could mount a local web application. Inspecting a bit I could replicate some network requests (localhost) and I can get the ballance of current wallet (hard-coded on the request), get the current wallet from the localstorage. I'm struggling on authentication (mnemonic, wallet name and password).
However I also would like to costumize it according to my needs and I thought I could start a web application from scratch. I can see that the generated web project is importing this project https://github.com/tendermint/vue which is making a lot of "magic behind the scenes" and importing UI elements as well and I would like to have my own elements.
I don't want to re-invent the wheel and I can make some imports to help me on connection to wallet, validate authentication (mnemonic, wallet name and password), create wallet and so on.
I am trying to build a web application to connect to wallet, make transations.... but I would like to control the styles and the connections (and if possible using reactjs instead of vuejs, otherwise I dont mind learn vuejs as well).
Is this possible or reasonable? Where I can find good documentation or tutorial to guide me on customize a web application using tendermint. Honestly I searched but I am kind of lost.
Thanks
UPDATE: I found good examples and here and here. It helped me to validate mnemonics and make transactions, with my stack tech.

Because Starport generates both plain Javascript and VUE controllers, you have few options:
Create your own site re-using VUE components
Take plain JS part and build a website using whatever technology you like
Use a plain JS client for standard cosmos modules you can find on GitHub
Use Protobuf generator to generate light client code yourself
If you only need wallet functionality, #2 and #3 may work best for you because the bank module is stable and hasn't changed much in a long time.
You can find plain JS file for bank in your project:
vue/src/store/generated/cosmos/cosmos-sdk/cosmos.bank.v1beta1/module/index.ts
There is a link to starport discord channel related to frontend: https://discord.gg/CvbdYh9AWQ

Related

How to display data in Shopify Store from external API using app proxy

My goal is to display data retrieved from a 3rd party (external) API that requires authentication in my Liquid Shopify theme.
I'm looking to access product options data from the Hulk Product Options API, which requires authentication, as documented here: https://productoption.hulkapps.com/api-docs/index.html
My goal would be to send a get request and retrieve data from the Hulk Product Options endpoint.
I've read that an App Proxy is what I need to set up, however I am new to the Shopify app world and am totally lost at how to set this up.
What I've done:
Followed the steps here to create an app and install it on a development store that I created through my partners dashboard.
Went to the partners dashboard, clicked "Apps" and found the app proxy section.
Questions:
What do I put in those fields? I can't find examples for filling out that section with info from an external API.
What code in which file do I need to add to the node app that was generated using shopify node create. Or is this app just necessary to be able to fill out the app proxy info?
What url can I send a GET request to using AJAX / JS in my liquid theme code?
I'm a theme developer new to app development and have never created an app, so if you can provide basic and specific instructions (code would be wonderful!) for someone who knows front-end and is competent but is lost in the app world it's much appreciated. I've asked other theme developers who also have also tried and not been able to figure this out, so there seems to be a gap in the tutorials and resources provided.
Thanks in advance!

Authentication with Vue/Electron Application

I'm building an application with Vue and Electron, and I'm wondering what the best approach is for authenticating users.
I'm using JSStore as a wrapper for IndexedDB as my database. I'm familiar with using bcryptjs as a means for authenticating users when I create Node backend and have traditional /login or /signup routes.
But this is where I'm starting to get confused. Do I need to set up a Node server to start up when my application starts up? Because given that I'm using IndexedDB, I don't know that it makes sense to have a process of Sign Up --> Request to Node Server --> Send data back to browser
Would I be better served using a different type of database? Could I do something such as adding bcryptjs to the Vue prototype, so that's it's accessible where I need it to work with JS Store? Are there security concerns that I should be aware of with an approach like that?
At this point I'm stuck, and have more questions than answers. I've done some looking around for articles, and I find a lot of content about setting up authentication with Vue, but not within the context of an Electron application. I'm not sure how that variable changes things.
Any advice or direction would be greatly appreciated.
JsStore is client side technology, which means if you are setting up authentication in client side, it will be available only to that device.
Let's understand it more by use case -
Say your application named My Awesome app has authenticaion implemented. User register it and then they are able to use it after registration. They are logging out and signing in again with registration data and everything is working normal.
Here is what wrong with this approach -
User buys another pc and installed application My Awesome app, he tries to login but unable to login because registration data does not exist on their new PC.
Due to some issue, user hard disk crashed & he installed new hard disk. Same thing as above he is not able to log in.
So it is recommended to implement the signin on some server & keep data there.

How can I possibly implement a VueJS app to Odoo?

I have to integrate a VueJS app in Odoo. I don't exactly know how I can achieve that?
I found this https://www.odooinvue.org/ (not my app, but an example app) . Still no idea on how can I implement odoo in Vue. Login gives me a Failed to Login error message in this example app.
Any idea how to implement odoo in vue??
Actually, odooinvue works fine. Read carefully the instructions, in development it shows how to start a traefik docker container in order to serve both odoo and Vue.js.
Note: If I am not wrong, the purpose is to use odooinvue as a pure frontend, so it's not really an integration, basically you build vuejs (quasar, specifically) apps with odoo used as a pure backend.
See also this answer, by odooinvue's author
I am the author of that project. Its really impossible to answer you without knowing what steps you have taken to setup the project, but for that error, make sure of the following:
The Odoo server is up and running in the backend and you can login.
When you login with the front-end Vue app, you are using credentials that you know are working.
If that fails, open the dev console of your browser and check the network log. Make sure that the authentication request is returning status code 200.
I know others that are using the project just fine without any issue, so I am going to assume that you need some technical help. Perhaps hire a software developer to assist you.

Building a Custom API on top of Parse.com?

I'm planning on building a developer API similar to what Uber and Yo have done. Is it possible to build such API if my app's backend is powered by parse.com? I don't want my custom API pointing to parse, but instead my own site.
I'm planning on using ruby, and was wondering if there would be any limitations over other options (not sure what options I have). Thanks
I'm not sure if it is possible using ruby, but I know it's definitely possible to build your own REST API.
We have decided to go a bit further and wrote a parse-angular seed project for developing web apps. It can be found here.
After you pulled it, do a npm install
As usual,
cloud code should go into cloud/main.js
express code: cloud/app.js
angular code: cloud/public/js/
Note that: You will need to change your AppId and AppKey in
config/global.json
cloud/public/js/app.js
As for custom apis, you can define your own in cloud/routes/api.js.
At this point you should have a nice parse-angular project set up and good to go.
If there's anything wrong, please feel free to open a pull request. :)

Stripe and titanium mobile

How can I intergrate the stripe api for payment processing to allow people to pay for services through my titanium mobile app. Stripe.com
I am using this code to start:
https://github.com/abh/node-stripe/blob/master/lib/main.js
How can I make sure the information is encrypted.
First you need to make sure what you are selling is physically tenable, assuming it is (and your not selling any form of digital content, or functionality within the app) then the easiest way to use stripe from within Titanium would be to just wrap it in a web view (you could implement it in native code but this could get tiresome).
Assuming you have this example in a file called index.html in your resources directory.
var webView = Ti.UI.createWebView({
url : 'index.html
});
win.add(webView);
Note that you will need to let your server support https requests for actual encryption to happen, you shouldn't be encrypting yourself (in code).
Once this is done, all the work now happens on your server to process payments using Stripes libraries like in this example in the documentation.
Really this is a server job, all your doing is sending the server the information to process, not a lot going on with Titanium here except as a gateway.