Make an Android App using an iPad and HTML a how to video.

Make an Android App using an iPad and HTML a how to video.


Jeremy Ellis Here Maker of Rocksetta.com. I want to show you how to make a web page
and turn it into an App on the iPad. Presently August 2013 this is working better on the
iPad than actually on an Android tablet just things that will probably improve later. So
I am at GitHub.com I have got a username and email and a password. Lets signup for github
and see if all goes well. There that’s what github looks like it basically stores files
and folders so we are ..Everything’s on tap so double tap so create a repo a repo
is a folder so we are going to make a folder and I should give long names but to make things
quick I am just going to give nice short names. You always give a description with things
you do and it is going to be a public folder lets give it a license MIT and I apologize
to github superstars I am just trying to get things going here. So there we go its made
a folder called hap and its got a license and a readme which I should fix up. All I
am going to do is hit this little plus sign because I want to make a file its super important
here that you make the filename with a small i Apple iPad wants to make it a capital so
this is i for index its got to be spelt right things totally mess up if you don’t index
and everything you do in github you have to say what you did So I made index and you probably
should do these a lot better but as I said I am just doing things quickly Now everything
here in your index file is a webpage. I am just going to say Happy Birthday Mom whatever
and if everything is right lets see index dot html happy birthday mom I should be able
to commit this. There we go you commit a file which basically means save it there we go
index dot html Um so that’s it. there is our webpage umm lets go to phonegap I have
already got ourselves started here phonegap just google phonegap there we go so this is
what it looks like we are not going to install phonegap its cool its really good but its
not as quick as this. We are going to try it. And we are going to login with our github
account and hopefully since git is up and running it senses what my github account is
ipadtogap. This allows adobe to know everything about that account. Here I have hopefully
got it so I can past the password there we go. So there’s Adobe and it looks like it’s
good. Canada Agree to the terms you have got to be over 13. Complete the registration so
this is phonegap dot com. And notice it opens up with a private build. You are allowed one
free private build but we want to send this URL to someone else so let’s do an open
build so they can actually read it. This I have found out before. It does not know about
our github account. yet we have got to refresh this page and we may have to do it a couple
of times because github probably still making that account. Let’s see how we’re doing.
Here So while I am waiting for Adobe to get happy. Let’s do the next part. were going
to make this webpage fancier. So I am going to go to my sight rocksetta rocksetta.com
and Ill put this link in the little blurb. It’s a it’s for people who have a hard
time with music it just allows them to learn music a little bit differently. While we’re
waiting here I give you a little run down. Its a pretty weird. If we find a song it does
it as numbers which is kind of like tabs it translates it into a letters it even has an
image of the song and it has musical notes and on the desktop you can actually sing or
play an instrument and it will record the stuff. It’s pretty cool. But we are going
to go to html to phonegap to apps. this is the advanced stuff this is making certificates
so you could actually make an IOS App or a blackberry one. anyway this is the page we
are going to come back to. Let’s see if Adobe OK so here we go I pulled that down
load it and it grabbing the app. There’s more stuff with the config but we are just
going through the absolute basics and that the thing that we are going to use scan code
we should check that it is all done. If you actually click on the name it gives you a
better screen. Here it is its making an IOS app but we don`t have a key so it is actually
not making the ios app. this one is already ready. There’s the android one we are waiting
for. This button here is what you are going to use to be able to email it. And I am not
going to teach you how to email but were just going to copy that link put it in your email
email it to a friend . We are going to do the equivalent here by on my android phone
using the scan code and just showing you what this thing would look like this is what will
happen when you email it. Um it’s just going to load up a webpage that says starting download.
There you go starting download once it has done the download. Here it is its already
there then the person can install it and this one is going to be very boring it’s just
going to say happy birthday mom. OK but and it will be really small there Happy birthday
mom. That’s an app on the android phone. so umm next thing we are going to do is let’s
make this a heck of a lot better so here is our index file, we are going to go to the
index file we are going to edit the raw file we are going to go to my rocksetta page and
we are going to grab this code from the rocksetta. all it does is its got the happy birthday
mom but it’s going to increase the font quite a bit it’s going to show you how to
do a link even though on apps we are not supposed to use links you are supposed to use buttons
so it will show you how to do a simple button to google it will show you how to do an online
image and it will show you there’s the online image it will show you how to paste an online
video which is a little bit harder. Let’s go back to github umm lets erase what we have
got there then paste did I not paste it there we go make sure it just pasted it once. good
OK we got to update this we’ve pasted as I said you should do better things than that
umm by the way we’re going to go to something called my page dot html everything is small
letters so we had better make that darn file so here we go we are going commit the changes
and here something quite fancy if you go to raw. And up here where it says github raw
what you need to do to view the darn thing if you delet the dot between raw and github
if we go to that it will show it as a web page strangely enough it is already showing
it as a web page that might be something to do with the safari browser. but thats what
your app is going to look like so you can test your app just with the web browser that
the beauty of phonegap. a proper link what apps like are buttons this is the mypage that
we are going to have to go back and make. so lets go back to our hap foler which is
called a repository. lets make a new file called mypage and rememberr small letters
are important and it wants to do capital letter so my page dot html make sure you did it all
right unfortunately it through in a space there we go remember you have to do a commit
so mypage and we should put in something here lets go wow and commit the darn thing. There
we go. OK so back to phonegap I’ve already shown you how this can download it onto your
own android phone but right here you need that URL so that you can email it to someone
else someone with an android phone any way lets go to update code pull the latest now
one little problem here is if github hasn`t fully updated so it’s going to rebuild it
whether github is fully updated or not will just have to test it out normally i wait two
or three minutes just double check that github fully updated anyway as I said umm you sometimes
have to click on this word to get to this area you can always do that scan code and
what we are going to do is as soon as that android file is going good were are going
to show you on my phone your android app. that looks good let’s see if we can put
it on this phone once again were going to do this while I am waiting there its starting
the downloads pull my screen down download looks like its complete there pretty small
apps for the android. Packager and it should be able to dump it right on top. And as I
said if this hasn`t changed its cause github hasnt updated yet. there’s my app bigger
letters says happy birthday mom there’s a link to google there’s buttons which is
what your supposed to use on apps so let’s just see if it goes to Google yes it does
its fully working app this one goes to my page which just says wow. I haven’t done
that bigger font there this is just an image this is a YouTube video now this image and
YouTube video are onli8ne images and YouTube videos they are not stored in the app that’s
a bit more advanced you got to kind of learn github and things called cloning and umm making
your own repository your local repository but let’s just see if this video. This is
about rocksetta how to learn music ridiculously easy. And that is it. Good luck.

Comments

  1. Post
    Author
  2. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *