Jump to content
Sign in to follow this  
jarto

Creating a mobile app for Android and iOS

Recommended Posts

This topic will go through all the steps that it takes to make a real mobile application for Android and iOS with Smart Mobile Studio. This first post gives some background while later I'll go deeper into details with proper examples. I've done this before three years ago. At that point I had to do a few hacks to work around problems. My plan is to make this as easy as possible in SMS and to fix any bugs that may pop up.

To make proper applications for the Android and iOS app stores, we will be using Adobe's Phonegap. It's a service that can be used to turn a html5 application to a package that you can submit to the Android or iOS store. Phonegap's free plan will most likely be enough for you: Phonegap plans

You can also install Cordova, which Phonegap actuallty is, on your own computer. If someone has done it, please feel free to contribute. However, when I did develop my own app three years ago, Phonegap worked beautifully.

So, to get that Phonegap account, sign up to the free plan. Once you've logged in, you can choose between an open-source app or a private app. Phonegap lets you use existing Git repositorys, but I'll be using a zip -file.

Now, how do you do that zip file? As an example:

  • Start Smart Mobile Studio
  • Open the Tabs, Scrolling and Listbox -demo from Featured Demos
  • Build
  • Go to the www -folder in File explorer
  • Select all files inside the www-folder and zip them

 

zip.png

Share this post


Link to post
Share on other sites

After the build is done, you'll get this view. As you can see, the iOS build failed, but the Android and Windows phone were successful. iOS is a bit trickier as it requires proper keys to be created. I'll go through that process in detail in following posts.

At this point you can just click on that Android logo and download the apk-package. If you upload it to your Android phone, you can then just go to File Manager and install it.

Note, that the Android package is an unsigned package, so you need to change the developer options on your phone to let it install it. Many phones will tell you what to do right away. If not, just Google for instructions for your phone.

AfterBuild.png

Share this post


Link to post
Share on other sites

Thank you @IElite

It looks like Phonegap has improved a lot from what it was three years ago. The config.xml file is the one that controls everything. You specify there all the versions, plugins, icons, splash screens etc.

These days it looks like it's best to actually install Phonegap on your own computer. It has new features, like Phonegap Desktop, which can create your PhoneGap project with all the necessary plugins and config files.

Share this post


Link to post
Share on other sites

Phonegap has a nice feature, which makes testing your Phonegap apps on your mobile devices really easy. First of all, install Phonegap and the Phonegap mobile app according to the instructions here: http://docs.phonegap.com/getting-started/

Then create a new project in Phonegap desktop and save it. I save mine in c:\pgtest and gave it the name "PhonegapTest"

image.png

Then I created a new project in Smart Mobile Studio and saved it into another folder under c:\pgtest. This PhonegapTest-Smart will contain all the source code etc. The PhonegapTest -folder contains the original project that Phonegap made with all icons, plugins, config files etc.

image.png

Next, change Smart Mobile Studio to create its www -folder inside the Phonegap project's folder:

image.png

Now you can continue programming normally in SMS, testing in the embedded chrome etc. When you want to run it in Phonegap, just click on that ">" button on Phonegap Desktop.

image.png

Start the Phonegap mobile app, change the server address to your computer's ip-address (port 3000) and click Connect. Your compiled html5 app will show up nicely. Make sure that your mobile device and your Windows computer are in the same local network and that the Windows firewall does not block the port 3000.

Share this post


Link to post
Share on other sites
40 minutes ago, jarto said:

Can you guys elaborate? What would you want to see? Sqlite?

Sure...webSQL correct? Which only works in Chrome and Safari correct? I dont think SMS has support for IndexDB yet, right?

 

 

 

Share this post


Link to post
Share on other sites

If you want to use sql to store data inside your application, SqLite is the way to go.

Add System.SqLite to the uses clause and have a peek at these two blog posts:

https://jonlennartaasenden.wordpress.com/2015/03/28/smart-mobile-studio-and-the-sqlite-engine/

https://jonlennartaasenden.wordpress.com/2015/03/29/sqlite-smart-mobile-studio-true/

I just tested and it worked fine with the current Alpha. @lennartcan correct me if I'm wrong, but I think this works in any browser and Phonegap as the SqLite was ported from C to Javascript.

Share this post


Link to post
Share on other sites

That Windows version of PhoneGap wprks pretty good, It is quicker than the online version (once Im signed in) - https://build.phonegap.com/apps

1.) Zip my www folder up

2.) Upload zip file to build.phonegap

3.) Download the created package file (APK)

4.) Drop it on my phones download folder

5.) Install package

6.) Run app

Share this post


Link to post
Share on other sites

There were some serious problems in Smart Mobile Studio's Phonegap support. An update is available now, that actually lets us use Phonegap. Before this, it actually never got initialized :(

Once you have updated and set up the test environment to use Phonegap Client and the Phonegap mobile test app, add a Memo to a form, PhoneGapApi to the uses clause and try this:

procedure TForm1.InitializeForm;
begin
  inherited;
  PhoneGap.OnReady(procedure
    begin
      W3Memo1.Text:='';
      W3Memo1.Add('uuid: '+PhoneGap.Device.uuid + #13#10);
      W3Memo1.Add('ver: '+PhoneGap.Device.version + #13#10);
      W3Memo1.Add('model: '+PhoneGap.Device.model + #13#10);
      W3Memo1.Add('manufacturer: '+PhoneGap.Device.manufacturer + #13#10);
      W3Memo1.Add('platform: '+PhoneGap.Device.platform + #13#10);
      W3Memo1.Add('cordova: '+PhoneGap.Device.cordova + #13#10);
      W3Memo1.Add('serial: '+PhoneGap.Device.serial + #13#10);
    end);
end;

In the normal Smart Mobile Studio you won't see anything. But when you launch this in your phone it should tell you information about your phone.

Share this post


Link to post
Share on other sites

Phonegap has a lot of plugins, that let you access your phone's features. As a quick example, here's how you can make your phone purr:

Add to your Phonegap project's config.xml :

<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.6" />

Cool thing about Phonegap Desktop is, that that environment automatically downloads and installs the plugins. When you run the project in Phonegap Desktop, you'll notice how the new plugin appeared in the Plugins- folder.

In Smart Mobile Studio, after the Phonegap has been initialized:

PhoneGap.Notification.vibrate(1000);

When you deal with Phonegap, make sure that you wait for that signal, that it's been properly initialized. The example I posted above expects that the form will be initialized before Phonegap is ready. In general, you should wait for the initialization once, while your app is starting and make sure to always check before calling Phonegap:

if PhoneGap.Ready then PhoneGap.Notification.vibrate(1000);

 

Share this post


Link to post
Share on other sites

There's been a few days of silence on this topic. That's because I've been working on push notifications. Something I've noticed while making this:

  • PhoneGap desktop and Phonegap build differ from each other quite a lot. Same modules, that work on the PG desktop do not work on PG build and vice versa.
  • You need to use version 1.9.4 of the phonegap-plugin-push in Phonegap Build (At least, to make it work in Android)
  • Registering of push notifications only works on Phonegap Build
  • Getting that device information and vibrating the phone works out of box on Phonegap Desktop
  • In Phonegap Build you need to add these to the config.xml-file:
	<plugin name="cordova-plugin-device" spec="~1.1.7" />
	<plugin name="cordova-plugin-vibration" spec="~2.1.6" />

 

Share this post


Link to post
Share on other sites

Attached is a demo application, which supports Push Notifications. In the zip file there are two folders:

  • PhonegapTest: Contains all the necessary files, plugins and config.xml
  • PhonegapTest-Smart: Contains the source code for Smart Mobile Studio

To use this one, you need Smart Mobile Studio 2.9.9.90 or newer. You also need to have a Google Developer Account, where you create a project that uses Firebase Cloud Messaging (FCM). All the Smart Mobile Studio code also supports Google's previous GCM infrastructure as well as Apple's push notifications. However, this example is with Andrdoid.

Once you have set up everything, you need these from the Firebase Cloud Messaging settings under your project:

  • Server key: Used to send push notifications from a server app or a test web page
  • Sender ID: Used to register for push notifications from the mobile application

While I wrote this demo, push notifications did NOT work in Phonegap Desktop. So you need to create an account in Phonegap Build and use it. The account is free and it's very easy to add a new project by making a zip of the PhoneGapTest -folder and uploading the zip. When the build is ready, you can download an apk-file and install it in your phone.

When you start the app, it looks like this. If you get all that information about your device, Phonegap was initialized properly.

Screenshot_20171209-150737.png

To register with push notifications, you need to type in your own Android SenderID and click on "Init push notifications". If you have set up everything correctly, you should get the very long and cryptic Token to the debug memo. As it's close to impossible to type it from there, you can click on "Save token" to save it on your Android device. Here we use an excellent plugin ( https://github.com/ourcodeworld/cordova-ourcodeworld-filebrowser ), which lets us browse the Android filesystem and to select where to create the file:

Screenshot_20171209-141855.png

Once you have browsed to the right folder and typed a new name and clicked on the small disk icon, you should have a file that you can then download to your computer via an usb cable or attach to an e-mail.

Screenshot_20171209-141904.png

Then you have to just go to http://langtutorials.com/push-notification/online-fcm-push-test/ where you can send a push notification:

SendPush.png

You'll find all the necessary plugins and their versions in the config.xml -file inside the PhoneGapTest -folder.

While setting up the Google projects and FCM accounts might be a bit tricky, dealing with Push Notifications in Smart Mobile Studio is very easy:

  • Add PhoneGapApi to your uses-clause
  • Wait for PhoneGap to initiallize with PhoneGap.OnReady
  • Call PhoneGap.InitPushNotifications(YourSenderId, @PushInitialized, @PushReceived, @PushError) where
    • PushInitialized is a procedure which will be called once, when your app has registered
    • PushReceived will be called when a push notification is sent to your app
    • PushError will receive any errors

pgtest.zip

Share this post


Link to post
Share on other sites

This post is about bringing iOS to the mix. While you can create development apps in Android without much preparation, Apple is a lot more restrictive. You need an iOS Developer Account, which costs $99 per year. Without that, you can't even test or install any own apps on your own iOS devices. You'll also be told everywhere that you need a Mac computer with XCode, but you really don't need it. These instructions tell you how to work around it.

Shopping list:

  • iOS Developer Account ($99 per year)
  • iTunes installed on your Windows computer (Free)
  • OpenSSL to create the necessary keys (Free)
  • Your iPad or iPhone

First, create your private key and CSR according to these instructions: https://iandevlin.com/blog/2012/11/phonegap/building-an-ios-signing-key-for-phonegap-in-windows/

Then log on to https://developer.apple.com

Step 1:

  • Select App IDs from the left and click on the plus sign:

image.png

  • Give a name to your app: yourappname
  • Explicit App ID: com.yourdomain.yourappname
  • Select the App Services you want to use: Push Notifications
  • Continue

Step 2: Create developer certificates

  • Select Certificates from the left and click on the plus sign
  • Select iOS App Development
  • Continue
  • Upload the ios.csr -file that you created with OpenSSL
  • Continue
  • Download the ios_development.cer

Step 3: Add devices.

For this step you need to get the UDID code for your iOS device(s). You can find it by connecting your device to your computer and running iTunes and following these instructions: https://bjango.com/help/iphoneudid/

    • Select Devices/All from left and click on the plus sign
    • Give a name to your device
    • Type or copy-paste your UDID
    • Select Create device

    Step 4: Create provisioning profile

    • Select Provisioning Profiles/Development from left and click on the plus sign
    • Select the app id you created
    • Continue
    • Select your certificate
    • Continue
    • Select the iOS devices you want to install you app on
    • Continue
    • Give a name to the profile
    • Continue
    • Download the provisioning profile

    Step 5: Create ios_development.p12 with OpenSSL according to the instructions on Ian Devlin's blog (the link above)

    Step 6: Log in to Phonegap Build and submit your iOS certificate and Provisoning Profile

    • Click on the failed, red iOS build and select "add a key"
    • Give a meaningful name for the key
    • Submit your ios_Development.p12
    • Submit your Provisioning profile
    • Click on submit key

    Step 7: Unlock key

    • Click on the yellow lock
    • Type in your export password, that you created in OpenSSL

    Now Phonegap should have everything it needs to properly build an ipa package of your application. If you click on Rebuild or submit a new zip- file, the iOS version will also be built. It if is successful, you can download the ipa-package and install it on your iOS device in iTunes.

     

    Share this post


    Link to post
    Share on other sites

    After writing that, I noticed that newer versions of iTunes do not install ipa-packages any more. To get around that, there are some ways: https://codeburst.io/latest-itunes-12-7-removed-the-apps-option-how-to-install-ipa-on-the-device-3c7d4a2bc788

    I myself decided to use an older version of iTunes, that you can download from that page. That let me install the PhonegapTest.ipa, which I created in Phonegap build. And guess what?

    • The app was installed in my iPad
    • It started and initialized Phonegap properly
    • I clicked on "Init push notifications", which registered itself properly and returned a Token

    What did not work:

    • Saving the token as the plugin I had used for selecting the folder is strictly Android only

    However, there are many other plugins that you can use and there's no problem defining different plugins for Android and iOS in the config.xml -file.

    But basically, your Smart Mobile Studio app is now ready to receive push notifications on both Android and iOS.

     

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
    Sign in to follow this  

    ×