How to use API as backend in ionic mobile app development? - angularjs

I am having a web application built using JAVA spring which has API feature to read and write into database.
Now i have to develop an ionic mobile app for the same application. How to read and write data into database.
I know Firebase and other alternatives can do the job.
But i need my own API code(written for web app) to be used. Is there any way to achieve that?
I guess calling the respective API when the web application is live is achievable.
But how can i achieve that while developing(When the web app is under construction)

Well depending on how you set up the API this could become quite difficult.
You're saying/guessing that you can call the API when the webapplication is live. This makes me assume you've created a REST API? Or did you create a Spring MVC application?
If the webapplication is directly linked to your Spring application (f.e. going to localhost:8080/my-profile shows a page (not JSON) of your profile) then I'm not sure if you can achieve the above mentioned target.
If you get a JSON response, or are somehow able to retrieve it from the webpage, you can just simply call (in typescript:)
this.http.get('http://localhost:8080/my-profile').map(response => console.log(response.json() );
Else, you probably will have to create a basic REST API (check out Spring boot for a 5 minute setup) and provide it, either with hardcoded data or connect it with your database.

Related

Secure webapp with Django and React

I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)

Website without server that relies on API to retrieve and save data... static or dynamic?

I just read the following.
... your web app can be considered static. Some examples of this type of
web application are a simple personal home page, an online games
portal that doesn’t save data to the server on which it is hosted, or
an AngularJS app that performs multiple calls to a RESTful API
provided by another service.
So if a website is based purely on angular, does not have any server code and solely depends on API calling to retrieve and save data, will it be considered static or dynamic?
Dynamic website means we can change the site's content without modify the source code. For your website, if it is showing data from a REST API which means it is depending on a server somewhere then it is a dynamic website.

Where to call the APIs in application stack?

I'm trying to create a web application which use the APIs of some other application like "Twitter API", "Stack Exchange API" Github API. I'm thinking to use the MEAN stack for my application. As I'm new to this I'm not sure that where to call the API in the application stack.
Let me give me a example to clear my question.
Suppose I want to call the Gist API for listing the public gist in my application and display beautifully on the web browser.
For this I have to user the GET method with the URL "https://api.github.com/gists/public". Now my question is where should I call this GET method in my application stack ?
My requirements.
Call the query from web browser using User Interface to fetch data from API provider and display on caller's browser.
ADD/DELETE/UPDATE from the browser itself and it should reflect on API provider website too.
I don't need to store any data in my application. All data will store at API provider itself. User authentication will also done via API (OAuth 2)
I have few question on the basis of my requirements
Can my requirements be achieved only from front-end (Angular.js) ? If yes, shall I still need to use server-end (Node.js) in my application ?
Can it be done only using server-end (Node.js) ?
Can you suggest some better technologies to use in my stack according to my requirements ?
I new in this area so my understanding of application stack may not be clear. So I will be very thankful if you provide some online resource to understand API call and application stack implementation . I tried to search on Google but i didn't find good one.
I found this tutorial https://zapier.com/learn/apis/ very good. But there theory only. No example is given how to use in actual code.
Please let me know if the question is not clear to you.
You can create services in angular to make API calls or you can call the API's on the backend (node.js app) and then use a view engine like handlebars to generate the html.

AngularJS app - with Lumen or Laravel?

I am about to build web application consisting of three parts:
Public data-oriented websites for unauthenticated users with geolocation search, ...
Member area (with authentication) for managing the data
Mobile app/apps with the same functionalities
The airbnb.com is a good example of the structure.
Basicaly the thing is to create a server side API which will be shared accross clients.
I definitelly want to use AngularJS for the client side, but I am not sure which of those solutions is better:
Create the API with microframework Lumen and add sessions / authentication / html serving / other services to the Lumen
Create the API with full stack framework Laravel and serve html to AngularJS
Thank you for your suggestions.
You will need a solid api, lumen has all we need to build an api. You can go ahead with option 1 as you can later on migrate to full stack laravel framework, if needed.

Parse.com+CakePHP+OAuth-2.0, anybody use them together?

I've been looking for the best way to build a search web/ios/android application with user login and a REST Webservice. I have landed on CakePHP for the Website creation and REST api handling.
I would also use the RestKit API for iOS, and not sure for what RestAPI I'd use for Android.
I also want to be able to use OAuth-2.0 for communicating with Twitter/Facebook/Pinterest.
My Question:
Is there a way to use CakePHP and Parse.com together to handle all the user authentication, and would I need to separate data tables (one on parse.com and the other on another hosting service with CakePHP)?
I would like to keep everything at Parse.com if I could. Any help would be awesome!
I'm not familiar with CakePHP, but if you can completely ignore whatever DB/ORM comes with it by default, you can use Parse on your server and in client apps. There's an un-official PHP library you can use for the server, and they offer iOS and Android SDKs.

Resources