Help with generating posts and notifications in a web app

Context: This is a social Q&A web app in which users can ask and answer questions.

We need a little help grasping the concept of how container “cards” like posts and notifications are generated in the final build of our web app. We’ll use notifications here in this example, but I’d imagine the same concept applies to actual user-generated content appearing on profile pages and feeds.

So far, we’ve designed the UI appearance of what each type of notification would be formatted as (imaged below). But where does that fit in between Appgyver and the external backend we’d be using? If a new user has no notifications, they would see, effectively, a blank page. Do we set the visibility to False for all template notifications cards, and then have formulas connected to an API to duplicate these cards when the appropriate trigger is made? Each duplicate of the respective notification cards could be filled in with the appropriate information (a display name, etc.) then.

Despite different kinds of notifications (a new question, a like received, a friend request, etc.), they should all stack on the same page in the order received. Please advise.

Addendum: Slightly different quick question. Is the Auth/backend for web-based services like Amazon Cognito ( always connected directly through Appgyver in Composer, or is an exported web app build necessary to connect externally via custom code? There seem to be some mixed messages on the forums about this.

Thank you!

Hi! I would probably just have only one card and then change its content depending on the type of notification, using formulas (a lot of IF going on). That would be the easiest way of going about it, I think.

You could also just show a text of “No new notifications” or similar if the user has nothing to display there (also by using formulas, IS_EMPTY for wherever you store notifications).

Third party auth is possible to do, and there are some tutorials about it on the forums, but I don’t know much more. Depends on your backend what your needs would be. With a quick look it looks to me like Amazon Cognito provides a REST API that you could use directly in Composer.

Hi, Mevi! Do you mean to have a single card with each notification set in their own container, stacked in the card, and then the visibility of whichever relevant container controlled by IF formulas, followed by the data (display names, content, etc.) also being controlled by formulas and data variables?

That could work, as long as we’d still be able to set it up with one card per notifications, similar to the above image.

The primary question was where the actual link/connection occurs to render that list in the final result. What is the method you would use to tell the overall app, “Okay, a notification has just been triggered. Generate one card with this set of data.”? It’s hard to explain. Is the card container bound via a formula to our Notifications list so that, every time there is a new note generated, it creates/duplicates a new card filled with the relevant information?

Thank you for sticking with us on this. It’s kind of been difficult grasping how those triggers work.

• Regarding third-party auths: I’ve also been experimenting with Google’s Firebase and I’ve noticed Firebase wants you to copy/paste code into the tag:

Well, since access to the raw code is not possible directly in Appgyver, is there an equivalent function? The closest I’ve found was setting up a direct third-party REST API as a data resource under the Data tab:

I’ll admit I’m drawing a blank where Appgyver would connect to my API and wondering if I should just build the web app, open the page code (if possible) in Notepad++, and go about implementing the API directly. Just thought it might be more stable if you could do it directly via Appgyver itself.

I would think more like making each component modular, so having a formula define which text there is, for example something like

IF(IS_EMPTY(data.Notifications.from_user_id, "Anonymous",data.Notifications.from_user_name) for first paragraph, and then setting color and linking with the same formula. Similar rules for the next parts. And showing/hiding e.g. the heart icon and the accept/decline friend request based on the type of the notification.

As for the primary question, like in the formula above, I would have a data set of its own for the notifications. It can be a locally stored, or AppGyver hobby database, either works. So then you would generate a notification resource from the event, specifying to whom the event is (user_id) and everything else you need (type, text, the user it’s from etc).

Not sure about firebase, BUT we have firebase SDK which is included in your end builds if you use any push notification stuff, so all the scripts etc. are handled through that and you shouldn’t need to worry about them :thinking: Not sure how the web support is though as I haven’t used it, but it might be that other forum users know, or I can ask around if we know whether web is supported or not.

Ah I was asking about this and found out that we don’t really have support for web notifications as of yet :frowning: so they would have to be done by polling against a database instead of being event-based at the moment.

Hi, Mevi. Excuse my delay in response and thanks for your continued help.

A few more questions, if you would:

  1. Firebase SDK: Do you mean that we would build our web app and the build files would contain the method to directly link to our Firebase backend? This is what we’re struggling with. Where do we paste whatever linking code that officially directly connects our app to the Firebase backend or is another method we’re not aware of used?

  2. Are Appgyver formulas a proprietary coding structure or based off of something directly available with React? In the former case, could you provide a link to a library page of formula terminologies or a place to start? If it’s based on React’s own structure, then I can look it up externally (not for lack of trying).

For example, a post structure for the question section of an answer provided on our web app would be written as a Content formula for a single text component:
"•\u00A0" + "askerDisplayName" + ":" + "\u00A0askerQueryParagraph"

*’\u00A0’ is used for spacing.

Which translates to the line of text in the below image indicated with the arrow.

So our formatting issue is, would it be possible in formulas to wrap ‘askerDisplayName’ with an #39a1ff color code (bright blue; implying a link), then link that segment to the profile of the user who sent that question – as that would be their name? Later on, ‘askerQueryParagraph’ would be the actual text of that question sent by the user and would be plugged into the database.

Visually, it would look similar to this:
“• Mevi: Hi, how are you?”

We’re just having trouble figuring out how to properly wrap the formula code without getting constant syntax errors.

In keeping with #2, would it be better to just have four separate paragraph/title components set into a container with a horizontal layout; one for “•”, one for “askerDisplayName”, one for “:”, and one for “askerQueryParagraph”? We figured this wouldn’t work in the long run do to visual child-wrapping issues sometimes causing multiple line breaks if anyone bit of text is too long.

So we’d guess that formulas are the way to go.

I figured that would be the approach to begin with, polling from the database for notifications. Hopefully, it’s not too overwhelmingly expensive if a user visit their notification 50 times a day, thus, 50 calls to the backend – to ensure such a page is always up to date. :thinking:

Thanks, Mevi.