I have a custom implementation of a Google Places Autocomplete in RN (that is I am not using this library and I have implemented my own TextInput and other components because I needed more customizability such as filtering the results and styling. Everything is working as expected. However, right now I am trying to figure out how to use google places session tokens which would prevent me from getting charged for every request (every single time the user types something in my component). However, all the resources I have found online refer to the use of session tokens in vanilla JS or react (web) where they use the following to generate a session token to be sent with the request as a param:
const placesSessionToken = new google.maps.places.AutocompleteSessionToken();
How I can mimic this in RN? My custom component uses an axios GET to retrieve the autocomplete results. My current understanding is that the earlier stated library handles session tokens by itself (although this is merely a guess because it is not really mentioned in the docs). I unfortunately could not find any answers really relevant to my case online. Any help would be much appreciated.
Related
I ran into a problem that I have never faced before developing a PWA with translations.
I state that I have always and only developed multilingual applications in Vue, React, Angular, and at the moment I am using Svelte.
I have always used simple practices, translation with a json dictionary and sending the Lang variable to the server for data acquisition in the requested language (set in the Headers).
All of this was fine until I encountered the need to receive the translated meta tags for the requested content immediately, during SSR, upon landing on the page. But as you know, at this stage there is no access to localStorage or similar, which is why it is impossible for me to acquire the meta tags in the requested language, since I do not have access to the variable set in the browser. How do you act in this case? I'm not interested in finding a specific solution for a certain framework, but a possible technique.
For Svelte I found this half solution, which allows me to obtain the slug / lang / from the address and use it in the server during the rendering phase, in order to obtain the data already translated on the server side.
Can I consider this a good solution?
I don't know what are you returning from the API, but if you have localized user defined content on backend, then this solution is good. If you are translating the app itself, you maybe you can give Tolgee a try, which supports SSR. https://tolgee.io/integrations/svelte
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 .
I'm building a Shopify app with Next.js and I need to grab the query string so I can check in getServerSideProps the identity of the merchant (bear in mind that Cookies are not recommended for Shopify apps)
When visiting some apps I noticed some of them are getting the query string passed down from Shopify in each request.
This image shows how it should look on each request
This image shows how my app behaves
In this image you can see that when you hover the routes no query strings are present, meaning that are passed somehow by the parent app.
As of right now I'm using a Cookie to pass the shopOrigin but I feel like it's not necessary if somehow I'm able to get the query string in each request, also with the HMAC I will be able to verify that the requests are coming from Shopify.
Any calls to your App originating from Shopify properly provide the shop parameter when they make requests. In your own App calls to itself, you would also likely be using the shop name as a query string value.
Note that you are still able to validate your sessions internally using a cookie, you just don't do it via the third-party route, outside the iframe, like we used to. Shopify has plenty of documentation on how to properly authenticate, and construct Apps, check them out. They even give you a working Node App to play with, so you can ensure you get it right.
The solution was pretty straightforward.
Shopify provides a TitleBar AppBridge component that you can use to to handle the App's navigation. What it does is that on each route change it reloads the iframe and the hmac, shop, code and timestamp are coming in the request. It's a tad slower then client side routing but it works as expected.
In order to use it you just need to go to:
Partner's dashboard / Your App / Extensions / Embedded App (click Manage) / Navigation (click Configure) and add navigation links, then you just need to import TitleBar from app-bridge-react and put it in index.js
I'm pretty new to react and building out a little prototype using Firebase as a backend. One of the primary functionalities involves a user writing a post in an editor, which is saved to firebase. On submit in the editor, I am trying to create a new standalone page for the post with the firebase uid as the ending part of the new unique URL.
The problem I'm having is figuring out a way to create the new page on submit. I haven't been able to find any documentation for a similar problem like this specific to react or firebase, and was just wondering on a high-level what a good approach to executing this might be? Thanks
The newly launched Firebase Hosting + Cloud Functions integration can help here. The first bullet point in the documentation looks like it describes your use case exactly.
You also mentioned React. There is a handy sample project showing how to implement an isomorphic React app with Firebase.
Since some time google officially depreceated ajax crawling scheme they came up with back in 2009 so I decided to get rid of generating snapshots in phantomJS for _escaped_fragment and rely on google to render my single page app like a modern browser and discover its content. They describe it in here. But now I seem to have a problem.
Google indexed my page (at least I can see in webmastertools it has) but when using webmastertools I look at google index-->content keywords it shows non processed content of my angularJS templates only and names of my binded variable names e.g. {{totalnewprivatemessagescount}} etc. The keywords do not contain words that should should be generated by ajax calls when Javascript executes so e.g. fighter is not even in there and it should be all over the place.
Now, when I use Crawl-->Fetch as google-->Fetch and render the snapshot what google bot sees is very much the same as what user sees and is clearly generated using Javascript. The Fetch HTML tab though shows only source without being processed using JS which I'm guessing is fine.
Now my question is why google didn't index my website properly? Is there anything I implemented incorrectly somewhere? The website is live at https://www.fightersconnect.com and thanks for any advice.