Low-Code in 30: Collaborative Visual Development
Mendix Evangelists Craig White and Simon Black demonstrate collaborative visual development in this Mendix in 30 presentation.
-
Transcript
[00:00:04.060]
hello and welcome to this mendax in 30[00:00:06.740]
webinar in today’s webinar we’re going[00:00:09.290]
to focus on the topic of collaborative[00:00:11.480]
visual development and I’m joined here[00:00:13.669]
with my colleague today Craig white in[00:00:16.330]
the next 30 minutes we’ll take you[00:00:18.680]
through an example of a project built in[00:00:21.170]
the Mennonite platform and show you the[00:00:22.820]
collaboration features that make up the[00:00:24.529]
technology so the structure of these[00:00:26.869]
webinars is that we will have a monthly[00:00:28.970]
series each month will focus on a[00:00:31.369]
particular topic today we’ll focus on[00:00:34.100]
collaborative visual development in June[00:00:36.560]
we’ll focus on building beautiful[00:00:38.090]
multi-channel apps in July we’ll focus[00:00:41.450]
on building mobile experiences for both[00:00:43.970]
online and offline mobile applications[00:00:48.070]
the structure of these webinars is that[00:00:50.630]
we’ll have a five-minute presentation[00:00:52.460]
followed by a 25 minute demo and finally[00:00:55.820]
a 10 minute live Q&A so mendax was born[00:01:00.050]
to really help enterprises win with[00:01:02.060]
applications what this means is we[00:01:04.280]
combine both business and IT together to[00:01:06.890]
allow them to develop applications and[00:01:08.990]
collaborate at its speed allowing them[00:01:12.020]
to develop applications ten times faster[00:01:14.270]
than traditional development and using[00:01:16.130]
70% less of resources so the main[00:01:19.999]
feature that we’re trying to address[00:01:21.380]
with the méndez platform is that we’re[00:01:23.479]
trying to help with that 30 to 35% of[00:01:26.479]
all IT projects fail and there’s three[00:01:29.240]
main reasons why these fail the first[00:01:31.820]
one is lack of end-user involvement[00:01:35.140]
making sure that all of the users in the[00:01:37.700]
application lifecycle evolve during the[00:01:40.219]
process of developing applications the[00:01:43.069]
second is that we often have unclear[00:01:45.049]
business requirements so sometimes it’s[00:01:47.389]
very difficult for those business users[00:01:49.069]
to be able to collaborate and be able to[00:01:50.899]
share the requirements that they need[00:01:52.729]
for developing an application and the[00:01:55.069]
third one is that often dev process do[00:01:57.350]
not allow for change they often use[00:01:59.630]
waterfall methodology to develop[00:02:01.969]
applications which doesn’t encourage[00:02:04.189]
collaboration with both the business and[00:02:05.990]
IT so mendax believes that there are[00:02:08.840]
three key areas that help with[00:02:10.759]
successful collaboration the first one[00:02:13.580]
is communication so ensuring both[00:02:15.770]
business and IT have a[00:02:17.690]
a place where they can share business[00:02:19.550]
goals and make sure that that business[00:02:21.620]
knowledge is shared and leveraged to[00:02:23.630]
develop applications the second one is[00:02:27.380]
enabling collaboration so being able to[00:02:29.900]
create components that accelerate the[00:02:31.970]
time to value and making these available[00:02:34.130]
and easy to use for all types of[00:02:36.200]
developers within an organization and[00:02:38.080]
the third one is synergy so making sure[00:02:41.510]
that you have one application and one[00:02:43.610]
tool which allows you to share the same[00:02:46.100]
sort of experiences and the same[00:02:47.720]
language so that you can communicate[00:02:49.880]
with both the business IT in the same[00:02:52.240]
language and same process mendax is the[00:02:56.510]
only loco platform that addresses all[00:02:58.700]
three areas we do that in a unique way[00:03:02.840]
using the mendax technology where we[00:03:05.180]
incorporate all personas involved in the[00:03:07.370]
application lifecycle so in essence the[00:03:11.480]
mendax collaboration tries to involve[00:03:13.400]
all those different types developers[00:03:15.080]
within your organization we do that by[00:03:19.070]
combining business needs and ideas in a[00:03:21.530]
central portal where we can capture[00:03:23.330]
those initial requirements and we can[00:03:25.310]
iterate upon those with the both the[00:03:26.930]
business IT all the business[00:03:29.810]
requirements need to be gathered into[00:03:31.400]
one central platform so that whilst[00:03:33.470]
you’re developing your application[00:03:34.489]
there’s no confusion as to what needs to[00:03:36.709]
be developed we also need to be able to[00:03:39.500]
capture feedback from our end users our[00:03:41.750]
developers and testers so that we can[00:03:43.910]
iterate upon our application every time[00:03:46.670]
we develop an application we need to be[00:03:48.709]
able to launch that application be able[00:03:51.350]
to release new features very very[00:03:53.300]
quickly so during this application[00:03:56.450]
lifecycle there are often different[00:03:58.040]
people of an organization they need to[00:04:00.800]
be involved we need to incorporate the[00:04:03.170]
UI in UX specialist into our application[00:04:05.930]
lifecycle so that they can ensure that[00:04:08.150]
their brand is met by all of the[00:04:10.340]
applications we develop they can also[00:04:12.410]
make sure that it delivers the[00:04:14.120]
experience that they want to promote as[00:04:16.160]
an organization so in the mendax[00:04:18.769]
platform we have certain key features[00:04:20.450]
that help incorporate the UI specialists[00:04:23.080]
we also have certain tools that help and[00:04:26.060]
support our integration specialists so[00:04:28.310]
making it very easy for them to consume[00:04:30.229]
those api’s and they[00:04:31.610]
business functions they’re important to[00:04:33.949]
make sure that we meet the business[00:04:35.509]
goals they can develop these particular[00:04:38.689]
applications and make them available to[00:04:41.060]
the rest of the development team we also[00:04:43.909]
need to be able to make sure that the[00:04:45.560]
business stakeholders can use any of the[00:04:47.810]
tools that are developed by our UX and[00:04:50.060]
our integration specialists and make[00:04:52.490]
sure they have a clear understanding of[00:04:54.139]
the progress when developing our[00:04:56.479]
applications there are product owners[00:05:00.650]
for this particular application so they[00:05:02.750]
need to make sure that everything they[00:05:04.430]
develop is meeting and delivering on[00:05:06.440]
their business goals and finally we need[00:05:09.620]
to incorporate the operation users so[00:05:12.409]
being able to make sure that once we go[00:05:14.150]
live with those applications that we are[00:05:16.430]
keeping those applications healthy and[00:05:18.409]
that we are maintaining those[00:05:20.539]
applications over time we can see each[00:05:23.270]
of our applications and our application[00:05:24.919]
live landscape and we can make sure that[00:05:27.979]
the applications that the business uses[00:05:30.590]
the integration specialists and the UI[00:05:32.389]
specialists are delivering our meeting[00:05:34.879]
upon the security and governance they’re[00:05:37.610]
required for this organization so now[00:05:40.729]
that I’ve given you an overview of the[00:05:42.349]
mendax products I want to give you a[00:05:44.419]
demonstration of how those features in[00:05:46.759]
are working using the mendez technology[00:05:51.250]
so I’m going to open up an application[00:05:53.659]
here and this application is a mobile[00:05:56.690]
application called customer portal it’s[00:05:59.900]
available on the mendax mobile[00:06:01.729]
application under our showcase section[00:06:03.979]
which I’ll show you in a second and it[00:06:06.379]
allows you to view a number of[00:06:07.759]
applications but also collaborate with[00:06:10.190]
people within your business so here we[00:06:12.379]
have a buzz wall where we can share[00:06:13.789]
ideas with people within our company and[00:06:16.250]
we can start to gather and add user[00:06:18.080]
stories so we’re gonna open up the[00:06:20.539]
customer portal application here now and[00:06:22.879]
we can see that the application allows[00:06:24.500]
us to view a list of accounts whether it[00:06:27.169]
be our credit card or business account[00:06:29.029]
and we can drill down on each of those[00:06:30.830]
to see some transaction information[00:06:33.430]
using native device functionalities like[00:06:35.960]
swipe transitions and gestures we can[00:06:39.469]
view the information that’s available in[00:06:41.330]
our mandates application[00:06:43.850]
we can add split cost information for[00:06:46.490]
instance we might want to split our[00:06:47.810]
transaction up between a number of our[00:06:49.670]
friends and we can also use swipe and[00:06:52.670]
gesture functionalities to move between[00:06:54.650]
those different pages the way we build[00:06:57.440]
these applications is we don’t code[00:06:59.060]
these applications we model these[00:07:01.010]
applications for both mobile tablet and[00:07:03.290]
web and we can see our web application[00:07:05.570]
here this is running responsibly across[00:07:08.810]
both our our web and mobile tablet and[00:07:11.450]
we can drill down and view the same[00:07:13.070]
information that we had on our mobile[00:07:14.810]
application as we go through this[00:07:17.300]
application we might decide that we want[00:07:18.950]
to make a change this application we[00:07:21.020]
might be as a developer or a end user[00:07:24.080]
and we want to be able to submit some[00:07:25.760]
feedback to our developers so that they[00:07:28.730]
can develop a new feature and add it[00:07:30.830]
into our product so on every mendax[00:07:34.490]
application we have a feedback button in[00:07:36.590]
the right-hand corner here so the[00:07:39.530]
feedback that we want to enter for this[00:07:41.240]
particular page is we might want to add[00:07:43.250]
some some information and when we take a[00:07:46.160]
photo of a particular C we want to be[00:07:48.800]
able to capture that information from[00:07:50.510]
the receipt so read the details from our[00:07:53.120]
image and be able to add that in as a[00:07:55.400]
note into our application[00:07:58.840]
so here when we press the Sofia button[00:08:01.819]
we have the option to add in a name and[00:08:03.830]
also an email address so that we can[00:08:05.990]
can’t be contacted later so we can have[00:08:08.210]
a two-way dialogue over email and over[00:08:10.400]
in the portal so we can add in a[00:08:12.979]
description here and the description for[00:08:15.259]
our particular user story is that we[00:08:17.419]
want to add some features so that we can[00:08:19.819]
scan that particular photo that we add[00:08:21.710]
and we can add those in as notes to our[00:08:23.900]
our transaction so here we add a[00:08:32.240]
description and some more information we[00:08:34.550]
can also include a snapshot of the[00:08:36.169]
screen that we were on at the time so[00:08:37.969]
that we can then see it gives a more[00:08:39.320]
contextual information for our end users[00:08:41.630]
so if we submit the feedback now here it[00:08:44.870]
will submit this back into our central[00:08:46.760]
portal we will get a feedback item[00:08:49.279]
number so that we can track that[00:08:50.510]
throughout our process and all of that[00:08:52.820]
feedback goes into our central project[00:08:54.890]
management tool this is what we call[00:08:57.230]
mendax home and allows you to share[00:08:59.209]
ideas and manage projects when[00:09:01.820]
developing applications in the mendax[00:09:03.440]
product so if we open up the mendax[00:09:07.279]
portal here we can see we’re in a[00:09:09.440]
project space we’re in our space called[00:09:11.990]
my customer portal and here we can see a[00:09:14.540]
list of transactions a list of[00:09:16.910]
interactions with people within our[00:09:19.070]
projects we can see here Craig’s asked a[00:09:21.890]
number of questions we have a poll we[00:09:23.959]
have a number of images and documents[00:09:25.700]
which are uploaded into the portal so[00:09:29.329]
it’s one central place where we can have[00:09:31.279]
that collaboration and we can have that[00:09:33.200]
visibility for all of our users we can[00:09:36.740]
invite a number of different team[00:09:38.120]
members to our project using the invite[00:09:40.279]
user option so if I wanted to invite my[00:09:42.740]
colleague Chris Hodges I can type his[00:09:45.079]
email in here and I can then decide what[00:09:47.360]
user role he is in our project so mendax[00:09:50.899]
uses an agile methodology pacifically[00:09:53.149]
scrum and the roles and responsibilities[00:09:55.430]
are set up to help you manage your[00:09:57.529]
project in anahareo methodology you can[00:10:00.890]
fully customize each of these roles[00:10:02.570]
within your project so that you can[00:10:04.339]
design the security framework that you[00:10:06.350]
want when running these applications so[00:10:10.550]
obviously developing in mendax[00:10:12.110]
is really speeds up your your[00:10:13.850]
application development by using model[00:10:15.800]
driven development but you also have to[00:10:17.600]
be able to speed up your whole agile[00:10:19.640]
methodology and your whole collaboration[00:10:22.360]
so within every mendax project we have a[00:10:24.950]
full application lifecycle so everything[00:10:27.500]
from government requirements developing[00:10:29.510]
your application deploying and finally[00:10:31.610]
operating with every project you have a[00:10:34.130]
security framework where you can set up[00:10:36.470]
the roles and responsibilities for your[00:10:38.390]
project you can add new user roles here[00:10:41.600]
and these can then define what a user[00:10:44.390]
has access to when developing out a[00:10:46.490]
project they might have user access for[00:10:48.980]
instance to the stories and feedback but[00:10:50.990]
they might not have access to the[00:10:52.430]
requirements and development so all of[00:10:55.820]
the requirements and all the feedback[00:10:57.110]
that I’ve submitted goes into this open[00:10:59.240]
feedback section as a product owner I[00:11:01.579]
can drill down and I can view some more[00:11:03.290]
information like a screen shot that we[00:11:05.029]
submitted earlier and some more[00:11:06.680]
information about what browser the user[00:11:08.390]
is on what screen page and also what[00:11:10.850]
user role they were logged in that’s at[00:11:12.230]
the time so some really important[00:11:14.720]
information to help us diagnose what the[00:11:16.910]
problem is with this feedback we can[00:11:19.699]
then decide to accept this particular[00:11:21.500]
feedback item market and zero view or[00:11:23.959]
handle it as a as item we can add some[00:11:27.410]
motivation to this particular feedback[00:11:28.940]
item and this will be emailed to the[00:11:31.100]
user when we submit this as a story[00:11:32.959]
we’re going to mark this for a[00:11:34.699]
particular sprint and accept that[00:11:36.829]
particular feedback item what this does[00:11:39.470]
is it turns this particular feedback[00:11:40.880]
item into a user story so that we can[00:11:43.370]
start working on it we can start[00:11:44.899]
developing and collaborating around that[00:11:46.730]
functionality so if we go to the story[00:11:48.860]
section here now we can see all of these[00:11:50.930]
user stories that we’ve created in our[00:11:52.490]
project we can add story points through[00:11:54.980]
those add comments and so on and mark[00:11:57.019]
them is to do running and done so these[00:12:01.430]
statuses give us a really good overview[00:12:02.930]
of how we’re progressing during our[00:12:04.910]
development of our sprint so mendax[00:12:07.970]
works in this in sprints and usually we[00:12:10.760]
do a five day or ten day sprint and we[00:12:13.190]
create a number of user requirements to[00:12:14.779]
burn down during that work that[00:12:16.399]
particular 10 day sprint we’ve kept the[00:12:20.690]
functionality within the mendax part[00:12:22.550]
four platform very simple so that both[00:12:24.860]
business[00:12:25.670]
users who are never developed in agile[00:12:27.740]
before can easily use the platform and[00:12:30.590]
they can drag and drop these user[00:12:31.820]
stories around making it very easy for[00:12:34.070]
them to prioritize and add certain[00:12:35.510]
comments to each of these user stories[00:12:38.560]
you can add documents you can add[00:12:40.850]
pictures to these user stories so you[00:12:43.040]
can have that central portal where all[00:12:45.080]
of the information about your project is[00:12:47.360]
stored and there’s no confusion when[00:12:49.160]
developing out this application so as[00:12:54.590]
you can see at the bottom here we have[00:12:55.940]
our user story that was created from our[00:12:57.890]
feedback earlier and we can see the[00:13:00.320]
feedback number that’s also been pulled[00:13:02.270]
through from our feedback information so[00:13:05.150]
when we complete this particular story[00:13:07.310]
the user that will submit the feedback[00:13:10.370]
will get notification that we’ve[00:13:12.020]
actually completed that user story and[00:13:14.360]
we’ll get an email using the planning[00:13:16.760]
section we can plan out a number of to[00:13:20.180]
do running and done user stories and we[00:13:22.370]
can get this Kanban view style of all of[00:13:25.130]
our user stories and how we’re[00:13:26.510]
progressing during the sprint we can[00:13:29.030]
also view a burn down chart of how well[00:13:31.160]
we’re progressing against the ideal burn[00:13:33.470]
down chart so we can see how many user[00:13:36.110]
stories we’ve burned down today compared[00:13:38.990]
to tomorrow and so on so now I’ve given[00:13:42.530]
you an overview of the collaboration[00:13:44.450]
features that make out the project[00:13:46.370]
management side of the méndez portal I[00:13:48.290]
want to take you into the web modeler so[00:13:51.800]
the web modeler is our frictionless[00:13:53.420]
development environment allow you to[00:13:55.340]
build out your application using models[00:13:57.440]
in a web version of our development tool[00:13:59.900]
and we also have a desktop version of[00:14:02.150]
the development tool as well which[00:14:03.860]
allows more traditional developers or[00:14:05.870]
business developers to develop our more[00:14:08.600]
sophisticated functionality so I’m going[00:14:11.210]
to open up the web modeler here and I’m[00:14:12.980]
going to start to show you some of the[00:14:14.630]
clear features that make our our[00:14:15.980]
collaboration development environment[00:14:17.930]
and how we can build out using visual[00:14:20.660]
models our application so this is the[00:14:26.780]
web modeler interface and on the right[00:14:28.760]
hand side here we have a number of[00:14:30.350]
building blocks that we can drag and[00:14:32.210]
drop onto our interface and we can drag[00:14:34.910]
our and build our application out for[00:14:36.650]
both mobile tablet and web so[00:14:39.290]
box we have responsive design so if we[00:14:42.949]
drag on a building block from the right[00:14:44.540]
hand side here we can edit and customize[00:14:46.279]
those those features so that we can[00:14:48.800]
build out our interface all of those can[00:14:51.589]
be completely customized for our own[00:14:53.540]
organization needs and we can then add[00:14:56.180]
in the user user experience and user[00:14:59.600]
interface from our corporate brand we[00:15:03.110]
also have a number of low level widgets[00:15:05.029]
such as being able to view a list beyond[00:15:07.670]
two radio buttons dropdowns and so on so[00:15:10.940]
there are three core mendax components[00:15:13.279]
that make up any mendax model the first[00:15:15.980]
one is the pages which I’ve just shown[00:15:17.420]
you here the second one is our domain[00:15:19.579]
model which is where we build out our[00:15:21.380]
data structure so any data that we’re[00:15:23.839]
going to store in a database of our[00:15:25.160]
choice or any data that we’re going to[00:15:27.259]
store in memory the third concept that[00:15:31.490]
we have is what we call Mike flows and[00:15:33.589]
Mike flows is where we build out[00:15:35.149]
business logic either in a bit button[00:15:37.490]
click a background process or as a web[00:15:39.889]
service and it’s based on a number of[00:15:42.589]
activities and a number of decisions so[00:15:46.130]
there the free core components that make[00:15:47.750]
up the mendax model and this is how we[00:15:49.730]
build out our applications for both[00:15:51.500]
mobile tablet and web so if we go back[00:15:53.870]
to our page that we had opened earlier[00:15:56.180]
where we were uploading a photo we can[00:15:59.180]
start to implement the functionality[00:16:00.649]
that we want as we do so we can[00:16:05.300]
collaborate with different people within[00:16:07.010]
our organization to help us develop at[00:16:09.470]
this particular feature so in this[00:16:13.190]
version of this application we do not[00:16:15.050]
have any text field to store our[00:16:17.209]
particular data so we can drag on a text[00:16:19.850]
area from our toolbox and we can start[00:16:22.010]
to configure that up to our data now we[00:16:24.800]
might want to create a new attribute for[00:16:26.779]
this particular data and we can do that[00:16:28.760]
by clicking new attribute we don’t have[00:16:30.829]
to write any sequel statements we don’t[00:16:32.720]
have to control it via the the main[00:16:35.630]
model we can simply create these from[00:16:37.550]
the page and use a design thinking[00:16:39.199]
approach to building our applications so[00:16:42.079]
we’re going to call this attribute[00:16:43.509]
matched text and we’re going to make[00:16:46.279]
this sort of a string attribute when we[00:16:49.370]
create that it will connect up our[00:16:51.230]
particular text field to our[00:16:53.150]
data filled in our domain model now so[00:16:58.910]
the next thing we want to do is we want[00:17:00.380]
to configure this button to be able to[00:17:02.150]
call some logic so that we can scan the[00:17:05.270]
photo and we can then save the text[00:17:08.089]
that’s responded back into our new[00:17:10.850]
attribute you’ve created so when[00:17:13.700]
developing this particular feature I[00:17:15.410]
might not necessarily know how to do[00:17:17.270]
everything for this particular logic but[00:17:19.790]
I do know how to create a micro for[00:17:21.650]
instance so I can create a new mic float[00:17:23.480]
and I can give it a caption of scan and[00:17:28.090]
I’m also going to create a new mic flow[00:17:30.860]
to actually be called when I click this[00:17:33.200]
button so I’m gonna add a text and I’m[00:17:40.340]
gonna call it scan photo click create[00:17:42.650]
and this would create me a template for[00:17:44.660]
our new mic flow we have a parameter for[00:17:47.720]
the transaction photo and we might want[00:17:50.960]
to ask someone from our team to give us[00:17:52.790]
some assistance now Craig within my team[00:17:55.600]
he’s he’s very good developer he might[00:17:58.580]
be able to assist us in developing out[00:18:01.100]
this mic flow so in M free microphone[00:18:03.560]
page we have this buzz option here and[00:18:06.170]
this allows us to start to collaborate[00:18:08.780]
with people within our project I can go[00:18:12.590]
into this particular text field and do[00:18:15.200]
an @ symbol to start notifying one of my[00:18:18.170]
developers or one of my team members[00:18:20.390]
that I require some assistance when[00:18:22.460]
develop out this particular flow so[00:18:24.740]
we’re gonna add at Craig white and I’m[00:18:27.080]
gonna ask him for some assistance I’m[00:18:29.450]
gonna ask him how can I add some[00:18:31.220]
scanning features to this particular[00:18:33.320]
flow when I click post who will be[00:18:39.200]
notified via email that I’ve I’ve[00:18:42.140]
acquired some assistance for this[00:18:43.850]
particular logic[00:18:54.630]
so let’s just wait for a crate to[00:18:56.740]
respond back to us we’ll see this update[00:18:58.929]
in the web modeler and we can then have[00:19:00.940]
a two-way dialogue during this process[00:19:02.860]
so you can see here we’ve got this[00:19:04.630]
comment now but also what you can see on[00:19:06.700]
the top right here now a hopper you so[00:19:08.950]
you can see that Craig has started to[00:19:10.870]
edit this in their web modeler so he’s[00:19:13.630]
actually editing this and we’ve we’ve[00:19:15.910]
locked out our view so it’s now only in[00:19:18.940]
read-only view as you can see when we[00:19:20.799]
select options[00:19:21.850]
we cannot drag on new options to our mic[00:19:24.970]
flow and we cannot edit new features[00:19:27.010]
until Craig is done with this flow so[00:19:30.070]
once he’s completed those changes we can[00:19:32.110]
then take over the development again[00:19:34.000]
from him to see his new options so we[00:19:36.970]
can see this two-way collaboration[00:19:38.470]
within the modeler so here we go so we[00:19:41.230]
can see those changes that Craig has[00:19:42.730]
made in the browser now we can see that[00:19:45.309]
he’s added a annotation saying use the[00:19:48.309]
Google vision connector and also added a[00:19:50.620]
change object functionality here so we[00:19:56.230]
can pull those changes from Craig and we[00:19:58.120]
have a live collaboration and[00:20:00.250]
development using the web modeler here[00:20:05.940]
so during the development cycle we can[00:20:08.559]
have that collaboration not only on the[00:20:10.780]
user stories but also when we’re[00:20:12.490]
developing our application now so making[00:20:14.890]
it very easy to collaborate around your[00:20:17.230]
logic of your application your data and[00:20:19.870]
also your pages when developing out both[00:20:22.179]
in the web and the desktop version or a[00:20:24.100]
development tool so develop out the rest[00:20:28.030]
of these features I need to work in the[00:20:30.160]
desktop environment I want to be able to[00:20:32.260]
connect into this this connector that’s[00:20:34.809]
available on our App Store and I want to[00:20:37.419]
be able to make that that logic and that[00:20:39.850]
data available for our business users[00:20:42.520]
using the the modeling tool so if we[00:20:46.870]
take over the development now and we[00:20:48.580]
switch into our desktop version of our[00:20:51.250]
modeling environment we can start to[00:20:53.380]
build out that functionality so I’m[00:20:55.780]
going to go back into the portal now and[00:20:57.640]
I’m going to hit edit in desktop modeler[00:21:00.309]
this will open up the desktop[00:21:02.620]
environment for us where we can build[00:21:04.360]
out our application using off[00:21:06.970]
Desktop environment so we don’t have to[00:21:09.910]
have a connectivity we can build out our[00:21:11.530]
application using the desktop[00:21:13.720]
environment and we can commit that back[00:21:15.880]
into our central posit or e so we’re[00:21:18.310]
working on the exactly the same model on[00:21:20.470]
both the web modeler and desktop modeler[00:21:22.240]
there’s no difference between the two[00:21:23.860]
and the same concepts apply we build[00:21:26.260]
applications using models rather than[00:21:28.480]
actual code so in the development tool[00:21:32.530]
we have ability to view all of those[00:21:34.330]
user stories that we have available in[00:21:36.490]
our project we can tie back certain[00:21:38.980]
functionality that we’re working on to[00:21:40.810]
those user stories and we can have[00:21:42.700]
collaboration and we can comment on[00:21:44.500]
these user stories directly in the[00:21:46.300]
modeling environments so we here you can[00:21:49.120]
see we can feed see the feedback item[00:21:50.980]
and we can start to set that status as[00:21:53.410]
running as we start to develop out this[00:21:55.510]
functionality so the first thing we need[00:22:01.150]
to do is we need to actually we need to[00:22:04.780]
get that new functionality that the[00:22:07.030]
users in our web modeler has developed[00:22:09.100]
we need to pull that through into our[00:22:11.320]
application so all of the users that use[00:22:14.020]
the web modeler are working in a branch[00:22:15.970]
line so that it can make sure that all[00:22:18.220]
of their changes that they are working[00:22:19.990]
on are not impacting that mainline[00:22:22.000]
functionality so as a more business[00:22:24.670]
developer here I can decide to pull down[00:22:26.650]
those changes from our web modeler[00:22:28.540]
interface and we can sync those changes[00:22:31.000]
into our desktop version to make those[00:22:33.340]
available and decide what we’re going to[00:22:34.930]
have available in our web modeler so[00:22:39.460]
with those changes that we have made in[00:22:40.960]
the web modeler such as adding that new[00:22:42.970]
attribute pulling those changes like[00:22:47.080]
those logic changes that Craig also made[00:22:49.660]
will be available now in our desktop[00:22:52.030]
environment so here the changes are[00:22:54.700]
being merged into our application and[00:22:56.740]
finally we can see those changes in our[00:22:59.440]
application now we can decide which[00:23:01.270]
changes we want to accept and which ones[00:23:03.220]
we want to reject and we can also extend[00:23:05.800]
those particular changes so here we see[00:23:08.830]
the scan photo Mike flow that we created[00:23:11.230]
earlier and we can see that change in[00:23:13.300]
that comment that Craig made in our web[00:23:15.370]
Mallone interface so now we want to add[00:23:18.760]
that new functionality we want to be[00:23:20.500]
able to[00:23:20.890]
call out to our OCR service from Google[00:23:22.990]
Vision and we want to change our[00:23:25.240]
attributes so that we can see that[00:23:26.680]
information displayed on a page[00:23:28.950]
so the first thing we’re going to do is[00:23:30.940]
going to open up our App Store and our[00:23:32.920]
App Store is our component library which[00:23:35.080]
allows us to build from a number of[00:23:37.260]
components rather than building from[00:23:39.160]
scratch and this really accelerates the[00:23:41.200]
development of every project the App[00:23:44.050]
Store comes in two versions it comes in[00:23:46.540]
a public version which is available to[00:23:49.060]
everyone within the mendax community and[00:23:50.950]
also a private app store so every[00:23:53.440]
company gets their own private App Store[00:23:55.150]
allowing them to share connectors[00:23:57.640]
widgets or extensions on their private[00:24:00.820]
app store allowing them to only have[00:24:03.760]
those available for people within their[00:24:05.380]
organization so this can often save a[00:24:08.860]
lot of time in developing your[00:24:10.810]
applications because you’re not building[00:24:12.550]
from scratch every time when we’re using[00:24:15.340]
this particular app store a lot of our[00:24:17.020]
companies a lot of our organizations[00:24:18.910]
will publish certain starter application[00:24:20.770]
on here with all our theming their[00:24:22.780]
branding and all of their security[00:24:24.730]
that’s required for their organization[00:24:28.350]
so we have connectors into data such as[00:24:31.060]
s ap connectors or Google Vision api’s[00:24:33.970]
for instance here and we can see[00:24:35.880]
documents screenshots and so on and we[00:24:38.320]
can download this into our application[00:24:40.180]
and add this as a new module as we do so[00:24:43.270]
you would to pull all of dependencies we[00:24:45.340]
need for our application so once it’s[00:24:48.670]
pulled into our application we can use[00:24:50.350]
it as if it’s a native connector within[00:24:52.330]
our platform we can see we have a number[00:24:55.540]
of additional activities compared to the[00:24:57.580]
web modeler so a richer set of[00:24:59.380]
functionality such as calling out to any[00:25:01.330]
rest or soap service connect to Java[00:25:03.280]
actions but also any App Store[00:25:05.530]
components we download so here we have[00:25:08.020]
two versions we have a detect document X[00:25:10.210]
and a detect image text so in this case[00:25:13.210]
we want to pass it a photo and we also[00:25:15.100]
want to pass it a key so that we can[00:25:16.990]
call that Google vision API and as we do[00:25:20.500]
so we can then decide to set the return[00:25:22.630]
type on what we’re going to return back[00:25:25.510]
from this service and use that later in[00:25:28.150]
our mic flow so we want to use that[00:25:30.670]
string value we get back from our API[00:25:32.860]
and we want to set now[00:25:34.780]
in our application we want to change[00:25:36.640]
that match text to our detective text[00:25:40.929]
and we want to commit and refresh that[00:25:43.059]
in the page so now we built that[00:25:46.030]
functionality we want to be able to test[00:25:48.220]
that new functionality so we want to run[00:25:50.860]
this locally in our browser so we hit[00:25:52.929]
run locally and this will now build our[00:25:55.419]
application on our own machine so that[00:25:57.880]
we can test it offline we can test it on[00:25:59.919]
our own on our own browser rather than[00:26:01.929]
deploying to a cloud server and then[00:26:04.510]
we’ll be able to see that running and[00:26:06.190]
test it locally on our mendax mobile[00:26:09.190]
application so we synchronize the[00:26:11.380]
application which will create us all our[00:26:12.850]
tables we can open up the mendax mobile[00:26:15.490]
application and scan a QR code that’s[00:26:18.220]
generated by the the tool and this[00:26:21.070]
allows us to open up the application on[00:26:22.960]
our mobile device and test the native[00:26:25.240]
device functionality so here we scan the[00:26:27.580]
the QR code we open up the application[00:26:31.890]
and we can go down into our particular[00:26:35.309]
accounts we can view a particular[00:26:39.370]
transaction and we can add a photo to[00:26:41.950]
this transaction so if we take a photo[00:26:45.280]
of a receipt for instance we might want[00:26:48.039]
to take a photo of a train receipt we[00:26:51.039]
can take a photo of that receipt now we[00:26:58.179]
can then click the press the Scan option[00:27:01.240]
this will go back to our Google OCR[00:27:03.610]
service from the from the Google vision[00:27:05.470]
it will then respond back with some text[00:27:07.690]
and then we’ve set that text on the on[00:27:09.880]
the page here so we can see that[00:27:11.230]
information in our application so very[00:27:14.350]
quickly we’ve been able to build out an[00:27:16.150]
application using both the web modeler[00:27:18.190]
and the desktop environment and combined[00:27:20.530]
both business and IT type of developers[00:27:23.309]
so the idea of the mendax platform is[00:27:25.690]
that we want to try and bring all those[00:27:27.669]
types of developers all those types of[00:27:29.260]
users together in the platform so we[00:27:32.950]
want to make those changes available to[00:27:35.049]
the rest of our developers we want to[00:27:36.730]
make them available to our web more[00:27:38.409]
interface so when we’re developing in[00:27:41.049]
the desktop and when we pull those[00:27:42.400]
changes from them that merged that[00:27:45.179]
branchline in the web modeler[00:27:48.029]
we’re actually locked the webmonitor for[00:27:49.679]
us so this ensures that the people that[00:27:52.080]
are using the web monitor will be using[00:27:54.599]
the latest version of the the mandates[00:27:56.639]
application so once we merge those[00:27:59.519]
changes back in and we say finish sync[00:28:01.769]
with web modeler we can tie back all of[00:28:04.049]
the user stories that we’ve been working[00:28:05.759]
on so this is a really important feature[00:28:07.619]
of the platform because it allows the[00:28:09.929]
developers and the testers to know[00:28:12.690]
exactly what we’ve been working on in[00:28:14.489]
our platform so we can communicate with[00:28:17.909]
our testers and our developers what[00:28:20.099]
we’ve been working on during the[00:28:21.690]
development process so we’re going to[00:28:26.070]
add in a comment here that we’ve been[00:28:27.539]
working on the Google vision API and we[00:28:29.759]
can commit those into our central team[00:28:31.649]
server repository which is based on SVN[00:28:34.080]
and it comes out the box with the mendax[00:28:35.909]
platform allowing you to have multiple[00:28:37.710]
developers to work on the same project[00:28:39.719]
and work together on multiple different[00:28:43.049]
environments so once we’ve committed[00:28:48.509]
this in it will then unlock the web[00:28:50.460]
modeler making all of those changes[00:28:52.139]
we’ve done in the desktop and the web[00:28:53.909]
modeler available to our developers in[00:28:56.489]
the web interface so within an[00:29:05.489]
organization different types developers[00:29:07.379]
need to develop in different ways and[00:29:09.089]
use different tools so now that those[00:29:12.029]
changes have been developed and they’ve[00:29:14.729]
been committed into a central Pazza tree[00:29:16.619]
they will now be made available to our[00:29:18.659]
web users so we can see the scan photo[00:29:21.509]
Mike flow and we can see now that[00:29:23.099]
activity that we’ve developed and added[00:29:25.289]
in in the desktop environment is[00:29:26.940]
available to our web users as well we[00:29:29.789]
could also build our own connectors to[00:29:32.070]
our own enterprise systems and make[00:29:33.690]
those available in our web interface[00:29:35.869]
so in summary I’ve taken you through the[00:29:39.269]
mendax platform and how our[00:29:40.739]
collaboration features really accelerate[00:29:43.589]
the development of applications so that[00:29:46.049]
we can combine different personas within[00:29:48.749]
an organization from our UX experts our[00:29:51.749]
operations our integration specialists[00:29:54.330]
and finally our business stakeholders so[00:29:57.509]
all of these key personas are important[00:30:00.119]
to ensuring that[00:30:01.770]
ocation development is successful and[00:30:03.900]
that you build an application correctly[00:30:05.820]
first time right thank you for joining[00:30:09.240]
this low code in 30 will now take some[00:30:12.000]
questions from the audience