The App Maker - Part 2 - Transcript.pdf
- 1. The App Maker - Part 2 In this video we cover some of the additional forms in the app and how we’ll address them starting with the details form
- 2. Details Form © Codename One 2017 all rights reserved Restaurant Name Edit Background Tagline ! " rest@resturl.com e-mail - will receive purchases from the generated app https://www.myrestaurant.com/ Website URL The details form becomes far simpler once most of the data moves to the title area. The remaining details are mostly billing which has its own form and miscellaneous information such as email, url etc.
- 3. Billing Form © Codename One 2017 all rights reserved Edit Background ! " $ Currency Symbol 8 Delivery Range (KM) 15 Minimum Order 10 Delivery Surcharge Learn About Integrating Payments # Restaurant Name Tagline The billing form is important not just because we wanted the details to feel less cluttered but also conceptually. Billing usually needs to stand on its own as people seek it out and expect help specifically for that feature. It’s another relatively simple form that could probably be created with instant UI.
- 4. App Form © Codename One 2017 all rights reserved Edit Background ! " com.myrestaurant Package Name Learn More # MyRestApp App Name Build App $ Restaurant Name Tagline The build form is pretty much a copy and paste with slightly different buttons, I think consistency is a virtue in this case.
- 5. Color/Font Settings © Codename One 2017 all rights reserved Set Style % & ' Here’s where things get interesting. The details form allows us to navigate to a styling form. This styling form allows us to click on an area within the UI of the restaurant app so we can customize that area.
- 6. Color/Font Settings © Codename One 2017 all rights reserved Set Style % & ' Edit Foreground Background Font When a user touches the restaurant UI below he should see a popup dialog with the set of options for customization. Based on the option picked a different UI will be shown.
- 7. Set Color © Codename One 2017 all rights reserved Set Color % & ' ebeaec Web Color 235 Red 234 Green 236 Blue If foreground or background is selected we’ll open a color picker that allows us to either type in an HTML color or fiddle with intensities to set the right foreground or background color.
- 8. Set Font © Codename One 2017 all rights reserved Set Font % & ' 3 Size (millimeters) ( ) Thin The quick brown fox jumped over the lazy dog The font UI should have a very limited set of options mostly around basic styling. Unfortunately including TTF files is problematic as we can’t open such a file dynamically on all OS’s.
- 9. Set Image (icon, background, Dish) © Codename One 2017 all rights reserved Set Dish Image % & * + When image background or icon is customized we should get a UI that allows us to crop the icon to the right size appropriately so dish image sizes will always appear correctly on the device and when the final app is built. This is important, images that are too large might also burden the server so we limit image size (in kilobytes) on the server. When we adapt the image size locally we can pretty much guarantee it’s not a huge image that will cross a problematic threshold.
- 10. Address/Location Settings © Codename One 2017 all rights reserved Address/Location % & ' My Restaurant, 1st st. my city my state Navigation Address - Used to open the navigation app My Restaurant Name 1st street Line 1 Line 2 My City City 180 Latitude 180 Longitude , - The details form will contain a lot of details and including all the fields required for the restaurant address would be overwhelming so it might make sense to separate it to a different form that includes all of that. One important detail we need is the geographic location of the restaurant so we can launch accurate navigation to the location. The buttons in this UI allow us to request location from the GPS instead of typing in latitude/longitude coordinates.
- 11. About Us… © Codename One 2017 all rights reserved About Us % & ' https://www.myrest.com/about-us.html URL HTML About Page URL Preview The about details form should allow setting the HTML for the about form. In the original design I wanted both the ability to set a URL for an about page and the ability to embed HTML but eventually I settled on setting the URL only.
- 12. Skipped ✦Export/Import ✦Result delivery process ✦User Support & help forms ✦About/privacy policy/terms form ✦Taxation & other complexities ✦Deeper customizations © Codename One 2017 all rights reserved These are features that should probably be a part of the app in the future. To keep the app simple I decided to focus on the core and remove as much of the things that aren’t essential. Removing features is probably one of the most important things you can do when designing an app.
- 13. Implementation Plan ✦ It’s crucial to have a plan even when working alone - otherwise we over-design & procrastinate ✦ Depth first - implement partial UI then do the server so we can have a fully working app within days ✦ Allows hitting conceptual issues sooner while they are still easily fixable © Codename One 2017 all rights reserved A plan can be something you write down or have in your head but without one you are constantly putting out fires and you never get anywhere. An organized plan with process prevents you from wavering back and forth and keeps you dealing with the priorities. I decided on a depth first implementation where we will get a specific set of forms working first and then slowly add features. Breadth first is also a good direction but I prefer depth first as it allows me to validate the whole process from end to end relatively early and I think that’s crucial. This is especially important in this relatively complex app where we might run into conceptual issues that will require re-evaluation of some early designs and plans.
- 14. Thank You Thanks for watching. Next we’ll start implementing the core UI elements