Take a photo, store it, visualize it in a list

Hi Everyone,

I’m not a developer and I’m struggling quite a bit to build my app.
I’d like to click a button, take a picture, store it, then load it in a list.

I built the screen, the button is launching the camera.
In parallel, I built the cloud data table to store it, but I don’t know how to make it happens.
I didn’t find any tutorial and I can’t understand / articulate the documentation (Take Photo / Move file)…

Any interesting / explanation / tutorial link for me?

Thank you very much!
Gerald

Hello Gerald,

taking photos should be no problem, have you watched tutorial video?
like here: https://platform.appgyver.com/goals/useLogicOutput/video?app_id=93995

i’m also on learning to build some photo apps without frontend backgroud, i tested this step on 1x iphone and 2x android devices, iphone and 1 android worked fine, another android no luck.

Key

Hi Key,

Thank you very much for your answer,
I followed the tutorial and taking a photo is not the problem.
The issue is how to store the result, and then display the picture.
After the “Take Photo” flow, I’m trying to use different others like “Move/rename file” (as recommended in the documentation),

Unsuccessfully…

That is my problem.
Thanks

Hi mates!

I’m trying to trigger a camera on my device (Android). The flow is like that: “Component tap” -> “Take photo”.
At that point I was asked to grant camera permisssion and I accepted it. Unfortunately, after granting it, nothing happens. I expect device camera view to open. Especially given that event is triggered.

Any ideas how to debug? Also, could you please confirm that on your side camera view is opened.

My config:
image

And paths:

Could everyone experiencing issues list your devices and Android OS versions here to help us debug?

As for @Gerald_Arfeuil’s question, the Take photo flow function outputs a file reference object, whose path property points to the local filesystem reference for the taken photo.

Thus, you would e.g. create a takenPhoto page variable of type Local filesystem reference, and then after your Take photo node, add a Set page variable node, choosing Output of another node binding type and the Take photo / Photo file: path output argument. See below for the setup!

1 Like

I’ve uploaded details of my phone above.

My current logic:

In the console logs the only error I see:

Context for page.Page2 not found, event context canvas/page.Page2 remains unchanged

Is the page variable being set? What do you see on the flow debugs side? You of course need to add an image component whose source is bound to the page variable ( photoFile in your case) to render it; sorry for missing that step.

Thank you for your answer.
Have a nice day.

@Gerald_Arfeuil
I’m trying to do a similar thing to you. Taking a picture and showing a list or gallery.
I found this intro helpful: https://docs.appgyver.com/app-logic/overview

It explains the basic logic and sequence of what-links-to-what and how that creates an app.
Talks about a gallery too.

If you find something else useful share with me too pls. Thanks :slight_smile:

1 Like

Hi c_boy,

I already followed all the tutorials, documentation.
But didn’t find the solution to target the s3 data structure in order to eventually store the picture. This is the point I didn’t get.
I wish you the best…

Gérald

Do you have your own S3 where you want to store it? In that case, you need to generate a viable S3 upload URL via some backend service, then use the Upload files flow function.

You can also use the packaged flow functions and upload to AG-hosted S3, see https://docs.appgyver.com/tutorials/uploading-files

I followed the description from this tutorial: https://docs.appgyver.com/app-logic/overview . THe highlighted part does not work for me.

In the example above, we have a Component tap event that triggers the Scan QR/barcode flow function. This opens a QR scanner dialog. Once the user has scanned a code (or cancelled the dialog), the logic flow continues executing.

For both taking a picture and QR code scanning, the page variable is the same:

{
“t0/page.Page1/id-1586866663775-10/productName”: “”,
“t0/page.Page1/id-1586866663775-10/inputDueDate”: “”,
"m/page.Page3/id-1586866663775-12/photoFile": ""
}

Just to clarify, my problem is with accessing camera, not displaying an image :cry:

Could you see what happens if you add a Delay node for 1000ms after the Scan QR code / Take photo flow function? Wondering if this bug could be the issue: https://tracker.appgyver.com/bug-reports/p/triggering-flow-functions-after-a-scan-qr-code-node-and-open-camera-and-others-t

Delay added:


Nothing has changed.

Also, I’m having the same issue on iPhone.

EDIT.
Added “clicked” toast, as below, and is not displayed.

Seems very strange – would it be alright to share your app ID (in the URL field in your browser) so we could take a look on our end?

Sure thing! :slight_smile:

94173

Ah, I see the issue: https://tracker.appgyver.com/bug-reports/p/if-page-is-opened-as-modal-flow-functions-like-take-photo-and-scan-qr-code-fail

We’ll work on fixing this ASAP, but in the meantime you can just open the page as not a modal and it’ll work (setting the page variable should work without Delay node too).

2 Likes

Thanks @Harri_Sarsa, it solves my problem. I can move along with playing. Thanks a lot for your support :slight_smile:

1 Like

I attempted to follow that tutorial until I got to this point:
“(you might need to use a formula function due to a bug that results in Composer incorrectly identifying the data variable and the output as incompatible types)”

It would be helpful if you could elaborate how this function would look like? A screen shot would be helpful.

I think I answered my own question regarding tutorial. Below combination seems to work to add files to the data variable :

image