Build a Fitness-Tracking App with Low-Code

Video topics

• Low-Code Development

• 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.