<p>In this tutorial, we&#39;re going to build a Google Chrome extension to save web content to Cosmic Buckets. Think of it as your personal web clipper.</p><h2>TL;DR</h2><p><strong><a href="https://github.com/cosmicjs/content-grabber" rel="noopener noreferrer" target="_blank">Download the code from the GitHub repo</a></strong></p><h2 data-usually-unique-id="381622010639830291586137">Pre-requisites</h2><p>You just need to have Chrome installed for testing it out and nothing else.</p><h2 data-usually-unique-id="711486294920629409065847">Installing the demo</h2><ol><li>Get the source code into your machine by either downloading or cloning the repo, which is located <strong><strong><a href="https://github.com/cosmicjs/content-grabber" rel="noopener noreferrer" target="_blank">here</a>.</strong></strong></li><li>In Chrome, visit <code>chrome://extensions</code>&nbsp;</li><li>Enable Developer mode by ticking the checkbox in the upper-right corner.</li><li>Click on the &quot;Load unpacked extension...&quot; button.</li><li>Select the directory containing your <strong>unpacked</strong> extension.</li><li>Refresh loaded pages.</li></ol><h4><br></h4><p>You&#39;ll now see the extension icon to the right of the Omnibox. Click on it and login with your Cosmic credentials. You can now start saving content to your buckets.&nbsp;</p><h2 data-usually-unique-id="899224646998346390850342">Understanding the Source Code</h2><p>The defining file in a Chrome extension is the <a href="https://github.com/cosmicjs/content-grabber/blob/master/manifest.json" rel="noopener noreferrer" target="_blank">manifest.json</a> file. Most of the fields in the Manifest are self explanatory. Let&#39;s go through the major fields, and see what each file do.</p><ul><li><code>manifest_version</code> is &quot;2&quot;. it is very important not change it because it is a sign to chrome to how to compile the extension.<br><br></li><li><code>permissions</code> includes the permissions which extension needs<br>-<code>storage</code> permission allows you to store data at &quot;Chrome local storage&quot; which is important to save data across websites and different pages.<br>&nbsp;-<code>https://api.cosmicjs.com/v1</code> permission gives access to retrieve and send data from and to the API anywhere in the extension.<br><br></li><li><code>browser_action</code> contains &quot;default_icon&quot; and &quot;default_popup&quot; which related with top bar icon and HTML file<br><br></li><li><code>content_scripts</code>this is an important part &nbsp;which it contains scripts which injected into websites<br>- <code>matches: [*://*/*]</code> tells the browser tp inject the scripts to any protocol [http, https,...] and any domain.<br><br>- <code>css</code> field contains CSS style sheets to be injected<br><br>- <code>js</code> field contains JavaScript files to be injected<br><br>-<code>all_frames</code> is true which tells to inject script to all frames like &quot;iframe&quot; tag . it is important to make the extension work everywhere<br><br></li><li><code>background</code> include background scripts which manage send data to Cosmic and checks authorization</li></ul><p>The JavaScript files in the js folder is where the whole functionality is resided. <code>myscript.js</code> file contains all the functions of the extension. <code>contentscript.js</code> file uses jquery and <code>myscript.js</code> to manage the extension function is matched websites. <code>background.js</code> file periodically calls the authorization function and also sends data to the Cosmic bucket.</p><h2>Conclusion</h2><p>The advantage of &nbsp;API-first content management systems is that there is no limit as to where you can integrate your app into. &nbsp;Your Cosmic Bucket can thus power your web app, native app, browser extensions or basically anything than can consume an API. If you have any questions, please reach out to us on <a data-target-href="https://twitter.com/cosmic_js" href="https://twitter.com/cosmic_js" rel="noreferrer nofollow noopener" target="_blank">Twitter</a> or join our <a data-target-href="https://cosmicjs.com/community" href="https://cosmicjs.com/community" rel="noreferrer nofollow noopener" target="_blank">Slack</a> community.</p>

How to build a Chrome Extension to save web content to Cosmic

<p>In this video, I take you on a tour of <a href="https://cosmicjs.com/blog/introducing-the-cosmic-cli" rel="noopener noreferrer" target="_blank">the new Cosmic CLI</a> which allows you to do all of the awesome things you can with the Cosmic API, from the comfort of your command line interface.</p><p>Check out the <a href="https://www.npmjs.com/package/cosmic-cli" rel="noopener noreferrer" target="_blank">Cosmic CLI NPM module page</a> to learn all of the commands at your fingertips.</p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="//www.youtube.com/embed/20YLJFQCibM?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 500px;"></iframe></span></p>

Cosmic CLI Video Tour

<p><em>Media</em> files contain properties that describe the contents of the file. For example, an image could include metadata that describes the size of the image, the color depth, the image resolution, when the image was created, the photographer and any other data sets that you want to keep track of for identification and organization.&nbsp;</p><p>Metadata is extremely important for SEO as it speaks to search engines directly from each page crawled, to communicate important information or request a specific action from the search engine. Cosmic provides an easy modal to manage media metadata, located within the Object Settings of the media file you&#39;re looking to edit.&nbsp;</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6f7a99e0-23a2-11e8-a481-274b20328f30-A8Xhz5hed6.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>How to Add Metadata to Your Media in Cosmic</h3><p>Navigate to your Bucket Dashboard &gt; Media. &nbsp;Hover over the Media that you want to add metadata to and click &quot;Add Metadata&quot;.<br><img src="https://cosmicjs.com/uploads/6c37d590-8910-11e7-85fa-19e32a3becc0-media-metadata-table.png" class="fr-fic fr-dii"></p><p><br></p><p>Add your key / values to the Media and click &quot;Save Metadata&quot;.</p><p><img src="https://cosmicjs.com/uploads/74d3d050-8910-11e7-8fce-5f5cf6d6a606-media-metadata-modal.png" class="fr-fic fr-dii"></p><p><br></p><p>Your Media now has the metadata available via the media endpoint.<br><img src="https://cosmicjs.com/uploads/81593a40-8910-11e7-85fa-19e32a3becc0-media-metadata-api.png" class="fr-fic fr-dii"></p><p><br></p><p>I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them.&nbsp;</p><p><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;</p>

How to Add Metadata to Your Media in Cosmic

<p>For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we&#39;re going to build an e-commerce website using <a href="http://nuxtjs.org" rel="noopener noreferrer" target="_blank">Nuxt</a> and Cosmic. We&#39;ll also use <a href="http://buefy.github.io" rel="noopener noreferrer" target="_blank">Buefy</a>, which is a UI component library for Vue JS based on the much loved <a href="http://bulma.io" rel="noopener noreferrer" target="_blank">Bulma</a>.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/vue-ecommerce" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><br><a href="https://cosmicjs.com/apps/vue-ecommerce-app" rel="noopener noreferrer" target="_blank">Check out the demo.</a></p><h2 data-usually-unique-id="381622010639830291586137">Pre-requisites</h2><p>You need to have node and npm installed in your machine already. If not, visit <a data-target-href="https://nodejs.org/en/" href="https://nodejs.org/en/" rel="noreferrer nofollow noopener" target="_blank">node js website</a> and install the latest stable version.</p><h2 data-usually-unique-id="711486294920629409065847">Getting Started</h2><p>For our project, it makes sense to build our backend models first.</p><p><strong>Setup Cosmic backend</strong></p><p>Login to your Cosmic dashboard and select &lsquo;Add new Bucket&rsquo;. In the next screen, provide a name for your Bucket and select &lsquo;Start from scratch&rsquo;.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1a294bd0-13c1-11e8-80f1-f9514681b4e1-screenshot-cosmicjs.com-2018.02.17-14-30-08.png" class="fr-fic fr-dib"></p><p><strong>Import Bucket data</strong></p><p>Download the <a href="https://github.com/cosmicjs/vue-ecommerce/blob/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> file from the repository. Then go to Settings -&gt; Import/Export page from the dashboard and import the downloaded file. Now we&#39;ll have the objects and object types available in the dashboard.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/336dd7e0-13c2-11e8-8d55-d310f20ba934-screenshot-cosmicjs.com-2018.02.17-14-38-36.png" class="fr-fic fr-dib"></p><h2 data-usually-unique-id="920368855828110041387074"><br></h2><h2 data-usually-unique-id="920368855828110041387074">Setting up Stripe</h2><p data-usually-unique-id="920368855828110041387074">For any e-commerce website, we&#39;ll have to accept payment from the customer at one point or another. Setting up a payment processor used to be a difficult area, but luckily we now have a lot of convenient solutions.&nbsp;</p><p data-usually-unique-id="920368855828110041387074">For our website, we&#39;ll use Stripe. To start with, go to their <a href="http://stripe.com" rel="noopener noreferrer" target="_blank">website</a> and create an account. After you fill in details and everything&#39;s setup, go to the API section and grab your public and private keys.</p><p data-usually-unique-id="920368855828110041387074"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d71c6c60-1455-11e8-9786-21a6c4c0428d-screenshot-dashboard.stripe.com-2018.02.18-08-13-53.png" class="fr-fic fr-dib"></p><p data-usually-unique-id="920368855828110041387074">We&#39;ll need these keys to configure Stripe in our website, using the much convenient <a href="https://stripe.com/checkout" rel="noopener noreferrer" target="_blank">Stripe Checkout&nbsp;</a> element.&nbsp;</p><h2 data-usually-unique-id="920368855828110041387074">Installing the Demo</h2><p>Get the source code into your machine by either downloading or cloning the repo, which is located at <a href="https://github.com/cosmicjs/vue-ecommerce">https://github.com/cosmicjs/vue-ecommerce</a>. Then run,</p><pre>cd vue-ecommerce
npm install</pre><p>There is one more step left before running the app. Rename the <code>.env.sample</code> file to <code>.env</code> and file in the enviroment variables there.&nbsp;</p><div class="fr-embedly                          " data-original-embed="<a href='https://gist.github.com/althaffe/a99ee76b6b4231a5789de270f4d12d72' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/a99ee76b6b4231a5789de270f4d12d72" class="embedly-card"></a></div><p>Since the HOST variable for production needs to be 0.0.0.0, and NODE_ENV needs to be &#39;production&#39;, &nbsp;we&#39;ll set them both in <code>package.json</code> file, and is not needed in the <code>.env</code> file.</p><p>Now run <code>npm run dev</code> to run the app in development mode. If you want to build for production, run <code>npm run build</code> and start the app with <code>npm start</code></p><h2 data-usually-unique-id="899224646998346390850342">Understanding the Source Code</h2><p>One major perk of using Nuxt for building Vue.js applications is that Nuxt is opinionated. So one can jump into any Nuxt project and find a familiar structure there.</p><p>The most important file is the <code>nuxt.config.js</code>. You&#39;ll find three plugins imported from the <code>plugins/</code> folder for Buefy, Stripe and Cosmic.&nbsp;</p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/althaffe/f9acd57f4cdc8e4a4d48f5eb910c188b' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/f9acd57f4cdc8e4a4d48f5eb910c188b" class="embedly-card"></a></div><p>We&#39;re using the <a href="https://www.npmjs.com/package/vue-stripe-checkout" rel="noopener noreferrer" target="_blank">vue-stripe-checkout</a> as a wrapper for the Stripe&#39;s checkout element. Visit <a href="https://stripe.com/docs/checkout#integration-simple-options" rel="noopener noreferrer" target="_blank">Stripe documentation</a> to learn about the available options.</p><p>Any environment variable that need to be used in the client side needs to be defined in the env section and we&#39;ll also have stripe script linked in the scripts section.&nbsp;</p><p>The <code>pages/</code> folder contains the home and cart pages. The checkout method int the cart page handles the stripe checkout. &nbsp;Basically what we&#39;re doing is sending the token generated by the checkout component and other identifying details to the app server. Checkout the <a href="https://www.npmjs.com/package/vue-stripe-checkout" rel="noopener noreferrer" target="_blank">vue-stripe-checkout</a> package to learn more about the usage.&nbsp;</p><p>For a simple Nuxt app, we can just use server only for SSR and have all the code shipped to client side. But in this case, we need to handle the stripe checkout separately in the server. Inside the <code>server/</code> folder, we have the Express server setup in <code>index.js</code> file and a single route handler in <code>api/index.js</code> file. We&#39;ll first create a customer in Stripe with <code>stripe.customers.create</code> function and then charge with <code>stripe.charges.create</code> function. Check out <a href="https://stripe.com/docs/checkout/express">https://stripe.com/docs/checkout/express</a> to learn more about the implementation.</p><p>Once the payment is successful, we&#39;ll add the order to our Cosmic Bucket under the &#39;Orders&#39; object type.</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/althaffe/c24bf020e02c9d6c7979e41bb8a7699d' class='embedly-card'></a>"><a href="https://gist.github.com/althaffe/c24bf020e02c9d6c7979e41bb8a7699d" class="embedly-card"></a></div><h2 data-usually-unique-id="899224646998346390850342">Deploying the App &nbsp;</h2><p>Deploying the app with Cosmic is pretty easy. Just go to your Bucket and then navigate to Settings -&gt; Deploy to Web.</p><p>Provide your Github repository url and the branch to be deployed. Cosmic makes the Bucket slug, read key and write key environment variables available by default.&nbsp;</p><p>Choose the repository there and branch to deploy (which in most cases is master), and click &#39;Deploy to Web&#39;. That is all there is to it and you will get a confirmation mail once deployment is successfull. Once it succeeds, do not forget to supply the stripe keys and environment variables through the &#39;Set Environment Variables&#39; section in case you haven&#39;t setup <code>.env</code> file.</p><p>PS: Any e-commerce app needs to be secured with https. So do enable SSL in your app from deployment section when going live.</p>

How to build an e-commerce website with Nuxt and Cosmic

<p>In this tutorial, I&#39;m going to show you how to create a <strong>Todo list app with pomodort timer included</strong> using <a href="https://reactjs.org/">React</a> and <a href="https://cosmicjs.com/">Cosmic</a>. We will be using Cosmic npm package
for implementing the basic CRUD for our objects and to retrieve data and media from Cosmic. Let&#39;s get started.</p><h2><strong>TL;DR</strong></h2><p><a href="https://cosmicjs.com/apps/react-pomodoro-todo-app" rel="noopener noreferrer" target="_blank">View the Demo</a><br><a href="https://github.com/cosmicjs/react-todo-pomodoro" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a></p><h1><span style="font-size: 24px;"><strong>Prerequisites</strong></span></h1><p>You will be requiring to install Node JS and npm before starting. Make sure you already have them.</p><h1><span style="font-size: 24px;"><strong>Getting Started</strong></span></h1><h1><span style="font-size: 24px;">Doing everything using the existing git repo</span></h1><p>First of all, you have to be sure you have node &gt; 6.x and yarn installed, than run the following commands:</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/haykadamyan/4b7c1038eed1de093353547dfc12a5c3' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/4b7c1038eed1de093353547dfc12a5c3" class="embedly-card"></a></div><p>After successfull completion of the last command browser window will automatically open <code>package.json</code> will look like this.</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/b9eb8baab0bed3b7c63fbc0678c9ded8' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/b9eb8baab0bed3b7c63fbc0678c9ded8" class="embedly-card"></a></div><p>Now the app has to be running on <code><a href="http://localhost:3000">http://localhost:300</a></code></p><p><span style="font-size: 24px;">Let&#39;s setup&nbsp;</span><code><span style="font-size: 24px;">webpack.config.js</span></code></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/953a96363125bf7d054d48965642acc6' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/953a96363125bf7d054d48965642acc6" class="embedly-card"></a></div><p>Code written here is responsible for compiling React JS.</p><p><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/components/app/app.js</span></code></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/a653b019bdb1cc35cc1eb6ca4277c45b' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/a653b019bdb1cc35cc1eb6ca4277c45b" class="embedly-card"></a></div><p>In this file we are creating the home page file. So in state we are keeping the following data.</p><ol><li>Form-&gt; title : Responsible for new task input value</li><li>List: Array of strings, here are saved all the tasks</li><li>showNewTaskInput: Boolean value, responsible for show/hide the new task input</li><li>notification: Current notification name, we also have types for notifications listed below as an object, here are sorted the names for the notification types.</li></ol><p>We use the following methods in our <code>Class</code>:</p><ol><li>Constructor: We are setupping new <code>Api service</code>, this gonna be used to connect to the Cosmic API.</li><li>ComponentWillMount: This is function which belongs to React component lifecycle, here we just call another method created by us.</li><li>getData: Function which does a call to the API and updates the list of tasks, after what we reset the value of new task input using <code>this.resetForm()</code></li><li>createNotification: Function which gets a notification type as an argument and puts it in the state for further use</li><li>onChange: Function is responsible to keep the new task title in the state.</li><li>onSave: Function creates a new task using the Cosmic api.</li><li>onStart: Function is responsible for starting the timer for specific task, it calls the Api to save the start time in the Cosmic&#39;s db.</li><li>onDone: Function is responsible for setting the status of specific task to &quot;Done&quot;.</li><li>onUpdate: Function is responsible to update specific task&#39;s title.</li><li>showNewTaskInput: Function shows new task input.</li><li>resetForm: Function is responsible for cleaning the value of the new task input.</li><li>render: In render we put our html, and call our functions mentioned above.</li></ol><h1><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/task-list/list-item/index.js</span></code></h1><p><br></p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/haykadamyan/e5ff1fe0e638d6ff87d61f8bee9d1383' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/e5ff1fe0e638d6ff87d61f8bee9d1383" class="embedly-card"></a></div><h1><span style="font-size: 24px;">In</span><span style="font-size: 24px;"><code>list-item</code> we are creating each task item</span></h1><p><br></p><p>In state we are keeping 2 items:</p><ol><li>editing: If the title is currently in process of change</li><li>title: Current title of the task</li></ol><p>Below we 3 functions coming after. They will call the functions passed to component by <code>props</code>.</p><p>Next 2 functions have some logic in them. Here they are:</p><ol><li>onEdit: Function which is responsive for updating the state <code>editing</code> item.</li><li>onChange: Function which changes the <code>title</code> item in the state.</li></ol><p>Then we have 2 React component lifecycle methods:</p><ol><li>componentWillReceiveProps: In this function we are checking if component has recieved new props we are updating our local state.</li><li>render: All the HTML code goes here. Where we call our functions mentioned above.</li></ol><h1><span style="font-size: 24px;">Setting up&nbsp;</span><code><span style="font-size: 24px;">./src/components/countdown/index.js</span></code></h1><p><br></p><div class="fr-embedly       " data-original-embed="<a href='https://gist.github.com/haykadamyan/216fb8b2ab27e33af1ced2065da947ad' class='embedly-card'></a>"><a href="https://gist.github.com/haykadamyan/216fb8b2ab27e33af1ced2065da947ad" class="embedly-card"></a></div><p>In this file we are using <a href="https://momentjs.com/">Moment JS</a> for doing basic calculation for the time countdown.</p><p>We are all set up, you can run the application, and enjoy it.</p>

How to Build a React Todo App with a Pomodoro Timer using Cosmic

<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>

How to create a management system with Cosmic and Angular

<p>One of the many benefits of using a Content Management API like Cosmic over an installed content management system is the portability and scalability of the applications and content models you can create. Importing and exporting your Cosmic Buckets is easy, and allows for quick backups, prototyping and more. In this blog I briefly outline the importing and exporting process within Cosmic.&nbsp;</p><h4><br></h4><h4>Export a JSON Bucket</h4><p>Navigate to Bucket &gt; Settings &gt; Import / Export. To download your data and files into a <code>bucket.json</code> file click &quot;Export&quot;.</p><h4><br></h4><h4>Import a JSON Bucket</h4><p>Navigate to Bucket &gt; Settings &gt; Import / Export. To import a Bucket&#39;s data and files, upload the <code>bucket.json</code> file. This is the same file that is downloaded when you export a Bucket&#39;s data and files.&nbsp;</p><p><strong>Warning</strong>: Importing a new Bucket removes all current data and files in your Bucket. This does not, however, affect users or settings.</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1201f860-10ee-11e8-aa96-fb437a17099c-raHAdj9A8V.gif" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><p>I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them.&nbsp;</p><p><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;</p>

How to Import and Export Your Cosmic Bucket

How to build a Tour Diary app using Next.js and Cosmic

<p>Check out the <a href="https://gist.github.com/tonyspiro/0954ee17ab2632fc0a6f66d7461784b9" rel="noopener noreferrer" target="_blank">Gist</a> below for a run-down of Bucket lifecycle methods using the <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM module</a>. &nbsp;To get your authentication token, <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">sign up</a> and go to Your Account Settings &gt; Authentication.</p><p>The following Gist follows the life of one John Bucket. &nbsp;It does the following:</p><p>1. Creates a Bucket<br>2. Adds Object Types (People)<br>3. Adds Objects (in John&#39;s life with relationships)<br>4. Deletes the Bucket (commented out so you can see the result in your Cosmic Dashboard!)</p><div class="fr-embedly         " data-original-embed="<a href='https://gist.github.com/tonyspiro/0954ee17ab2632fc0a6f66d7461784b9' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/0954ee17ab2632fc0a6f66d7461784b9" class="embedly-card"></a></div><p><br></p><p>As you can see, the <a href="https://www.npmjs.com/package/cosmicjs">Cosmic NPM module</a> gives you a lot of power to manage your Cosmic Bucket contents. &nbsp; Let me know if you have any questions about Bucket lifecycle methods. &nbsp;Join the <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic community on Slack</a> and <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">follow us on Twitter</a>.</p>

Start building today