I want to turn my Figma Prototype into a program

[KrisMessyhair]

Hi all,

I've been a lurker in the deep shadows of LiveCode for too long. Former Kickstarter here, unfortunately I never got around to doing anything with it. I struggle staying on task with tutorials, often as they don't directly apply to the things I wish to do.

Recently I started taking a Figma Class to learn UI design. For my class I designed a pretty simple looking App to help schedule meetings with perspective clients.


I was wondering if someone would be so kind as to look at my prototype and give me a roadmap of sorts on how to handle various features I wish to have in the program. I would like to learn it myself and usually do well when I have an idea where to look. So far the best Ive done is add the main image from the design to a stack, but started pulling my hair out over not being able to find the font I used available in LC to recreate the buttons.

I figured I might as well see if someone would take pity on me and tell me what tutorials I should look at to try and get this off the ground. I understand this might be an annoying request, and that people often disappear from forums after asking these sorts of questions. Let me know what you need from me as far as commitment and I am happy to show I am worth the trouble.

All the best,

Kris

( I know see that it will not let me link to the prototype, so I guess if you are interested let me know and I can DM you?)

[KrisMessyhair]

Additionally, I am using the last version of Community. Ideally I would like to apps for mobile platforms with LC but I want to have a good grasp on using it before I pay for iOS access. Thanks again.

Kris

[xAction]

The font you used is on the same computer as your prototype?
If you don't have access to that computer and don't know the name of the font, post a screenshot to reddit.

Don't get hung up on stuff like fonts, that can be a whole day of searching for the right one. When you find the ones you like though, keep note of them, they are so easy to forget. Like meeting a 100 interesting people at a party in under an hour.

WRITE down a list of the things your app does and that will give you the plan for what you need to get done first. Fussing with the look and feel can come during/after many iterations of code.

You can type up your list here too, but ideally write the list with your hand to give your brain a muscle memory to reinforce while you sleep. Then you'll have new ideas during the day, or come to understand new information quicker.

For sure you are going to master arrays, work on a 'tutorial' stack that sorta kind does what want to do so you can make and break things easily and then open this stack later for reference if you need it.

Reading /Writing files on mobile is going to be of core concern

reading /writing files in general will help you debug and see what your data is doing as a whole.

Custom properties to store data and defaults will be useful.

Give yourself at least an hour or two a day :30 minutes reading, 30 minutes trying, 1 hour working on your actual project.

You'll be able to post links and stuff to the forums after some <secret number> of posts. or something.

[KrisMessyhair]

Hey xAction, thanks for looking at my post. I will check out all your links for sure, and I do have the time to devote to learning LC. Just struggling as a lot of the tutorials I've looked at are outdated. App Academy (one of the kickstarter rewards I got so long ago) mentions things that seem to not exist in the current version...

I do have a good grasp what I want my app to do though. here are the steps I have planned out.

1. Main Screen with two buttons that connect to separate cards. "New Meeting" and "Scheduled"
2. "New Meeting" leads to a card with two more buttons connecting to other cards. "New Client" and "Existing"
3."New Client" Card has text input fields for "name" "company" "phone #" and "email" It also has a "back" and "next" Button. all back buttons in this design go to the previous card.
4. "next" card has text input fields for "location" and 'Meeting topic" as well as a button for triggering a drop down graphical calendar for setting date, and time set with rolling numbers for hours and minutes, AM or PM, and setting the Time zone. There is a "back" and Next button that leads to the
5. "confirm info" page. all the data from the fields is reordered for maximum readability. as " on "date" at "time" meet "name" from "company" at "location" to discuss "Meeting topic" a button "add to calendar" generates a pop up confirming sending it to an external calendar (ideally google calendar) and has a check box to send to client as well if checked. The pop up contains two buttons, "confirm" and "cancel". Confirm should confirm your choices and send an invite and add to calendar. "cancel" cancels the "add to calendar pop up. The confirm info page contains two final buttons, "Main page" and the back button.

I have a lot of other things I want to add after I get a grasp of this, but this is the main gist of what I want to accomplish. I am so new I can hello world but can't figure out how to create separate cards and link them. Thanks for any additional help I can get to make this happen. As for the Font and styling of it, I am not worried about it. The Figma file is a good starting point on how to make the flow of the app work, and allows me to export buttons I can use in the file. There are animated features I would love to add later if possible, but those can wait until after I get the basic structure sussed out.

Kris

[richmond62]

I was wondering if someone would be so kind as to look at my prototype

How about a handful of screenshots to get started with?

[richmond62]

I am so new I can hello world but can't figure out how to create separate cards and link them.

Should be "there" sometime this week:

viewtopic.php?f=107&t=36395&start=15

[xAction]

Buttons (etc) that exist on many cards get grouped on the first card and their background Behavior is set to true, so they appear on the new card when you make them, so make that group before making your cards, you can always hide the whole gorup on cards you don't want them to be visible on.

On your card script you want a simple handler OpenCard

Code: Select all

on OpenCard
UpdateFromCard (the currentCard of this stack)
end OpenCard

That will send the card name to the handler as soon as it opens up.
UpdateFromCard is going to be a handler in your stack script

in your stack script make local variables at the top

Code: Select all

local curCard="Main"  --//current card, default to the main title --//'currentCard' is a property so don't call it that
local backCard="Main"  --//previous card, default to main title
local nextCard  --// no default 

Then the handler UpdateFromCard looks soemthing like this

Code: Select all

on UpdateFromCard whatCard
put curCard into backCard    --//put the previous card (before we update) into last card variable
put whatCard into curCard  --//update the current card variable to the one we just opened

switch whatCard
case "New Meeting"
put "MeetingDetails" into nextCard
break

case "MeetingDetails"
put "Confirmation" into nextCard
break

case "Schedule"
put "Main" into nextCard
break
end switch
end UpdateFromCard

Then have a handler, maybe called UpdateFromNavigator
Your buttons will call this handler simply with

Code: Select all

on MouseUp
UpdateFromNavigator (the short name of me)
end MouseUp

Assuming their names are just "Back" and "Next"

In the stack script

Code: Select all

on UpdateFromNavigator buttonName
put "Main,Confirmation" into ignoreCards
 if the currentCard of this stack is not among the items of ignoreCards  then CaptureCardData
 
switch buttonName
case "Back"
go card backCard
break

case "Next"
go card nextCard
break

end switch
end UpdateFromNavigator 

You might want to call a handler in there before leaving the card like for instance CaptureCardData
This would probably be in stack script and work on the current card no matter what card.

Code: Select all

on CaptureCardData
put "name, address, phone, email,company, date, time" into tFields
repeat for each item fName in tFields
put line 1 to -1 of field fName  into tData
ManageData (the currentCard of this stack), fName  ,tData
end repeat
--// so on and so forth with other objects if neccesary
end CaptureCardData

Then you have Managedata

Code: Select all

on ManageData cardName,objectName,tData

replace space with empty in cardName --// "New Meeting" becomes "NewMeeting

put cardName & "Array" into cPropname   --// NewMeetingArray
-- //accesss a custom property of the stack (or card or a button whatever)
put the cPropname of stack (the mainStack of this stack) into tempArray

--//that custom property is like an excell spreadsheet, an array of data
--// we acces all the records in there called 'address' or 'name' for instance
put the tempArray[tObjectName] into objectArray

--// then we get all the addresses or names whatever into a list so we can count them
put the keys of objectArray into allKeys

--// might need a local variable for 'currentRequest' so we can do
if currentRequest is "new meeting" then
--//add a new record
put the number of lines of AllKeys+1 into N
put tData into objectArray[N]
else
--//we probably need another local variable at top of stack cript for 'editRecordNumber'
put tData into objectArray[editRecordNumber]
end if
--// then we put the whole element into it's container
put objectArray into tempArray[tObjectName]

--// then store the container in the stack,card, or whatever object
set the cPropname of stack (the mainStack of this stack) to tempArray
end ManageData

All that will give a custom key array you can inspect on your stack , it'll look something like this

I had to fake it for illustrative purposes

Don't manipulate it on your stack inspector though, that's tedious let your code do the work.
All the fields on a card that are captured at one time ideally are stored with the same number so if we do this to populate fields with data we have:

Code: Select all

on DisplayRecord N
put the NewMeetingArray of stack (the mainStack of this stack) into tempArray
put "name, address, phone, email,company, date, time" into tFields
repeat for each item F in tFields
put cr & tempArray[F] into subArray
put  subArry[N] intof field F 
end repeat
end DisplayRecord 

We should get all the appropriate data that was captured into record N popped right into the field we need it.

we can also simplify things and dump all the fields into a single array like:

Code: Select all

put "name, address, phone, email,company, date, time" into tFields
repeat for each item F in tFields
put cr&  line 1 to -1 of field F after myData
end repeat
put the NewMeetingArray of stack (the mainStack of this stack) into tempArray
put the keys of tempArray into keyList
put the number of lines of keyList into N
put myData into tempArray[N+1]
set the NewMeetingArray of stack (the mainStack of this stack) to tempArray

But then you have to pull all the names and phone numbers and addresses at once and sift through them looking for one guy named "Will Yameetme" who we could find with other method like so

Code: Select all

Function FindContact thePerson
put the NewMeetingArray of stack (the mainStack of this stack) into tempArray
put tempArray["name"] into tNamesArray
put the keys of tNamesArray  into allKeys  --// just a big list of numbers
repeat for each line N in AllKeys
if tNamesArray[N} is thePerson then  return N   --// return the record number
end repeat
end FindContact 

Then we run DisplayRecord N and get all the data about Will Yameetme

Hope that helps.

[richmond62]

Well, there you are: either xAction's "Get Down, Dirty and Heavy" method (which, if you
can hack it is better than the baby way) or my "Slow Boat to China."

I assume you are older than 14 so my method really will be glacial.

[KrisMessyhair]

Hello, Thanks to you both for your time! I am likely to use both of your suggestions as my understanding on the scripts provided is still a bit hazy. I am 41, but have taught children for years so I won't feel talked down to reading your lesson plans. Programming has always been my Achilles Heel, so I will take all the help I can get. I will post up some screen shots of the layout I have planned. Doing it in sections since the attachment feature won't let me post more than 3 at a time and posts them in reverse numeric order. (what is with that?)

[KrisMessyhair]

second section

[KrisMessyhair]

Final screens. this time the spam blocker has decided I cannot post 3 posts in a row... It would of seriously been much easier to post my link to the prototype so you could click through yourselves but I guess I understand what the forum is trying to protect against. I do hope I reach that post count soon though...

Kris

[richmond62]

Models of interface design: really easy to see what you are getting at:

An immage is worth a thousand words.

[KrisMessyhair]

Models of interface design: really easy to see what you are getting at:

An immage is worth a thousand words.

Right? The UI is much easier when you can see it all laid out. Getting started on the backend stuff now. Will report back shortly when I had a chance to go through all the materials you and xAction provided me.

Kris

[richmond62]

Mind you it might have been better if I had managed to spell 'image' correctly.

[KrisMessyhair]

End of Day One of Programming in LiveCode--

I got a lot done! A card was created for each page shown above. All navigation buttons are coded and lead to the expected page. A Sub stack was used to load all my imported buttons from the prototype. I even added some visual effects on a few card transitions! I learned a lot, but mostly I worked past my insecurities with programming. This had every thing to do with your help, Richmond62 and xAction. Thank you so much!

Next on the agenda--

On "Client_info_card" the text fields for Name, Company, Phone Number, and Email are blank. They should each read their function until the user adds new info to the field. Pressing the Next button should save the info from the fields into a hidden table field before navigating to "Meeting_info_card"

On "Meeting_info_card" Text Fields for Date, Time, Location, and Meeting topic are blank. They should each read their function until the user adds new info to the field. Date and time will need auto formatting of some sort so the computer can understand info when sent to the calendar later. Next button stores this info from the fields to the hidden table field before navigating to "Verify_info"

On "Verify_info" stored info on the hidden table field is rearranged to to be slightly more human readable and displayed where the label box is placed. The "Add_to_caledar_popup_button" should open a pop up with the message "Sending to your Google calendar. Send invite to Client?" with a check box to confirm sending to client. The Confirm Button should send calendar invites to your google calendar and client if selected, pop up info confirms completion by changing message to read "sent!" and a main menu button replaces the confirm button. Pressing the button closes the pop up and returns the user to the "Main_page"

--
I had a few hiccups along the way, but most were pretty quickly solved. this next phase listed above with definitely be more difficult, luckily it seems to be along the lines of what xAction laid out for me above so hope not to struggle too much.

A few questions that came up as I worked--

Are there alignment tools? aligning objects on the page would be much easier if they had layout guides, telling spacing between elements or the card borders. aligning things with other objects like graphic programs do would be a great help keeping designs neat and tidy.

Is there a plugin to list all created elements in a stack? I would love to not have to click around to get these long names again, or try to remember each image name and id when I am trying to set up a code. It would also be helpful to have an on screen way to page through the cards, but I guess the hotkeys work and I can program my keyboard to make that slightly quicker.

Is it possible to see more than one card at a time? It would help when arranging the buttons and other elements to look cohesive. I dabble a lot in animation, so I would love an "onionskin" option that make the previous card translucent so you can see a ghosted image over your current card. Anyone else think that would be useful?

Is there an in-program Notepad or to do list? Would be great to keep that info all in one place with the stack.

Finally, here is a glimpse of what I did so far. I couldn't stand posting them all one at a time again so I arranged the pics together and took another screen shot. What do you think? Not bad for my first day! Thanks again!


Kris