Rails API, JSON - how to connect to a web app and bring tables to life? - ruby-on-rails

Hello!
First of all I would like to let you know that I am a fairly new to programming (mostly Ruby on Rails). I have been studying by myself for around 6 months. I recently got a first project - a voting app.
I have created the layout to the app - using HTML, CSS, bootstrap, a little JS and JQuery.
Now I need to bring the app to life - so, make the tables alive. I have heard that it shouldn't be hard to do in Rails API (using REST), which I have created with the help of some tutorials (like this guy). The webapp will be used only locally, on a device.
So, my questions is:
How to connect Rails API to the layout and make it "talk" to eachother?
I know I should use JSON to communicate the front end with server, but I am not sure where to start.
Thanks in advance!

If you're trying to make a website you should follow this tutorial. APIs are more for sharing your sites data or functionality with other sites, or for serving data to mobile apps/frontend frameworks like AngularJS.

Related

Getting started with React and Rails

I have started a new project in which I would like to use React and Rails. This project is on the small side and will require some basic interactive UI, hence React. As far as I know there are two ways I could get started with this:
Using the react-rails gem and use the built in view helper
Create a Rails API and React/Flux frontend app
I have a few questions however. In no particular order:
React-rails seems like the simpler solution, but what drawbacks would I be facing?
I come from a Rails and Ember background so the Rails API + React FE solution makes architectural sense to me. But with the react-rails gem I'm confused on how some things should be done. Primarily, how do I handle routing? I suppose I won't have access to any react route helpers and will need to pass paths into the react components as props?
Thanks in advance!
For a small project React-Rails, https://github.com/reactjs/react-rails, is great I have used it in production the last year on 2 sites that get about hundred thousand visitors a month and I haven't had any issues.
That said if you want to use Redux, React-Router or Flux don't use React-Rails go the API route.
My rule is if you are just using React components then use React-Rails.
If you are doing a Redux, Flux app then just make a frontend app.
It depends on how much your server is doing and also your team. If you have a lot of business logic that you want to keep in Rails, then you may want to have that logic running on a dedicated Rails server and expose as APIs.
You can then have a NodeJS server that does nothing but fetch data from APIs and render React to send to the users. The only interaction between react and rails is via the APIs as JSON. This basic setup will scale really well and is a pretty simple mental model.
If the project gets bigger, this means you can have JS-only devs work in JS only and Rails devs work in Rails only. Plus if you want to move away from Rails or React later, there's no added complexity there.
OR
If all your devs are React+Rails and the project is a bit small for multiple servers, then I think using react-rails to serve up your pages is a fine solution.

What would be the best way to use AngularJS with Ruby on Rails?

I'm about to start a new project and I am unsure if using AngularJS for my front end would be a good idea not. I've read about people saying this isn't the smartest way of doing a project. And even if I did, Is there a way to get AngularJS to interact with the controllers? This question may be redundant but I am actually curious of how to effectively do this without it being a waste of time.
I've never completely done it, but I believe the way to go is to build a Rails api and then have a separate Angular project use said api. The api could also be used to build a mobile app. I think the Angular project would still need to be served from a Node.js server in production, but I don't think that would be a big deal.
This is what I used to learn how to build a Rails api: http://apionrails.icalialabs.com/book/chapter_one
You can do it within an existing project and share the models from it.
There are several different approaches to accomplish that. I tried about 5 different guides out there, the best I found (and I finally sticked to) was https://thinkster.io/angular-rails - This guide should help you build a basic CRUD app with angular connected to rails.
You use Rails as an JSON RESTful API which responds to Ajax-Requests (Get, Post, Put, Delete). Angular will handle the frontend stuff - sending those Ajax requests to the routes/methods defined in your rails controllers. So yes, of course your AngularJS app can interact with your rails controllers.
This also helped me to understand the setup in the beginning: Instead of the Rails View, you will be using AngularJS as your view:
I really love using angular with rails, because setting up the JSON responses (especially with Active Model Serializer Gem) is very easy and quickly done. i deffinitely can recommend it, and I have not encountered any unsolvable problems - so far.
Just go trough this guide I linked and you will see if this setup fits your needs.
The short answer is that your Rails application will have to present some kind of a public API for your AngularJS application to consume. Angular (and it's brethren, like React and Ember) runs client-side, on the browser, and it needs "something" to make AJAX calls against. That "something", i.e. your backend, can be Firebase, Parse, AWS Lambdas, Rails API, etc. Since you already have a Rails application, it probably makes the most sense to add some RESTful API endpoints that use the existing models (and possibly controllers) to consume/produce JSON payloads from/for the client.

Ruby on Rails separate front & back

I've been using Ruby on Rails since a little more than one year now and I've always do it in a casual way, I mean, everything in one place (front & back), using the standard .html.erb file populated by the associated controller method.
Otherwise, today in our project, I have the need to separate the front and the back end for multiples reasons (code maintainability / clarity, better architecture, more reactivity, etc...).
I've done plenty of researches, watch some conferences (1, 2, 3), but didn't find my solution yet. It looks like to be a question that comes often, but what is the best practice/tools to separate the backend and the frontend of a Ruby on Rails app?
I don't feel we need (yet) a huge JS framework like React/EmberJS/Angular/etc...
First I was thinking about something like Middleman/Jekyll and make the communication via JSON and API calls, but it seems like that it's not a good solution for dynamic website.
So is there a frontend framework that works well with a Rails API and which is easily maintainable and upgradable (add feature/extension to it like gems)?
Thanks for your insights.
A friend of mine wrote this great article/tutorial on Rails as a backend API.
http://blog.launchacademy.com/the-basics-of-building-an-api-in-ruby-on-rails/
As well as this tutorial on Rails/Ember.js
https://github.com/diegodesouza/Project-Planner-EmberJS
You can get an idea of how it's done and implement your preferred front end framework.
Hope it sheds some light on this question.
I have a similar setup as one of the commenters on the question.
I'm using Rails mainly for just the project structure, to define some page layouts, and for ActiveRecord.
I then have my JSON APIs defined using the Grape API framework.
I have a SPA, written on AngularJS that lives in the public/ folder. It doubles as my mobile app, made possible by phonegap. If my Angular app didn't double as my mobile app, I could've possibly just used the asset pipeline to serve up the SPA. To compensate for that, I have a separate build task written in Grunt to minify/uglify my JS/CSS assets before I deploy them out to production.
I also use Comfortable Mexican Sofa for my static content pages.
It took some trial and error to get things right, but overall I find that this setup serves me pretty well.

Can programs be embedded into WordPress?

Before I begin, I have only just started learning how to code so please presume no prior knowledge. Everything I learn from you guys will be a first for me :)
My friend has a website created using WordPress and has asked me if I can figure out how to implement a program into his page. Specifically, he wants the site to contain a playable computer game that interacts with his page.. like desktop destroyer for example.
What I need to learn:
1) I need to know what language wordpress uses to build their pages
2) Do i need to learn another language like ruby on rails and embed that into the page?
3) Where to start...
I'm pretty much starting this completely from scratch so any other helpful guidance is very much appreciated!
Wordpress uses PHP to build it's pages. I think it would be very hard to make a video game in PHP: AFAIK there hasn't been much in the way of graphical library work done for it.
What you would probably end up doing is to make a standalone game, probably using Javascript and Html5 (Flash used to be the best choice for this but of course it's not supported in iOS which makes it a bad choice now). Get your game working in an empty browser page, then you can embed it into your wordpress site.
If you've already got the game, and just need to include it in the wordpress page then that's simple. You can just embed it: it runs client-side so php doesn't even have anything to do with it (PHP just runs on the server, like Ruby on Rails).
EDIT: just realised, it's not just "very hard" to write a game in PHP, it's impossible, since it's a server-side tech and the game engine would need to run in the browser. Duh. You could of course handle the back end with php - saving and loading data from a database for example.
Where to start
Look at what you want to achieve - you want to make a "game" in a Wordpress site - this will be less about Wordpress and more about the game.
#Max Williams summed it up pretty well - a "game" online is comprised of two elements - the front-end and back-end.
--
Games
The back-end is basically an API which connects to the DB & server. This would be where the likes of PHP / Rails would come in - a way for you to interact with data on your server
Even games such as World Of Tanks use this setup; the front-end gives you an interface to interact with the data provided by the back-end.
In reference to your PHP / framework question, you need to realize that your Wordpress site will just serve a framework of pages, in which you'll be able to include a game. The inclusion of the game would be to load either a flash or, even better, a java app which will be dynamic & sprite-based
The front-end app will basically take your inputs / interactions, and send them to the backend. This will typically by done with a perpetual websocket connection, but can be achieved in other ways too
Finally, for each request which is received by the server, it will respond with data the app has to factor into the game experience. Sounds complicated, but it's quite simple (not easy) when you think about it logically

Ruby on rails making an app for smartphone

I want to build an app that use in the backend Ruby on Rails. However my problem comes in the lack of information i found on it. My goals is not just to create a website but an application that interacts with it, like my android facebook app when pressing menu I get button like logout and so on.
I am wondering if their exists tutorial on how to build an application but using rails or should i scrap my entire website and do it in php. I am looking for guide and tutorial. Thanks in advance
You can build an app on any platform and make it interact with your Rails-based server using HTTP requests (like AJAX).
You can send information back and forth using JSON or XML; you would probably need to make a new set of actions for the app to use.
There is no reason to use PHP. ever.
A little unclear from your original question, but if you are looking to create a mobile app using Ruby (and a structure similar to Ruby on Rails) then you may be interested in Rhomobile. It is a cross-platform mobile application framework that uses Ruby for its backend code, and follows a structure similar to (older) Ruby on Rails versions.
From what I understand of your problem, you want to use the robustness of Ruby to develop a native app (not just another app that mirrors a website).
The best thing I know of for this is RubyMotion. The bummer is the cost ($200). But then you would get to accomplish your task.

Resources