Adding api.ai chatbot to my Meteor.js chat application - javascript

I have a Meteor.js app similar to this one -> https://www.youtube.com/watch?v=66DH69e-wJ0&t=936s as my first Meteor.js app.
And I have created a API.ai chatbot.
And now I need some guildlines of what should I learn/read to achieve something like this:
I want a function to send user messages to the api and then posts
api's answer into the chat.

It's hard to answer your question if we don't know any details, but I would suggest to read carefully Meteor tutorial. Depending on frontend library you use:
Meteor tutorial for Blaze
Meteor tutorial for Angular
Meteor tutorial for React
If you would like to use other libraries the best place to start is the GitHub repository with Meteor integration for this library. For example Vue.
Secondly, you should read Meteor guide. You will find here tons of useful tips.
I took a quick look at the video you included and API.ai. I guess that you will need this node package. Also, take a closer look at Methods section in Meteor guide. You will need them to use API.ai package from your client side. When you work with third-party APIs you should also read about HTTP package.

Related

How to use react with material ui along with python-django

I need help to use react with material ui components in web application.
The following key technologies i worked on for several projects:
Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
Material UI, React
Is it good idea to work with react or to have Angular ?
How to start making a project having both django and react with material UI components?
References :
https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555
https://medium.com/#TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d
Front-end and backend are two separated things.
You can use whatever database, because your backend will work with that.
You can use whatever as backend.
React/vue/angular don't care how you will be communicating with server or what backend you use.
You can start with set up frontend development for react using for instance facebook-create-react-app which would set up basic development boilerplate. You will also need to take care of client-side routing (you can use react-router and you will need some way to comunicate with your backend for example with ajax calls to get your data using ES6 fetch() or some js library like axios.
It is up to you how you will handle backend but i would recommend you to use RESTfull API with django which would be communicating with your front-end
I'm doing this on a project right now. The project was set up for me with Docker however, which I'd recommend, it's very well contained. But if you don't want to use Docker you could use create-react-app. I'd make sure this is in a separate directory from your Django project, but in the same git repo.
create-react-app will create a development server for you to develop the front end with.
You'll need a few other libraries in your React code besides Material UI to fill a couple other needs:
client-side routing, I recommend react-router (for use with MUI see this docs page)
communication with the backend Django server, I recommend GraphQL.
Traditionally you'd use a RESTful API but these are very difficult to design well and have limitations in traversability and ability to change over time. I think that GraphQL is the future of web APIs and everyone should check it out.
To implement a GraphQL API in Django you can use graphene-django which integrates well with Django's ORM (models). It's documentation is thin, but I've found it works very well.
On the client side there's a few React libraries for connecting to servers with a GraphQL API. I'm using Relay which is from the same developers as React and GraphQL, but Apollo could also be a good option depending on the state of its development.
Eventually, when you deploy the project you'll need to compile production static files out of create-react-app or Webpack or whatever you're using to compile your React code. Then put the static files in a place that can serve them on your site. If you're using a production web sever like nginx the static files can be served directly without reaching Django.
The following key technologies i worked on for several projects:
Backend : Python-Django (MySQL)
Frontend : Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
What does work mean? If you can write api's in the backend.Go ahead and write some api's using django framework.
Backend : Python-Django (MySQL)
Frontend : Material UI, React
So can you guys help me out to implement this.
What do u mean by implement? Go ahead and find a nice react + material ui + webpack boilerplate and start the application. Try to Consume
your backend api's through it.
Is it good idea to work with react or to have Angular ?
Long discussion,You would have got this answer if you read the article that you posted
Do i need to switch to other database ?
It depends on your project
Take a look at this https://github.com/owais/django-webpack-loader which is a good strategy for launch react build with django (i use django rest) and you can use an html in jinja template where you inject the react JS code
You can eject or use config override top override the default native webpack configuration present in react JS https://www.npmjs.com/package/config-override
I think you should see Preact, which is react integrated in any MVC templating, with that you can override some places of templates by their ids.
By this solution you can inject material ui code inside your templates form or others has you need.
For the injection you need to use custom element,
https://preactjs.com/guide/v10/web-components/#creating-a-web-component

How can I connect a Vue.js frontend with java backend?

I'm developing a project with a team in which we need to create a simple CRM. Some people recommended us Vue.js to create a great looking UI, but the problem is that with the team we mainly use java. So, we wanted to know if it's there a way in which we can connect a UI made with Vue.js with backend made in java. Any recommendations on how to do it? I've searched a bit and some articles say we can use java+tomcat to connect the Vue.js UI. We need to know if these kind of integration is possible before starting to spend time into making the UI in Vue.js if we can't connect it with our java backend.
Thanks.
I did an example of a project that integrates a java api (built with spring boot) and a vue.js frontend. It uses frontend-maven-plugin to build the frontend and copy it into the resources.
The source is in my github repo
Yes is possible, see this question
you will use your java application which is your "backend" as web service.

ReactJS front-end with NodeJS backend: Rendering

I'm currently making an application using ReactJS for the front-end and NodeJS for the backend, however, I'm confused regarding how to connect those two.
I read about both, server-side rendering and client-side rendering.
I followed this tutorial (https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ ) as to how to connect my ReactJS app, which I created using creat-react-app and my node backend, however, I read that the solution of adding "proxy": "http://localhost:8000" (or whatever port node runs on) to the package.json file is only suitable for development.
Anyway, what I would like to know is: What is the best way of connecting ReactJS and Node.js if the user should be able to enter,delete or update data, which is saved to a database?
You should check out Nextjs. It is based on React and NodeJS.
I believe this is exactly what you are looking for. It is an easy-to-use framework that handles all the difficult stuff when it comes to server rendering while keeping the frontend async and dynamic. Besides that. When you get better using it, you can do in dept configuration to optimize to you need. Hope that helps.
Try out one of the examples on the git repository.

Nodejs backend MVC pattern

I am getting in nodejs development. Until now everything is perfect, I've got my nodejs server running using expressjs as backend framework but I've found a problem, all nodejs tutorials included expressjs create unique server.js file and my code is messing up. All rountimes and functions live there and that's why I want to create an MVC pattern for my backend but I don't know how. I've tried to create a nodejs module but I failed in trying.
Someone can tell me how do I construct an MVC structure in backend as my frontend (I'm using Backbonejs)?
Here is an example of MVC style controllers using express: https://github.com/strongloop/express/tree/master/examples/mvc?_ga=1.227384661.999716043.1382977119
This example was pulled form the FAQ page on expressjs.com. The documentation there is really quite good.
Edit: If you change your mind about MVC look at the "How should I structure my application?" section of the FAQ for examples of other patterns.

Integrating an operational transformation library with Meteor

When building apps with Meteor, its capabilities have really amazed me. However, to be able to drop in Etherpad-style collaborative editing bits into my app would really be a holy grail.
While looking up how to do this, I found some projects that seem to use OT libraries in meteor.
Projects using ot.js:
https://github.com/TeamCocoDojo/cocodojo (Demo at http://cocodojo.meteor.com)
Projects using ShareJS:
https://github.com/mad-eye/meteor-sharejs (Demo at http://madeye.io/)
I can't seem to tell how these projects integrate with Meteor. Are they actually using Meteor Collections? Do they just use the Node server that is hosting Meteor and do the OT as a separate component, not using Meteor at all? Is there a different OT library that integrates better with Meteor?
If anyone is familiar with these projects or has implemented OT as part of a Meteor app, please share your thoughts on the best way to approach this.
(This isn't a duplicate of Operational Transformation in Meteor.js? as that question is almost a year old and Meteor has moved a long way since then.)
I've started the process of integrating ShareJS with Meteor via a smart package:
https://github.com/mizzao/meteor-sharejs
Please try it out in your Meteor app, and submit new features!
Demo here:
http://documents.meteor.com

Categories