Dynamic Data in Shopify Blog Page - javascript

I want to write an API, i.e. hosted at www.api.mywebsite.com (not affiliated with Shopify) and then have a shopify blog post that queries that API and displays that data using javascript.
I know how to do the API potion, but can I and if so how do I do the second part where I use JS to query and display data?

Simple! Add an App Proxy to your App. With that, you setup an end point to call in your App. On the blog page you can send an Ajax GET with an ID to your App, which can then get dynamic content ready for you to use. You can either format the response as Liquid or as JSON as two examples. Send back Liquid, and Shopify renders it for you. Send back JSON and you can stamp out your data in a template.
And best of all it is a secure callback to your App that you know came from Shopify, so you have no hassles or security problems. Look in your App for Extensions, and enable Online Store, where you can tinker with the Proxy.

Related

Flask API to provide JSON files to a simple HTML+JS+CSS webapp while keeping it secure

I've made a simple webapp that is going to show some data in a table, which will be updated weekly.
This update it done in the backend with some python code, that scrapes and alters some data, before putting it in a SQLite database.
After doing some reading I learned that to deliver that data to my webapp I should make a API with Flask, that can take that data and deliver it to the JS in my webapp in form of JSON, which then can use the data to populate the table. However, I should secure my API with username and pw. But as its a JS frontend that will retrieve data from the API, there is really no point, as the username and pw will have to be hardcoded into JS, which then can be read by the users. (I think)
Should I expose my API to everyone, or is this not the way to go to be able to use SQLite data as a backend for my webapp? I am fine keeping the API to a GET only.
You are correct, it is pointless for you to secure your API. Securing an API is only needed in certain circumstances.
If you are accessing data that you don't want anybody to see, perhaps through a backend call, then it would make sense to add in some form of security (normally an API key or Authorisation tokens in your request headers).
However, if you are making calls from your front-end (i.e. client side) to a backend API, then there is no point putting additional security there as the user can already see the request and already has access to the data the API is returning - so by securing it you are achieving nothing.
Normally, if the page the user is visiting contains sensitive data that you don't want everyone to see, you would take steps to secure your website instead (for example protecting it with a login for username and password before you can access that page). If you were to take this approach, where the website is protected by username and password, then you can update the API to make sure it does not respond to requests where the user is not authenticated (e.g. by generating a session token or something unique for each logged in user).
If you have a look around on websites that have lots of free data available, you will find they all have front end API calls that are completely unsecured (because it is pointless if the data is already free to access). Some websites do take steps to try to make sure it is their own website that is calling the API, but even then it is a bit pointless as web scrapers can always extract the data from the HTML.
Take a look at this page which outlines authentication headers. This simpler route is to hard code the header info in Flask to make it a little more secure. You could also try the more involved route of reading header info from your db. What's currently working for me to read from postgres db is below so you may modify it slightly for sqlite.
def valid():
headers = request.headers
auth = headers.get("X-Api-Key")
user = User.query.filter_by(apikey=auth).first_or_404()
print('from search of db ',user,'',auth)
return str(user)
As you mentioned, you plan to show a public data - then it can be used even
without authentication. Otherwise I think it can take too much unnecessary time spent on that.
As you have just a simple and single table from database, I believe that you don't need an API. You can just create HTML template and render it with data. Some examples can be found here and few more here.

Serverside Dashboard buildup (Node.JS)

I´m sending some sensordata to my azure IoT-Hub and now I want to display them on different Dashboards.
To get started I used the template from a Microsoft Tutorial and it works fine:
https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
The only problem is, that the Dashboard only show the new data that comes in for the client.
After every reload of the page (from the client side) the Dashboards are completely blank at first and then build up the data that comes up next.
(I think the client loads the script and builds the Dashboard up itself?)
I load the index.html file and in the html-file are linked some js-files.
My question is now if it´s possible to build up the Dashboards the whole time on the serverside in Node.js?
So if a client connects to my site, it automatically shows all saved data from my Dashboards (even from the past)
TLTR:
Can you generate data on Dashboards on the serverside and then just "mirror" the Dashboard to the Client?
Probably you are looking for a solution with Dashboard that can show previous day data as well.If so you need to push data from IoT hub to some other storage like CosmosDB etc and built your custom dashboard on it.
I had a similar requirement like that and used Azure Time Series Insights for that purpose.The API would return data to UI which has Dashboard build on Angular. Have documented the same here :
http://learniotwithzain.com/2019/03/near-real-time-iot-data-exploration-using-azure-time-series-insights/
Azure Time Series Insights product has some ClientSide SDK as well. Please do check the cost associated and see if this suits your requirement.

Django: Page Refresh

Here's the view that updates the timestamp of a model in database whenever it's called,
def data(request):
new = Data.objects.filter(user=request.user)
new.update(timestamp=timezone.now())
return HttpResponse('')
This view is related to this URL,
url(r'^go/$', views.data, name='data')
Everything is fine, but how can I call this view & update the database without refreshing the page?
This is a great question as its something that may not seem as logical in django as say node or js based server and client interactions. Let me give a generic response then go more detailed.
Django is a web server. It has some newer functionality that allows it to more easily interact with javascript than it could in the past, but it is normally used in conjunction with a javascript framework. I'll normally build a django app w/ django-rest-framework and reactjs. So my workflow is normally to build the datamodel, serve up the page with compiled js as a static asset, and have those two communicate via a rest-api stood up with DRF.
Specifically to your question, you can simply have your django model communicate with the server via ajax posting to endpoint in your app. An example of a jquery/ajax post is available at this link. The only other thing you will want to look into is supporting csrf which Django discusses in the docs.
Let me know if this helps. If it does but requires specific snippets, let me know.

Using a server to send/receive information between a mobile phone and web page

I am trying to set up a simple set up as follows:
Have a mobile app with a page consisting of 4 lines (4 html paragraph lines (I am using phonegap)).
I want to use a web page from which I will input the data for those 4 lines. This information is sent to a server and that server transfers this information to that app on that mobile phone. Now, those 4 lines on the mobile phone is filled with the new information.
Similarly user inputs information on another page consisting of 10 lines of li (list). This information is again sent to the server and to the web page where the information is displayed.
I can almost feel the "internet police guys" getting all hyped and ready to vote this question down. But please understand that I have been on this site and various forums desperate to find a tutorial to guide me to do this and not able to find.
I am trying to use ajax to perform this setup. Confused how I would be using the php file. Information such as password n username is going to go in that php file to connect to the server. But php is a server side script thus needs to sit at the public_html folder. How do I use the php file from my desktop? Write a separate javascript to access it?
It is the concept that is confusing me. I am familiar with html,js,php.
I would appreciate any guidance or maybe a link to a tutorial which would help me to do the concept I mentioned. Thanks for listening.
You will need to create an API using PHP. This API is uploaded to your server and is considered "RESTful". Google a tutorial for what fits your needs. You can set all sorts of rules in this API such as requiring any requests to have an ID or access token.
Since you are using PhoneGap, your HTML and JS files rest on the device, so you will need to allow permissions to your API from anywhere. For this you will have to speak to your host provider about unless you know how to configure it yourself (some providers restrict what you want to do by default as an extra security precaution against XSS attacks).
Next, you can either use jQuery, or you can write some AJAX calls by writing the JavaScript yourself.
The most efficient way for this to work is to send JSON objects to and from the API. You will include a "command" in the JSON when you are sending from your app. On the PHP side, you will retrieve this command and use the rest of the data included in your JSON object to process the request. Your API will need to encode a JSON object for return (such as a user's profile information).
Here is a basic PHP API tutorial to get you going that explains some of the features of a RESTful API: PHP API
Here is a simple AJAX function (you will probably want to make this much more modular): AJAX
As broad as your question is, it seems like the best/easiest thing for you to do will be for you to first create a PHP webpage that will access a SQL database to perform the record updating. Actually, this should serve all of your needs for your mobile users assuming you don't need push notifications for live data updates.
I am assuming, since you are using phone gap, that you are more comfortable with web languages. After you get the webpage fully operational, then you should start building your app based on that exact same SQL database. With mobile app development there are a lot more "what if's" (what if the phone rings, what if the app is running in the background, what if there is no cellular service, etc...)
It is always easier to start with what you know and build on that, rather than starting with a new development platform and troubleshooting as problems arise.

AJAX with Django in RESTful environment

I am new in restful programing. I have a django website, my goal is to load part of the website asynchronously.
By default what I do now is:
call a url (e.g. localhost:8080/index) -> Routes the Django view -> View takes data from database (mongodb if you are curious) -> View gets the template -> Render all together and send back to browser
What I want to improve is:
When I have opened a url e.g. localhost:8080/index and I trigger an event (e.g. click a <a>) to send a request to my database and load other data.
My question:
What is the step I have to do to bridge the javascript / ajax with my mongodb safely?
Additionally I am considering to use a front end MCV framework (I think about backbone/I have limited knowledge as well) to handle the front-end requests. E.g. localhost:8080/index#2 returns objects with id : 2 of my database.
You should look at the following rest API frameworks for django. They will help save you a lot of time.
Django Tastypie
Django Rest Framework
I have used both and personally like tastypie better. Once you have integrated one of these in your project you can use any front end javascript framework like angularjs or backbone or even not use one and simply make a call to the resource url to get the data via ajax.

Categories

Resources