<h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/parkingcare" rel="noopener noreferrer" target="_blank">Download the GitHub repo.</a><br><a href="https://cosmicjs.com/apps/parking-care" rel="noopener noreferrer" target="_blank">Check out the demo.</a></p><h2>Intro</h2><p>Imagine we need an app to run a parking lot with not too many requirements &ndash; parking slots should be cleaned and maintained. &nbsp;Spots will be rented or owned and customers will need to pay for the service. &nbsp;All of this data, along with customer information, will need to be stored for easy access. In this article I&#39;ll show you how to create this basic data management app using Cosmic.</p><h2>Preparing backend</h2><p>First, register in Cosmic and create your own bucket.&nbsp;<img class="fr-dii fr-fir" src="https://s3-us-west-2.amazonaws.com/cosmicjs/013209e0-0cc4-11e8-a42e-d5b5de33de60-1518089660587.jpg" style="width: 148px;"></p><p>After that we need to create a couple of Object Types: one for describing a parking spot, and another one for an event, happened to the spot. It might be one of three different types: payment, maintenance or cleaning.</p><p>To do it, within your bucket click &quot;Add Object Type&quot;</p><p><img class="fr-fil fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/85584cc0-0cc4-11e8-a42e-d5b5de33de60-1518089881143.jpg" style="width: 100%;"></p><p>Every Object has built-in properties like title, slug, and content. Usually, it&rsquo;s quite enough, but let&rsquo;s make our Object Types more specific. Metafields to the rescue!</p><p style="text-align: center;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/a1ee1c20-0cc4-11e8-a42e-d5b5de33de60-1518089928137.jpg" style="width: 257px;"></p><p>Add a list to keep a floor number and fill it with values &lsquo;Ground&rsquo;, &lsquo;First&rsquo; and &lsquo;Second&rsquo;.</p><p>After that create another Object Type, spot event. Add Metafield type (&lsquo;Payment&rsquo;, &lsquo;Maintenance&rsquo; and &lsquo;Cleaning&rsquo;) and event date (as date typed Metafield). Don&rsquo;t forget to add one more field with type &lsquo;Object&rsquo;
to point a parent spot.</p><p>Now we need to add a tiny scent of security: set up write_key and read_key to restrict anonymous access to our data.&nbsp;</p><p>They are controlled by Settings -&gt; Basic Settings page</p><p style="text-align: center;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/d7d31b60-0cc4-11e8-a42e-d5b5de33de60-1518090018078.jpg" style="width: 341px;"></p><p>Ok, our backend is complete. Our app will use powerful Cosmic API to operate, and all we need is to write a single page application. Angular 2 is a good solution for this.</p><h2>Let the code rock!</h2><h3>Before we start.</h3><p style="text-align: center;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/4c102fe0-0cc5-11e8-98c5-adea3154c426-1518090214849.jpg" style="width: 300px;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/6312b0a0-0cc5-11e8-98c5-adea3154c426-1518090253501.jpg" style="width: 229px;"></p><p>First, we need to install NodeJS and its package manager NPM (surprisingly, it stays for NodeJS Package Manager). Here is quite a useful link: <a href="https://nodejs.org/en/download/package-manager/"></a><a href="https://nodejs.org/en/download/package-manager/" rel="noopener noreferrer" target="_blank">https://nodejs.org/en/download/package-manager/</a></p><p>Install Angular CLI (command-line interface). Take it from here: <a href="https://angular.io/guide/quickstart">https://angular.io/guide/quickstart</a></p><p>Also, check out the code here: <a href="https://github.com/cosmicjs/parkingcare2/" rel="noopener noreferrer" target="_blank">https://github.com/cosmicjs/parkingcare2/</a></p><p>and view demo app here: <a href="https://parkingcare.cosmicapp.co/" rel="noopener noreferrer" target="_blank">https://parkingcare.cosmicapp.co/</a></p><h3>Getting started</h3><p>Now open a console/command line/whatever you have to run commands and create a folder, get into it and type&nbsp;</p><p><strong>ng new ParkingCare</strong>. Ok, we have a sample project installed.</p><p>All the people were excited by Bootstrap years ago, so now it&rsquo;s everywhere and looks boring. Take fresh and crisp Bulma framework. You can read about it here: <a href="https://bulma.io/" rel="noopener noreferrer" target="_blank">https://bulma.io/</a></p><p>Another great UI thing is Font Awesome. Check it out here, if you haven&rsquo;t done yet: <a href="https://fontawesome.com/" rel="noopener noreferrer" target="_blank">https://fontawesome.com/</a></p><p><br></p><p style="text-align: center;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/8fa86ab0-0cc5-11e8-a008-13d87a4b1391-1518090328371.jpg" style="width: 206px;"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/9effe060-0cc5-11e8-a008-13d87a4b1391-1518090353807.jpg" style="width: 201px;"></p><p><br></p><p>Go to parkingcare/src/index.html and add references for Bulma and Font Awesome</p><p>Let&rsquo;s see how it looks now: run <strong>ng serve --open</strong></p><p>Within app, folder create another three: models, services, and components</p><h3>Data models</h3><p>Create data models for our app: get into /models and type <strong>ng generate class entity</strong>, <strong>ng generate class&nbsp;</strong><strong>spot</strong>, <strong>ng generate class&nbsp;</strong><strong>spotevent</strong>. As TypeScript support
inheritance everything common into an entity class and keep specific data in derived classes: Spot and SpotEvent&nbsp;</p><div class="fr-embedly                         " data-original-embed="<a href='https://gist.github.com/kutliev/dec46e182cc58b5c8436668995c1ed79' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/dec46e182cc58b5c8436668995c1ed79" class="embedly-card"></a></div><div class="fr-embedly                         " data-original-embed="<a href='https://gist.github.com/kutliev/bc994fc6b28da8ec13702967b9bda9c3' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/bc994fc6b28da8ec13702967b9bda9c3" class="embedly-card"></a></div><p>Create another class called Settings and post this data into it. This data will serve as application configuration file</p><div class="fr-embedly                         " data-original-embed="<a href='https://gist.github.com/kutliev/76ffd3757db990a68d8da9d41499263d' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/76ffd3757db990a68d8da9d41499263d" class="embedly-card"></a></div><h3>Service</h3><p>Now we need to create a service &ndash; that exact thing which will pump API-calls for us. Move to the /services folder and type <strong>ng g service data</strong> (&quot;g&quot; means &quot;generate&quot;). We fill it a bit later.</p><h3>Components</h3><p>Now move to the /components and create a few components:</p><p>Dashboard (<strong>ng g component dashboard</strong>) &ndash; for the main page</p><p>Spotcard (<strong>ng g c dashboard</strong>) &ndash; for particular spot page</p><p>Spotcardedit (<strong>ng g c&nbsp;</strong><strong>spotcardedit</strong>) &ndash; spot edit form</p><p>Eventcardedit (<strong>ng g c&nbsp;</strong><strong>eventcardedit</strong>) &ndash; spotevent edit form</p><h3>Routing</h3><p>Now we need to add a router to explain to the system which component should be used for exact URL. Nice explanation located here <a href="https://angular.io/tutorial/toh-pt5" rel="noopener noreferrer" target="_blank">https://angular.io/tutorial/toh-pt5</a></p><p>There are few request types we need to serve:</p><ul><li>By default, we need to show a Dashboard</li><li>Create a new spot /createspot/</li><li>Display selected spot /spots/:spot_slug (like, /spots/101)</li><li>Edit selected spot /spot/:spot_slug/edit</li><li>Add new spot event /spot/:spot_slug/addevent</li><li>We don&rsquo;t need a separate event list, spot display page covers it</li><li>All other requests to be redirected to the root</li></ul><p>In the app/app-routing.module we need to assign components to the paths.</p><div class="fr-embedly                    " data-original-embed="<a href='https://gist.github.com/kutliev/5c998c9a3775bf7407fad5e52ea9e54b' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/5c998c9a3775bf7407fad5e52ea9e54b" class="embedly-card"></a></div><p>Ok, we created a routing, let&rsquo;s see how it looks. Run <strong>ng serve --open</strong> again. See no changes. It is because we need to add a router-outlet tag to the app.component.html.&nbsp;</p><div class="fr-embedly                   " data-original-embed="<a href='https://gist.github.com/kutliev/d10dc474b5007f35c713863f4085212a' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/d10dc474b5007f35c713863f4085212a" class="embedly-card"></a></div><p>Adjust it and run <strong>ng serve --open</strong>. Now it works.</p><h3>UI</h3><p>It&rsquo;s time to make some UI. Our entry point, the dashboard, will show user two blocks:</p><ul><li>Spot list overview</li><li>Last events happened</li></ul><p>Go to the app/componens/dashboard/dashboard.component.html, create there a two-columns layout (let&rsquo;s give two-thirds to the overview) and put component tags: app-spotlist and app-eventlist. But component tags won&rsquo;t work without a data. Let&rsquo;s
pass some Objects there, &ldquo;spots&rdquo; for spot list and &ldquo;spotEvents&rdquo; for last events.</p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/kutliev/fd8e391de1d552f64b67d3c12eca36a9' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/fd8e391de1d552f64b67d3c12eca36a9" class="embedly-card"></a></div><h3>Data retrieving</h3><p>These Objects are described in dashboard.component.ts. We need to go deeper there.</p><p>Go to the /services/data.service.ts and create a few functions there:</p><p>Some of them will be used for getting data, some of them for changing data.</p><p>Starting with a simple one: getting spot list. We will use RxJS (<a href="http://reactivex.io/rxjs/" rel="noopener noreferrer" target="_blank">http://reactivex.io/rxjs/</a>)</p><p>First, compose a proper URL to call Cosmic API.</p><p>After that call API by GET method and return thing, called Observable</p><p>Make similar to the event list.</p><p>And make final function getSpots()</p><p>return Observable.forkJoin(this.getSpotData(), this.getSpotEvents());</p><p>It will return all data when both lists ready.</p><div class="fr-embedly                   " data-original-embed="<a href='https://gist.github.com/kutliev/e33cca4ec8b0cb0308d65f4c081c32ee' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/e33cca4ec8b0cb0308d65f4c081c32ee" class="embedly-card"></a></div><p>Enough here, let&rsquo;s go back to the dashboard.component.ts</p><p>Within <strong>ngOnInit</strong> we subscribe to the service function, and when receive a data we do some data transformation: repack received data into our Objects &ldquo;spots&rdquo; and &ldquo;spotEvents&rdquo;, which were described previously.</p><p>As our Objects inflated, they should be rendered on the page. We need to add couple more components: spotlist and eventlist (<strong>ng g component spotlist</strong>,<strong>&nbsp;ng g component eventlist</strong>)</p><p>In the component&rsquo;s .ts file set <strong>@Input</strong> as an Object list (to be able to pass it to the component),</p><p>In .html file describe the list using <strong>*ngFor=&quot;let spot of spots&quot;</strong> to iterate Objects within the passed list.</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/kutliev/499d0a6214dad4253d80e816008db9cc' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/499d0a6214dad4253d80e816008db9cc" class="embedly-card"></a></div><p>For the event list, it is quite similar.</p><h3>Navigation</h3><p>Our actions like adding or moving to the display page present as a link, but with <strong>routerLink</strong> param instead of <strong>href</strong>.</p><p>Also, there are some button click handlers. They are set up in (click)=&rdquo;func(param)&rdquo; way.</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/kutliev/8455a397e479a3214ead7bdb3f64f0a4' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/8455a397e479a3214ead7bdb3f64f0a4" class="embedly-card"></a></div><h3>Data create</h3><p>To create an Object we need to send a properly-formed json to the Cosmic API with a write key, passed in the payload. Let&rsquo;s go to the services/data.service.ts and create a function for serving new spot creation.</p><p>By default, it is required to pass a title and type_slug. As we have a more complex Object, we also need to pass a metadata and write_key in out payload Object.</p><p>Don&rsquo;t forget to add a header Content-Type: application/json. API won&rsquo;t be able to recognize a payload without it. Send it with a POST to the /add-object and get a new Object back. It is pretty obvious.</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/kutliev/a8499d442a0d5c7d07cde815349e7daa' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/a8499d442a0d5c7d07cde815349e7daa" class="embedly-card"></a></div><h3>Data change</h3><p>To change your Object you need to POST another json to the Cosmic API &ldquo;edit-object&rdquo; controller. In that json you need to pass a write_key, updated Object slug, title, content and all Metafields (event if they not changed). And, of course,
don&rsquo;t forget Content-Type header.</p><h3>Data removing.</h3><p>As all out inner Objects are children of common Entity type we can use a common function because the only thing Cosmic needed to remove an Object &ndash; it is its slug. You have to call DELETE request to the API&rsquo;s &ldquo;objects&rdquo; controller.
In our case, we also need to pass a write_key, so here is a trick: we add a json<strong>&nbsp;{&ldquo;write_key&rdquo;: &ldquo;&rdquo;}</strong> as &ldquo;body&rdquo; option to the request. And it works just well.</p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/kutliev/34faaad8cd07bbde0e5db9df38fce20f' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/34faaad8cd07bbde0e5db9df38fce20f" class="embedly-card"></a></div><p>Before removing a spot we need to ensure that bound events do not exist. So we call a function which checks that no events are bound to the spot. We can show the warning if the spot cannot be deleted. <strong>*ngIf&nbsp;</strong>is used for it</p><p>In components/spotcard/spotcard.component.html</p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/kutliev/8455a397e479a3214ead7bdb3f64f0a4' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/8455a397e479a3214ead7bdb3f64f0a4" class="embedly-card"></a></div><p>And in components/spotcard/spotcard.component.ts</p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/kutliev/ae0a3dac3bc06aecc836830f9995db70' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/ae0a3dac3bc06aecc836830f9995db70" class="embedly-card"></a></div><h2>Ready to launch.</h2><p>Well, now we need to deploy this somehow. Cosmic provides a nice and quite easy way to launch your app, PaaS based on Dokku. You just go to the Settings -&gt; Deploy Web App in the left menu, fill the repo URL and click the blue button which says &ldquo;Deploy
to Web&rdquo;.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/cb03a160-0cca-11e8-a42e-d5b5de33de60-deploy.JPG" style="width: 100%;" class="fr-fic fr-dib"></p><p>Well, as we have an angular application, some extra preparations are required.</p><p>To make entire picture clear, we need to understand following statements:</p><ul><li>Our code needs to be built (translated from Angular/TypeScript to Html/JavaScript)</li><li>We need to install angular infrastructure to let #1 possible</li><li>After building an app we need to start small web-server to serve inbound requests</li></ul><p>Ok, let&rsquo;s adjust the package.json a bit.</p><ul><li>Move <strong>@angular/</strong><strong>cli</strong>, <strong>@angular/compiler-</strong><strong>cli</strong>, <strong>typescript</strong> and <strong>@types/node</strong> from devDependencies branch to the dependencies.</li><li>Add engines block</li><li>Add express dependency</li><li>Edit the &ldquo;scripts&rdquo; block in following way:</li><li>Change &quot;start&quot; line from &ldquo;<strong>ng serve</strong>&rdquo; to the &ldquo;<strong>npm</strong><strong>&nbsp;install &amp;&amp; node server.js</strong>&rdquo;. It will install everything required by dependency list and after that will start
our web tiny server.</li><li>Add &ldquo;postinstall&rdquo; line with setting an entire path to the angular core &ldquo;ng&rdquo; and build. This line provides a building right after installation complete.</li><li>Create a server.js file in the folder root. It is quite primitive: require Express framework, set a static folder as /dist (it is a standard folder for angular&rsquo;s build output), let it listen a port from environment variables or standard for Heroku
5000. That is it.</li></ul><p>Here is the code of server.js</p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/kutliev/0afb1e5d5ef147be17f7d581f11ee85a' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/0afb1e5d5ef147be17f7d581f11ee85a" class="embedly-card"></a></div><p><br></p><p>and part of the package.json</p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/kutliev/e3fe21472e969e92f161143c9b3dec9b' class='embedly-card'></a>"><a href="https://gist.github.com/kutliev/e3fe21472e969e92f161143c9b3dec9b" class="embedly-card"></a></div><p>After these preparations commit everything to the repository, go to the deployment page (once again, Settings -&gt; Deploy Web App) and click &ldquo;Deploy to Web&rdquo;. In a while, you receive an email from Cosmic as a successful deployment confirmation.
If no, you can check that page again for the error log, if any.</p><h2>Conclusion.</h2><p>Now, when you see how simple and cozy it is, I hope you are excited enough to bring your ideas to life with Angular and Cosmic.</p>

Blogs by Bulat Kutliev

Start building today

Blogs by Bulat Kutliev

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today