How to Create an App with no coding experience?

A little over a year ago, and before I had discovered LiveCode, I asked my best friend Google this very question …How to create an app?

I found myself having lots of ideas both good and bad, and a serious desire to launch my own app, but how on earth could I achieve it?

I have a background in web development, design, online brand management and digital marketing, I am certainly not an app developer.

Most of the results I found seemed either far too complicated or too limiting as to what I could actually create. I guess it’s my job to make sure when others are searching on this very topic that they discover LiveCode! Who knows, they may stumble across this very blog post cleverly titled “How to create an app?”

I decided at the time of my initial search that I would not be able to create an app and I needed help to bring my ideas to life. I approached a freelance website, paid very very little money and I got an OK result – but not surprisingly it wasn’t a great result. I uploaded the bad app to the app store so I could share with friends but I couldn’t bring myself to market it to the world, as it wasn’t completed to a standard I could be proud of.

How different would my experience have been if I had discovered LiveCode and I was given the confidence that even I could create this app and I could take charge of my own project. Well let’s see…

The Challenge

Recreate this in LiveCode

https://www.youtube.com/watch?v=7Yj71N2uf5Y

Your Facebook posting app when you are down the pub and perhaps had a drink or two. Many of us may have posted something on Facebook we have regretted. Beer bro is not designed to stop you posting when drunk but just to have your back, be your wing man, stop you from getting the evil eyes the next morning as you walk into the office or even just down to breakfast.

I have introduced Drunk Group, giving you the choice of who gets to see your drunken Facebook posts; don’t want the boss to find out? Simply remove them from your Drunk Group using Beer Bro and they will never see your posts from the pub again.

Turn on Beer Bro security and you need to answer the questions correctly or you’re not getting in. We don’t want to ban all drunken Facebook posts – but if you want that little bit of extra security to avoid the end of the night drunken posts then turn on Beer Bro Security. This security feature will ask you 3 random questions before allowing you to post – What is the capital of France? What’s 32 – 17? You can work it out when sober but it’s not so easy when you have spent the night in the pub. Answer all 3 questions and Beer Bro will allow you to update your Facebook. It’s optional – you can switch it off or on.

Where’s the next pub? So picture the scene, you’re in the pub your posting to Facebook through Beer Bro and you’re ready to move on for the night, no need for a separate app – just use the built in pub finder. See all the pubs close to you, find out where they are and move on to the next pub.

Choose to check in to the pub or maybe even the local gym when of course you are actually still in the pub.

Give your Facebook friends the heads up that some drunken posts may be on their way with the safety message feature. Choose from one of the built in messages or add your own and this will follow any status update when posted through Beer Bro.

Use the special Beer Bro camera feature which puts the Beer Bro stamp on your drunken photos, but don’t worry only the friends ticked on your Beer Bro Drunk Group will see the photos.

Where do I start?

Working in LiveCode HQ it’s very tempting to corner members of the dev team and say please please please help me. I decided not to disturb the very talented and busy development team and tackle this one myself.

I headed over to LiveCode.com and downloaded the latest version of LiveCode Community which came with a free app template to give me an appreciated head start.

I now have LiveCode open on my machine and I have opened up the free template which came with a top header bar and a bottom nav bar, styled not too far away from my own Beer Bro app design. Happy Days.

At this stage I have tons of questions, most of them related to just laying my app out, never mind making the thing actually work. How do I make it the same blue as my designs? How do I add multiple pages? How do I add a top menu bar as well as the bottom nav bar? How do I add my logo? How do I make the menu actually open the correct page once clicked?

How do I make it Blue?

I generally start my learning process by just getting stuck in. If LiveCode is easier and faster then prove it to me. I knew that this template had built in colour schemes, I knew I was on a “card”, so i found my way to the Card Script by going to Object > Card Script.

Here I was presented with some code which I instantly felt like I understood. Any serious code I have looked at in the past, well I just didn’t get it.

Here is what I found in the Card Script

on openCard
lock screen
set the theme of this stack to "green"
set the navigationSelectedItem of this stack to the cNavID of me
unlock screen
end openCard

Ok well this seems obvious, lets just change “green” to “blue”

on openCard
lock screen
set the theme of this stack to "blue"
set the navigationSelectedItem of this stack to the cNavID of me
unlock screen
end openCard

Right enough it changed my template colour scheme to blue, HOWEVER it was not the shade of blue I was looking for.

There must be something somewhere that decides what shade of blue or green it shows and it must be something to do with wherever these “themes” are setup. A theme sounds like something that should cover the entire template, not just the individual card. I noticed that below Card Script there was something called Stack Script. It was here I found the theme options were set and I was able to quickly identify what I had to edit.

setprop theme pTheme
set the cTheme of me to pTheme
switch tolower(pTheme)
case "red"
set the primaryColor of me to "220,46,46"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "orange"
set the primaryColor of me to "207,122,57"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "yellow"
set the primaryColor of me to "207,198,54"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "green"
set the primaryColor of me to "175,207,54"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "blue"
set the primaryColor of me to "3,126,198"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "purple"
set the primaryColor of me to "126,54,207"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
case "brown"
set the primaryColor of me to "119,108,96"
set the secondaryColor of me to "251,249,244"
set the textcolor of me to "0,0,0"
break
end switch
end theme

I can quite easily make out that this is setting the colour scheme for the named themes. Quite simply I change the RGB code under the “blue” theme to suit my colour scheme and then I hit Apply. Job done.

How do I add multiple pages?

As you can see from the template above there is a plus button which of course I clicked. This automatically created a new card and a new bottom nav item with my choice of icons. Using this very simple technique I added a settings page, a camera page and a share page.

I have the requirement to add more pages/cards that I will eventually want to access via a top menu nav bar. I find this easily by going to Object > New Card. At this point I am assuming this is creating a structure, each card has its own unique identifier which I can reference somewhere later. I create all the cards I need and move on.

How do I add a top menu bar?

This is an area I thought was going to cause me real problems. Looking at my designs I had a top menu which was directly underneath the blue header bar. Where do I start? I thought about heading over to tutorials at this point but decided to mess around a bit further, see how far I can get.

Over on the left hand side of the IDE there is a tools palette which seems to have lots of useful objects, surely one of them will suffice as my menu? I drag a few things onto the page and then it hits me. My top Nav is simply a shape that has text buttons on it that links to different cards.

So I drag on a rectangle shape and drag it to the position I need. By double clicking on the rectangle it brings up basic properties where I can mess around with the styling. By going into Colors & Patterns I gave it no border and filled it with the grey colour I required.

Next I dragged out some buttons on top of my rectangle and positioned them as I wanted. Double clicked on them, removed most of the styling, labelled them appropriately and felt I was making GREAT progress.

This is really starting to look like an app. OK I know I am so far away from having any actual working features, but it’s Day 1 and I almost have something that looks like my app. Am I starting to answer my own question of How to create an app? Get LiveCode, that’s how!

How do I add my logo?

LiveCode menu structure feels too familiar to me, even as a non-coder, it just seems obvious where to go.

I have a need to import or place an image onto my app and for me importing an image always comes from the File menu. Maybe it’s from all my years using Photoshop.

File > import as control > image

Select my logo and place it where I want on my card.

Success? Well I thought so until I decided to navigate to my camera page and my new top nav and logo disappeared. What Happened? Don’t tell me I have to setup the same menu and logo on every single page individually?

At this point I learnt about groups.

In LiveCode when creating new objects on a card you can create groups and place groups on different cards that you have already created. And when I create a new card the groups seem to be there by default.

I discovered this information by searching LiveCode Tutorials – here is the tutorial that helped me out.

http://lessons.runrev.com/m/4071/l/13031-how-do-i-use-the-same-controls-on-multiple-cards

How do I make the menu actually open the correct page once clicked?

So by this point I know that my menu buttons are objects and I have assumed that all the cards I have created have a unique identifier. I now need to find out what that unique identifier is and how to edit the object to go to that identifier once clicked.

Back to LiveCode Tutorials. I found this

http://lessons.runrev.com/s/3527/m/4603/l/44038-navigating-around-a-stack

I discovered from here that I could identify a card ID using the application browser which can be found by going to tools>application browser.

Cards have numbers and they also have unique ID numbers. I decided to take what seemed the simpler route and just use the card number.

I noted all the card numbers and what pages they were associated with and accessed the object script for each individual object. I did this by clicking on the object then going to object > object script.

I pasted in this code as per the tutorial I found (changing the id depending on which page it should link to)

on mouseUp
 go to card 6
end mouseUp

It worked!

I can create an app

A little over a year ago I set out with a question of How to create an app? In one day using LiveCode I am a believer that I can and will create an app using LiveCode.

I have put something together in just one day that looks like my app, it lets me browse through all the pages of my app, it’s written in a real language that once completed I can deploy to multiple platforms. LiveCode – I am in.

OK I bought into LiveCode a long time ago, I was and still am extremely impressed with this product, where it is right now and where it’s going. I am very excited to be part of the journey as a LiveCode employee but now as a user, I am excited to start downloading the new releases, getting started on adding some features to my app like the camera or the Facebook integration. I’ll let you all know how I get on.

I have lots of development yet to tackle but already I am thinking of the day I can take the app I have built in LiveCode and upload it to the iOS store and the Android store and tell the world about it. Maybe I can eventually find a use for these promotional bottle openers that are gathering dust on my desk

And I don’t even drink…