JeremyLikness / deepskies

Deep skies navigator BUILD demo.

Deep Skies - Modern SPA API

An example of a simple SPA app with an API backend that uses authentication.

This demo integrates the latest changes to identity management in ASP.NET Core, specifically the new endpoints and token-based authentication. It also demonstrates the HTTP editor for API interactions directly within Visual Studio.

To keep up with the .NET team, check out our team blog.

For my latest astrophotography see DeepSkyWorkflows.

All images are (c) 2023 by me, Jeremy Likness, and are available for use with attribution. You have my explicit permission to download and use them for non-commercial use, including in personal screen savers and desktop backgrounds.

Getting started

The repo contains the SQLite database pre-populated so you should be able to build and run it "out of the box.".

If you need to rebuild the database for any reason, run the included deepskies and it will regenerate the database. For example, you may want to update the login scenario to use your own email address and password.

Copy the gallery.sqlite3 file somewhere and reference it in applicationsettings.json.

Demo preparation steps

1. Make sure login div is hidden with style="display:none" and collapsed in the UI
2. The index.html page is first
3. The gallery.js app is next, scrolled to the init method at the bottom
4. The Program.cs is open with the auth pieces hidden (highlight, CTRL+M CTRL+H)
5. The DeepSkyData.cs is open with the typed tasks showing
6. The DeepSkyPersonalData.cs file is open
7. Always restart the app between demos to clear the in-memory identity database
8. Navigate to "developer tools (F12)" then "Application" and "Storage" to click "Clear site data" to get rid of cookies

Suggested demo flow

APIs

1. Show the app running
2. Filter on galaxies
3. Filter on nebulae
4. Click on an item that has coordinates
5. Explain some of the details and the "celestial address"
6. Tap on the link to show on the Microsoft Research World Wide Telescope
7. Open dev tools (F12) and click on network
8. Clear the filters and show the request
9. Open the gallery.js file and scroll to the init method to show the fetch requests
10. Open the Program.cs file and show the configuration, explain how endpoints can be grouped
11. Open the DeepSkyData.cs file and show the typed tasks
12. Navigate up to the mapping
13. Show syntax highlighting for routes
14. Show code completion for constraints
15. Show analyzer
16. Explain how the endpoint explorer helps navigate APIs in your project
17. Show the .http file and make some example requests

Identity

1. Explain the observation location and privacy concerns
2. Remove "display:none" from the login div
3. Show the login screen
4. Show failed attempt at observation location
5. Explain that registration isn't built yet in the UI but can easily be done with the API
6. Run the API to register
7. Show problem details explaining password policy
8. Add '!' and register
9. In the app, login with the wrong password
10. Login with the correct password
11. On M13-florissant show the observation link
12. Show the call failing in the .http file
13. Explain why we supported tokens for clients like mobile or even Visual Studio
14. Use the login in the .http file to get a token
15. Paste the token into the @accessToken variable
16. Now run the observation link and show it returns a link you can cut and paste to navigate to