Build a Fitness-Tracking App with Low-Code
-
Transcript
[00:00:06.540]
now what’s really important here. And I think the most[00:00:08.769]
exciting part is that we’ll be doing a[00:00:11.310]
live bill that you conjoined.[00:00:13.410]
So if you go to this,[00:00:15.939]
your l here at the bottom of the screen,[00:00:18.219]
you come down with the project files[00:00:20.370]
and start your own A[00:00:23.730]
Yeah, Yeah,[00:00:26.219]
that’s that’s a really cool feature here. So we[00:00:28.320]
will be going through it[00:00:29.929]
a little bit faster than,[00:00:32.229]
uh, you know, then[00:00:34.560]
usual. So if you’re new to medics than[00:00:36.990]
maybe it’s better to Ah,[00:00:39.240]
you know, uh, check. Check that[00:00:41.289]
out afterwards.[00:00:43.539]
All right, let’s get onto the use[00:00:45.780]
case. Yes. Sorry. I just saw a[00:00:47.789]
question coming. The men explosions 8.10[00:00:50.469]
point two for anyone who wants to know.[00:00:53.030]
Uh, yeah, so high. Everyone a[00:00:55.359]
mine must meet you.[00:00:57.390]
So basically, I’ve been working from home a lot[00:00:59.439]
lately and call myself slacking[00:01:01.509]
more and becoming a bit of a cut potato.[00:01:04.400]
So I called up some brands and[00:01:06.430]
said, I want to get back in shape.[00:01:09.200]
So that’s when we decided[00:01:10.909]
we’re gonna build an app[00:01:12.469]
so we could share our runs and we could compete[00:01:14.560]
for, like, a leaderboard try for you know, bragging rights.[00:01:18.540]
So she has what we want[00:01:20.549]
the up to do. So we need Teoh[00:01:22.939]
have a mobile app that uses native Mobile[00:01:24.959]
functionality. We want to use GPS data.[00:01:27.069]
We want to use the camera. And when you use the local[00:01:29.319]
storage,[00:01:30.579]
we want to be able to start and stop[00:01:32.590]
runs and invite friends to the AB.[00:01:35.239]
And we need to compete in a readable or like a safe[00:01:37.329]
for bragging rights.[00:01:39.250]
We want to add voters to the runs,[00:01:41.299]
and that just needs to look good and feel[00:01:43.379]
good. And we need to talk about sinking the[00:01:45.439]
data. So it’s going safely in the ground.[00:01:49.200]
We have a little preview over here[00:01:51.439]
off what the APP is gonna look like if[00:01:53.909]
you stick with us to win.[00:01:55.890]
So whoever hasn’t downloaded the files,[00:01:58.079]
you conduce. Um, Now there’s a link there.[00:02:00.629]
Yeah, this get started.[00:02:02.569]
Excellent[00:02:03.609]
time for the most important part.[00:02:05.500]
Let’s build.[00:02:07.719]
So I’m just sharing my screen.[00:02:10.539]
Can you see my screen?[00:02:12.639]
Yeah, you’re good to go.[00:02:14.900]
All right,[00:02:16.099]
One second.[00:02:18.139]
So[00:02:19.719]
to prepare for this web, not I have created a medics[00:02:21.979]
adequate foot fast on. We’ll just[00:02:24.139]
go into the environment.[00:02:27.870]
So this is the medics developer[00:02:30.090]
Portal, which is available at home.[00:02:32.189]
Not many. Stop calm. So here you can really[00:02:34.340]
see your team, your stories, What[00:02:36.460]
you guys are working on.[00:02:38.099]
What’s princes active right now? All that[00:02:40.180]
kind of stuff.[00:02:41.639]
So this just opened up[00:02:43.659]
so normally you would do it from your it[00:02:45.909]
up, click the era, and then can choose[00:02:47.939]
to edit in studio or mid[00:02:50.099]
extra year pro.[00:02:51.439]
I’m really[00:02:52.580]
sorry, Ryan. Just just checking. Are you[00:02:54.599]
recording?[00:02:55.639]
Yes. Yes, I am recording. Excellent.[00:02:58.449]
So I really have my app open young.[00:03:00.639]
So when you guys download it on,[00:03:02.889]
open it up. You can come to the main[00:03:05.000]
model. Yeah, So[00:03:07.729]
Medic Studio is perfect for building[00:03:09.860]
out the user flow making basic[00:03:12.150]
page designs in the overall navigation[00:03:14.219]
structure of your app.[00:03:16.020]
And what we’re gonna do is take[00:03:18.139]
it a step further and add some more advanced[00:03:20.240]
features using Mendik Studio Pro[00:03:22.729]
that you could download it install on your computer.[00:03:25.340]
Of course, if you do start a project in studio[00:03:27.650]
Pro, you can seamlessly transfer[00:03:29.780]
that over.[00:03:30.860]
If you do create something in Munich studio,[00:03:33.219]
you can[00:03:34.219]
transfer that over in Studio Pro[00:03:36.250]
and continue working on that.[00:03:39.039]
Yes. So we’re gonna start with the first[00:03:41.360]
feature right now. So[00:03:43.620]
starting at the domain model, I already have[00:03:45.669]
some entities in that crate. So there’s three[00:03:47.930]
main ones. So we have run, run[00:03:49.990]
images and location.[00:03:51.639]
This is most people tracking the rent. Dates like[00:03:54.319]
distance when it started and ended the[00:03:56.469]
status of the rent, which is not[00:03:58.580]
busy. Busy done.[00:04:00.840]
Um,[00:04:02.099]
the duration and all that kind of stuff.[00:04:05.879]
Um,[00:04:09.909]
yeah. So I was just looking at a jackets. I will[00:04:12.039]
share a link to the Project 1000 in a moment.[00:04:14.939]
Um,[00:04:15.939]
so about this time, a model, the main model[00:04:18.100]
is really a representation[00:04:20.290]
off what’s in your database. And[00:04:22.470]
so every time you store something where you want to retrieve[00:04:24.790]
data, you use the domain model for[00:04:26.899]
that, and medics will take care of[00:04:29.160]
the underlying database so you don’t have[00:04:31.300]
to worry about primary keys.[00:04:33.370]
Optimizing Cory’s. That and so[00:04:35.430]
on. Yeah, exactly.[00:04:37.839]
So looking at this object[00:04:39.910]
that we hear the accountable the entity,[00:04:43.519]
this is basically we restore the user[00:04:45.810]
stats like the title distant. They run[00:04:48.060]
total friends[00:04:49.509]
and yeah, total runs[00:04:51.930]
It’s also a generalization off[00:04:54.189]
system dot into persistent but image,[00:04:56.730]
which basically music and hold pictures.[00:04:59.720]
In our case, we’re going to use it to store[00:05:02.079]
profile pictures.[00:05:03.839]
Awesome.[00:05:04.949]
So let’s create the run page so[00:05:07.069]
we can start starting stop runs[00:05:09.370]
and the track our time and our distance.[00:05:12.680]
Yeah, So we’re going to start your on the coordinates[00:05:15.079]
of Page, which doesn’t have a[00:05:18.100]
that second king of Yes, we have a view[00:05:20.470]
runs and brings.[00:05:22.139]
So we’re starting from the other section[00:05:24.290]
where we already have a carousel, just[00:05:26.290]
some images.[00:05:27.540]
And we’re also had a data New[00:05:29.560]
Year that just shows the details of[00:05:31.600]
your most recent run.[00:05:34.040]
So[00:05:35.189]
we’re gonna add in the middle here,[00:05:37.290]
and we could add the elements one[00:05:39.339]
by one, but to say time for the[00:05:41.509]
webinar. I’ve created some building blocks,[00:05:44.639]
so we’re going to start off with dragging stock[00:05:46.990]
around page onto this area[00:05:50.800]
so[00:05:51.970]
the bowling block is just a collection[00:05:54.060]
of widgets on. You can pre style[00:05:56.079]
them, their data agnostic, so if you have[00:05:58.220]
a button on, it will remove the net of blood.[00:06:00.839]
But it really just say it’s time. It’s reusable. Craig,[00:06:03.540]
think of it like a complaint.[00:06:06.509]
So here we have the image[00:06:07.930]
and we have a button start run. We’re going to[00:06:09.930]
create a men of flight for that. So[00:06:12.339]
gonna select on click? Never flown[00:06:15.790]
Picking the right holder and they’re just gonna call[00:06:17.949]
it a C two[00:06:20.529]
Great new[00:06:22.939]
A C T. Stands for actions, the name[00:06:24.959]
conventional.[00:06:27.610]
So go to the metaphor.[00:06:31.870]
First thing you always do is to[00:06:33.990]
allow the users access to this meant[00:06:36.139]
afloat using module world. So we[00:06:38.189]
want a laugh admin and use it.[00:06:41.240]
So[00:06:42.540]
the first action we’re going to[00:06:44.980]
create is just a creates[00:06:47.379]
on, and[00:06:50.250]
we’re gonna create the run.[00:06:54.160]
We can commit this because it’s using the local[00:06:56.350]
database. Then you worry about that.[00:06:59.040]
Um[00:07:00.319]
and then we’re gonna link this to the accounts object[00:07:02.660]
using association,[00:07:05.089]
and we also need just[00:07:07.370]
a run i g, which[00:07:09.379]
were just using a con fooling[00:07:14.040]
and anger, adding a score,[00:07:17.649]
and we’re gonna just a random number[00:07:20.240]
on multiply that by thousands to get[00:07:22.389]
a random number, but between one in 1000[00:07:24.790]
so it’s gonna be there full name[00:07:26.509]
and along number.[00:07:29.220]
Yeah, we’ll be re using that as well later[00:07:31.290]
on to retrieve this specific run.[00:07:34.990]
So after that, we can just[00:07:37.209]
add a[00:07:38.560]
show page action[00:07:42.899]
and we’re going to policy run,[00:07:44.910]
object, and we need to them[00:07:47.089]
just select the page. We don’t have one. So[00:07:49.129]
we’re gonna say you[00:07:51.540]
the page name is already full. Didn’t run[00:07:53.839]
you in it. That’s fine. We are using[00:07:55.990]
the Native Mobile profile and we[00:07:58.089]
have a navigation. They’ll select it.[00:08:00.139]
You do have to select your type[00:08:02.709]
off page.[00:08:04.839]
Yeah, and ah, Paul is actually asking[00:08:06.990]
a really good question. Who are you were using a nat’l flow[00:08:09.180]
instead of a micro flow.[00:08:10.740]
Now, in medics, logic is captured[00:08:13.269]
in either[00:08:14.220]
micro flows or nano flows. So[00:08:16.240]
when you’re building a normal app, Ute simply[00:08:18.509]
used micro flows. But[00:08:20.730]
in this case, because we’re building a native[00:08:22.759]
mobile app[00:08:23.639]
using nano flows, because nano[00:08:25.709]
flows are pieces of logic that run[00:08:28.029]
on the device itself. So[00:08:30.089]
they’re offline[00:08:31.839]
pieces of logic and they don’t need[00:08:34.009]
a connection to a nap[00:08:36.129]
location server, for example,[00:08:38.039]
as opposed to micro flows that[00:08:40.190]
do need an active connection[00:08:42.370]
to a nap server.[00:08:45.740]
So[00:08:46.639]
we have the pain chair,[00:08:49.370]
so we’re just gonna drag samo building blocks on. So[00:08:51.610]
we have a stets[00:08:53.519]
moving book, and this is going to show you the[00:08:55.610]
duration, distance and speed.[00:08:57.799]
So these are just then using labels inside containers[00:09:00.340]
with a bit of styling.[00:09:01.899]
What we need to do here is connect our[00:09:04.330]
attributes to the labels. So duration[00:09:06.909]
little get duration. And so[00:09:12.019]
eso Well, while you were filling that in, um,[00:09:14.889]
some was asking What is the difference between the two? So[00:09:17.320]
ah, Michael flow. Ah, normal[00:09:19.669]
micro flow[00:09:20.960]
needs an act of connection to an[00:09:23.059]
act of data missed river,[00:09:24.539]
but a nano float does[00:09:26.590]
not. So that’s a huge difference. So you can use[00:09:28.649]
nat’l flows for offline capabilities[00:09:31.139]
in your in your app[00:09:33.110]
next to that, because a natto flow[00:09:35.600]
can run locally on your device.[00:09:38.240]
Um, it can also access[00:09:40.659]
device capabilities like[00:09:42.820]
your camera, a GPS tracker[00:09:45.330]
on things like that.[00:09:46.840]
So it offers different capabilities[00:09:49.000]
for, uh, for different scenarios,[00:09:51.409]
Really? So[00:09:54.250]
we finish with the first building block. So[00:09:56.429]
now we just added the number another one starting[00:09:59.110]
start and stop time on. So[00:10:01.809]
pretty simple spot time gets start flying[00:10:04.240]
and in time gets in time[00:10:09.049]
You know what you see here is a little text block[00:10:11.269]
and it has a parameter. Now, you could just[00:10:13.490]
add normal text in the block[00:10:15.639]
that static, like in bed and started.[00:10:17.889]
Or you can show[00:10:20.019]
a dynamic piece of content, a piece of data[00:10:22.340]
that’s related to a user[00:10:24.610]
that you pull from the database in that[00:10:27.139]
Yeah, exactly.[00:10:28.690]
So now we have most of our elements on the page[00:10:31.210]
and we just Addison buttons.[00:10:33.330]
It’s the building block[00:10:35.070]
when page buttons.[00:10:37.059]
So these are just the buildings were going to connect on[00:10:39.230]
the inner flows for recording the GPS[00:10:41.370]
data, and we met.[00:10:43.539]
So before we do that, that’s just spend[00:10:45.759]
some time making sure they are[00:10:48.059]
the correct visibility. So we’re gonna do that[00:10:50.120]
by buying conditional visibility,[00:10:52.730]
and we can just go to visibility[00:10:55.379]
in the properties. We’re[00:10:57.529]
gonna hide this condition based[00:10:59.580]
on attributes value[00:11:01.429]
on the status of the rent. So start[00:11:03.600]
will show for not started in.[00:11:06.440]
Yes, that’s not showing its busy.[00:11:08.889]
And so,[00:11:18.450]
and the view map is only going to show[00:11:20.929]
when it is done.[00:11:27.539]
And also this label we just wanted[00:11:29.700]
only show when[00:11:31.730]
we wanna show. When it is done.[00:11:37.539]
Yeah, this is really Andy. So you can use this to clean[00:11:39.639]
up your you y a bit. So[00:11:41.580]
you don’t necessarily want to have a stop button[00:11:43.870]
when you haven’t actually started a run.[00:11:46.259]
So, using conditional visibility,[00:11:48.519]
you can configure that.[00:11:51.139]
So now we’re just connecting our net[00:11:53.320]
inflows to the buses. So[00:11:55.779]
we’re just gonna do, stop, run and[00:11:58.350]
run their people close.[00:12:01.139]
And in this you on that is just[00:12:03.230]
a[00:12:04.639]
one click page, and we’re just gonna civic run,[00:12:06.850]
Matthew. A metre shows the location[00:12:09.299]
dates of intimate.[00:12:11.909]
Excellent. Um,[00:12:14.120]
what do you think? Is it time to[00:12:16.559]
show the app, or shall we build some extra[00:12:18.779]
stuff? Let’s build the foetus, Isom.[00:12:20.950]
Yeah, Cool. All right. Yeah.[00:12:22.980]
So another requirement that we have for the app[00:12:25.100]
was that we want to be able to take pictures[00:12:27.450]
during a run and show that for[00:12:29.529]
the run. Yeah,[00:12:31.549]
So to do that, we’re just going to create[00:12:33.649]
a floating action, but[00:12:35.919]
it’s a Abdelmajid with native mobile,[00:12:38.720]
so this is just like a regular, but it just[00:12:41.080]
looks a bit cooler and has a bit of[00:12:43.169]
a circular[00:12:44.919]
shape.[00:12:46.169]
So we’re gonna sneak icon off camera,[00:12:50.899]
and we’re going to select an on click events[00:12:53.200]
to call an elephant.[00:12:55.139]
So for this, we’re gonna build the flow.[00:12:57.529]
Just put it in a run on. We’re gonna call it a[00:12:59.710]
CT again. Action[00:13:01.820]
and capture. Running.[00:13:04.440]
Very simple convention.[00:13:08.899]
Awesome. So, um[00:13:11.240]
yeah, when we added[00:13:13.309]
the certain stop buttons, Um,[00:13:16.139]
what Ryan actually did was[00:13:18.409]
use a JavaScript action.[00:13:20.840]
Uh, are you going to use one again[00:13:23.279]
in this data flow[00:13:25.750]
in the capture run image, we have[00:13:27.960]
a standard[00:13:29.639]
pre bolt[00:13:31.009]
capture photo[00:13:32.360]
job script action, which is both by the R[00:13:34.490]
and D team um, index.[00:13:36.100]
Excellent. So just out of the box, we can add[00:13:38.169]
that capability. We don’t have toe develop[00:13:40.539]
anything ourselves cool. Don’t have to do anything.[00:13:42.549]
Just cold action. So all we do is[00:13:44.909]
we call a creates objects to create[00:13:47.019]
all rent image.[00:13:49.110]
Got a link that to the run object[00:13:51.330]
Fire association.[00:13:56.190]
Then we immediately can. Cole.[00:13:58.490]
I would take picture action.[00:14:01.600]
So this[00:14:02.809]
man, and[00:14:07.120]
so he had just opens up the property. So we just[00:14:09.269]
need to provide it with our[00:14:11.320]
new rank image city[00:14:13.389]
and select the source for the pictures So[00:14:15.460]
you have the choice is off MT. Camera[00:14:18.039]
your library. Either We’re gonna said either[00:14:21.389]
and the picture quality we’re[00:14:23.610]
gonna set original[00:14:25.820]
the are two fields yet for when you[00:14:27.909]
choose a custom picture quality,[00:14:30.009]
we don’t need to spend by anything for[00:14:32.049]
them. But we do need to set them to anti. Otherwise,[00:14:34.529]
it’s just gonna have an era.[00:14:37.240]
Excellent.[00:14:38.409]
Yeah. And so jobs hurt. Actions[00:14:40.769]
are[00:14:41.710]
reusable actions based on[00:14:43.720]
Java scripts that run on the client[00:14:45.929]
like banana flows.[00:14:47.740]
And yet they allow you to use[00:14:50.259]
capabilities such as HTML five[00:14:52.399]
browser functions, Cordova phone get plug[00:14:54.450]
ins, um, and react modules.[00:14:56.980]
So this allows us to take the pictures.[00:15:00.740]
So we do need to set a display[00:15:02.840]
field on the run itself, which[00:15:05.110]
is just has images. True. So[00:15:07.309]
this will just show the images when[00:15:09.409]
they have been[00:15:10.870]
and they were just gonna commit all objects.[00:15:16.669]
And then we’re going to call this pre prepared flow[00:15:19.100]
which this checks. If we have[00:15:21.360]
connection[00:15:23.190]
and then six the date I’ll go in so you can[00:15:25.250]
see it.[00:15:26.120]
It just checks if we have connections.[00:15:28.149]
These are native jobs protections[00:15:30.629]
and then synchronizes everything if it’s[00:15:32.710]
true. Eso again, those a[00:15:34.730]
pre built right, Those check connection[00:15:37.110]
things.[00:15:38.850]
So[00:15:39.669]
I’ll just let this run so long, And[00:15:41.759]
then we can talk about the job script[00:15:46.139]
style. August needs to go away.[00:15:48.240]
I have some errors. What?[00:15:50.679]
I’m gonna guess it is access[00:15:54.519]
most common here[00:15:56.490]
as always to keep in mind that when you build[00:15:58.620]
a nana flow or micro flow,[00:16:00.610]
you need to give permission to at least[00:16:02.740]
one[00:16:03.700]
user role to actually[00:16:05.980]
execute that, uh, that type[00:16:08.110]
of document. Otherwise[00:16:10.039]
it’s gonna be blocked and no one[00:16:12.149]
will be able to use it.[00:16:13.740]
Yeah, So just before we compiled,[00:16:16.610]
I did forget to put the images on the page. So[00:16:18.659]
we had a rampaged images building block[00:16:21.940]
straggling awesome. It’s better.[00:16:24.279]
S o. This is just a native carousel like[00:16:26.320]
we have in the home page on it just[00:16:28.450]
has a image you’re inside[00:16:30.529]
and then is a shoe icon for when[00:16:32.539]
there’s no images. So we’re gonna[00:16:34.409]
apply some visit traditional visibility[00:16:36.820]
to this[00:16:38.240]
just on that has images[00:16:41.539]
false[00:16:43.039]
on. Then the carousel should show[00:16:45.279]
when we have images. People, true,[00:16:49.210]
do that.[00:16:51.639]
Just a reminder. So if if you’re using[00:16:53.970]
the chat[00:16:54.960]
at the bottom, you can select who you’re sending[00:16:56.980]
your messages to. So either[00:16:59.009]
just us or also[00:17:01.429]
all the other attendees.[00:17:04.240]
So we needed truth. The database[00:17:06.509]
data source for the[00:17:08.369]
carousel. I’m just doing a fire database.[00:17:10.799]
We’re going to select you run objects.[00:17:15.019]
Sorry, No running images is what I mean to[00:17:17.019]
say by it association.[00:17:19.410]
And we’re gonna put a sort order on it for[00:17:21.700]
creative dates[00:17:23.490]
and sort of descending. So we always had[00:17:25.609]
much reason. One.[00:17:27.970]
And that’s a pool. The carousel.[00:17:30.109]
We just need to connect the[00:17:32.210]
image. You. It’s run emissions.[00:17:36.039]
Yes, you can just drag and drop that from the[00:17:38.480]
connector[00:17:39.519]
pain. Also,[00:17:42.660]
very good questions in the chat.[00:17:44.470]
We will get to them[00:17:47.289]
and[00:17:49.230]
either. Yeah, if something pops up now[00:17:51.480]
or when we Ah, when we get to the Q[00:17:53.579]
and A, we’ll go through them.[00:17:55.640]
Yeah, so while[00:17:57.759]
that’s busy building, I’ll talk you guys through[00:17:59.990]
the Java script behind it. So we have[00:18:02.170]
to actions. We have Star tracker and[00:18:04.559]
stop tractor,[00:18:06.339]
so[00:18:07.900]
it’s basically want to stop the recording[00:18:10.210]
off the location and want to stop it So[00:18:12.430]
it’s thoughts has a few parameters[00:18:15.410]
all of these settings here under category.[00:18:18.279]
That means it’s for battery life and[00:18:20.359]
sort of power consumption.[00:18:22.079]
The more[00:18:23.619]
the more your stationery radius[00:18:25.970]
radius is, the more powers can use.[00:18:29.220]
Beside that, we have a moral which[00:18:31.470]
means to be the EPS euro.[00:18:33.720]
So in this case of my local host[00:18:36.710]
and serenity, which we created[00:18:40.039]
so if we look at the Kurds[00:18:44.839]
so firstly disclaim, I didn’t[00:18:46.930]
write this code. This is a library[00:18:49.059]
I found on YouTube. It’s Atmar[00:18:51.460]
and 85[00:18:53.039]
reacting native background geo location.[00:18:56.240]
If you zoom in a little bit, yeah, course.[00:19:01.380]
If it allows you to[00:19:03.640]
to do that I don’t know if I can zoom in[00:19:05.990]
this.[00:19:08.160]
Okay,[00:19:09.339]
If anyone needs to look, you have[00:19:11.390]
the project files you can open up.[00:19:13.740]
So these are just my parameters[00:19:15.799]
and imports.[00:19:17.329]
We have essentially a constructor which[00:19:19.529]
configures the[00:19:21.269]
background geolocation using our[00:19:23.539]
parameters[00:19:24.609]
So you can see here the euro is using[00:19:26.660]
our you’re always possible[00:19:28.799]
and the rent ideas being set.[00:19:31.440]
And they re simply just hold geolocation[00:19:34.069]
dot stop[00:19:35.400]
and similarly to end[00:19:38.940]
and stuck doesn’t have any princes[00:19:41.180]
and we just call[00:19:43.400]
geolocation. Don’t stop.[00:19:45.210]
Yeah. Yeah,[00:19:47.150]
What’s what’s really important here[00:19:49.390]
is to note that while medics is very visual,[00:19:52.440]
um, were not a no code platform.[00:19:54.819]
We are a low code platform. So[00:19:57.190]
this offers thievy ability[00:19:59.690]
to extend your applications[00:20:02.049]
with your own custom code or code. And he[00:20:04.109]
found mine.[00:20:05.609]
And, uh, yeah, next to JavaScript[00:20:07.920]
actions that are built into the platform.[00:20:10.390]
You could also create your own job script actions[00:20:12.849]
on. Of course. That’s why we have the medics app[00:20:14.880]
store, right? So a lot of extensive[00:20:17.210]
bility is possible.[00:20:20.170]
So the APP was just busy loading[00:20:22.170]
on my device.[00:20:23.329]
So[00:20:24.190]
we should have said this in the beginning, but you guys[00:20:26.480]
need to test using the A P K we[00:20:29.039]
put in the damaged files.[00:20:30.940]
It’s basically a special[00:20:32.940]
adaptation of the making native at[00:20:35.119]
with some special leggings just to make the geo[00:20:37.259]
location[00:20:39.039]
um S O and the make it natives[00:20:41.259]
app is, and at that, you can download from[00:20:43.460]
the AP stories.[00:20:44.640]
It’s amend eggs app that allows[00:20:46.779]
you to test, like, locally,[00:20:49.000]
test your applications.[00:20:51.789]
So we just living it load the data this and day during[00:20:53.980]
the database. So the first time it’s run, it’s[00:20:56.000]
gonna synchronize all of that stuff?[00:20:59.019]
Yep.[00:21:01.039]
Now, before we continue, I have[00:21:03.519]
a question for everyone.[00:21:05.289]
Him?[00:21:06.440]
Oh, there we go.[00:21:07.990]
The voting, Those money.[00:21:09.680]
You doing? Okay,[00:21:11.890]
So I have a question, and the question[00:21:14.130]
is[00:21:15.359]
I will put it on your screen[00:21:17.289]
right now.[00:21:19.539]
Are you using the Native Mobile?[00:21:21.839]
Now?[00:21:22.700]
We have a very mixed audience here today, so[00:21:24.880]
I’d love to know, Uh,[00:21:27.140]
you’re not using it yet, but you like to[00:21:29.420]
Yes, we are actually using it in[00:21:31.549]
production, APS or only[00:21:33.660]
for testing it.[00:21:34.940]
Or maybe there is an answer that’s not on this[00:21:36.990]
list. If so, what is now in the chat?[00:21:39.630]
Um, and we’d love to know what you think.[00:21:45.170]
Good. Lots of questions coming in.[00:21:51.440]
So interesting. Interesting.[00:21:53.890]
I’ll share the results in a little bit.[00:21:55.619]
Um,[00:21:58.039]
is your absolute ID? So here[00:22:00.059]
we have a love in school.[00:22:04.140]
You just so[00:22:12.130]
straight away it’s going to take us to the landing page[00:22:15.440]
on. You can see this. The carousel[00:22:17.640]
on the home page[00:22:21.240]
on a nice swiping[00:22:23.309]
features the hair of the one page[00:22:25.630]
we have friends Page,[00:22:28.109]
and we have the stock around a tree created now,[00:22:30.210]
so That’s that[00:22:32.940]
Tom and the Buttons on show. But that’s OK.[00:22:35.200]
We’ll get them back later[00:22:36.950]
and see, here’s the rampage with our labels,[00:22:39.720]
nothing has started yet.[00:22:41.660]
And we can just be in this[00:22:43.880]
test camera. So let’s take a photo.[00:22:48.589]
It’s on my window.[00:22:52.240]
That is OK,[00:22:55.539]
you’re a nice park, uh, park around[00:22:57.660]
your house. Yes, on that[00:22:59.779]
story. So that just sometimes[00:23:01.940]
happens waiting[00:23:03.839]
the burned trying to save[00:23:06.440]
on there. It’s sinking.[00:23:09.400]
There we go that I wear a watch because[00:23:11.529]
my wife I dropped on. So[00:23:13.680]
did the image. Has a belated[00:23:16.460]
so excellent[00:23:18.069]
I’m just gonna end the pole to see and share[00:23:20.289]
the results[00:23:21.369]
so everyone could see that[00:23:24.029]
There we go.[00:23:25.440]
So most people are not using Native Mobile yet.[00:23:27.849]
They like to,[00:23:29.440]
um[00:23:30.720]
what people don’t know enough about it yet. So[00:23:33.640]
good thing we’re doing the webinar.[00:23:35.470]
I don’t want people are testing[00:23:37.509]
it now. I do like ah,[00:23:39.829]
like seeing that there are people[00:23:42.549]
using this in production APs as[00:23:44.589]
well. So[00:23:46.140]
yeah, I love to get some examples if you[00:23:48.359]
if you guys have some.[00:23:52.140]
So[00:23:53.059]
now that we’re done with that,[00:23:55.039]
why don’t you say why don’t we build the[00:23:57.039]
rampage?[00:23:58.029]
The France page?[00:24:00.789]
Uh, so on the home page, we[00:24:02.859]
already have three tabs. You run friends,[00:24:05.210]
so at the bottom, we have[00:24:07.259]
a bottom sheet widget. This will drag[00:24:09.319]
from the bottom[00:24:10.440]
with some labels, just the shell friends and[00:24:12.769]
the a constant wording to[00:24:15.220]
So this is[00:24:17.609]
raise.[00:24:19.230]
But[00:24:20.299]
what if our friends haven’t register on the app yet?[00:24:23.039]
Yeah, How do? How could I invite people?[00:24:25.349]
So we’re gonna go get out now?[00:24:27.339]
So we’re just gonna add another[00:24:29.509]
flights in action, but[00:24:32.240]
And we’re going to select the iconic user[00:24:36.740]
and create[00:24:38.269]
selecting unclipped Nana foot. And we have[00:24:40.440]
this one pre vote. So this one is called,[00:24:43.289]
uh, good suit.[00:24:45.059]
Go to bring such[00:24:48.950]
Okay, if I just go to[00:24:51.210]
the front page takes into this account page[00:24:55.039]
so you can see here This is a search page[00:24:57.509]
where you can search accounts already added[00:24:59.589]
on them. And basically,[00:25:01.839]
the way this is gonna work is if there’s in the[00:25:03.839]
results,[00:25:05.029]
is going to show this block at the bottom. And[00:25:07.329]
if the results in the local app is gonna show[00:25:09.369]
that top[00:25:10.640]
So we’re gonna build up when they’re not in the system.[00:25:14.390]
So to start both, we’re gonna add[00:25:17.089]
the Frayn’s building[00:25:19.269]
block magically[00:25:21.309]
into this container[00:25:24.039]
so confined here, you’re looking for sending[00:25:26.309]
magic[00:25:29.180]
drag email advice[00:25:31.359]
once in the text. Boss, this is just a[00:25:33.650]
string within to enter their[00:25:35.849]
email. Well, whoever we’re gonna invite[00:25:38.910]
and then we have a button[00:25:40.289]
that doesn’t have an enter fly. So we’re just gonna[00:25:42.319]
select on Click Man Ifo[00:25:45.880]
and we call this one[00:25:49.140]
link singling[00:25:51.390]
a citizen[00:25:54.019]
a magic invite, like, yeah,[00:25:56.789]
so going in, this is a very simple[00:25:59.130]
flight. This is also a[00:26:01.549]
native job script action that comes[00:26:03.630]
with the native mobile Kickstarter,[00:26:06.339]
and it’s just drops an email[00:26:08.400]
on your local,[00:26:09.940]
uh,[00:26:10.890]
default email apple in your blood.[00:26:13.740]
So[00:26:14.519]
we’re setting the recipient address[00:26:16.589]
to, you know, invites CC and peaches[00:26:18.769]
is empty.[00:26:19.690]
We have just a subject which[00:26:21.759]
is drawing on the past,[00:26:23.740]
and we have a body,[00:26:25.170]
and the body is pretty much[00:26:27.220]
just so we can give them this limb[00:26:29.380]
and you couldn’t bear any link in there. This is just[00:26:31.670]
for my local environment.[00:26:34.980]
And you just showing message. Invite saying[00:26:37.329]
so we’ll show you guys that birds,[00:26:41.880]
but we’re gonna carry on for a moment.[00:26:45.339]
Yeah, so that’s I think that’s great.[00:26:47.549]
Now, what I would also love to see[00:26:49.819]
is that leaderboard that sweet sweet[00:26:52.069]
leaderboard[00:26:54.880]
in this. Yes.[00:26:58.269]
So we have the leaderboard area[00:27:00.640]
we’re gonna put under friends.[00:27:02.630]
So[00:27:04.039]
we’re gonna turn this, patients the report. And[00:27:06.339]
to do that, we need to start by[00:27:08.359]
adding the leaderboard.[00:27:10.900]
Um,[00:27:12.640]
need a board headed. So this is just some nice[00:27:14.789]
images for each aboard[00:27:16.890]
on to show your trail distance[00:27:18.900]
compared to everyone else.[00:27:20.779]
So connect your total[00:27:23.059]
distance field to the one[00:27:25.329]
that the label that’s expecting a[00:27:28.410]
graham it’s a[00:27:29.940]
just follow the association toe can[00:27:32.180]
hold their total distance.[00:27:35.289]
I like that. You’re using kilometers. Yea metric[00:27:37.519]
system in[00:27:39.960]
South Africa. It’s the anyway.[00:27:41.829]
And so after that,[00:27:44.130]
we’re just going to add a,[00:27:46.920]
um[00:27:48.509]
certainly.[00:27:51.799]
Yeah. So I’m going to add a list[00:27:53.950]
view to the page[00:27:57.529]
and we’re going to select[00:27:59.890]
data source as a Nana Flow[00:28:02.089]
and we have a ranking manager[00:28:04.980]
called D s Ranking order Little[00:28:07.279]
D s stands with data source[00:28:09.799]
any any[00:28:11.029]
men afloat or Michael Flow, which populates[00:28:13.200]
the group should be named es[00:28:17.059]
We’re not gonna take you through that flow[00:28:19.440]
being caused since just ordering them.[00:28:22.299]
But what we’re going to do is build about the risk of this.[00:28:25.940]
So[00:28:27.500]
here on the[00:28:29.539]
account item need a bullet building[00:28:31.619]
block. We can just drag that in.[00:28:36.339]
And this is gonna be our conscious place.[00:28:39.299]
Connect your accountable that[00:28:41.680]
entity to the image of you[00:28:45.630]
and connect your missing premises.[00:28:50.279]
So the 1st 1 is gonna be for men.[00:28:53.640]
I just needed followed that to count.[00:28:56.940]
Yeah, Yeah, it’s one over down, so the[00:28:59.569]
search doesn’t pick it up[00:29:02.140]
and again, we’re going to show the total distance because[00:29:04.529]
this in Bermuda board[00:29:10.220]
and then we have some nice image it is. So[00:29:12.480]
this is your 1st 2nd and third, respectively,[00:29:15.690]
in the Sneh flow, we assign[00:29:17.980]
the accounts in[00:29:20.009]
order for where they’re going to sentence this.[00:29:22.509]
So we’re gonna just hide these condition[00:29:25.210]
based on the order field. And[00:29:27.759]
to do that, we can just get properties,[00:29:30.490]
visibility.[00:29:31.940]
We’re going to base this on an expression.[00:29:34.819]
So[00:29:36.039]
the current object is referred to the[00:29:38.150]
council, for instance, a reinstate current[00:29:40.200]
object[00:29:42.099]
smashed order,[00:29:51.759]
and he went[00:29:53.160]
So just[00:29:54.440]
copy that,[00:29:56.539]
and we’re gonna pace the adapted on the[00:29:58.619]
second s.[00:30:00.670]
So what that means right here is[00:30:02.990]
it will look at[00:30:04.490]
which one was retrieved first.[00:30:07.109]
And we know that that is the right[00:30:09.140]
person to be ranked number one because[00:30:11.509]
it’s ordered based on longest distance.[00:30:13.819]
So that’s gonna be the first record. Second person’s[00:30:16.109]
gonna be number two and so[00:30:18.130]
on. Yeah,[00:30:20.740]
so that’s pretty much it for the leaderboard.[00:30:24.349]
We Do you want to have another[00:30:26.519]
view page off the runs, right?[00:30:29.079]
Yeah, Exactly. I also[00:30:31.420]
of course what I see. Like, which ones have I done?[00:30:34.430]
Uh, you know. Ah,[00:30:36.799]
And[00:30:37.680]
how far? Iran.[00:30:39.579]
So, yeah, if you can build that, that[00:30:41.589]
be cool. So over here[00:30:43.650]
we have the runs tag, which is completely[00:30:46.269]
anti, Nothing on it.[00:30:48.029]
And we’re just gonna start off with a[00:30:50.650]
grid. Sorry. Listen, you[00:30:53.130]
and the less new is going to be[00:30:55.200]
populated just from the database.[00:30:58.039]
Full run,[00:31:01.019]
and we’re gonna add a constraint.[00:31:03.980]
The subtle of the sorry[00:31:06.339]
don’t automatically phone[00:31:07.920]
sort order must be[00:31:10.220]
start time descending. So[00:31:12.309]
your most recent round will be a talk,[00:31:14.950]
right? And they re just by[00:31:16.960]
that the run[00:31:19.539]
run item on page building block. So[00:31:21.589]
if you drag the scene,[00:31:23.619]
got a few things in you.[00:31:25.509]
So we have a date of you for the[00:31:27.539]
image, and we’re just gonna[00:31:29.589]
populate this[00:31:31.579]
with a net outflow[00:31:33.500]
cold[00:31:35.029]
get last run, image or D is[00:31:37.180]
underscored. Get last language.[00:31:39.529]
This is[00:31:40.740]
pretty self expense, or it just gets the[00:31:42.839]
most recent image. Will that run[00:31:46.039]
again? We need to connect the[00:31:48.839]
run image. Institutes of imagery[00:31:51.940]
don’t automatically.[00:31:54.140]
And then we have some[00:31:56.140]
details here in a container.[00:31:58.980]
So first off, connect your attributes.[00:32:03.930]
So the lost ground we’re gonna put start time,[00:32:06.220]
which is a date and time.[00:32:08.289]
Let’s put a custom mapping on that. Right.[00:32:10.920]
So he’s gonna do day day[00:32:13.309]
at the case in month, month,[00:32:15.410]
month, the case. Why?[00:32:17.710]
Yeah, Yeah, yeah.[00:32:19.589]
I’m just gonna do another case age for hours[00:32:22.009]
and murder case in minutes.[00:32:24.160]
Copy this.[00:32:25.900]
We’re gonna put it on the[00:32:28.440]
finished act premises. So finished. That[00:32:30.710]
is gonna be[00:32:31.880]
in time.[00:32:35.650]
And with same[00:32:37.099]
dates on that.[00:32:40.150]
Finally, the duration,[00:32:42.339]
which is a time stream Englishman, display[00:32:46.920]
relation.[00:32:49.839]
Oh, but this is just gonna sure[00:32:52.170]
or within the same color, right?[00:32:53.990]
And I think that’s what we want.[00:32:56.160]
Yeah, So the cool thing is, what we can do[00:32:58.589]
is give give the[00:33:00.869]
list items a different color[00:33:03.079]
based on the run distance.[00:33:05.390]
So, for example, if you run a[00:33:07.049]
10-K it’ll be a different color.[00:33:09.259]
Then when you run a five k, for example[00:33:11.640]
and again, the way to do that is[00:33:13.819]
by using[00:33:15.039]
expression with conditional visibility.[00:33:18.440]
Yes, I have this expression pre[00:33:20.710]
boat because I always struggle with greats[00:33:22.970]
of them is then[00:33:24.740]
so pasting it, I’ll talk you through[00:33:26.940]
it. I’m[00:33:29.869]
sorry. One second. Copy.[00:33:37.190]
Copy and paste. The good old[00:33:40.190]
developer 101[00:33:42.299]
So this is just checking on the distance[00:33:44.400]
field that the brain is greater than[00:33:46.500]
zero and listen[00:33:49.690]
and consider case of that and[00:33:51.779]
this has a ceases. Kloss[00:33:54.089]
card kicks boss.[00:33:55.990]
So straight off[00:33:57.710]
a copy of this[00:33:59.039]
paste, the twice[00:34:00.660]
look, the entire block[00:34:03.279]
would be this[00:34:05.339]
or contain.[00:34:06.569]
And we’re gonna pace the[00:34:07.839]
plus. It’s funny,[00:34:10.050]
someone someone just asked, Are you using a[00:34:12.059]
lot of shortcuts or[00:34:14.670]
to navigate so fast? But[00:34:17.059]
I think Ryan is practiced[00:34:19.059]
this so much that he’s clicking through it very[00:34:21.090]
quickly.[00:34:22.050]
Yeah, I’ll slide on you guys,[00:34:25.119]
but you always needed a control. C control,[00:34:27.449]
be guys. It’s going to say good life.[00:34:30.460]
So the first thing we need to do is on[00:34:32.590]
the copied ones.[00:34:34.340]
We’re just gonna change the distance hoaxes[00:34:36.579]
to be treating[00:34:38.239]
five on[00:34:39.679]
up in the middle tent,[00:34:43.250]
and this bottom one is[00:34:45.579]
basically gonna be just 14.[00:34:47.699]
So we’re just gonna take that[00:34:51.539]
next? We just need to change all serious as[00:34:53.690]
classes[00:34:54.920]
on. They’re just gonna change the bottom, too.[00:34:57.309]
So pink will be[00:34:59.630]
for[00:35:01.230]
5 to 10[00:35:03.239]
and the bottom one is gonna be the best[00:35:05.320]
were 15. So I’m gonna make that gold.[00:35:07.639]
It’s a card text box.[00:35:11.730]
Nice. So these classes[00:35:13.949]
are classes that we’ve created[00:35:16.349]
ourselves for this webinar.[00:35:18.789]
So when this part’s done,[00:35:21.170]
uh, will take a look at what[00:35:23.280]
that custom styling looks like.[00:35:27.239]
So just stop there[00:35:29.500]
and we run.[00:35:34.139]
So let’s go into the[00:35:36.349]
sliding.[00:35:37.869]
I’ve been Serifis.[00:35:40.849]
Here it is. I’m gonna say access. Yeah,[00:35:47.940]
yeah. So right now what we’ve been doing[00:35:49.980]
is using some[00:35:52.199]
built in classes and something[00:35:54.599]
that we’ve pre prepared. And,[00:35:56.869]
um, there’s a little button in the top right[00:35:58.909]
that says show styles[00:36:00.849]
If you click on that, it’s enabled. Now you[00:36:02.849]
can see the little CSS tags on each of the[00:36:04.929]
elements. So that means that[00:36:07.000]
on those elements we’ve used[00:36:09.159]
custom custom class is basically,[00:36:12.130]
um[00:36:13.199]
but yeah, we have prepared[00:36:15.300]
a style sheet for this,[00:36:17.530]
um,[00:36:18.440]
before the webinar, it’s in the[00:36:20.469]
package when you downloaded[00:36:22.110]
and, uh, it runs gonna show that[00:36:24.400]
Yes. So this was prepared for us[00:36:26.460]
by a designer? Not seem. I didn’t create[00:36:28.760]
this. I’m not that good[00:36:30.880]
at styling.[00:36:31.969]
So basically, he’s created[00:36:34.309]
a few classes bribes, which replied.[00:36:36.730]
And here you can see the[00:36:39.030]
three clauses which we just applied. So[00:36:41.210]
we have thing[00:36:42.579]
new and gold.[00:36:44.500]
These simply just get a background color[00:36:46.519]
and contain service[00:36:48.349]
file is called Custom Job[00:36:50.550]
Jay’s.[00:36:51.349]
You can find it in your theme folder[00:36:53.769]
inside of the project director. And[00:36:55.869]
if you’re just going to native, there will be a full[00:36:58.110]
Nicole[00:36:59.269]
native,[00:37:00.630]
um,[00:37:01.789]
styling or Dean’s or something like that.[00:37:04.119]
I’ll find it for you.[00:37:06.400]
Yeah. Can you show that?[00:37:08.099]
Yes. If we just go to[00:37:10.480]
the project and say[00:37:12.880]
Project show putting[00:37:14.380]
Kleenex border[00:37:15.909]
to be in fear Sing[00:37:18.289]
styles.[00:37:19.610]
Major[00:37:20.809]
Jay is[00:37:21.920]
we have unfolded at.[00:37:23.920]
It’s their custom thought Jay’s[00:37:25.940]
That’s the pull the files that were[00:37:28.070]
sharing. So[00:37:30.570]
that was wrong.[00:37:32.420]
That’s just take[00:37:41.599]
costing. Disconnected[00:37:43.449]
was thought that[00:37:45.480]
yes, there were using ah little app Cold air[00:37:47.699]
server to duplicate the phone[00:37:49.750]
screen.[00:37:50.659]
But it’s running. I think it’s running on trial mode.[00:37:52.860]
And, you know, sometimes it[00:37:55.619]
decides, Teoh say, Hey,[00:37:57.630]
you’ve been sharing long enough. I’m going to close.[00:38:00.630]
So in that case, we just need to restart it.[00:38:04.519]
So here it is.[00:38:07.219]
Okay. I’m just looking[00:38:11.550]
in England.[00:38:23.760]
What’s your password? Oh, now[00:38:25.829]
I know you passed.[00:38:27.670]
Very good.[00:38:30.000]
So here we have all run page,[00:38:32.519]
the run of you. You can see[00:38:34.610]
the different colors that we have there. You[00:38:36.699]
can see the distance of sorry[00:38:38.849]
the the C s[00:38:40.869]
s of applying the colors[00:38:43.590]
and you can see our friend leaderboard,[00:38:45.940]
which is over here.[00:38:47.219]
So last Jesson was in the lead,[00:38:50.099]
followed by Young and then myself[00:38:52.309]
with some other guys in the index team.[00:38:54.820]
I e need to up my[00:38:56.860]
game to catch up on Mars.[00:38:58.579]
Yeah, and[00:39:01.619]
I can show you the invite[00:39:03.710]
process service search for young because[00:39:05.940]
he knows the system. So that’s such[00:39:09.119]
going back. If we type in some random[00:39:11.329]
strings, essentially the[00:39:13.340]
results.[00:39:16.420]
Well, just you, ma. You met address[00:39:20.619]
so you can see the drafted email created.[00:39:23.309]
Um,[00:39:25.019]
I’m just gonna open up this name,[00:39:27.619]
and basically, this is just a phone[00:39:29.780]
browser profile page, and[00:39:31.880]
this is just waiting to sign up. And when[00:39:33.920]
they’re done, they can name completely dominated[00:39:36.269]
the Yeah,[00:39:39.789]
we got back.[00:39:44.260]
That’s just what I can simply dropped action.[00:39:47.380]
So[00:39:48.820]
this check the run button[00:39:51.219]
again.[00:39:52.590]
Oh, I don’t just fall out there.[00:39:54.619]
They’re being the perfect files. Sorry,[00:39:56.619]
guys. And[00:39:59.449]
yeah, so that’s most of the,[00:40:02.409]
um[00:40:04.070]
yes, I think on important part Here is[00:40:06.199]
also now that we’ve finished the app,[00:40:08.500]
you know, even though some elements aren’t showing yet,[00:40:10.670]
so we can we can debunk that a little bit.[00:40:12.880]
It’s probably to do with conditional visibility or[00:40:15.510]
empty, um,[00:40:16.940]
like, empty objects.[00:40:19.119]
But I think what’s important[00:40:21.250]
here is also[00:40:23.110]
how we sink data back[00:40:25.500]
to[00:40:26.719]
the APP server. Because right now we’re running[00:40:28.800]
everything locally and in a native mobile[00:40:30.929]
app. By default, everything is stored[00:40:33.429]
in the,[00:40:34.320]
um,[00:40:35.550]
in a local database,[00:40:37.389]
so[00:40:38.460]
yeah, Uh,[00:40:40.340]
Let’s take a look at how we can actually sink[00:40:42.539]
the data[00:40:43.510]
we share with our online server.[00:40:45.710]
So the sinking process[00:40:48.219]
is pretty straightforward.[00:40:50.400]
So we have a APA venture in[00:40:52.460]
the layouts, and this is just a default,[00:40:54.570]
which is just going to synchronize when the[00:40:56.619]
page loads when the pages we open[00:41:00.019]
has some timer actions as well.[00:41:02.449]
So that’s gonna continually synchronize the data.[00:41:04.550]
But we need to think about how we[00:41:06.599]
want the data to sink. Right?[00:41:09.059]
So under navigation[00:41:12.449]
concurs, everything we have our device[00:41:14.730]
profile so responsive is basically[00:41:17.099]
for form[00:41:18.400]
any sort of preform browser.[00:41:21.019]
Then we have phone browser, which[00:41:23.280]
can also be sort of blunting with[00:41:25.320]
tablet process and use our online[00:41:27.849]
on browses, which can access your devices[00:41:30.179]
browser. And then we have a native metal[00:41:32.679]
pressure. And on that purple, we have sinned.[00:41:34.880]
Configuration.[00:41:37.309]
If we open this up,[00:41:39.969]
make that bigger for you guys.[00:41:42.079]
So each entity in your[00:41:44.190]
project you can now specify[00:41:46.210]
Do I want to download this to[00:41:48.320]
device or not? So, for[00:41:50.750]
some[00:41:52.119]
in cities like account, an account holder,[00:41:54.780]
we need those in search on the[00:41:57.079]
home page images.[00:41:58.449]
We want everyone to have these objects,[00:42:00.480]
right? But the wrens[00:42:02.619]
asses are specific to the user and[00:42:05.019]
run images as well as what is the location?[00:42:08.000]
So we faulted by exports[00:42:10.920]
explosive. Just a querying language,[00:42:13.070]
basically.[00:42:14.800]
And we[00:42:16.500]
faulted them[00:42:17.800]
too.[00:42:18.900]
The account owner.[00:42:20.889]
So we followed the rent association[00:42:23.329]
into account, and we save the account for[00:42:25.500]
this run.[00:42:26.530]
Needs to be the I d.[00:42:28.599]
Off the current user. Basically, it needs[00:42:30.719]
to be for the logging guy.[00:42:33.530]
And we do this for all of location[00:42:35.940]
runnin runnin vigils.[00:42:39.590]
Perfect. Yeah, so that’s Ah, that gives[00:42:41.730]
you a lot of control on which data you synchronize[00:42:44.389]
and what you don’t. Because that’s really important[00:42:47.099]
for mobile app. Says Well, is that you don’t use too[00:42:49.139]
much data.[00:42:50.309]
So yeah, these options really allow,[00:42:52.829]
uh, allow you to do this.[00:42:55.050]
So, yeah,[00:42:56.480]
you do have a lot of questions coming in.[00:42:59.099]
Um,[00:42:59.980]
and we’ll get to them very soon.[00:43:02.380]
Can we use this as an offline app? Yes.[00:43:04.750]
This is an offline it. So by default,[00:43:07.289]
a native mobile app is an offline[00:43:09.809]
amp that is built[00:43:11.869]
that way and architecture it that way.[00:43:14.090]
And so[00:43:15.519]
when you do want to use online capabilities.[00:43:18.670]
You have to make a connection with[00:43:20.730]
a server specifically[00:43:22.469]
and get information in.[00:43:25.409]
And so now that everything is[00:43:27.530]
done,[00:43:28.599]
we get to the deployment options.[00:43:31.550]
Now, uh, up to now,[00:43:33.590]
we’ve friend everything locally because,[00:43:35.719]
you know, we’ve been testing and,[00:43:37.630]
um[00:43:38.800]
yeah, it’s it’s quick Teoh[00:43:40.980]
to do that.[00:43:42.099]
But once we’re done,[00:43:44.210]
we got to figure out where we want to deploy this.[00:43:46.250]
And this is really where it pays off Teoh to[00:43:48.260]
be a cloud native platform. So[00:43:50.750]
not only[00:43:52.260]
can we deploy an app on any[00:43:54.380]
cloud and running in any environment[00:43:57.000]
you can scale it up. Field was effortlessly[00:43:59.320]
to match your burke, your[00:44:01.420]
app, your growth of your business and so one.[00:44:03.980]
So you know, if we’re lucky,[00:44:06.030]
for example, let’s say are fit fast[00:44:08.409]
app, uh,[00:44:09.889]
on boards, one million users next month.[00:44:12.019]
Then I can be sure[00:44:14.030]
that the infrastructure,[00:44:15.789]
uh, can take care of that without the need[00:44:18.039]
to make big changes to the APP[00:44:20.230]
itself.[00:44:22.090]
Yes, So it’s actually really easy to[00:44:24.260]
pick your cloud provider so you can just[00:44:26.389]
go to the environment page under[00:44:28.940]
her book index and you can select[00:44:30.940]
your provider[00:44:32.610]
once you selected a junior configure your[00:44:34.619]
log in details. Actually, let me just share my screen[00:44:36.849]
so I can show you guys.[00:44:39.679]
So sharing modeler[00:44:41.429]
we can then configure the[00:44:44.289]
run on cloud foundry[00:44:46.110]
Jetsons and this is for your life.[00:44:48.900]
And once that’s configured, you literally just[00:44:51.059]
hit first run icon,[00:44:53.210]
which is with a cloud icon in that[00:44:55.860]
that will run and deploy the AB in[00:44:57.880]
your selected cloud.[00:44:59.610]
All goings need aim index license.[00:45:01.960]
If you want to use 1/3 party app[00:45:04.750]
at the party Cloud provided side,[00:45:07.389]
and that is basically going[00:45:09.489]
to allow you to host[00:45:12.230]
almost anywhere. Really?[00:45:14.670]
Yeah, basically anywhere. So[00:45:16.860]
you’re not restricted to Microsoft[00:45:19.139]
or AWS,[00:45:20.780]
basically any any provided that[00:45:22.860]
allows[00:45:24.630]
the that has a Kipper narratives capabilities.[00:45:27.179]
That’s where you can host your host your application.[00:45:29.530]
So yeah,[00:45:30.789]
All right. So this rounds[00:45:32.969]
of the life built part[00:45:34.880]
and we can now go to the Q[00:45:36.960]
and A. But before we do that,[00:45:39.119]
I want to ask another question.[00:45:41.519]
And that is[00:45:43.190]
what app[00:45:44.389]
do you want us to build next?[00:45:47.269]
So I’ve been able to pull, so[00:45:49.329]
you should see it on your screen.[00:45:51.789]
Uh, I hope you hope you’re going to see[00:45:53.889]
it on your screen.[00:45:55.090]
Um,[00:45:56.059]
yeah. So do you want to see[00:45:58.239]
how we style and native mobile app[00:46:00.780]
Do you want us to build something completely different?[00:46:03.349]
A rideshare app like uber lifter lime[00:46:06.110]
or maybe a food ordering app[00:46:08.530]
like uber eats food or just eat.[00:46:11.210]
Um,[00:46:12.480]
and[00:46:13.449]
just to give an example of what[00:46:15.510]
we can do either with native mobile or[00:46:17.639]
other platform capabilities. And, of course,[00:46:19.800]
if you have other ideas for topics,[00:46:22.380]
be sure to let us know rather than the chat[00:46:24.739]
or[00:46:25.550]
in the survey afterwards.[00:46:27.780]
So we’d love to know what you think about the[00:46:29.840]
webinar and how we can improve that as well.[00:46:33.579]
All right, So while everyone is voting,[00:46:35.989]
I am going to enlarge[00:46:38.050]
the Q and a window.[00:46:40.170]
Let me see or sort of the chat window[00:46:42.349]
because I like to see[00:46:44.679]
what everyone is[00:46:46.480]
talking about and all the questions everyone’s[00:46:48.510]
asking.[00:46:49.420]
So let’s give me Ah,[00:46:52.030]
please give me a moment.[00:46:54.679]
Wow, There are so many questions.[00:46:58.619]
Let’s see.[00:47:00.079]
So[00:47:01.280]
just ah, reiterate we are recording[00:47:03.940]
everything. So we will be posting[00:47:06.199]
this online afterwards so you can share it with[00:47:08.800]
other people. A swell. So, um,[00:47:11.530]
you’re good. If you want to follow along and[00:47:13.550]
built this yourself, you can do so[00:47:15.909]
on and[00:47:16.969]
play it at your own pace[00:47:19.679]
using the recording.[00:47:21.780]
So let’s see. Um,[00:47:24.420]
what’s the difference between Mike Phelan and Flow? We’ve had[00:47:26.530]
that one.[00:47:29.639]
Is the medics native mobile app built[00:47:31.750]
on top of JavaScript.[00:47:34.280]
So Ryan[00:47:35.679]
So[00:47:37.449]
yes, And so it’s actually[00:47:40.019]
a combination of John script and allowed[00:47:42.280]
recall react.[00:47:44.170]
So this basic meat is[00:47:46.639]
wrecked is a[00:47:48.460]
transpired basically convert Jewel[00:47:50.679]
Reiko into Johnson. So essentially,[00:47:52.980]
yes, it is all[00:47:55.150]
running on job script.[00:47:57.739]
All right, what is the best[00:47:59.840]
time to do a sink activity?[00:48:03.360]
Eso[00:48:04.570]
The single activity should generally[00:48:07.000]
be done after a critical[00:48:09.130]
thing for as we did alter the images[00:48:11.590]
or when he created the new data.[00:48:14.570]
But it really depends, so you can have sink[00:48:16.940]
as a[00:48:18.329]
timer event that synchronizes[00:48:20.539]
every few seconds. Or you could do it in, or Michael[00:48:22.849]
flow with the action.[00:48:25.550]
And basically it’s[00:48:26.760]
what feels best to you. But it’s[00:48:29.250]
Do you think this needs to be available on the server[00:48:31.590]
immediately, You[00:48:32.829]
or is it a case even for[00:48:34.949]
a few minutes or hours or whatever[00:48:37.179]
and then just synchronized when they manually[00:48:39.309]
selects. And[00:48:40.570]
that’s what’s on offer. You can have a manual synchronized[00:48:43.170]
activity,[00:48:45.239]
right? Right.[00:48:46.969]
Um,[00:48:48.139]
can you Sorry. How are you dealing[00:48:50.280]
with permissions on operating system[00:48:52.329]
level? So, for example, once you install[00:48:54.559]
this on IOS or Android[00:48:56.719]
device,[00:48:58.650]
So inside the reactor native[00:49:00.679]
library,[00:49:01.969]
um, which we used for[00:49:04.389]
geolocation from Mara there’s[00:49:06.530]
actually pre bolts that.[00:49:08.530]
And when you call geolocation[00:49:10.800]
dot star,[00:49:12.050]
it opens after permissions. If you haven’t[00:49:14.150]
given the permission ready,[00:49:16.519]
So it should just automatically work[00:49:18.880]
on my phone. I’ve done it already,[00:49:21.000]
so I can’t show you the[00:49:24.440]
but yeah,[00:49:25.710]
when you guys tested off, you should see[00:49:28.550]
Perfect.[00:49:29.849]
Yes. So can you connect this to heartbeat[00:49:32.139]
monitor, for example?[00:49:33.630]
The simple answer is yes. You[00:49:35.860]
can basically connect[00:49:37.559]
anything to amend eggs app. So as long[00:49:39.599]
as it has an interface or an A p[00:49:41.710]
I, you can connect that[00:49:43.750]
with medics. We do have a lot of[00:49:46.110]
out of the box integrations already[00:49:48.570]
in studio pro,[00:49:50.269]
or you can download extra integrations[00:49:52.750]
from there from the minutes app store[00:49:54.670]
or, if you’re feeling adventurous you[00:49:56.760]
can build your own integrations[00:49:58.780]
and consuming arrest service is[00:50:01.059]
a very simple process in minutes as[00:50:03.090]
well. So it’s mostly visual.[00:50:05.260]
Um, you just have to put in the settings[00:50:07.409]
and you can consume this service. So yeah,[00:50:09.659]
the heartbeat monitor, for example, is[00:50:12.050]
something that could be done here.[00:50:14.760]
You can also check up. There are[00:50:16.969]
some resource is on using NFC[00:50:19.349]
functionality[00:50:20.849]
that that’s actually one of the how[00:50:23.090]
to reference guides available[00:50:25.159]
for So it teaches you how to access the[00:50:27.380]
NFC off your app, which would most[00:50:29.409]
likely used to connect through hard[00:50:31.949]
moments or something like that.[00:50:34.860]
Right? So, going back to code,[00:50:38.260]
Uh, does this have typescript support[00:50:40.760]
or doesn’t Bendix have types typescript?[00:50:43.030]
So I’m 100% years eso[00:50:45.900]
the JavaScript actions and the[00:50:47.940]
pleasurable ridges[00:50:49.989]
they all support typescript.[00:50:52.150]
And it’s basically any version[00:50:54.340]
off JavaScript is compatible[00:50:56.679]
with the native mobile side of things.[00:50:59.460]
You do need to consider your permissions.[00:51:01.769]
You’re you’re important,[00:51:04.409]
that sort of thing.[00:51:05.659]
But yet anything you want can basically be[00:51:07.670]
adapted. Yeah,[00:51:10.659]
So taking a step to[00:51:13.050]
testing,[00:51:14.329]
uh,[00:51:15.110]
if you want to test the medics app, what do you do?[00:51:17.630]
And How do you test it on your phone.[00:51:20.050]
So normally we have[00:51:22.050]
the maker native app, which is[00:51:24.150]
available in the place.[00:51:26.230]
The adjudication side of things here[00:51:28.599]
required us to create a clone of that[00:51:30.969]
in order to add some first civic[00:51:33.159]
permissions and imports.[00:51:35.840]
Also some dependencies.[00:51:37.659]
But when you bundle your app[00:51:39.849]
into production 80 k[00:51:41.849]
on these resource is online.[00:51:44.159]
When you do that process, then[00:51:46.300]
you can add your permissions there and your dependency[00:51:48.570]
there and work as that for[00:51:52.139]
perfect.[00:51:53.800]
So someone’s asking. I would like to know how[00:51:56.030]
you link the forgot password module[00:51:58.780]
to the APP in case the user forgets[00:52:00.880]
the user name and password.[00:52:03.550]
So we didn’t do that[00:52:05.610]
in this one. Um,[00:52:08.349]
we just sort of created a manual,[00:52:10.639]
ever. I forgot possible.[00:52:12.510]
There is a module.[00:52:14.440]
And if you just read through that documentation[00:52:16.500]
on the model, it should do everything[00:52:19.090]
we wanted to.[00:52:20.449]
I think they might also be a[00:52:22.489]
implementation off the growth model,[00:52:24.889]
which could check up[00:52:29.309]
perfect. Yeah,[00:52:31.699]
so let’s see. Um,[00:52:33.710]
we have five minutes left.[00:52:36.340]
Let’s Syria, uh, have[00:52:38.360]
any, uh, detailed[00:52:40.769]
questions. Are there so many questions? Guys, there’s[00:52:42.889]
so many good questions[00:52:46.219]
and let me share my spirit because I[00:52:48.250]
fixed those buttons.[00:52:50.250]
So what? We’re waiting for. The next question.[00:52:53.860]
I could give you guys a little premium.[00:52:55.889]
So what was what was going on with the buttons?[00:52:58.409]
It was just a[00:53:00.320]
user rights.[00:53:01.869]
I e.[00:53:04.579]
Sorry, my costume has stopped used.[00:53:09.449]
By the way, if anyone has any suggestions[00:53:11.840]
for a good phone screen[00:53:14.039]
clone app, uh,[00:53:16.150]
this would be a good time to share it with us because[00:53:19.159]
their server is great. But it’s a bit[00:53:21.300]
doctor sometimes,[00:53:22.780]
so you guys can see other buttons are showing.[00:53:25.440]
So if we could[00:53:26.730]
clicks thoughts[00:53:28.110]
conceived there in the notifications[00:53:30.429]
to get a little[00:53:31.760]
notification, saying it is tracking you,[00:53:34.349]
Um, I can lock, screen,[00:53:37.280]
shake it about.[00:53:38.849]
It’s picking up the movements.[00:53:41.159]
Just think[00:53:43.250]
and stepping it again.[00:53:45.539]
You can see there. It’s synchronized that’s open,[00:53:47.949]
and you can see the labels updated, so we’re going[00:53:50.719]
very slow, and we didn’t very fall, but[00:53:52.719]
it’s been 12 18 seconds.[00:53:54.909]
So if we had stub, it’s gonna open[00:53:56.980]
up the map[00:53:58.300]
so it looks like craziness.[00:54:00.489]
But when you zoom out, you realize this is about[00:54:03.309]
a meter apart.[00:54:04.920]
That’s my[00:54:06.289]
that’s me on and you can[00:54:08.329]
keep zooming.[00:54:09.539]
That’s where you want[00:54:10.980]
on this Has the[00:54:13.300]
people maps, affection, everything. So she just doubled[00:54:15.429]
separable Zoom in the game[00:54:18.039]
and yeah,[00:54:19.300]
that’s that.[00:54:21.230]
Excellent. Yeah, that looks super, super[00:54:23.369]
cool. So there’s a couple[00:54:25.670]
more questions here. We’re gonna see if we[00:54:27.679]
can. We can go through some of these quickly.[00:54:30.130]
So Paul is saying I see that the design[00:54:32.429]
motive, the page editors great out. Does that[00:54:34.590]
mean that that feature doesn’t yet work[00:54:36.650]
for a night of mobile pages? That’s correct.[00:54:38.940]
So for normal pages, you can use the design[00:54:41.239]
Moto get a view of what it what[00:54:43.449]
it looks like, like sort of a Wiz e week view,[00:54:46.039]
but from for native mobile pages, that’s[00:54:48.130]
not being activated yet, But it will[00:54:50.139]
be in the future.[00:54:52.630]
Are scheduled events available[00:54:54.760]
on Native Mobile?[00:54:56.139]
Yes, So it’s likely additions[00:54:58.820]
on we have these evidence.[00:55:01.000]
So it essentially is[00:55:03.110]
calling this under the BIS every[00:55:05.130]
few seconds so you can[00:55:06.599]
have a few different options. You can call in[00:55:08.699]
any flow. Yeah,[00:55:10.510]
you can synchronize[00:55:12.199]
Utkan do a whole bunch of stuff,[00:55:14.710]
and you can configure things for winter[00:55:16.809]
connects online when it goes offline[00:55:19.349]
on how often you want to synchronize[00:55:21.860]
just by itself.[00:55:23.530]
It is also some styling things, but that’s[00:55:25.530]
not really rid of them. Because you don’t see what’s really, really[00:55:28.949]
and[00:55:30.550]
you can also have a[00:55:32.980]
We have a[00:55:34.840]
scheduled event running, which collects[00:55:36.900]
the runs from our run[00:55:39.159]
tracker[00:55:40.239]
and basically doesn’t processing[00:55:42.320]
on that created Jason String, which[00:55:44.639]
we met onto our[00:55:46.880]
once on that.[00:55:47.840]
So we create that on the server[00:55:50.409]
and in the synchronization, called the data[00:55:52.800]
into the device. So there’s no calculation[00:55:54.860]
on the device.[00:55:56.119]
And then we just showed that map in the page basically.[00:55:59.820]
So yes, it scheduled events taking years.[00:56:03.380]
Perfect. Yeah.[00:56:05.400]
Um, so some was asking, Hey,[00:56:07.460]
am I right in saying that the[00:56:09.769]
A p K doesn’t work on IOS[00:56:12.099]
on the dyno five. There’s an a p. K. So[00:56:14.269]
yeah, yeah. So it’s not[00:56:16.369]
gonna work on Iris. We can[00:56:18.480]
provide in IOS one.[00:56:20.940]
Just need some time to do that. You can spend[00:56:23.369]
it out off to this. Maybe[00:56:25.579]
if anyone wants connected does on[00:56:27.690]
these black Community channel[00:56:29.480]
and we’ll send you the file. Yeah,[00:56:32.150]
good. So I[00:56:34.329]
like this question from some year.[00:56:36.730]
I usually prefer building the front end[00:56:39.010]
from the browser. So,[00:56:40.960]
um[00:56:42.429]
and then come to a pro. I d[00:56:44.789]
like, you know, medic, Studio Pro[00:56:46.960]
to do the beckoned.[00:56:48.599]
Do you have a recommendation for[00:56:50.710]
this approach or how[00:56:52.920]
to do this with medics? So[00:56:55.320]
I know that most rent in guys like[00:56:57.380]
to use the inspect elements and then they[00:56:59.420]
do[00:57:01.289]
styling inside of the inspect element field.[00:57:03.400]
Then they copy that over to their i d. E.[00:57:06.110]
So I’m native Mobile. You can’t[00:57:08.219]
really see the device in[00:57:10.300]
a brother. It’s not gonna work because[00:57:12.489]
it’s offline, right?[00:57:14.309]
So[00:57:15.210]
the best way I have found is just[00:57:17.570]
to[00:57:18.530]
test that test the classes on a[00:57:21.190]
online page and you can copy the[00:57:23.380]
classes onto the native mobile.[00:57:25.909]
That’s one of the best ways I found.[00:57:28.070]
And also with the makeup native at every[00:57:30.119]
time you re run hot reload. So[00:57:32.420]
you don’t need to completely rerun every time[00:57:34.829]
justice you fighting.[00:57:36.280]
It will be really quick and starting over effect[00:57:38.710]
on this instantly.[00:57:40.730]
Perfect.[00:57:41.929]
We’re going to do[00:57:43.309]
one more short question because[00:57:45.460]
we’re a time[00:57:47.500]
um don’t worry. We’ll go through the questions,[00:57:50.099]
all of them, And try and get you[00:57:52.130]
and answers. Still, even if we[00:57:54.079]
don’t talk about this in the webinar right[00:57:56.300]
now, you’re not for gotten,[00:57:58.510]
so don’t worry about that.[00:58:00.519]
Um,[00:58:02.159]
let’s see. Let’s pick one.[00:58:06.420]
How much battery will it use[00:58:08.480]
if you sink as a scheduled event every 12th[00:58:11.440]
or does it depend on the data?[00:58:13.199]
So I’ve been testing pretty[00:58:16.309]
hard core,[00:58:17.739]
and my friend battery doesn’t[00:58:20.010]
really drain so much,[00:58:22.119]
but[00:58:23.219]
I did[00:58:25.480]
create the actual production version of yet[00:58:28.650]
And when I tested that, I went[00:58:30.900]
forward like a five K[00:58:32.619]
and use the about, like, 10%[00:58:35.230]
my battery power,[00:58:38.119]
right? That’s not bad, actually. Yeah.[00:58:40.639]
Yeah, well, it took me, like often our I’m not that cost.[00:58:43.360]
Uh,[00:58:45.619]
all right,[00:58:46.550]
um, was that I went to round up the webinar.[00:58:48.789]
I want to thank everyone for joining.[00:58:51.119]
Um, please fill out the survey[00:58:53.320]
so that we can see what you think[00:58:55.349]
of the webinar and give us ideas[00:58:58.280]
to improve this[00:58:59.719]
maybe other topics and so[00:59:01.760]
on. And if you want to continue[00:59:03.800]
the conversation,[00:59:05.070]
join us on the community slack,[00:59:07.280]
so[00:59:08.110]
go to bit. Lee slash medics[00:59:10.320]
community slack[00:59:11.590]
and created account for free. We’ve[00:59:13.670]
already got 1500 developers on there,[00:59:16.210]
so join us there.[00:59:18.269]
Thank you all for joining[00:59:19.960]
and[00:59:20.820]
see you at the next Lebanon,[00:59:23.070]
they said. Run.