Building Apps using Ionic AppFlow

Ionic AppFlow is a service offered by Ionic for building iOS and Android PhoneGap application. It is tightly integrated in the Alpha Anywhere PhoneGap Genie.
--- LINKS ---
Free Community Edition Download
Alpha Software YouTube Channel
#ionicappflow #phonegap #mobileapp #app #ui #android #ux #ios #mobileappdevelopment #appdesign #uidesign #mobileapps #appdevelopment


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


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


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


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