you get an app that looks something likethis basically a website as an app I'mgoing to show you how to convert yourwebsite into an app this process israther straightforward more so thanbuilding an app from scratch might be soif you already have an existing websitethis is a great option if you want tobuild an app with minimal work nowgranted the types of apps you can buildwith this method are somewhat limited
like you can't have push notificationsand things like that the specific typeof the app I'm talking about is mostlyinformation-based so if you have aninformation-based website and you justwant the same functionality that's onyour website in your app then this isthe right video for you my victim fortoday's experiment is called Houston Zooorg they have a website with this cutelooking animal I don't even know whatthat is is that a possum not really surebut they have a website and I'm going toturn it into an app with its own appicon andapp name visible on your homescreen and it's gonna be for ios andandroid so let's get started here are my
three steps for converting a website
into an app step number one is you need
to make the website mobile-friendly this
is because we're going to be basically
wrapping the website in some sort of
browser in an app and the tool we're
going to be using for this is ionic so
basically it needs to be working well in
a mobile browser first and then we can
do the next steps and it will work much
better then step number two is to
download and configure the app template
I'm going to give you today I'll give
you a link to that and then all you have
to do is publish your app to the iOS and
Android stores so let's look at step
number one make the website
mobile-friendly more in-depth this means
the following your app needs to take
into account that mobile devices are
smaller in width and height and so the
page needs to shrink and not stretch
beyond the natural width of the phone
all right it's fine if it Scrolls
vertically but it can't horizontally
scroll at least that wouldn't be a very
good user experience so make sure it
works well on small screens and make
sure that you have ever present
navigation what this means is always
having a home link at the top left of
your page
that users can click that and go back to
the home page because there isn't going
to be any sort of other navigation in
the app other than what's on the website
so make sure your website has good
ever-present navigation they can always
get to where that where they need to
from any point in the app this also
means your website can't have any island
pages and an island page is a page in
your website where users go to that page
and then they can't get back so that's
kind of the same ever-present navigation
point but just I want to be clear that
they can't go somewhere and not be able
to get back otherwise they're going to
have to relaunch the app in order to get
back to your home page so make sure your
website has good navigation and there
are no island pages finally for all
links to external domains you need to
use the underscore blink target or in
other words the links need to open up in
a new tab that's that's what that code
is well code for is links need to go to
a new tab otherwise if they go to like
facebook.com and it opens up on the same
page then what that's going to do is
cause users to click on that link to go
to your Facebook and then all of a
sudden your app just turns into a
Facebook app so make sure all links are
underscore blink all external links need
to open up in a new tab and now that
your website is mobile-friendly what
we're gonna do is download and configure
the HAP template that I've provided for
you today so here's the URL it's
github.com slash Jameson saunders slash
convert - website - - - app pretty
intuitive URL I'll leave that on the
screen for a
while in case you want to
write that down but basically you just
download the zip file from that URL ok
so that link I sent you the github link
that's a ionic project and if you're
unfamiliar with coding and you're not
sure how to open this thing up and how
to edit it stay tuned to the end of the
video I'll have some more information if
you want to learn more about coding this
is really like the most basic basic
stuff compared to what you would need to
do to build an app from scratch this is
nothing so basically all we have to do
is inside
the homepage that HTML we go in here and
we change the source attribute right
here to be our website okay and by the
way one caveat to this is that the
website that's being hosted cannot have
the x-frame options
same origin HTTP header on it okay and
it shouldn't be on your website by
default but if someone put that there
which basically means that other people
can't embed your website and another
website then this will not work so make
sure that you do not have the X frame
options same origin header on your
website but assuming your website is all
good and it usually should be for the
most part you just enter in that URL
right here so I've entered in WWE
Houston Zoo org and that's pretty much
the only thing you need to change as far
as functionality you can see this app is
super simple it is one line of code
right here and then a couple more lines
of code right here for styling it and
that is how incredibly simple this app
is okay.
so we've completed step two
point two which is to change the source
attribute on the home page iframe to
your website okay but mine's already set
to the website that I want and then step
two point three is input your app name
ID and an icon so essentially all you
have to do is go over to the ionic
project and go over to the ionic config
JSON and change this to the name you
want your app to be called mine's called
Houston Zoo and then in the capacitor
config JSON you can change the ID of the
app which is usually a reverse domain
identifier so that's basically your
website domain in Reverse and then
whatever project it's called you can
just use site or something if if this is
the only project you have and then you
once again put the app name right here
and then as far as configuring the app
icon and building the app to your phone
and testing it I've already made videos
full in-depth tutorials on how to do
each of those as well as how to publish
the app to the iOS and Android stores in
a course called mobile app development
that's on my site so that's a part of my
paid program but I've already outlined
all the steps for you if you know how to
do those things and you
basically in a home run you just simply
hit the build button and you get an app
that looks something like this there's a
guy right there you can click on that
you can go to our now basically a
website as an app and you can click on
links in here and so basically the app
works 100% and you'll get an app like
that as long as you number1 change the
source attribute to your website and
then you and put your app name your icon
your app ID and then you build it to
your phone and it just gives you an app
with your website as an app it's super
easy this app template literally has
less than ten lines of code
customization needed so compare that to
building the app from scratch and this
is a breeze so thanks for joining me
once again you can join my paid program
if you're interested in learning how to
build the happen can figure that icon
and so forth thanks and I'll see you
hopefully in the course