I'm building a React Native (with Expo) app and have a survey form screen that I want to have appear intermittently for the user to fill out. Let's call it SurveyScreen. I'm doing this by setting a setInterval to poll the backend server hourly for scheduling data to see if the user is due to fill out a survey. This will probably be done in the main App.js in componentDidMount
The above seems straightforward to me. What I'm not clear on is once the polling api determines that the user is due for a survey, how to have the app display SurveyScreen no matter what page the user is on in the app.
One point of clarification is should SurveyScreen appear immediately after receiving a green light api response or should the screen appear after the next user action, e.g. navigation to another page, tap a button, etc? I think either way would be fine at this point. Would love to know both ways if possible.
Any ideas? Thanks.
Update the state.
Example: you subscribe to api => event fires => you update state => survey pops up
You can use portal to easily position survey on top of everything.
Related
I'm making a client management system in Laravel and ReactJS. I use Laravel for the backend and the api and ReactJS (with Context API) for the frontend of course.
I want to add a tracking timer into my application so the idea is that you can click on a button and select a client and it will start a timer, when you click on the stop button it will stop the timer and the time passed, is how much you spend working for that client.
My question is when should I send the time spend to the backend API?
My ideas:
After the users clicked on the stop button.
Every single minute (but with this technique the client will send a lot of requests to the backend).
NOTE: When a user refreshes the page the timer needs to continue where it left off.
Does anyone have some advice on how to do this?
From your requirement, I guess that's fair enough when the stop button is clicked. In fact, you may capture the date-time
once start is clicked
once again when the stop button is clicked also find the difference between these two to identify the time consumed in your client application.
This way, refreshing the page will have no impact since these are loosely coupled.
I am building a React App using the react-router library and the Flux architecture.
Now a doubt came up. Should I load all the required data upfront or make each route load the data it needs when it's the time? It would be weird when the user enters the app through an edit page and, when he saves the form it goes to the list of objects but it's empty (has only the one object) until the data is fetched.
What would be the best approach?
You don't want to go deep into preloading data in anticipation of what the user is going to do. It improves the UX of the list screen but it degrades the UX of the edit screen. I've been down that road. It's fine at first, but as requirements change, and you start also loading this or loading that, the UX really goes downhill.
In Flux, you should only load data in the Action. To initialize the data for your component, you can call the appropriate Action from componentWillMount().
If you're worried about the user seeing no data when they navigate to the list screen for the first time, you should show some sort of loading indicator.
If your data loads slowly, you should implement a progressive loading scheme (maybe 5 items at a time).
For a look-and-feel example, just open up the main News Feed on facebook.com. Notice that initially (depending on your internet speed), there are no stories listed. You see blurry boxes into which stories will load. As the data loads, stories appear. They also have progressive loading implemented. Notice that as you scroll down the page (quickly), you'll see that blurry box at the bottom of the page before older stories are loaded and rendered.
I have an app that uses AngularJS and Firebase (with AngularFire API), but I'm getting some problems with the $bindTo service. Sometimes users are loosing data because there is no good connection in my city, our internet is too slow. I was thinking to create an icon in my app that shows the user if its data was updated successfully or not.
How I was thinking to do it?
- Watch the object
- On data changed, the icon becomes red
- When data is saved on Firebase, returns an event that change the icon color to green
How can I do it? Is there a better way to deal with it?
Check out https://www.firebase.com/docs/web/guide/offline-capabilities.html
This gives example of how to check out connection status and event handlers to deal with such situations .
What's the best practice of loading data at launching Chrome App?
The landing page of my Chrome App is dependent on some configuration data, which I've stored in the chrome local storage. However, reading chrome local storage is an asynchronous process. Hence, after the App has launched, there is a period of time when the landing page doesn't show correctly.
To avoid this blank time (due to the asynchronous process of reading local storage), I'm thinking about reading data at background JS. However, I haven't googled out what's the best practice to do it.
Anybody has any comments? Thanks.
just listen to the onLaunched event
chrome.app.runtime.onLaunched.addListener(function() {
// load your data
});
Here's one piece of helpful suggestion I've got from the Google Group. Share here so that someone with the same problem might refer to it:
You can read from chrome.storage in the background page and open the window when the data is ready. However, the user experience might be even worse, because instead of the incorrect landing page, you have no user feedback at all.
The usual (and easy to implement) solution is to show your landing page with some visual feedback during data loading, like a spinning wheel with a "Loading" label. If you UI really requires the data to show up, you can add this visual indicator as an opaque div on top of the whole window.
Some people use splash screens, but I don't think it adds to the user experience.
I have a Silverlight App which gets its data from a database. My Silverlight app (running in the browser) retrieves the data through a web service. Pretty standard setup.
But there is some data which has to be there all the time or the App is in an invalid state - think data to fill drop downs etc. So I need this data to be "pre-loaded" into the App before it's sent down to the client so that it's never in an invalid state. Today I load this data via a web service call when my first page is initialized which can some times take a few seconds - during that time my App is in an invalid state.
Is there a way to populate data (from a backend database) in my Silverlight App before it's sent to the browser?
It is valid for an app to start and not be ready to use for a while, so long as the user cannot interact with it (or see the broken bits:))
Better to ensure your app has a splash screen/login page etc that displays until such time as the required resources are loaded. Once loaded you can set an app state to then show the main screen.
I had the same problem with a website that loaded the menu items via a service (as the text was data driven). Wound up running a progress spinner over the top (with a full-screen background).
I don't think you can. The application runtime occurs on the client's machine. I would suggest putting up a loading dialog while you bring those items down from the database.
What HiTech Magic said. Best practice for this is to use a splash screen or login page. You can also have your buttons (and interaction) disabled by default, and after the data is loaded, enable the UI. I would go with the spash screen though..