hi today I'm gonna introduce you to
ionics app flow so app flow is similar
in many ways to PhoneGap build allows
you to build native ios and android
applications in the cloud it's a little
bit different than PhoneGap build but
we've done an integration within the
alpha PhoneGap builder to allow you to
very easily work with ionic SAP flow so
why would you be interested in this if
you didn't have a Mac you didn't want to
use the native Xcode development
environment SE and a cloud service like
mac and cloud you just wanted us
basically the same functionality that
you've had out of PhoneGap build but you
wanted to make sure that you're using
the latest Xcode versions and so that
you could publish to the Apple Store app
flow will allow us to do that now this
screen tells us that it's for free but
that's really not true because in order
to build an application you've got to go
with this service which is their $42 a
month service that allows you to build
come to compile native app binaries so
that's what you need to do to get
started and in this video I'll go
through the whole process of using the
PhoneGap builder along with app flow and
will generate a full application to
start out with I thought we'd take a
look at the dashboard for ionic app flow
and then I'll show you an application
that we've already built with it and
then I'll take you through actually
building a new application with ionic
SAP flow so here we are at the developer
hub and I'm just gonna click on apps and
here we can see the one app that I've
already built and let's go ahead and
select that now what it's going to do is
show me the commits that I've made so
what we're going to do is we're going to
tie this project to a github repo and
when we make any changes to the project
in alpha those changes are going to go
directly to the github repo
we'll do a commit and we'll be using the
github desktop for Windows client for
that once those commits come in they
will show up here and then you can you
can click on these commits and you can
see you know exactly what you changed
and so on and then in order to build you
just click on this box over here you say
what would you like to build in this
case I've got an iOS Xcode 11 I could
say I want to build for Android what
type of build is it is it a debug build
or a release build you also have to
update your credentials very very
similar to the way you need to do that
in PhoneGap build as well certificates
and so on for iOS builds but once that's
all done and you just click on build it
will go ahead and know what its gonna do
is it fires off of VM and it's gonna run
this whole script that will generate in
this case the Android build the full apk
once it's done you can click over here
and download the apk or the IPA file and
then those can be installed in this case
these are development versions and they
could be installed on those devices we
can also go back to the builds the build
screen sorry and see this build in
progress right here yes that's how you
do I just click on it and if there's any
errors or anything like that you'll see
that come up here let's go take a look
at how you actually build a project in
alpha step one before you try to use the
Alpha ionic app flow integration make
sure you to install github desktop so
this is what you're gonna be using to
manage your repos and to publish up to
your github account once it's installed
it'll look something like this manage
all your different repositories you can
push to your github repo right here
that's really simple to use makes things
quite easy in this case we'll say that
we want to generate a PhoneGap project
will create a new project
just call this a test three you can now
select ionic app flow when you do that
select the type of build you want to
generate in this case we'll say Android
and iOS select the initial ux component
this is all very similar to what you've
always done with PhoneGap build and you
enter in your this case here we'll go
select an icon we'll select a storyboard
image and then we would change our name
and a version number and all that select
we've got the web WK web View engine
coming in however many plugins we might
need for this go ahead and select them
and now you just save and build for
ionic app flow it's gonna create all of
the files that it always has storyboard
launch image etc and those files have
now been published and what happens is
it launches the the the github desktop
version for Windows and it's going to
say would you like to add a local repo
in this case we haven't even created it
yet so it says that this directory which
is part of the the whole project
structure in alpha it does not currently
seem to be a git repo because it isn't
so you want to say create a repository
here go ahead and do that you can this
is the name of the repo and you could
put a description in here just say test
app and our local path is already
defined and you can just say create
repository that's now done and you'll
see in history we will see everything
that's done with the initial commit
and at this point it hasn't been
published to a repository on github so
that's what you need to do in order to
work with ionic SAP flow so in this case
we'll say publish to a repository we're
gonna create a new repository we're
gonna keep it private well and we'll
call it ionic test3 publish to the repo
it reaches out to my github account and
publishes that repo so this is what you
go through when you first create a
project now what we haven't done at this
point is we haven't wired ionic app flow
to our project github repo so what we
need to do is create a new project in
app flow wire it into that repo and then
we can start building we'll take a look
at that next now we're back in our
dashboard for ionic app flow what we're
gonna do is create a new app and we'll
just call this test test app to go ahead
and create the app now the next thing we
need to do is make sure that the app is
wired into our github repo come down to
settings click on git then up top here
click on github and if if at this point
you have not connected app flow to your
github account it will ask you for your
credentials and so on in this case we
can see all of the github these are all
my repos up on on github and the app
that we just created an alpha is this
one here it's test three suppose I
should have named it that but I didn't
so let's go ahead and select that
and you can now see that we're we're
connected there for this particular
application now if we go up to commits
it says we don't have any commits for
this app well we do actually we've done
two commits but ionic outflow doesn't
realize that so in order to have
anything show up that you can build once
you've got everything connected so
you've built your project within ionic
app flow and you've connected it to your
Hubb repo what you need to do is go back
into into alpha make a change anything
just make something dirty or whatever
and make a commit and then app flow will
pick it up let's take a look at doing
that
okay so here we are back in in alpha and
in this case let's just make a we'll
make a quick change to this component
here we'll just change this to say Rev 2
so we've got something that changes and
we'll save that you jump into the
PhoneGap builder ionic app flow it's all
the same everything's the same here we
don't need to generate these images
because they've already been done we do
want to generate the PhoneGap asset
files and that's all we're gonna change
so saving build for ionic app flow
whatever files changed are what gonna be
will be identified within the repo as
having changed and so we have the
index.html file and we'll leave this
comment that says update index.html
commit to master and now we need to push
it to github which will do and now app
flow will pick it up and we can now do a
build with that we'll take a look at
that so we're back in our dashboard we
can see our project here we can see our
commits I had to go to overview quickly
and then come back to commit so it's
scanned again and here we see our commit
update index.html if we want to look at
it on github we could we can see our
changes and if we want to build but
click over here now if we want to do an
iOS build in this case our credentials
have not been updated so you'll notice
it says that you need to create a
security profile before packaging a
build so let's go ahead and do that so
click on security profile here and we
can add our first profile and we'll just
call it
REM development and it's going to be a
development
profile let's create it and this is for
our iOS credentials so you're gonna have
to upload your certificate P 12 file
just like you have to do with PhoneGap
build and you're provisioning profile
and also to include the certificate
password let's just go choose the files
the first thing that I need to upload is
my certificates dot p12 file go ahead
and choose that that's done I need to
enter in the password and I need to
upload my provisioning profile which is
this one here that's done save it it
will authenticate at this point so if
there were problems with your
credentials that would tell you right
now and let's go back to our our commits
and let's do our build notice now it's
got a security profile you can just go
ahead and build it will fire off a
virtual machine and initiate the build
process and we'll check back on this
when it's done once the build process is
complete you can look through all of the
different messages that were generated
during the build process but what you
want to see at the end was job succeeded
and then over here on artifacts you can
see the IPA file that was generated if
you if you click on this it will
download that file and the way you would
install it onto a device that's included
in the provisioning profile is use this
application
it stands for development and in-house
apps wireless installation and what you
do is you just upload your application
I've already just generated one but
let's do another one so let me just open
up finder and my Mac here drag the IPA
file in drop it say send there's a free
service so it's really helpful it's
gonna generate a QR code so you can
install it on a device for you now got a
link that you could send out and others
could install that as well
so we've taken you through the whole
process of generating an app within the
PhoneGap builder for use with ionic app
flow and within ionic app flow we
created a new project wired it into our
github repo and in this case we built a
working iOS app so I hope you find this
useful thank you very much
Alpha Software Corporation
70 Blanchard Rd.
Burlington, MA 01803
781-229-4500
Customer Support
