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