Journey to the iOS

Hello Hashnoders!

So I have created a simple language game for learning french that just tallies your score for right and wrong answers... it is a very simple simple game.

I have the operational HTML, CSS, and JavaScript all working in one file....

My question is:

-What is the best way to port this into the iOS interface so that my child can use it on his iPad to help him learn French ?

-Is there a simple way to format it so that I can make it appear in an app box like everything else on the iPad?

-Do I need to publish it through the app store to get it on to the iPad?

-Do I need to write this program in a totally different language?

Thank you everyone!!!

// LONG LIVE HASHODE

edit on (12/9):

Screen Shot 2018-12-09 at 18.28.51.png

So I felt like I was close to uploading onto my iPad but this error stopped me .... just curious if anyone knows what this means or maybe it is just too obscure...

Hi there, your project seems really fun.

You said all is working in HTML and JS, so why not use iOS safari to access where your game is hosted?

Unless you want to learn new technologies, it's the easiest route, IMHO.

There is a quick and easy way to get your web-app onto your iPad, without using the store or really needing anything big or special. If you can open the app in a browser on the IPad, that's good enough. Make sure it looks good though 😁

Then, what you want to do is add a Progressive Web App manifest. It's a structured text file, which tells the browser, that the current website is, in fact, a web app, which offers some app-like behavior and can run just like an app on a mobile device. The browser will then offer you to add the web app to the home screen, from which you can start it and the web app will look like a native app, except it is your HTML being rendered into a webview.

How to do that?

The long version of that is written in this article, here's the tl;dr:

1. Make sure the site is served via HTTPS (just host it on Zeit, for free)

2. Add a service worker with a fetch handler (though I found out that's not really necessary for the add-to-home-screen option to show up in the browser menu)

// In your main JS code

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// sw.js

self.addEventListener('fetch', event => event.respondWith(fetch(event.request)));

3. Create a manifest

<link rel="manifest" href="/manifest.json">

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

4. You can explicitely add a prompt, if you want to

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();

  e.prompt();
});

I never tried step 4 myself, though, so if you do that, tell me of your experience 😁

That is honesty the sweetest thing I have ever seen or heard and I would be more than happy to help you.

What is the best way to port this into the iOS interface so that my child can use it on his iPad to help him learn French?

You have two choices.

React Native
Native iOS with Swift
Web App with Mobile Support

In case you want to learn some iOS development and hone your skills in that field, I would suggest you pick the second route: developing it natively in Swift. Since this is a pretty simple application, you can learn a lot while making it and it won't be that hard to make. (With a good UI and some animations, of course!) But, this might take a little bit longer considering you'd have to learn Swift and the Xcode IDE. If you don't have the time, you can take the second route: React Native.

You can follow some great tutorials on YouTube and make this app in max 1 day. Since React itself uses HTML and CSS, creating and styling the content won't be a problem at all.

I will get into the third option and why you'd choose that next.

Is there a simple way to format it so that I can make it appear in an app box like everything else on the iPad?

This is where it gets tricky.

Applications come in two flavors: 1) app-store deployed; and 2) ad-hoc. App Store deployed applications are those which are, well, available on the app store. Ad-Hoc applications are often utilities which are made for some sort of internal use. The only difference is that they don't go through the entire App Store Review process (which is a pain, trust me).

Regardless of the type of deployment, you will need something called a iOS Developer membership for which Apple charges $99/year. This gives you a code signing certificate with which you can cryptographically sign your shiny iOS app and send it to App Store for review or install it on someone's phone. It's Apple's way of saying - "Don't worry iOS Gatekeeper, this app comes from a trusted source." However, code signing is still one of the biggest pains for iOS developers and then the next ring of (infernal, I might add) hell is the app store review process. Code signing is a pain because it's not as easy as it sounds. You install your certificate, you create a provisioning profile, you create a certificate chain, you install the certificate chain, you import it and you sign the app. For app store, the reviewers give you really vague comments about why you failed the review.

Then, you have the problem of creating application icons. You need to create, I guess, 11 sizes (which if pretty easy if you use an online tool), but packaging it, etc. can be a little bit of a pain if you are just starting out.

Do I need to publish it through the app store to get it on to the iPad?

Now, we get to some good news. If you only want your kid to use the application, you can directly install it on his/her phone (without buying the expensive membership). P.S.: This was introduced pretty recently, so woohoo!

However, if you want to distribute it to someone else, then you'd have to give it to the app store or do a ad-hoc deployment. For ad-hoc, you sign the application like before, but then you can directly install this signed package on any phone (there are some conditions about this as well.)

Do I need to write this program in a totally different language?

If you choose the Swift route, yes and no. Yes, because the container of your game will be native Swift; no, because there are some iOS game engines which support Swift + JS.

However, if you use React Native then no, you don't need to. You might have to add some extra code for it to work, but you won't have to rewrite the application.

Conclusion Now, I didn't mention the last path you can choose: Web App with Mobile Support. You just need to add specific CSS stylings and modify your JavaScript code just a bit for this application to work perfectly on your mobile phone (like YouTube for example).

I hope this made everything clear. If you have any more questions, feel free to comment below! And, if you do decide to pick any of the routes I have mentioned, you have the entire Hashnode community to help you and I will be there for this project personally.

Alright, thank you for the awesome response!

So I do like the thought of working in swift ( I actually just downloaded Xcode yesterday ) and played around with Xcode... when I started doing the research I laughed pretty hard since it just SCREAMS " HEY I am made by apple, I am the friendly way to code " LOL. However given the future demand for programmers I feel like it is smart to design a system that goes about coding in a new way with different paths for interaction.

The name of the game for me is investment and designing applications is a form of that. I realize I might need to do some time in an office ( a thought that scares me to death ) but at the end of the day I am trying to create something that I believe in and something that also sells. Applications that help educate seem like the best of both worlds. I see Duolingo, Khanacademy, CodeSignal, etc.. and everything in me lights up. What I am making now is really just my first go at styling and creating something functional, which I will test out with my son. He is currently just having so much fun learning numbers on the iPad and he is getting so much joy from it! Which is all the motivation that I need. At first I want to port my app to the iPad for personal use, but then ( given it runs well and he likes it ) I want to take it to the next level and try to publish it in the hopes of making sales, because... even though there are tons of apps...I look around and see what people are designing and think " WOW... there is SO much room here ".

I think I can capitalize on my sense of design since I have worked in photoshop for over 15 years now, my father was an artist and I was raised in the age of the gamer ( Shout out to Super Mario <3 ). What I notice about the app store is that when you search for something what do you get first? PICTURES... NOT a lot of text.... and like it or not people DO judge books by their covers and it is mind blowing how many people out there are publishing apps lacking those attractive assets!

Thank you for writing me :)

Now for the next round of questions...

So you said ( the good news ) was that I can install it on my sons iPad for personal use ? The big question for me here is with this method will it appear just like every other app he has ? And does that mean I can start playing with art designs for its application box ? -The key right now is making it easy to access.
Now just some personal questions. I do like apple ( even though they can be a bit cultish they still put out some great stuff and lets be honest ... the iPad dominates .. ) so it makes sense to learn a little bit of swift. Have you worked with swift? Have you worked on applications that have ended up in the app store? Do you use a mac for coding at all?
At the end you mentioned that React Native and Web app with mobile support are two routes that would give me the result I am looking for. Sorry if I seem hung up on this but it just seems super important to me, do both of these methods give me an app box that hangs out on my iPad just like every other one?

...HEY I am made by apple, I am the friendly way to code...

Just wait till you start using your own libraries. xD

I see Duolingo, Khanacademy, CodeSignal...

PRECISELY! The education sector is one with infinite growth and opportunities. I am currently working on a mobile app for education and testing it out with the students is super fun!

...I look around and see what people are designing and think...

This is good and bad. Good, because you have a lot of ideas you can experiment with. Bad, because what you think is new might already exist on the app store (this has happened to me numerous times). However, it's always good to create something better rather than something new.

...and like it or not people DO judge books by their covers...

I agree. It all comes down to the user interface. The core functionality can be absolutely horrible but as long as it looks good, people will download it.

Time to answer your questions:

So you said ( the good news ) was that I can...

Absolutely. When you connect his iPad, there are some steps required to set it up for deployment but that's pretty easy to do. If nothing, I am here to guide you. Do not worry. You can develop it and when you click run, you have the choice of running it in the simulator or an actual device. Now, do not confuse this with an ad-hoc deployment; this is just testing. For this, Xcode generates a self-signed certificate and you install that on iOS after which you can install the application. Ad-hoc, on the other hand, is generated by the one given to you when you signup for the developer program.

Have you worked with swift?

Yes, I have. I have been working on it for the last 2 years or so. Objective-C, the era before Swift, was the only language to make iOS and macOS applications and I started out in this field learning it. The language itself becomes a pain sometimes considering it is really different in the way it does something pretty basic.

Have you worked on applications that have ended up in the app store?

I am working on one currently. But before this, no. They were either applications for my own use (like a small IoT powered water motor, etc.) or they were under the ad-hoc route and were utilities for a company, and hence, for internal use.

Do you use a mac for coding at all?

ABSOLUTELY. Although, I much prefer Ubuntu for programming, but macOS has been my first love ever since I used it back in 2011. I hate, despise, resent, abhor Windows for anything apart from gaming. Every line of code I have written till now, has been on my trusty Macbook Pro.

At the end you mentioned that React Native...

Indeed. If by app box you mean the application icon on your home screen and all the goodies, yes. They are more or less the same. Now, there are some differences (like rendering, OpenGL support, etc.) but they shouldn't be a problem for you right now.

I would strongly suggest you choose the Swift route because once you learn that, you will be creating applications non-stop (and trust me, it's a tonne of fun!) After that, you can move on to React Native. The reason why I am saying that is because Swift teaches you the absolute basics of how the iOS and macOS work. Once you have a solid grasp on those, you can start with React Native to build even better looking applications and then add some Swift code and components if you think something is better done in the native environment.

I am not sure how to attach an image to this response window ....

weird...

so I will edit up top

I had a question for you

Thread

Journey to the iOS

// LONG LIVE HASHODE

Responses(3)

Recent threads

Search Hashnode

Journey to the iOS

// LONG LIVE HASHODE

Responses(3)

Recent threads