I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a¶m2=b¶m3=w¶m4=aa .
Related
Let's say I have a blog made in Next.js by consuming a REST API from a headless CMS. I know how to load posts and so on. But where do I load the basic website info such as name and color? I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it? Thanks.
I think there are multiple questions here
But where do I load the basic website info such as name and color?
I am interpreting the question so you may want to add more details to complete the answer. You have two options when using data that is truly static in nature.
You can use the post mechanism to create a website info that you can load as a specific call
You can store the static information in a separate file in the server and read it off and update the data via a git update which will reflect on the site. If this won't change often, e.g: a website name - You can use getStaticProps to get this information at build time
I thought about loading it on _app.js but when I define loadStaticProps() on it, the nested loadStaticProps() on another components doesn't get called and when using another kind of data loading, such as using Axios, the site wont be truly static. What is a good way for doing it?
Page data that is truly global can be fetched via _app.js + getStaticProps seems to be a long running open issue - You can follow the thread here and one potential workaround here - https://github.com/vercel/next.js/discussions/10949#discussioncomment-6148
i'm looking for some advice on how I should go about creating my next project. I would like to create an app that allows users to embed widgets on their own personal sites. An example would be, the user could create events on my app, and then copy code to embed on their site that would display the events.
My hope was that I would be able to give them a minfied/uglified script that would handle fetching their data from my app's api, and even possibly allowing someone using the widget to post data to my app. Is that feasible?
What I am really unsure of :
1) How would I handle fetching data from my server? Are there CORS/other concerns I need to handle when fetching it?
2) I dont want users to have to go to a url to render my code, I just want to provide the minfied/uglified/compiled to es5 code to them. How do I go about doing that?
My task is to create a SPA with an iTunes API.
I got my basic functionality done but it's not SPA yet, i wanted to implement react-router to handle the navigation.
However my components now need an extra parent. And i don't quite get it how can I pass the previously working data.
I don't want to inject huge block of code so i'd rather give you a Github link which is:
My SPA
But if you need the snippets let me know and i'll cover it.
I want to integrate i18n within a ReactJS application that renders on client-side only.
I can handle the internationalization itself with one of the several i18n libraries available, however I was wondering which would be the best way/available options to store whatever language the user has chosen cross-request (like refreshing the page).
Is this something I can handle on the client-side only or do I have to do it server-side and then pass it to the client?
Thank you very much in advance.
You have limited options with storing a users preference using client side technology. Essentially, you are limited to storing these preferences in a cookie.
Any other sort of persisted data should be handled by the server and most likely saved to a database somewhere.
I want to implement a web-based API (using ASP.NET Web API 2) and consume it by the client Side library (Sencha Ext JS).
My application should include
A simple user registration form.
A login page for admin.
CRUD operations for users' submissions.
Notes:
I do not want to include any backend code (i.e C#) in the we application, I want to implement it using the HTML/Javascript only, that is Ext JS.
I want the Web API to be RESTful.
I want to protect admin pages.
I want to use the SQL Server to store users' submissions.
All of that requirements should be implemented using the ASP.net Web API 2 and Ext JS only.
So far, I did initial search and I got a lot of learning for either the ASP.net API 2 or the Ext JS. But I couldn't have a guide that help me to fulfill the above requirements or help me to have both technologies work together.
Pleas help me on either way.
Or generally, can you help me get started work in combining both: Asp.net Web API 2 and any client side that consumes it, such as Sencha Ext JS or any other client side. It is not necessarily to be Ext JS.
Thank you so much.
Thanks to StackOverflow.com
If it were me, I'd use the DirectAPI for asp.net https://github.com/elishnevsky/ext-direct-mvc
You create webapi controllers, just like you normally would. The only difference is the the controllers that need to be used by EXT should inherit from DirectController.
If you follow the directions on that page, you'll end up with a globally available proxy object that matches the name of the controller and the public methods hanging off of the controller become methods of that object.
That is, server side controller MyAwesomeController with method DoSomething() becomes MyAwesome.DoSomething.
If you attribute the method as [NamedArguements] you can create methods such as
DoSomething(int id, int foo)
and pass from javascript as DoSomething({id: 20, foo: 30});
Since it is still just a controller, you can attribute permissions and return json as you would in any other situation.
If you get stuck, use the debugger and spend the time to figure out what's really going on. This all works in 4.x and I've tried it in 5.x and it still works there as well. But I wouldn't jump into 5.x just yet as there are still several bugs that need to be worked out by the sencha team before it is ready for prime time.
ExtJs has a REST proxy for the data. So what you try to do should be possible. The proxy can be configured and be finetuned.
I used the JSON proxy. ExtJs has very powerful filter and sort capabilities, both server and client side. In my experience difficulties arose when filtering and sorting server side. There is only sparse documentation on how the parameters are passed and which configurations have what effects.
Since you also develop the REST api, you can adapt to those details. You just have to do some research.
Here is not the place to ask about guides. For Asp I cannot help you, I never touched it. If you use ExtJs, you are free to choose you backend. For ExtJs, the start is pretty straight forward :
get Sencha cmd and generate a skeleton app.
follow the tutorial
create one file per class definition.
the API docs are great. If you still lack something SO is great too.
what you have to find out by yourself is the exact way parameters are passed to the backend and how to format the response.