Ionic Tutorial and Sample Application

October 28, 2014 in AngularJS, Cordova, Ionic, PhoneGap

IMG_0371

IMG_0370

I had a great time presenting the PhoneGap Day workshops with Michael and Holly last week in San Francisco. In the afternoon, I ran an AngularJS/Ionic workshop based on this tutorial. At the end of the workshop, I showed a more complete version of the application with additional UI polish and better code organization. A number of people asked me to share that version, so here it is…

Source Code

The complete version of the application is now available in this repository on GitHub.

Hosted Version

I also deployed a version of the application on Heroku. You can run the application here.

Tutorial

You can build the application from scratch using this tutorial

IMG_0372

IMG_0373

  • Thanks for the info

  • Pingback: The Salesforce Mobile SDK 3.1 - CodeFriar.com()

  • Hi

    Nice tutorial and staring point, i would like to ask how can i provide an external url to retrieve JSON using the session.js file under server/routes directory , instead of a hand coded json . best regards.

  • I was looking for such information for a long time on web and finally came across this website and its really great post on this topic.

  • Thanks! This one is a nice and handy fix

  • kalite,fiyat uygunlugu ve imalattan.rofesyonek ekip eşliğinden güvenilir işler yapılmaktadır

  • Thanks for the tutorial

  • This one is a nice and handy fix

  • nice tutorial

  • admincim very nice to blog coks

  • manojkumar

    public class AndroidLogin extends Activity implements OnClickListener {

    Button ok,back,exit;
    TextView result;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
    StrictMode.setThreadPolicy(policy);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    // Login button clicked
    ok = (Button)findViewById(R.id.btn_login);
    ok.setOnClickListener(this);

    result = (TextView)findViewById(R.id.lbl_result);

    }

    public void postLoginData() {
    // Create a new HttpClient and Post Header
    HttpClient httpclient = new DefaultHttpClient();

    /* login.php returns true if username and password is equal to saranga */
    HttpPost httppost = new HttpPost(“http://www.sencide.com/blog/login.php”);

    try {
    // Add user name and password
    EditText uname = (EditText)findViewById(R.id.txt_username);
    String username = uname.getText().toString();

    EditText pword = (EditText)findViewById(R.id.txt_password);
    String password = pword.getText().toString();

    List nameValuePairs = new ArrayList(2);
    nameValuePairs.add(new BasicNameValuePair(“username”, username));
    nameValuePairs.add(new BasicNameValuePair(“password”, password));
    httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs));

    // Execute HTTP Post Request
    Log.w(“SENCIDE”, “Execute HTTP Post Request”);
    HttpResponse response = httpclient.execute(httppost);

    String str = inputStreamToString(response.getEntity().getContent()).toString();
    Log.w(“SENCIDE”, str);

    if(str.toString().equalsIgnoreCase(“true”))
    {
    Log.w(“SENCIDE”, “TRUE”);
    result.setText(“Login successful”);
    { Intent ntent = new Intent(MainActivity.this, Two.class);
    startActivity(ntent);
    }
    }else
    {
    Log.w(“SENCIDE”, “FALSE”);
    result.setText(str);
    }

    } catch (ClientProtocolException e) {
    e.printStackTrace();
    } catch (IOException e) {
    e.printStackTrace();
    }
    }

    private StringBuilder inputStreamToString(InputStream is) {
    String line = “”;
    StringBuilder total = new StringBuilder();
    // Wrap a BufferedReader around the InputStream
    BufferedReader rd = new BufferedReader(new InputStreamReader(is));
    // Read response until the end
    try {
    while ((line = rd.readLine()) != null) {
    total.append(line);
    }
    } catch (IOException e) {
    e.printStackTrace();
    }
    // Return full string
    return total;
    }

    @Override
    public void onClick(View view) {
    if(view == ok){
    postLoginData();
    }
    }

    }

  • manojkumar

    what probleam in intent not pass

  • How can I Write code in Ionic Login Page

  • Apurva

    Thanks for this tutorials. I was wondering how can I use a REST api to get the data from the server to this app without using the json files on local server ?

  • Hoa

    I want to use external JSON file url for data, how can i do it ?

  • Cubana Havana

    i was wondering how i can use firebase together with the ionic framework

  • Minacs Developer

    please check this repository for ionic seed: https://github.com/iamntg/ionic_1x_seed

  • Hey Cristophe, thank you so much for all the work you are doing. I have to say that a couple of years back it was several of your tutorials and code on github that helped me getting started with Cordova and PhoneGap. Since then I’ve switched to Ionic and have even started creating my own tutorials.

    I’m very proud to share my Ionic tutorial on how to create an Ionic app from scratch:

    Ionic App Tutorial: Create a Mobile App for Purchasing Public Transport Tickets via SMS
    http://www.coding-dude.com/wp/mobile-apps/ionic-app-tutorial-create-a-mobile-app-for-purchasing-public-transport-tickets-via-sms/

    looking forwards for feedback

  • khalid

    Please is there any way to solve the problem of ionic 2.2.2 with salesforce Mobile SDK 5.0..
    Whenever i add he cordova plugin using: cordova plugin add http://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin
    I receive this error:
    no resource found matches the given name ( at ‘icon’ with value ‘@drawable/sf_icon’).

    Please is there any way to solve that.

css.php