https://github.com/buttercms/buttercms-ionic
Ionic starter project integrated with ButterCMS
https://github.com/buttercms/buttercms-ionic
Last synced: 12 months ago
JSON representation
Ionic starter project integrated with ButterCMS
- Host: GitHub
- URL: https://github.com/buttercms/buttercms-ionic
- Owner: ButterCMS
- License: mit
- Created: 2020-04-01T14:18:11.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T02:39:01.000Z (over 3 years ago)
- Last Synced: 2025-02-22T17:41:14.117Z (over 1 year ago)
- Language: TypeScript
- Size: 2.23 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# buttercms-ionic
Ionic starter project integrated with ButterCMS
## Install
Add [ButterCMS NPM module](https://www.npmjs.com/package/buttercms) as a dependency to your existing Ionic project.
If you plan to use this project directly, simply execute below commands to get going:
```bash
npm i
ionic serve
```
These commands will install the required dependencies for the project and start the project on your browser. You can also run the project directly in your mobile device connected to your system.
For android, install the Java SDK, supporting Android SDKs and Emulator. Run the below command
``` bash
ionic cordova run android --device
```
## Quickstart
To integrate ButterCMS in your ongoing project, create a service file.
`services/buttercms.service.ts`
```typescript
import Butter from 'buttercms';
export const butterService = Butter('');
```
Import ButterCMS client in your TS file:
```javascript
import {butterCMS} from './services/buttercms.service'
```
You can then test ButterCMS client by, for example, fetching all of your posts:
```typescript
butterService.post.list({
page: 1,
page_size: 10
})
.then((res) => {
console.log('Content from ButterCMS');
console.log(res);
this.posts = res.data.data;
});
```
This will fetch you upto 10 blog posts that you would have stored in your ButterCMS account
## Pages
### Get single page
With your homepage defined, the ButterCMS Pages API will return it in JSON format like this:
```json
{
"data":{
"slug": "home",
"page_type": null,
"fields": {
"seo_title": "Marvellous Ionic page powered by ButterCMS",
"headline": "Marvellous Ionic page powered by ButterCMS",
"hero_image": "https://cdn.buttercms.com/WjJXN3B6ThWJpucfZM9P",
"call_to_action": "Know more",
"customer_logo": "https://cdn.buttercms.com/PTEqdDBReOq0X08W43sA"
}
}
}
```
To integrate this into your app, simply make a call to ButterCMS APIs using the ButterCMS service. Place this call in the `ngOnInit` hook:
`home/home.page.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
page: any;
constructor() { }
ngOnInit() {
butterService.page.retrieve('*', 'home-page')
.then((res) => {
console.log(res.data.data);
this.page = res.data.data;
}).catch((res) => {
console.log(res);
});
}
}
```
To render the data, create the ionic page as below:
`home/home.page.html`
```html
Home
{{page.fields.subtitle}}
{{page.fields.title}}
View Posts View Customers
```
##Get all page content of specific type. For instance, customers for the case study
`customers/customers.page.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
selector: 'app-customers',
templateUrl: './customers.page.html',
styleUrls: ['./customers.page.scss'],
})
export class CustomersPage implements OnInit {
customers: any;
constructor() { }
ngOnInit() {
butterService.page.list('customer_case_study')
.then((res) => {
console.log(res.data.data);
this.customers = res.data.data;
}).catch((res) => {
console.log(res);
});
}
}
```
The Ionic page to render the customer list can be written as below:
`customers/customers.page.html`
```html
Customer Testimonials
Back
```
##Viewing specific page of a specific type
Below code create a customer component that displays the details of the customer.
`customers/customer/customer.component.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../../services/buttercms.service';
import {ActivatedRoute} from '@angular/router';
import {map, take} from 'rxjs/operators';
import {Observable} from 'rxjs';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.scss'],
})
export class CustomerComponent implements OnInit {
customer: any;
slug$: Observable;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.slug$ = this.route.paramMap
.pipe(
map(params => (params.get('id')))
);
this.slug$.pipe(
take(1))
.subscribe(slug => {
butterService.page.retrieve('customer_case_study', slug)
.then((res) => {
console.log(res.data.data);
this.customer = res.data.data;
}).catch((res) => {
console.log(res);
});
}
);
}
}
```
To render the customer details, create Ionic page as shown below
`customers/customer/customer.component.html`
```typescript
{{customer.fields.seo_title}}
{{customer.fields.seo_title}}
Back
```
## Blog Engine
### Display posts
To display posts we create a simple /blog route in our app and fetch blog posts from the Butter API. See our [API reference](https://buttercms.com/docs/api/) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.
To retrieve the blog posts using ButterCMS client, you can use the function `butter.post.list({})`
`posts/posts.page.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
selector: 'app-posts',
templateUrl: './posts.page.html',
styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {
constructor() { }
posts: any;
ngOnInit() {
butterService.post.list({
page: 1,
page_size: 10
})
.then((res) => {
console.log('Content from ButterCMS');
console.log(res);
this.posts = res.data.data;
});
}
}
```
To display the posts in a card layout, create the ionic page as shown below:
`posts/posts.page.html`
```html
Posts
{{post.title}}
Published on: {{post.created|date:'MM/dd/yyyy'}}
{{post.summary}}
Read more
Back
```
To display a complete post, you can use the `butter.post.retrieve()` method. See a full list of available post properties in our [API reference](https://buttercms.com/docs/api/).
`posts/post/post.component.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {map, take} from 'rxjs/operators';
import {Observable} from 'rxjs';
import {butterService} from '../../../services/buttercms.service';
@Component({
selector: 'app-post',
templateUrl: './post.component.html',
styleUrls: ['./post.component.scss'],
})
export class PostComponent implements OnInit {
constructor(protected route: ActivatedRoute) {
}
protected slug$: Observable;
public post = {
meta: null,
data: null
};
ngOnInit() {
this.slug$ = this.route.paramMap
.pipe(
map(params => (params.get('slug')))
);
this.slug$.pipe(
take(1))
.subscribe(slug => {
butterService.post.retrieve(slug)
.then((res) => {
console.log(res.data);
this.post = res.data.data;
}).catch((res) => {
console.log(res);
});
});
}
}
```
To render the single post, create the Ionic page as shown below:
`posts/post/post.component.html`
```html
{{post.title}}
{{post.title}}
Published on: {{post.created|date:'MM/dd/yyyy'}}
Back
```
### Categories, Tags, and Authors
Use Butter's APIs for categories, tags, and authors to feature and filter content on your blog:
### Categories
`categories/categories.page.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.page.html',
styleUrls: ['./categories.page.scss'],
})
export class CategoriesPage implements OnInit {
categories:any=[];
constructor() { }
ngOnInit() {
butterService.category.list()
.then((res) => {
console.log(res.data.data)
this.categories = res.data.data;
})
}
}
```
###Get posts by category
`categories/category/category.component.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import {butterService} from '../../../services/buttercms.service';
import {ActivatedRoute} from '@angular/router';
import {map, take} from 'rxjs/operators';
import {Observable} from 'rxjs';
@Component({
selector: 'app-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.scss'],
})
export class CategoryComponent implements OnInit {
posts:any=[];
constructor(private route: ActivatedRoute) { }
slug$: Observable;
ngOnInit() {
this.slug$ = this.route.paramMap
.pipe(
map(params => (params.get('slug')))
);
this.slug$.pipe(
take(1))
.subscribe(slug => {
butterService.category.retrieve(slug, {
include: 'recent_posts'
}).then((res) => {
console.log(res.data.data);
this.posts = res.data.data;
}).catch((res) => {
console.log(res);
});
}
);
}
}
```