Building a mobile app with built.io and AppGyver’s Composer


Hi, my name is Gal Oppenheimer. I’m a Senior Product Manager at raw engineering, and today I’m going to talk about how I built an app
on top of AppGyver powered by built.io. So the app I’m going to talk to you about, is
for a conference related to the World Cup of Football players, so they talk about some of their greatest wins. It has three parts; there’s speakers, sessions, and then contacts,
where you can add contacts you’ve met at the conference. On the right here, this phone
is actually a screenshare from my iPhone, so everything you see here is happening directly
on a phone and the left in the browser is the AppGyver Composer product. So you can
see here that I have listed all the speakers. When I decide to click in, I can see a detail
page with more information about the speaker. Similarly, in the AppGyver product, when I
go to page two, I can see the same information. Let’s say I wanted to add a picture and remove
the bio, this is how I do it. I go into AppGyver, I’d remove the bio. I would simply click on
picture to add a picture. You can see how fast this is mimicked between the phone and
the Composer. Let’s link it to our data. Select data. Right here are all the fields I can
find in AppGyver. I’m going to select the image URL for the speaker, and voila! We can
see that speaker’s picture has been added to both sides. you look at the structure of
the app, this is now propagated to all the different speakers in our system. You’ve instantly
seen all their photos for everyone. Now let’s take a look at another portion of the application;
the contacts portion. This part of the application is designed for a conference, so I can add
new contacts I meet and store information about them so I can follow up with them later.
This information and all the other information is stored in built.io. You can see right here
that there are two fields; Josh and Bill Gates that are both in the application. Let’s see
what happens when I add a new contact. Click on new contact. I put in their name. I put
in their company, and I add some notes. I then save the contact. You can see here that
he’s now on the list, and if I refresh this page in built.io, he’s also been added to
the database in built.io. So, as you can see, it’s really easy to modify applications built
on AppGyver and store data in built.io. Let’s quickly take a look at how I did that. So
I go int AppGyver Composer and I click on backend. Right here you can see that built.io
is already set up as a provider. All I needed to do was add an application key and put in
the application name, and when I go to resources, this is where I added the different resources
for my application. So you can see here that there’s connections for when I meet new contacts,
sessions, for the sessions tab, speakers, for the speakers tab, and the team was actually
used by the speaker portion so that, that way, if you had more than one player speaking
from a certain team, you’d only have to enter the team information one time. So that’s just
a quick peak into how I built an application on built.io and AppGyver.