ONLC Learn

Recorded on April 21, 2026

The following reference materials were provided as context. Use them as guidance only -- always prefer the latest, most current information over any potentially outdated content in these files.--- Reference: 🧪 Lovable labs with Plan lab.pdf ---Page 0LAB 1 -- Build Your First ScreenModule 1: FoundationsObjectiveCreate your first screen in Lovable using a structured prompt, then refine it using iterativeimprovements.Step-by-Step Directions1. Open Lovable and Start a New Project• Go to the Lovable interface at https://lovable.dev/2. Write Your First PromptIn the prompt box, type a clear, structured instruction such as:“Create a welcome screen with a large title, a short subtitle, and a Get Started buttoncentered on the screen.”13. Review the Generated ScreenLook for:• Title placement• Button alignment• Spacing• Readability4. Refine the Screen Using Iterative PromptsTry prompts like:• “Increase spacing between the title and subtitle.”• “Make the button full width.”• “Check if everything is centered everything vertically.”• “Change the blue (or black or whatever color it is) lettering to yellow ( unless it’s alreadyyellow then pick a different color).”5. Add a Second Component“Add an image above the title and center it.”6. Change image size• “Make the hero image (it’s called a hero image) larger for more visual impact.”@ 2026 Copyright Bob Branchek Associates, LLC27. Click on Code8. Final ReviewCheck:• Alignment• Spacing• Visual clarity• Button behavior• Image@ 2026 Copyright Bob Branchek Associates, LLC3LAB 2 -- Build a Structured ScreenModule 2:ObjectiveEnter a series of prompts to design a complete, well-structured screen.Step-by-Step Directions1. Define the Screen You Want to Build2. Write a Prompt that includes the following specifications:“This is a profile screen.Use a centered card layout.Include name, email, and profile photo.Add an Edit Profile button that navigates to an edit screen.Use consistent spacing and center alignment.”3. Generate the Screen4. Inspect the OutputCheck:• Did Lovable follow each of your specifications.?• Are all elements present?• Is the layout correct?5. Refine the ScreenUse small, targeted prompts:• “Increase spacing inside the card.”• “Make the profile photo oval (If it’s already oval make it round or a differentshape.”• “Move the Edit Profile button below the card.”• “Add more fields to the Edit Profile screen like phone number, bio, and location.”• Try to change and save any of the information on the Profile card and save yourchanges• Are your changes preserved?@ 2026 Copyright Bob Branchek Associates, LLC4LAB 3 -- Build Your First Multi-ScreenAppModule 3: Building Your First Complete Multi-Screen ApplicationObjectiveCreate a multi-screen app with navigation and a clear user flow.Step-by-Step Directions1. Define Your User FlowChoose a simple 3-4 screen flow, such as:• Home -> Add Item -> Item List• Dashboard -> Details -> Edit2. Write a Multi-Screen PromptExample:“Create a 3-screen task manager with Home, Add Task, and Task List screens. Addnavigation between all screens.”3. Generate the AppRun the prompt and wait for Lovable to create:• Screens• Navigation• Components4. Inspect Each ScreenCheck:• Titles• Layout• Buttons• Spacing@ 2026 Copyright Bob Branchek Associates, LLC55. Test NavigationClick through:• Home -> Add Task• Add Task -> Task List• Task List -> HomeFix issues with prompts like:• “Fix navigation from Add Task to Task List.” -NOTE: Lovable may tell you that it’salready navigating correctly.Add four tasks such as “Mow the lawn” with a description such “lawn should be the height of 3inches”, and specifya priority if that option is available.Move a task from Active to Done if that option is available.6. Final ReviewEnsure:• Screens are consistent• Navigation is smooth• User flow is logical@ 2026 Copyright Bob Branchek Associates, LLC6LAB 4a -- Add Advanced Functionalityworking with your Task List Multi-ScreenAppModule 4: Advanced FeaturesObjectiveAdd forms, validation, data storage, dynamic lists, and modals.Step-by-Step Directions1. Create a new FormPrompt: “Add a form with fields for title and description.”2. Add ValidationPrompt:• “Add validation”• “Make the character limit 10 for the title and 15 for the description”• Test this by entering 10 or less characters for the title and 15 or less characters for thedescription• Test it again by adding more than 10 characters for the title and more than 15 for thedescription• Does you get an error if your enter more the character limit or does it prevent you fromentering more characters than the limit?• Test if both the title and description are required• Test if you get an error message if the title or the description or both are missing3. Save Data to SupabasePrompt: “Save the form data to Supabase when the user taps Save.”• Select Enable the Cloud or Allow if it does not ask you to Enable the Cloud• Select Allow to let anyone read the items (You are clicking on Allow a second time)Prompt: “Show saved items.”@ 2026 Copyright Bob Branchek Associates, LLC7• It shows the saved item (the task) in the planner window• Click on Cloud then Database then tasks• You can view the rows in the database table that were added• We won’t attempt to add rows except through our form• Click on Cloud again to go back to the PreviewPrompt: “Add delete functionality”• Click on Allow to enable deleting items• Click on the trash can on a task to delete it and test it• Add a confirmation dialog before deleting a task to prevent accidental deletions• Try deleting a task againPrompt: “Add edit functionality”• Select Allow to enable editing if you are prompted• Test it by selecting the pen next to the trash can and change the title or description or bothPrompt: “Add Search functionality”• In the box above the list of items enter the Title and click on the magnifying glass tosearch for the item• The Search bar is probably in the list of all tasksPrompt: “Add sorting options”• In the new box to the right of Search items sort the items by Newest, Oldest, A-Z, Z-A,Priority, Title• You could get different search criteria unless you specify what Seach options you wantincluded4. Final ReviewCheck:• Form works• Data saves• List updates@ 2026 Copyright Bob Branchek Associates, LLC8LAB 4b -- Add Advanced Functionality -Your already created Profile appOpen the app that you created in module 2 with the form.Optional:If you deleted it earlier enter the prompts:“This is a profile screen.Use a centered card layout.Include name, email, phone number, bio, location, and profile photo.Add an Edit Profile button that navigates to an edit screen.Use consistent spacing and center alignment.”1. Enhance the Form• “Select Add form validation and then return in the Chat box when the text “Add formvalidation with error messages for required fields and valid email/phone formats.”• If the Add form Validation isn’t available enter: “Add form validation with errormessages for required fields and valid email/phone formats.”• Then remove the @ in the email or enter a new one without a @ and click try to SaveChanges.• Select Show all fields on the profile card then return in the Chat box when the text “Addphone, location, and bio on the main profile card as well.”• They may already be available because we added them earlier so it may make changes totheir display.• Select Data Persistence (if it’s available) and then return in the Chat box when the text“Store profile data persistently using Lovable Cloud so changes are saved acrosssessions.”• If The Data Persistence option isn’t available enter: “Store profile data persistently usingLovable Cloud so changes are saved across sessions.”• If you’re offered the following select the radio button Per-user with auth@ 2026 Copyright Bob Branchek Associates, LLC9• Test the sign up process and add an email and password and test the login after creatingthe account• In the recent version of Lovable it can automatically send a confirmation email to youentered email so use a valid email• Account but NOT YOUR REAL PASSWORD as the entered is stored in Lovable’sdatabase (Supabase)• Test the login once you’ve confirmed it• Request a sign out and test it• It may tell you that’s there is a sign out in the upper right-hand corner• Enter “Style it differently and mark it sign out”@ 2026 Copyright Bob Branchek Associates, LLC10• Test the sign out by signing out and then back in again and see if your information ispreserved2. Access the Database• Click on the Cloud icon and then select Database and then click onprofiles to show the rows in the table• You could click on Export CSV to download the rows into a file that you couldview in a spreadsheet such as Excel7. Final ReviewEnsure:• Screens are consistent• Navigation is smooth• User flow is logical@ 2026 Copyright Bob Branchek Associates, LLC11LAB 5 -- Polish Your AppOpen up you first app that you created in module 1 and add the followingprompts:If you deleted it or can’t find it enter the following prompt:“Create a welcome screen with a large title, a short subtitle, and a Get Started buttoncentered on the screen.Make the button full width.Add an image above the title and center it.”1. Substitute the image• Click on the plus sign + on the top of your screen and select Design andthen Visual Edits•• or select Visual Edits just below your chat box• Click on Visual Edits@ 2026 Copyright Bob Branchek Associates, LLC12• Select the hero image on the form (the image that we created earlier)• Move your cursor on top of the image in the Design screen on the left pane• Click on add image url and enter: (You need to move your cursor to the selected imagethat comes up in the Plan pane)@ 2026 Copyright Bob Branchek Associates, LLC13• You new image should be in your screen• Select Plan the Save (You may also need to select Back to Chat)• Enter “Add floating animation”• Enter “Add glow effect” or select Add glow effect if the option is available• The pulsing is very subtle after 1.2 seconds so look carefully)• Enter “Make the glow effect more prominent”• Enter “Add dark mode toggle if your background is white not black”• Enter “Add background particles”• Enter “Mouse interaction to particles”• The particles will move away when the mouse is near them.2. Improve SpacingPrompt: “Increase spacing between all sections using a consistent 16px spacing system.”3. Improve AlignmentPrompt: “Align all text and components to a clean left grid.”4. Improve TypographyPrompt:• “Increase title size.”• “Use medium weight for subtitles.”5. Improve Color UsagePrompt: “Use a single primary color for actions and neutral colors for backgrounds.”6. Add Micro-InteractionsPrompt:• “Add hover states to buttons.”• Move your mouse over the Get Started button to see the hover animation.• “Add a success animation after saving.”• If you get the following Question select Clicking “Get Started’ then Submit@ 2026 Copyright Bob Branchek Associates, LLC147. Final ReviewCheck:• Visual hierarchy• Readability• ConsistencyLAB 6 -- Publish & Share Your AppModule 6: PublishingObjectivePrepare your app for publishing, generate a shareable link, and test it like a real user. We couldpick any of your apps for this as the process would be the same. The following 3 steps wouldapply to nearly any app. Let’s use the app from Lab 5 with the Advanced visualizations.Step-by-Step Directions1. Test Every Screen@ 2026 Copyright Bob Branchek Associates, LLC15Check:• Navigation• Actions• Data• Layout2. Fix IssuesPrompt:• “Fix spacing on all screens.”• “Fix navigation from Home to Add Item.”• “Remove placeholder text.”3. Clean Up VisualsPrompt: “Improve alignment and spacing across all screens.”4. Generate a Shareable Link - Publish itUse Lovable’s Publish feature.@ 2026 Copyright Bob Branchek Associates, LLC165. Test the LinkOpen it on:• Desktop• Mobile• Tablet6. UnpublishTo unpublish your app, go to Project Settings (click the project name in the top left ->"Settings") and look for the option to unpublish under the Domains section.From Settings you can also:• Rename the project• Transfer it to another workspace• Hide the Lovable badgeLAB 7 -- Weather ApplicationModule 8: Additional ApplicationsObjectiveCreate a weather application that will show 3 days of weather for an entered zip code.Step-by-Step Directions1. Initial promptsPrompt: “Create a weather application that accepts a zip code and shows the weather forthe next 3 days.”Enter a zip code and your forecast should be shownPrompt: Enter “Is this the actual weather data or is it simulated”@ 2026 Copyright Bob Branchek Associates, LLC17Lovable may return information such as:It's simulated data. The src/lib/weatherData.ts file uses a deterministic mock engine thatgenerates consistent weather based on a numeric seed derived from the zip code--no realAPI is called.Would you like me to connect it to a real weather API (like OpenWeatherMap) to fetch livedata?Prompt: Enter YesGoto the url: https://home.openweathermap.org/users/sign_upAnd sign up for a free API key which will copy into Lovable as a secretYou may need to wait for your key to be active1. Wait ~2 hours for your key to activate, then try againPrompt: Change the api to Open-Meteo API• Click on Add hourly forecasts• Click on Add favorite locations• Set up an account and log in to save a location• Select Add hourly temperatures• Select Add weather Alerts• Fix the add alerts if necessary• Add push notifications check this may not want to enable• Add dark mode toggle• Add 7-day forecast• Add weather maps@ 2026 Copyright Bob Branchek Associates, LLC18LAB 8 -- News SummariesModule 8: Additional ApplicationsObjectiveCreate a news application that will show news summaries on a list of topics.Step-by-Step DirectionsInitial Prompt“Create a news summary application which allows you to show news summaries on thefollowing topics: sports, technology, business, leisure, science. Each summary will providea link to a url of the article or articles from which the summary was created. Allow theuser to enable the news summary to be read aloud.”“Is this simulated or real news”Lovable will return:This is simulated/mock data - I created sample news articles in src/data/mockNews.ts todemonstrate the UI.To get real news, we'd need to connect to a live API. Would you like me to:1. Use Perplexity API - AI-powered search that fetches and summarizes real news2. Use a traditional News API - Like NewsAPI.org for headlinesBoth require enabling Lovable Cloud for secure API key handling.“Use a free news API to enable real news”Select Enable Cloud.Cloud is enabled. Now I'll use GNews API which is free (100 requests/day, no credit card). Ineed to add the API key secret first.Open up gnews.io in your browser and click on GET API Key@ 2026 Copyright Bob Branchek Associates, LLC19Sign up for your free account with you Google Gmail account if you have one or useanother username and password. Copy the API key under Add Secret in LovableTry each of the categories of news, open the full article for one of each of the news storiesfor each category and click on the arrow button to have the summary of a article read toyou. Make sure that the sound is turned on for the computer tht you’re working from tohear the summary.@ 2026 Copyright Bob Branchek Associates, LLC20LAB 9 -- Lovable Plan Lab1. In your browser open up the url: https://copilot.microsoft.com/. In the list box selectSmart if it’s not selected which is the Large Language Model GPT-5.1. Enter thefollowing prompt:Show me example of a plan for Lovable using plan mode for a weather app that will allow meto enter a zip code or use my current location, show the weather for 7 days, use real notsimulated data using a free weather API, shows weather alerts, and include a weather map.It’ll create a detailed plan for Lovable that you can copy into Lovable similar to the followingplan:Create a weather app called “ZipWeather+”.Goal:Allow the user to enter a ZIP code or use their current location to retrieve real weather datafrom free APIs. Show current conditions, a 7‑day forecast, weather alerts, and a weather mapwith radar/precipitation tiles.Data Sources:- ZIP -> Lat/Lon: https://api.zippopotam.us/us/{zip}- Weather + 7-Day Forecast (Open-Meteo):https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&current_weather=true&daily=temperature_2m_max,temperature_2m_min,precipitation_probability_max,weathercode&timezone=auto- Weather Alerts (Open-Meteo warnings):https://api.open-meteo.com/v1/warnings?latitude={lat}&longitude={lon}- Weather Map Tiles:https://tile.open-meteo.com/v1/precipitation/{z}/{x}/{y}.pngScreens:1. Home Screen- ZIP code text input- Button: “Use ZIP Code”@ 2026 Copyright Bob Branchek Associates, LLC21- Button: “Use My Location”- Logic:• If ZIP entered -> call ZIP API -> store lat/lon• If location used -> request GPS -> store lat/lon• Navigate to Forecast Screen2. Forecast Screen- Show current temperature, conditions icon, wind, humidity- Show 7-day forecast cards with:• date• high/low temps• precipitation probability• weather icon based on weathercode- Buttons:• “View Weather Alerts”• “View Weather Map”- Logic:• On load, call Open-Meteo forecast endpoint using stored lat/lon3. Alerts Screen- List of active alerts- Each alert shows:• title• severity• description• effective/expires- Logic:• Call Open-Meteo warnings endpoint• If no alerts, show “No active alerts for this area”4. Weather Map Screen- Map component- Overlay tile layer using precipitation tiles- Toggle options:• Precipitation• Temperature• Wind- Logic:@ 2026 Copyright Bob Branchek Associates, LLC22• Swap tile URL based on toggle selectionData Models:- Location: { latitude: number, longitude: number, zip: string | null }- CurrentWeather: { temperature: number, windspeed: number, weathercode: number }- DailyForecast: { date: string, temp_max: number, temp_min: number, precip_prob: number,weathercode: number }- Alert: { title: string, description: string, severity: string, effective: string, expires: string }App Logic Flow:1. User chooses ZIP or location2. App retrieves lat/lon3. App fetches weather, forecast, and alerts4. User can navigate to Alerts or Weather MapRequirements:- Use real API calls (no mock data)- Bind API responses to UI components- Add navigation between screens- Request location permission when needed- Add map component with custom tile layer2. We could be doing all this in Plan mode (replaces Chat mode) in Lovable directly butwe’re doing in a Large Language Model (LLM) for several reasons.• In Lovable it’ll use credits, in Copilot AI (this version) it’s free• Once we become knowledgeable, we could write the plan in detail ourselves butwe’re not there yet• We don’t have to restrict ourselves to one tool when more than one can get usbetter results, sometimes more easily3. Click on Plan on the first page of Lovable and paste in the copied plan to Lovable.4. Lovable will ask us questions before creating the app in order to refine the features ofthe app.5. When you’re finished you can add additional features before you have the app created.Note: The last time I ran it (yesterday), it showed the temperature inCelsius, (-6) so I added a toggle to go from Celsius to Fahrenheit.@ 2026 Copyright Bob Branchek Associates, LLC23LAB 10 -- NVIDIA DGX Spark ResellerOptional LabObjectiveCreate a reseller application to resell the new Nvidia DGX Spark mini super computer.Step-by-Step DirectionsOpen the application url or QR code (if available) provided by your instructor. Try all thefeatures of the application including the video, and display the specifications, features, andperformance.Create an application similar to it but it does not have to be identical.If you have time, enable one of the following: the Contact Sales, Request Quote, orSchedule Demo features.LAB 11 -- Gutenberg Project ReaderOptional LabObjectiveCreate a reader application for e-books available on the Gutenberg website. This a veryambitious application and you may not have either enough time or account credits to complete itduring the class. However, completing only part of it would be helpful in understanding the useof Lovable to develop application.Step-by-Step Directions@ 2026 Copyright Bob Branchek Associates, LLC24Open the application url or QR code (if available) provided by your instructor. Try all thefeatures of the application including signing up for an account, logging in and out,searching for books by title and author, generating a book synopsis, locating a chapter andreading a chapter or the book synopsis.Create an application similar to it but it does not have to be identical.@ 2026 Copyright Bob Branchek Associates, LLC--- Reference: chapter 2 all complete.pptx ---MVP AND PRDMVP (Minimum Viable Product)An MVP is the simplest version of a product that includes only the essential features needed to satisfy early users and gather real‑world feedback.It helps teams validate ideas quickly without wasting time or money on full builds.Reduces risk by testing assumptions earlySpeeds up time‑to‑marketHelps teams learn what users actually wantEnables iterative improvement based on real dataPRD (Product Requirements Document)A PRD is a document that defines what a product should do -- its purpose, features, behavior, and release criteria.It aligns stakeholders and guides development teams.It’s used in both waterfall and agile environments, though in agile it tends to be lighter and more flexible.Product overview and goalsTarget usersFeatures and functionalityUser stories or use casesConstraints and assumptionsSuccess metrics and release criteria--- Reference: chapter 4 all complete.pptx ---Database ConceptsThinking in Tables and RowsW NotebaokLMUsers Table123 alice@test.com 10:00 AMTasks Table987 Buy MilkFalse123Foreign Key Relationshipa Tables: Structured storage (like spreadsheets).Columns: Attributes (text, boolean, timestamp, uuid).Relationships: The mechanism that allows an app to know "Who owns what" bylinking IDs.

XGA1WGGemini

Claude Cowork is Anthropic's desktop AI tool that works directly with your files, automates tasks, and delivers finished work. But what makes it especially powerful is how you can customize it -- Plugins connect Cowork to your tools and services, while Skills teach it repeatable workflows specific to your job. The result is an AI assistant shaped around the way you actually work. A live session introducing how Claude Cowork uses Plugins and Skills to automate tasks, operate on desktop files, and support role‑specific workflows. The course explains how to set up, customize, and apply Cowork in real-world scenarios.

As generative AI continues to redefine how professionals approach problem-solving, communication, and creativity, this course provides a structured, hands-on learning experience to help participants unlock the full potential of tools like ChatGPT. Through guided exercises, real-world scenarios, and deep dives into AI capabilities, students will gain both technical fluency and strategic insight into how AI can augment personal productivity and team performance. _This course emphasizes not only tool proficiency but also critical thinking, prompting techniques, security awareness, and ethical use. Attendees will explore ChatGPT’s core features--text generation, voice interaction, document analysis, image generation, data tools, and customization--and practice using them in professional workflows. By the end of the course, participants will be equipped to confidently collaborate with AI, solve complex problems, and plan for meaningful integration across teams and projects.

Recorded on September 25, 2025

January 28, 2025

August 14, 2025

October 7, 2025

June 18, 2025

October 23, 2025.

October 30, 2025.

February 26, 2025

Live webinar recording with Dan Costello 11.08.23

Live webinar recording with Dan Costello 11.08.23

Welcome to our 1-day class on Generative AI! Our introduction to Generative AI will teach you about the different types of Generative AI, including language models like ChatGPT, which can be used as personal assistants, research tools, and even to create art. You'll get hands-on experience with ChatGPT, learning how to use basic prompts, and have conversations. Not only with this class provide you with a great overview of Generative AI technology, but it will also give you insight into how businesses and organizations can approach AI initiatives to improve their performance.In addition to learning about the practical applications of Generative AI, we'll also explore its potential for the future, including keeping up with new products, understanding the vision of Generative AI, and navigating legal and ethical issues. Whether you're interested in exploring Generative AI it to improve your work productivity, build a career in this field, or make decisions on how to implement AI in your organization, this class will provide you with a solid foundation and the skills to get started. We hope to see you there!

WQBNOL

WQBNOL

WQBROL

WQBIOL_LL

WQBNOL_LL